mirror of
https://github.com/aaronpo97/the-biergarten-app.git
synced 2026-02-16 20:13:49 +00:00
Update theme colors and layout styles, upgrade daisyui/tailwind
This commit is contained in:
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
</>
|
||||
|
||||
@@ -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" />
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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>
|
||||
|
||||
@@ -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 && (
|
||||
<>
|
||||
|
||||
Reference in New Issue
Block a user