AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 20:13:49 +00:00
Code Issues Packages Projects 1 Releases Wiki Activity

style: Update dark theming and fonts

Browse Source
This commit is contained in:
Aaron William Po
2023-10-23 23:16:31 -04:00
parent 6bd2d4713e
commit aef588c993
4 changed files with 43 additions and 39 deletions
Download Patch File Download Diff File Expand all files Collapse all files

63
src/components/BeerStyleById/BeerStyleHeader.tsx
View File

@@ -62,41 +62,46 @@ const BeerStyleHeader: FC<BeerInfoHeaderProps> = ({ beerStyle }) => {
</div>
)}
</header>
<div className="space-y-2">
<div>
<p>{beerStyle.description}</p>
<div className="flex w-25 space-x-3 flex-row">
<div className="text-sm font-bold">
ABV Range:{' '}
<span>
{beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[0].toFixed(1)}%
</span>
</div>
<div className="text-sm font-bold">
IBU Range:{' '}
<span>
{beerStyle.ibuRange[0].toFixed(1)} - {beerStyle.ibuRange[1].toFixed(1)}
</span>
</div>
</div>
</div>
<div className="font-semibold">
Recommended Glassware:{' '}
<span className="text-sm font-bold italic">{beerStyle.glassware.name}</span>
</div>
<div className="flex justify-between">
<div>
{(!!likeCount || likeCount === 0) && (
<div className="flex justify-between">
<div className="space-y-2">
<div className="flex w-25 space-x-3 flex-row">
<div className="text-sm font-bold">
ABV Range:{' '}
<span>
Liked by {likeCount}
{likeCount !== 1 ? ' users' : ' user'}
{beerStyle.abvRange[0].toFixed(1)}% - {beerStyle.abvRange[0].toFixed(1)}
%
</span>
)}
</div>
<div className="text-sm font-bold">
IBU Range:{' '}
<span>
{beerStyle.ibuRange[0].toFixed(1)} - {beerStyle.ibuRange[1].toFixed(1)}
</span>
</div>
</div>
<div className="card-actions items-end">
{user && (
<BeerStyleLikeButton beerStyleId={beerStyle.id} mutateCount={mutate} />
)}
<div className="font-semibold">
Recommended Glassware:{' '}
<span className="text-sm font-bold italic">{beerStyle.glassware.name}</span>
</div>
<div className="flex justify-between">
<div>
{(!!likeCount || likeCount === 0) && (
<span>
Liked by {likeCount}
{likeCount !== 1 ? ' users' : ' user'}
</span>
)}
</div>
</div>
</div>
<div className="card-actions items-end">
{user && (
<BeerStyleLikeButton beerStyleId={beerStyle.id} mutateCount={mutate} />
)}
</div>
</div>
</div>