Update theme colors and layout styles, upgrade daisyui/tailwind

This commit is contained in:
Aaron William Po
2024-02-19 16:28:58 -05:00
parent 3af82f7dbf
commit 34e960f0c6
17 changed files with 155 additions and 232 deletions

View File

@@ -74,13 +74,9 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost }) => {
</div>
) : (
<Tab.Group>
<Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
<Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
Comments
</Tab>
<Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
Other Beers
</Tab>
<Tab.List className="tabs-boxed tabs grid grid-cols-2">
<Tab className="tab uppercase ui-selected:tab-active">Comments</Tab>
<Tab className="tab uppercase ui-selected:tab-active">Other Beers</Tab>
</Tab.List>
<Tab.Panels className="mt-2">
<Tab.Panel>

View File

@@ -41,11 +41,9 @@ const BeerStyleByIdPage: NextPage<BeerStylePageProps> = ({ beerStyle }) => {
</div>
) : (
<Tab.Group>
<Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
<Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
Comments
</Tab>
<Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
<Tab.List className="tabs-boxed tabs grid grid-cols-2">
<Tab className="tab uppercase ui-selected:tab-active">Comments</Tab>
<Tab className="tab uppercase ui-selected:tab-active">
Beers in this Style
</Tab>
</Tab.List>

View File

@@ -85,11 +85,11 @@ const BreweryByIdPage: NextPage<BreweryPageProps> = ({ breweryPost, mapboxToken
token={mapboxToken}
/>
<Tab.Group>
<Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
<Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
<Tab.List className="tabs-boxed tabs grid grid-cols-2">
<Tab className="tab-md tab w-1/2 uppercase ui-selected:tab-active">
Comments
</Tab>
<Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
<Tab className="tab-md tab w-1/2 uppercase ui-selected:tab-active">
Beers
</Tab>
</Tab.List>

View File

@@ -1,5 +1,6 @@
import { NextPage } from 'next';
import Head from 'next/head';
import Image from 'next/image';
const keywords = [
'beer',
@@ -29,7 +30,7 @@ const keywords = [
'beer recipes',
];
const description = `The Biergarten App is an app for beer lovers to share their favourite brews and breweries with like-minded people online.`;
const description = `An app for beer lovers to share their favourite brews and breweries with like-minded people online.`;
const Home: NextPage = () => {
return (
@@ -39,13 +40,17 @@ const Home: NextPage = () => {
<meta name="description" content={description} />
<meta name="keywords" content={keywords.join(', ')} />
</Head>
<div className="flex h-full w-full items-center justify-center bg-primary">
<div className="w-9/12 text-center lg:w-8/12">
<h1 className="text-3xl font-bold md:text-4xl lg:text-5xl xl:text-8xl">
The Biergarten App
</h1>
<p className="mt-4 text-lg lg:text-2xl">{description}</p>
<div className="relative flex h-dvh w-full flex-col items-center justify-center">
<Image
alt=""
src="/background.jpg"
height={4015}
width={6035}
className="pointer-events-none absolute h-full w-full object-cover mix-blend-overlay"
/>
<div className="relative flex w-9/12 flex-col space-y-3 text-base-content">
<h1 className="text-8xl font-extrabold">The Biergarten App</h1>
<p className="text-3xl font-bold">{description}</p>
</div>
</div>
</>

View File

@@ -18,8 +18,8 @@ const LoginPage: NextPage = () => {
<meta name="description" content="Login to your account" />
</Head>
<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-[55%]">
<div className="flex h-screen flex-row">
<div className="hidden h-dvh flex-col items-center justify-center bg-base-100 lg:flex lg:w-[55%]">
<CldImage
src="https://res.cloudinary.com/dxie9b7na/image/upload/v1701056793/cloudinary-images/pexels-elevate-1267700_jrno3s.jpg"
alt="Login Image"
@@ -28,7 +28,7 @@ const LoginPage: NextPage = () => {
className="h-full w-full object-cover"
/>
</div>
<div className="flex h-full w-full flex-col items-center justify-center bg-base-300 lg:w-[45%]">
<div className="flex min-h-dvh w-full flex-col items-center justify-center bg-base-100 lg:w-[45%]">
<div className="w-10/12 space-y-5 sm:w-9/12">
<div className=" flex flex-col items-center space-y-2">
<FaUserCircle className="text-3xl" />

View File

@@ -25,7 +25,7 @@ const UserInfoPage: FC<UserInfoPageProps> = ({ user }) => {
<meta name="description" content="User information" />
</Head>
<>
<main className="mb-12 mt-10 flex w-full flex-col items-center justify-center">
<main className="mb-12 mt-16 flex w-full flex-col items-center justify-center">
<div className="w-11/12 space-y-3 xl:w-9/12 2xl:w-8/12">
<UserHeader user={user} />
</div>

View File

@@ -33,7 +33,7 @@ const AccountPage: NextPage = () => {
content="Your account page. Here you can view your account information, change your settings, and view your posts."
/>
</Head>
<div className="flex flex-col items-center">
<div className="mt-10 flex min-h-dvh flex-col items-center">
<div className="m-12 flex w-11/12 flex-col items-center justify-center space-y-3 lg:w-8/12">
<div className="flex flex-col items-center space-y-3">
<div className="mb-1 h-28 w-28">
@@ -48,22 +48,18 @@ const AccountPage: NextPage = () => {
<div className="h-full w-full">
<Tab.Group>
<Tab.List className="tabs-boxed tabs items-center justify-center rounded-2xl">
<Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
Account
</Tab>
<Tab className="tab tab-md w-1/2 uppercase ui-selected:tab-active">
Your Posts
</Tab>
<Tab.List className="tabs-boxed tabs grid grid-cols-2">
<Tab className="tab uppercase ui-selected:tab-active">Account</Tab>
<Tab className="tab uppercase ui-selected:tab-active">Your Posts</Tab>
</Tab.List>
<Tab.Panels>
<Tab.Panel className="h-full space-y-5">
<Tab.Panel className="mt-3 h-full space-y-3">
<UpdateProfileLink />
<AccountInfo pageState={pageState} dispatch={dispatch} />
<Security pageState={pageState} dispatch={dispatch} />
<DeleteAccount pageState={pageState} dispatch={dispatch} />
</Tab.Panel>
<Tab.Panel className="h-full space-y-5">
<Tab.Panel className="h-full">
<UserPosts />
</Tab.Panel>
</Tab.Panels>

View File

@@ -22,7 +22,7 @@ const ProtectedPage: NextPage = () => {
<Head>
<title>Hello! | The Biergarten App</title>
</Head>
<div className="flex h-full flex-col items-center justify-center space-y-3 bg-primary text-center">
<div className="h-dvh flex flex-col items-center justify-center space-y-3 bg-base-100 text-center">
{isLoading && <Spinner size={isDesktop ? 'xl' : 'md'} />}
{user && !isLoading && (
<>