AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-10-15 01:54:43 +00:00
Code Issues Packages Projects Releases Wiki Activity

Standardise page wrapper width and top padding and refresh catalog and theme styling

Browse Source
This commit is contained in:
Aaron Po
2026-10-04 04:49:50 -04:00
parent 9581435578
commit 2b8a03148f
41 changed files with 235 additions and 128 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
web/frontend/app/features/breweries/components/detail/BeerListCard.tsx
View File

@@ -23,12 +23,12 @@ const BeerListCard = ({ beers }: BeerListCardProps) => (
>
<div className="flex flex-col gap-0.5 min-w-0">
<span className="font-bold text-sm">{beer.name}</span>
<span className="text-xs text-base-content/60">{beer.description}</span>
<span className="text-xs text-base-content/70">{beer.description}</span>
</div>
<span className="badge badge-ghost bg-base-300 text-xs font-semibold whitespace-nowrap">
{beer.style}
</span>
<span className="text-xs text-base-content/60 tabular-nums whitespace-nowrap">
<span className="text-xs text-base-content/70 tabular-nums whitespace-nowrap">
{beer.abv.toFixed(1)}% ABV
</span>
<StarRating value={beer.rating} size="xs" />

2
web/frontend/app/features/breweries/components/detail/BeerStyleBreakdownCard.tsx
View File

@@ -17,7 +17,7 @@ const BeerStyleBreakdownCard = ({ beers }: BeerStyleBreakdownCardProps) => {
<div key={style} className="flex flex-col gap-1">
<div className="flex items-baseline justify-between gap-2">
<span className="text-sm font-semibold">{style}</span>
<span className="text-xs text-base-content/60 tabular-nums">{count}</span>
<span className="text-xs text-base-content/70 tabular-nums">{count}</span>
</div>
<progress
className="progress progress-primary h-1.5"

2
web/frontend/app/features/breweries/components/detail/BreweryDetailsCard.tsx
View File

@@ -8,7 +8,7 @@ interface BreweryDetailsCardProps {
const DetailRow = ({ label, value }: { label: string; value: string | number }) => (
<div className="flex items-center justify-between gap-2 text-sm">
<span className="text-base-content/60">{label}</span>
<span className="text-base-content/70">{label}</span>
<span className="font-semibold">{value}</span>
</div>
);

8
web/frontend/app/features/breweries/components/detail/BreweryHeaderCard.tsx
View File

@@ -26,16 +26,16 @@ const BreweryHeaderCard = ({
<div className="card-body gap-4 p-7">
<div className="flex flex-col gap-1">
<div className="flex items-center gap-2 flex-wrap">
<span className="text-xs font-bold uppercase tracking-widest text-base-content/50">
<span className="text-xs font-bold uppercase tracking-widest text-base-content/70">
Brewery
</span>
<span className="badge bg-[var(--color-highlight)] text-[var(--color-highlight-content)]">
Est. {foundedYear}
</span>
</div>
<h1 className="text-4xl leading-tight m-0">{brewery.breweryName}</h1>
<h1 className="font-serif text-5xl font-bold leading-tight m-0">{brewery.breweryName}</h1>
{brewery.location && (
<p className="text-sm text-base-content/60 flex items-center gap-1 m-0">
<p className="text-sm text-base-content/70 flex items-center gap-1 m-0">
<MapPin className="size-4" aria-hidden="true" />
{formatBreweryAddress(brewery.location)}
</p>
@@ -57,7 +57,7 @@ const BreweryHeaderCard = ({
<div className="flex items-baseline gap-1.5">
<StarRating value={avgRating} size="sm" />
<span className="font-bold">{avgRating.toFixed(1)}</span>
<span className="text-sm text-base-content/60">({ratingsCount} ratings)</span>
<span className="text-sm text-base-content/70">({ratingsCount} ratings)</span>
</div>
</div>
<p className="text-base-content/70 leading-relaxed text-pretty m-0">

2
web/frontend/app/features/breweries/components/detail/CommunityStatsCard.tsx
View File

@@ -8,7 +8,7 @@ interface CommunityStatsCardProps {
const StatRow = ({ label, value }: { label: string; value: number }) => (
<div className="flex items-center justify-between gap-2 text-sm">
<span className="text-base-content/60">{label}</span>
<span className="text-base-content/70">{label}</span>
<span className="font-semibold tabular-nums">{value}</span>
</div>
);

2
web/frontend/app/features/breweries/components/detail/YourRatingCard.tsx
View File

@@ -10,7 +10,7 @@ const YourRatingCard = ({ value, onChange }: YourRatingCardProps) => (
<div className="card-body flex-row flex-wrap items-center justify-between gap-4 p-6">
<div className="flex flex-col gap-0.5">
<h3 className="text-xl m-0">Your rating</h3>
<p className="text-sm text-base-content/60 m-0">
<p className="text-sm text-base-content/70 m-0">
{value
? `You rated this ${value} of 5. Tap the same star to clear.`
: 'Tap a star to rate this brewery.'}

4
web/frontend/app/features/breweries/components/detail/comments/CommentItem.tsx
View File

@@ -31,14 +31,14 @@ const CommentItem = ({ comment, onToggleLike }: CommentItemProps) => {
<span className="font-bold text-sm">{comment.user}</span>
)}
<StarRating value={comment.rating} size="xs" />
<span className="text-xs text-base-content/60">{comment.time}</span>
<span className="text-xs text-base-content/70">{comment.time}</span>
</div>
<p className="text-sm leading-relaxed m-0">{comment.text}</p>
<button
type="button"
onClick={() => onToggleLike(comment.id)}
className={`self-start inline-flex items-center gap-1 text-xs font-semibold ${
comment.liked ? 'text-primary' : 'text-base-content/60'
comment.liked ? 'text-primary' : 'text-base-content/70'
}`}
>
{comment.liked ? (

2
web/frontend/app/features/breweries/components/directory/BreweryCard.tsx
View File

@@ -24,7 +24,7 @@ const BreweryCard = ({ brewery }: BreweryCardProps) => (
</p>
)}
{brewery.location && (
<p className="text-sm text-base-content/50 mt-2">
<p className="text-sm text-base-content/70 mt-2">
{formatBreweryAddress(brewery.location)}
</p>
)}

4
web/frontend/app/features/breweries/components/overview/FeaturedBreweryCard.tsx
View File

@@ -19,14 +19,14 @@ const FeaturedBreweryCard = ({ brewery, onShowOnMap }: FeaturedBreweryCardProps)
<div className="card-body gap-3.5 p-8 md:grid md:grid-cols-[1.35fr_1fr] md:gap-10 md:items-start">
<div className="flex flex-col gap-3.5">
{brewery.location && (
<div className="text-sm font-semibold text-base-content/60">
<div className="text-sm font-semibold text-base-content/70">
{brewery.location.cityName}, {brewery.location.stateProvinceCode}
</div>
)}
<h3 className="font-serif text-4xl leading-tight m-0">{brewery.breweryName}</h3>
<p className="text-lg leading-snug text-pretty m-0">{brewery.description}</p>
{brewery.location && (
<p className="text-sm text-base-content/60 m-0">
<p className="text-sm text-base-content/70 m-0">
{formatBreweryAddress(brewery.location)}
</p>
)}

2
web/frontend/app/features/breweries/components/overview/RecentBreweries.tsx
View File

@@ -17,7 +17,7 @@ const RecentBreweries = ({ breweries }: RecentBreweriesProps) => {
<div className="card-body gap-1.5">
<h3 className="card-title font-serif text-xl">{brewery.breweryName}</h3>
{brewery.location && (
<div className="text-sm text-base-content/60">
<div className="text-sm text-base-content/70">
{brewery.location.cityName},{' '}
{brewery.location.stateProvinceCode}
</div>

2
web/frontend/app/features/breweries/components/overview/nearby/header/NearbyBreweriesHeader.tsx
View File

@@ -20,7 +20,7 @@ const NearbyBreweriesHeader = ({
return (
<div className="flex items-baseline justify-between gap-4 flex-wrap mb-3.5">
<h2 className="font-serif text-2xl m-0">Breweries near you</h2>
<span className="text-sm text-base-content/60">
<span className="text-sm text-base-content/70">
{center
? `${withDistance.length} within ${formatDistance(radiusKm * 1000, unit)} of ${centerLabel}`
: 'Finding breweries near you…'}

2
web/frontend/app/features/breweries/components/overview/nearby/list/NearbyBreweryList.tsx
View File

@@ -23,7 +23,7 @@ const NearbyBreweryList = ({
return (
<>
{withDistance.length === 0 && center && (
<p className="text-sm text-base-content/60">
<p className="text-sm text-base-content/70">
No partner breweries within {formatDistance(radiusKm * 1000, unit)}.
</p>
)}

2
web/frontend/app/features/breweries/components/overview/nearby/list/NearbyBreweryListItem.tsx
View File

@@ -37,7 +37,7 @@ const NearbyBreweryListItem = ({
</span>
</div>
{brewery.location && (
<div className="text-sm text-base-content/60">
<div className="text-sm text-base-content/70">
{brewery.location.cityName}, {brewery.location.stateProvinceCode}
</div>
)}

2
web/frontend/app/features/breweries/components/shared/SidebarCard.tsx
View File

@@ -8,7 +8,7 @@ interface SidebarCardProps {
const SidebarCard = ({ title, children }: SidebarCardProps) => (
<div className="card bg-base-100 shadow">
<div className="card-body gap-3 p-6">
<p className="text-xs font-bold uppercase tracking-widest text-base-content/50 m-0">
<p className="text-xs font-bold uppercase tracking-widest text-base-content/70 m-0">
{title}
</p>
{children}