AaronPo/the-biergarten-app
1
0
Fork 0
mirror of https://github.com/aaronpo97/the-biergarten-app.git synced 2026-02-16 10:42:08 +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

4
src/components/BeerById/BeerRecommendations.tsx
View File

@@ -57,7 +57,7 @@ const BeerRecommendationsSection: FC<{
> >
<div className="flex flex-col"> <div className="flex flex-col">
<Link className="link-hover link" href={`/beers/${post.id}`}> <Link className="link-hover link" href={`/beers/${post.id}`}>
<span className="text-xl font-semibold">{post.name}</span> <span className="text-xl font-bold">{post.name}</span>
</Link> </Link>
<Link <Link
@@ -74,7 +74,7 @@ const BeerRecommendationsSection: FC<{
className="link link-hover" className="link link-hover"
href={`/beers/styles/${post.style.id}`} href={`/beers/styles/${post.style.id}`}
> >
<span className="text-lg font-medium">{post.style.name}</span> <span className="font-medium">{post.style.name}</span>
</Link> </Link>
</div> </div>
<div className="space-x-2"> <div className="space-x-2">

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

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

7
src/pages/_app.tsx
View File

@@ -4,15 +4,14 @@ import '@/styles/globals.css';
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
import { useEffect } from 'react'; import { useEffect } from 'react';
import { themeChange } from 'theme-change'; import { themeChange } from 'theme-change';
import { Analytics } from '@vercel/analytics/react'; import { Analytics } from '@vercel/analytics/react';
import { Space_Grotesk } from 'next/font/google'; import { Nunito_Sans } from 'next/font/google';
import Head from 'next/head'; import Head from 'next/head';
import Layout from '@/components/ui/Layout'; import Layout from '@/components/ui/Layout';
import CustomToast from '@/components/ui/CustomToast'; import CustomToast from '@/components/ui/CustomToast';
const spaceGrotesk = Space_Grotesk({ subsets: ['latin'] }); const font = Nunito_Sans({ subsets: ['latin-ext'] });
const App = ({ Component, pageProps }: AppProps) => { const App = ({ Component, pageProps }: AppProps) => {
useEffect(() => { useEffect(() => {
@@ -24,7 +23,7 @@ const App = ({ Component, pageProps }: AppProps) => {
<style jsx global> <style jsx global>
{` {`
html { html {
font-family: ${spaceGrotesk.style.fontFamily}; font-family: ${font.style.fontFamily};
} }
`} `}
</style> </style>

8
tailwind.config.js
View File

@@ -2,7 +2,7 @@
const myThemes = { const myThemes = {
dark: { dark: {
primary: 'hsl(227, 25%, 30%)', primary: 'hsl(227, 25%, 14%)',
secondary: 'hsl(255, 9%, 69%)', secondary: 'hsl(255, 9%, 69%)',
error: 'hsl(9, 52%, 57%)', error: 'hsl(9, 52%, 57%)',
accent: 'hsl(316, 96%, 60%)', accent: 'hsl(316, 96%, 60%)',
@@ -12,9 +12,9 @@ const myThemes = {
warning: 'hsl(50, 98%, 50%)', warning: 'hsl(50, 98%, 50%)',
'primary-content': 'hsl(0, 0%, 98%)', 'primary-content': 'hsl(0, 0%, 98%)',
'error-content': 'hsl(0, 0%, 98%)', 'error-content': 'hsl(0, 0%, 98%)',
'base-100': 'hsl(227, 20%, 15%)', 'base-100': 'hsl(227, 20%, 10%)',
'base-200': 'hsl(227, 20%, 11%)', 'base-200': 'hsl(227, 20%, 8%)',
'base-300': 'hsl(227, 20%, 5%)', 'base-300': 'hsl(227, 20%, 1%)',
}, },
light: { light: {
primary: 'hsl(180, 15%, 60%)', primary: 'hsl(180, 15%, 60%)',