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 updates

Browse Source 
fix navbar to remain sticky, add fade in to layout component, update font to Space Grotesk
This commit is contained in:
Aaron William Po
2023-04-08 02:11:13 -04:00
parent d2821eeec0
commit 80bed9b4dc
7 changed files with 17 additions and 18 deletions
Download Patch File Download Diff File Expand all files Collapse all files

8
components/ui/Layout.tsx
View File

@@ -4,10 +4,10 @@ import Navbar from './Navbar';
const Layout: FC<{ children: ReactNode }> = ({ children }) => { const Layout: FC<{ children: ReactNode }> = ({ children }) => {
return ( return (
<div className="flex h-screen flex-col"> <div className="flex h-screen flex-col">
<header className="sticky top-0 z-50"> <Navbar />
<Navbar /> <div className="top-0 h-full flex-1 overflow-x-auto animate-in fade-in">
</header> {children}
<div className="relative top-0 h-full flex-1">{children}</div> </div>
</div> </div>
); );
}; };

8
components/ui/Navbar.tsx
View File

@@ -42,10 +42,10 @@ const Navbar = () => {
]; ];
return ( return (
<nav className="navbar bg-primary text-primary-content"> <nav className="navbar sticky top-0 z-50 bg-primary text-primary-content">
<div className="flex-1"> <div className="flex-1">
<Link className="btn-ghost btn text-3xl normal-case" href="/"> <Link className="btn-ghost btn normal-case" href="/">
<span className="cursor-pointer text-xl font-bold">The Biergarten App</span> <span className="cursor-pointer text-lg font-bold">The Biergarten App</span>
</Link> </Link>
</div> </div>
<div className="hidden flex-none lg:block"> <div className="hidden flex-none lg:block">
@@ -68,7 +68,7 @@ const Navbar = () => {
</ul> </ul>
</div> </div>
<div className="flex-none lg:hidden"> <div className="flex-none lg:hidden">
<div className="dropdown dropdown-end"> <div className="dropdown-end dropdown">
<label tabIndex={0} className="btn-ghost btn-circle btn"> <label tabIndex={0} className="btn-ghost btn-circle btn">
<span className="w-10 rounded-full"> <span className="w-10 rounded-full">
<svg <svg

7
pages/_app.tsx
View File

@@ -3,10 +3,9 @@ import useUser from '@/hooks/useUser';
import '@/styles/globals.css'; import '@/styles/globals.css';
import type { AppProps } from 'next/app'; import type { AppProps } from 'next/app';
import { Roboto } from 'next/font/google'; import { Space_Grotesk } from 'next/font/google';
const roboto = Roboto({ const spaceGrotesk = Space_Grotesk({
weight: ['100', '300', '400', '500', '700', '900'],
subsets: ['latin'], subsets: ['latin'],
}); });
@@ -18,7 +17,7 @@ export default function App({ Component, pageProps }: AppProps) {
<style jsx global> <style jsx global>
{` {`
html { html {
font-family: ${roboto.style.fontFamily}; font-family: ${spaceGrotesk.style.fontFamily};
} }
`} `}
</style> </style>

6
pages/login/index.tsx
View File

@@ -19,16 +19,16 @@ const LoginPage: NextPage = () => {
</Head> </Head>
<div className="flex h-full flex-row"> <div className="flex h-full flex-row">
<div className="hidden h-full flex-col items-center justify-center bg-base-100 lg:flex lg:w-[60%]"> <div className="hidden h-full flex-col items-center justify-center bg-base-100 lg:flex lg:w-[55%]">
<Image <Image
src="https://picsum.photos/1040/1080" src="https://picsum.photos/5000/5000"
alt="Login Image" alt="Login Image"
width={4920} width={4920}
height={4080} height={4080}
className="h-full w-full object-cover" className="h-full w-full object-cover"
/> />
</div> </div>
<div className="flex h-full w-full flex-col items-center justify-center bg-base-300 lg:w-[40%]"> <div className="flex h-full w-full flex-col items-center justify-center bg-base-300 lg:w-[45%]">
<div className="w-10/12 space-y-5 sm:w-9/12"> <div className="w-10/12 space-y-5 sm:w-9/12">
<div className=" flex flex-col items-center space-y-2"> <div className=" flex flex-col items-center space-y-2">
<FaUserCircle className="text-3xl" /> <FaUserCircle className="text-3xl" />

2
prisma/DBClient.ts
View File

@@ -1,5 +1,5 @@
import { NODE_ENV } from '@/config/env';
import { PrismaClient } from '@prisma/client'; import { PrismaClient } from '@prisma/client';
import { NODE_ENV } from '../config/env';
const globalForPrisma = global as unknown as { prisma: PrismaClient }; const globalForPrisma = global as unknown as { prisma: PrismaClient };

2
prisma/seed/create/createNewBeerImages.ts
View File

@@ -23,7 +23,7 @@ const createNewBeerImages = async ({
beerImagesPromises.push( beerImagesPromises.push(
prisma.beerImage.create({ prisma.beerImage.create({
data: { data: {
path: 'https://picsum.photos/1040/1080', path: 'https://picsum.photos/5000/5000',
alt: 'Placeholder beer image.', alt: 'Placeholder beer image.',
caption: 'Placeholder beer image caption.', caption: 'Placeholder beer image caption.',
beerPost: { connect: { id: beerPost.id } }, beerPost: { connect: { id: beerPost.id } },

2
prisma/seed/create/createNewBreweryImages.ts
View File

@@ -27,7 +27,7 @@ const createNewBreweryImages = async ({
breweryImagesPromises.push( breweryImagesPromises.push(
prisma.breweryImage.create({ prisma.breweryImage.create({
data: { data: {
path: 'https://picsum.photos/1040/1080', path: 'https://picsum.photos/5000/5000',
alt: 'Placeholder brewery image.', alt: 'Placeholder brewery image.',
caption: 'Placeholder brewery image caption.', caption: 'Placeholder brewery image caption.',
breweryPost: { connect: { id: breweryPost.id } }, breweryPost: { connect: { id: breweryPost.id } },