Update margins to account for navbar

This commit is contained in:
Aaron William Po
2024-04-10 19:52:21 -04:00
parent 05be380fdf
commit fb61387512
8 changed files with 11 additions and 12 deletions

View File

@@ -45,7 +45,7 @@ const RegisterUserForm: FC = () => {
}; };
return ( return (
<form className="form-control w-full" noValidate onSubmit={handleSubmit(onSubmit)}> <form className="form-control w-full" noValidate onSubmit={handleSubmit(onSubmit)}>
<div className="space-y-5"> <div className="lg:space-y-5">
<div className="flex flex-col lg:flex-row lg:space-x-5"> <div className="flex flex-col lg:flex-row lg:space-x-5">
<div className="lg:w-[50%]"> <div className="lg:w-[50%]">
<FormInfo> <FormInfo>

View File

@@ -85,8 +85,7 @@ const Navbar = () => {
const { currentURL } = useNavbar(); const { currentURL } = useNavbar();
const backgroundIsTransparent = const backgroundIsTransparent = currentURL === '/';
currentURL === '/' || currentURL === '/login' || currentURL === '/register';
const isOnHomePage = currentURL === '/'; const isOnHomePage = currentURL === '/';
@@ -95,7 +94,7 @@ const Navbar = () => {
<div <div
className={classNames('navbar fixed top-0 z-20 h-10 min-h-10 text-base-content', { className={classNames('navbar fixed top-0 z-20 h-10 min-h-10 text-base-content', {
'bg-transparent': backgroundIsTransparent, 'bg-transparent': backgroundIsTransparent,
'bg-base-100': !backgroundIsTransparent, 'bg-primary': !backgroundIsTransparent,
})} })}
> >
<div className="flex-1"> <div className="flex-1">

View File

@@ -32,7 +32,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
<title>{beerPost.name}</title> <title>{beerPost.name}</title>
<meta name="description" content={beerPost.description} /> <meta name="description" content={beerPost.description} />
</Head> </Head>
<> <div className="mt-10">
<Carousel <Carousel
className="w-full" className="w-full"
useKeyboardArrows useKeyboardArrows
@@ -90,7 +90,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
)} )}
</div> </div>
</main> </main>
</> </div>
</> </>
); );
}; };

View File

@@ -33,7 +33,7 @@ const BeerPage: NextPage = () => {
content="Find beers made by breweries near you and around the world." content="Find beers made by breweries near you and around the world."
/> />
</Head> </Head>
<div className="flex items-center justify-center bg-base-100" ref={pageRef}> <div className="mt-10 flex items-center justify-center bg-base-100" ref={pageRef}>
<div className="my-10 flex w-10/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12"> <div className="my-10 flex w-10/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12">
<header className="my-10 flex justify-between lg:flex-row"> <header className="my-10 flex justify-between lg:flex-row">
<div> <div>

View File

@@ -27,7 +27,7 @@ const BeerStyleByIdPage: NextPage<BeerStylePageProps> = ({ beerStyle }) => {
</Head> </Head>
<> <>
<main className="mb-12 mt-10 flex w-full items-center justify-center"> <main className="mb-12 mt-10 flex w-full items-center justify-center">
<div className="w-11/12 space-y-3 xl:w-9/12 2xl:w-8/12"> <div className="mt-10 w-11/12 space-y-3 xl:w-9/12 2xl:w-8/12">
<BeerStyleHeader beerStyle={beerStyle} /> <BeerStyleHeader beerStyle={beerStyle} />
{isDesktop ? ( {isDesktop ? (

View File

@@ -33,7 +33,7 @@ const BeerStylePage: NextPage = () => {
content="Find beers made by breweries near you and around the world." content="Find beers made by breweries near you and around the world."
/> />
</Head> </Head>
<div className="flex items-center justify-center bg-base-100" ref={pageRef}> <div className="mt-10 flex items-center justify-center bg-base-100" ref={pageRef}>
<div className="my-10 flex w-10/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12"> <div className="my-10 flex w-10/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12">
<header className="my-10 flex justify-between lg:flex-row"> <header className="my-10 flex justify-between lg:flex-row">
<div> <div>

View File

@@ -36,7 +36,7 @@ const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost, mapboxToken
<meta name="description" content={breweryPost.description} /> <meta name="description" content={breweryPost.description} />
</Head> </Head>
<> <div className="mt-10">
<Carousel <Carousel
className="w-full" className="w-full"
useKeyboardArrows useKeyboardArrows
@@ -106,7 +106,7 @@ const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost, mapboxToken
)} )}
</div> </div>
</div> </div>
</> </div>
</> </>
); );
}; };

View File

@@ -43,7 +43,7 @@ const BreweryPage: NextPage<BreweryPageProps> = () => {
content="Find breweries near you and around the world." content="Find breweries near you and around the world."
/> />
</Head> </Head>
<div className="flex items-center justify-center bg-base-100" ref={pageRef}> <div className="mt-10 flex items-center justify-center bg-base-100" ref={pageRef}>
<div className="my-10 flex w-10/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12"> <div className="my-10 flex w-10/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12">
<header className="my-10 flex justify-between lg:flex-row"> <header className="my-10 flex justify-between lg:flex-row">
<div className="space-y-2"> <div className="space-y-2">