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

Merge pull request #7 from aaronpo97/styling

Browse Source 
Change font, add meta title/desc to 404 page
This commit is contained in:
Aaron Po
2023-02-20 22:58:32 -05:00
committed by GitHub
parent 8836d1fc9b 6f604b9768
commit 3967dcb988
9 changed files with 68 additions and 28 deletions
Download Patch File Download Diff File Expand all files Collapse all files

48
components/BeerById/CommentCard.tsx
View File

@@ -1,5 +1,6 @@
import { BeerCommentQueryResultT } from '@/services/BeerComment/schema/BeerCommentQueryResult';
import { formatDistanceStrict } from 'date-fns';
import { format, formatDistanceStrict } from 'date-fns';
import Link from 'next/link';
import { useEffect, useState } from 'react';
import { Rating } from 'react-daisyui';
@@ -13,23 +14,38 @@ const CommentCard: React.FC<{
}, [comment.createdAt]);
return (
<div className="card-body h-64">
<div className="flex justify-between">
<div className="card-body sm:h-64">
<div className="flex flex-col justify-between sm:flex-row">
<div>
<h3 className="text-2xl font-semibold">{comment.postedBy.username}</h3>
<h4 className="italic">posted {timeDistance} ago</h4>
<h3 className="font-semibold sm:text-2xl">
<Link href={`/users/${comment.postedBy.id}`} className="link-hover link">
{comment.postedBy.username}
</Link>
</h3>
<h4 className="italic">
posted{' '}
<time
className="tooltip tooltip-bottom"
data-tip={format(new Date(comment.createdAt), 'MM/dd/yyyy')}
>
{timeDistance}
</time>{' '}
ago
</h4>
</div>
<div>
<Rating value={comment.rating}>
{Array.from({ length: 5 }).map((val, index) => (
<Rating.Item
name="rating-1"
className="mask mask-star cursor-default"
disabled
aria-disabled
key={index}
/>
))}
</Rating>
</div>
<Rating value={comment.rating}>
{Array.from({ length: 5 }).map((val, index) => (
<Rating.Item
name="rating-1"
className="mask mask-star cursor-default"
disabled
aria-disabled
key={index}
/>
))}
</Rating>
</div>
<p>{comment.content}</p>
</div>

2
components/Login/LoginForm.tsx
View File

@@ -74,7 +74,7 @@ const LoginForm = () => {
{responseError && <ErrorAlert error={responseError} setError={setResponseError} />}
<div className="w-full">
<button type="submit" className="btn-primary btn w-full">
<button type="submit" className="btn btn-primary w-full">
Login
</button>
</div>

4
components/ui/Navbar.tsx
View File

@@ -44,7 +44,7 @@ const Navbar = () => {
return (
<nav className="navbar bg-primary text-primary-content">
<div className="flex-1">
<Link className="btn-ghost btn text-3xl normal-case" href="/">
<Link className="btn btn-ghost text-3xl normal-case" href="/">
<span className="cursor-pointer text-xl font-bold">The Biergarten App</span>
</Link>
</div>
@@ -69,7 +69,7 @@ const Navbar = () => {
</div>
<div className="flex-none lg:hidden">
<div className="dropdown-end dropdown">
<label tabIndex={0} className="btn-ghost btn-circle btn">
<label tabIndex={0} className="btn btn-ghost btn-circle">
<span className="w-10 rounded-full">
<svg
xmlns="http://www.w3.org/2000/svg"

2
components/ui/alerts/ErrorAlert.tsx
View File

@@ -16,7 +16,7 @@ const ErrorAlert: FC<ErrorAlertProps> = ({ error, setError }) => {
<div className="flex-none">
<button
className="btn-ghost btn-sm btn"
className="btn btn-ghost btn-sm"
type="button"
onClick={() => {
setError('');

5
pages/404.tsx
View File

@@ -2,10 +2,15 @@
import Layout from '@/components/ui/Layout';
import { NextPage } from 'next';
import Head from 'next/head';
const NotFound: NextPage = () => {
return (
<Layout>
<Head>
<title>404 Page Not Found</title>
<meta name="description" content="404 Page Not Found" />
</Head>
<div className="flex h-full flex-col items-center justify-center space-y-4">
<h1 className="text-7xl font-bold">Error: 404</h1>
<h2 className="text-xl font-bold">Page Not Found</h2>

2
pages/beers/[id].tsx
View File

@@ -106,7 +106,7 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({
Next Comments
</Link>
<Link
className={`btn-outline btn ${
className={`btn btn-outline ${
commentsPageNum === commentsPageCount
? 'btn-disabled pointer-events-none'
: 'pointer-events-auto'

18
pages/login/index.tsx
View File

@@ -8,6 +8,7 @@ import Image from 'next/image';
import { FaUserCircle } from 'react-icons/fa';
import Head from 'next/head';
import Link from 'next/link';
const LoginPage: NextPage = () => {
const { user } = useUser();
@@ -38,14 +39,23 @@ const LoginPage: NextPage = () => {
className="h-full w-full object-cover"
/>
</div>
<div className="flex h-full w-full flex-col items-center space-y-5 bg-base-300 lg:w-[40%]">
<div className="mt-44 w-9/12">
<div className="flex h-full w-full flex-col items-center justify-center bg-base-300 lg:w-[40%]">
<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" />
<h1 className="text-4xl font-bold">Login</h1>
</div>
<div className="mt-10">
<LoginForm />
<LoginForm />
<div className="mt-3 flex flex-col items-center space-y-1">
<Link href="/register" className="text-primary-500 link-hover link italic">
Don&apos;t have an account?
</Link>
<Link
href="/reset-password"
className="text-primary-500 link-hover link italic"
>
Forgot password?
</Link>
</div>
</div>
</div>

8
styles/globals.css
View File

@@ -1,3 +1,11 @@
@import url('https://fonts.googleapis.com/css2?family=Exo+2:ital,wght@0,100;0,200;0,300;0,400;0,500;0,600;0,700;0,800;0,900;1,100;1,200;1,300;1,400;1,500;1,600;1,700;1,800;1,900&display=swap');
@tailwind base;
@tailwind components;
@tailwind utilities;
@layer base {
html {
font-family: 'Exo 2', sans-serif;
}
}

7
tailwind.config.js
View File

@@ -10,6 +10,7 @@ module.exports = {
extend: {},
},
plugins: [require('daisyui')],
daisyui: {
logs: false,
themes: [
@@ -25,9 +26,9 @@ module.exports = {
error: '#CF1259',
'primary-content': '#FAF9F6',
'error-content': '#FAF9F6',
'base-100': 'hsl(190, 4%, 15%)',
'base-200': 'hsl(190, 4%, 12%)',
'base-300': 'hsl(190, 4%, 10%)',
'base-100': 'hsl(190, 4%, 11%)',
'base-200': 'hsl(190, 4%, 9%)',
'base-300': 'hsl(190, 4%, 8%)',
},
},
],