Update styles to be more mobile friendly, add favicon

public/favicon/about.txt

@@ -0,0 +1,6 @@
+This favicon was generated using the following graphics from Twitter Twemoji:
+
+- Graphics Title: 1f37a.svg
+- Graphics Author: Copyright 2020 Twitter, Inc and other contributors (https://github.com/twitter/twemoji)
+- Graphics Source: https://github.com/twitter/twemoji/blob/master/assets/svg/1f37a.svg
+- Graphics License: CC-BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

public/favicon/site.webmanifest

@@ -0,0 +1 @@
+{"name":"","short_name":"","icons":[{"src":"/android-chrome-192x192.png","sizes":"192x192","type":"image/png"},{"src":"/android-chrome-512x512.png","sizes":"512x512","type":"image/png"}],"theme_color":"#ffffff","background_color":"#ffffff","display":"standalone"}

src/components/BeerById/BeerInfoHeader.tsx

@@ -40,10 +40,7 @@ const BeerInfoHeader: FC<{
           </header>
           {isPostOwner && (
             <div className="tooltip tooltip-left" data-tip={`Edit '${beerPost.name}'`}>
-              <Link
+              <Link href={`/beers/${beerPost.id}/edit`} className="btn-ghost btn-xs btn">
-                href={`/beers/${beerPost.id}/edit`}
-                className="btn-outline btn-sm btn"
-              >
                 <FaRegEdit className="text-xl" />
               </Link>
             </div>

src/components/BeerById/BeerPostCommentsSection.tsx

@@ -52,7 +52,7 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
           {user ? (
             <BeerCommentForm beerPost={beerPost} mutate={mutate} />
           ) : (
-            <div className="flex h-full flex-col items-center justify-center">
+            <div className="flex h-52 flex-col items-center justify-center">
               <span className="text-lg font-bold">Log in to leave a comment.</span>
             </div>
           )}
@@ -73,7 +73,7 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
             {!!comments.length && (
               <div className="card bg-base-300 pb-6">
                 {comments.map((comment, index) => {
-                  const isLastComment = index === comments.length - 1;
+                  const isPenulitmateComment = index === comments.length - 2;
 
                   /**
                    * Attach a ref to the last comment in the list. When it comes into
@@ -81,7 +81,7 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
                    */
                   return (
                     <div
-                      ref={isLastComment ? lastCommentRef : undefined}
+                      ref={isPenulitmateComment ? lastCommentRef : undefined}
                       key={comment.id}
                     >
                       <CommentCardBody comment={comment} mutate={mutate} />
@@ -94,9 +94,7 @@ const BeerPostCommentsSection: FC<BeerPostCommentsSectionProps> = ({ beerPost })
                    * If there are more comments to load, show a loading component with a
                    * skeleton loader and a loading spinner.
                    */
-                  !!isLoadingMore && (
+                  !!isLoadingMore && <LoadingComponent length={PAGE_SIZE} />
-                    <LoadingComponent length={Math.floor(PAGE_SIZE / 2)} />
-                  )
                 }
 
                 {

src/components/BeerById/BeerRecommendations.tsx

@@ -20,13 +20,13 @@ const BeerRecommendations: FunctionComponent<BeerRecommendationsProps> = ({
                 </h2>
               </Link>
               <Link href={`/breweries/${beerPost.brewery.id}`} className="link-hover">
-                <p className="truncate text-lg font-semibold lg:text-xl">
+                <p className="text-md truncate font-semibold lg:text-xl">
                   {beerPost.brewery.name}
                 </p>
               </Link>
             </div>
 
-            <div className="text-md space-x-3 lg:text-lg">
+            <div className="space-x-3 text-sm lg:text-lg">
               <span>{beerPost.abv}% ABV</span>
               <span>{beerPost.ibu} IBU</span>
             </div>

src/components/BeerById/CommentCardBody.tsx

@@ -35,7 +35,7 @@ const CommentCardDropdown: FC<CommentCardProps> = ({ comment, mutate }) => {
   };
 
   return (
-    <div className="dropdown">
+    <div className="dropdown dropdown-end">
       <label tabIndex={0} className="btn-ghost btn-sm btn m-1">
         <FaEllipsisH />
       </label>
@@ -45,7 +45,12 @@ const CommentCardDropdown: FC<CommentCardProps> = ({ comment, mutate }) => {
       >
         <li>
           {isCommentOwner ? (
-            <button onClick={handleDelete}>Delete</button>
+            <>
+              <button type="button">Edit</button>
+              <button type="button" onClick={handleDelete}>
+                Delete
+              </button>
+            </>
           ) : (
             <button>Report</button>
           )}

src/components/BeerIndex/BeerCard.tsx

@@ -27,12 +27,12 @@ const BeerCard: FC<{ post: z.infer<typeof beerPostQueryResult> }> = ({ post }) =
       <div className="card-body justify-between">
         <div className="space-y-1">
           <Link href={`/beers/${post.id}`}>
-            <h2 className="link-hover link overflow-hidden text-ellipsis whitespace-normal text-2xl font-bold lg:text-3xl">
+            <h2 className="link-hover link overflow-hidden whitespace-normal text-2xl font-bold lg:truncate lg:text-3xl">
               {post.name}
             </h2>
           </Link>
           <Link href={`/breweries/${post.brewery.id}`}>
-            <h3 className="text-md link-hover link overflow-hidden text-ellipsis lg:text-xl">
+            <h3 className="text-md link-hover link whitespace-normal lg:truncate lg:text-xl">
               {post.brewery.name}
             </h3>
           </Link>

src/components/RegisterUserForm.tsx

@@ -48,8 +48,8 @@ const RegisterUserForm: FC = () => {
         )}
       </div>
       <div>
-        <div className="flex flex-row space-x-3">
+        <div className="flex flex-col lg:flex-row lg:space-x-3">
-          <div className="w-[50%]">
+          <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="firstName">First name</FormLabel>
               <FormError>{errors.firstName?.message}</FormError>
@@ -66,7 +66,7 @@ const RegisterUserForm: FC = () => {
             </FormSegment>
           </div>
 
-          <div className="w-[50%]">
+          <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="lastName">Last name</FormLabel>
               <FormError>{errors.lastName?.message}</FormError>
@@ -84,8 +84,8 @@ const RegisterUserForm: FC = () => {
           </div>
         </div>
 
-        <div className="flex flex-row space-x-3">
+        <div className="flex flex-col lg:flex-row lg:space-x-3">
-          <div className="w-[50%]">
+          <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="email">email</FormLabel>
               <FormError>{errors.email?.message}</FormError>
@@ -101,7 +101,7 @@ const RegisterUserForm: FC = () => {
               />
             </FormSegment>
           </div>
-          <div className="w-[50%]">
+          <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="username">username</FormLabel>
               <FormError>{errors.username?.message}</FormError>
@@ -119,8 +119,8 @@ const RegisterUserForm: FC = () => {
           </div>
         </div>
 
-        <div className="flex flex-row space-x-3">
+        <div className="flex flex-col lg:flex-row lg:space-x-3">
-          <div className="w-[50%]">
+          <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="password">password</FormLabel>
               <FormError>{errors.password?.message}</FormError>
@@ -136,7 +136,7 @@ const RegisterUserForm: FC = () => {
               />
             </FormSegment>
           </div>
-          <div className="w-[50%]">
+          <div className="lg:w-[50%]">
             <FormInfo>
               <FormLabel htmlFor="confirmPassword">confirm password</FormLabel>
               <FormError>{errors.confirmPassword?.message}</FormError>

src/components/ui/Layout.tsx

@@ -5,7 +5,7 @@ const Layout: FC<{ children: ReactNode }> = ({ children }) => {
   return (
     <div className="flex h-screen flex-col">
       <Navbar />
-      <div className="top-0 h-full flex-1 overflow-x-auto animate-in fade-in">
+      <div className="top-0 h-full w-screen flex-1 overflow-x-auto animate-in fade-in">
         {children}
       </div>
     </div>

src/components/ui/forms/FormPageLayout.tsx

@@ -19,9 +19,9 @@ const FormPageLayout: FC<FormPageLayoutProps> = ({
   backLinkText,
 }) => {
   return (
-    <div className="align-center my-20 flex h-fit flex-col items-center justify-center">
+    <div className="align-center my-20 flex flex-col items-center justify-center">
-      <div className="w-8/12">
+      <div className="w-10/12 lg:w-8/12 2xl:w-6/12">
-        <div className="tooltip tooltip-bottom absolute" data-tip={backLinkText}>
+        <div className="tooltip tooltip-right" data-tip={backLinkText}>
           <Link href={backLink} className="btn-ghost btn-sm btn p-0">
             <BiArrowBack className="text-xl" />
           </Link>
@@ -30,7 +30,7 @@ const FormPageLayout: FC<FormPageLayoutProps> = ({
           {headingIcon({ className: 'text-4xl' })}{' '}
           <h1 className="text-3xl font-bold">{headingText}</h1>
         </div>
-        <div>{FormComponent}</div>
+        <div className="mt-3">{FormComponent}</div>
       </div>
     </div>
   );

src/pages/_app.tsx

@@ -21,6 +21,7 @@ export default function App({ Component, pageProps }: AppProps) {
           }
         `}
       </style>
+
       <UserContext.Provider value={{ user, isLoading, error, mutate }}>
         <Component {...pageProps} />
       </UserContext.Provider>

src/pages/_document.tsx

@@ -3,7 +3,26 @@ import { Html, Head, Main, NextScript } from 'next/document';
 export default function Document() {
   return (
     <Html lang="en">
-      <Head />
+      <Head>
+        <link
+          rel="apple-touch-icon"
+          sizes="180x180"
+          href="favicon/apple-touch-icon.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="32x32"
+          href="favicon/favicon-32x32.png"
+        />
+        <link
+          rel="icon"
+          type="image/png"
+          sizes="16x16"
+          href="favicon/favicon-16x16.png"
+        />
+        <link rel="manifest" href="favicon/site.webmanifest" />
+      </Head>
       <body>
         <Main />
         <NextScript />

src/pages/beers/[id]/index.tsx

@@ -47,7 +47,8 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
             infiniteLoop
             showThumbs={false}
           >
-            {beerPost.beerImages.map((image, index) => (
+            {beerPost.beerImages.length
+              ? beerPost.beerImages.map((image, index) => (
                   <div key={image.id} id={`image-${index}}`} className="w-full">
                     <Image
                       alt={image.alt}
@@ -57,6 +58,9 @@ const BeerByIdPage: NextPage<BeerPageProps> = ({ beerPost, beerRecommendations }
                       className="h-[42rem] w-full object-cover"
                     />
                   </div>
+                ))
+              : Array.from({ length: 1 }).map((_, i) => (
+                  <div className="h-[42rem] bg-base-300" key={i} />
                 ))}
           </Carousel>
 

src/pages/beers/index.tsx

@@ -11,7 +11,7 @@ import Spinner from '@/components/ui/Spinner';
 
 import useBeerPosts from '@/hooks/useBeerPosts';
 import BeerPostLoadingCard from '@/components/BeerIndex/BeerPostLoadingCard';
-import { FaArrowUp } from 'react-icons/fa';
+import { FaArrowUp, FaPlus } from 'react-icons/fa';
 
 const BeerPage: NextPage = () => {
   const { user } = useContext(UserContext);
@@ -39,14 +39,15 @@ const BeerPage: NextPage = () => {
       </Head>
       <div className="flex items-center justify-center bg-base-100" ref={pageRef}>
         <div className="my-10 flex w-11/12 flex-col space-y-4 lg:w-8/12 2xl:w-7/12">
-          <header className="my-10 flex flex-col justify-between lg:flex-row">
+          <header className="my-10 flex justify-between lg:flex-row">
-            <div className="space-y-2">
             <h1 className="text-6xl font-bold">The Biergarten Index</h1>
-            </div>
             {!!user && (
-              <div className="mt-6 lg:mt-0">
+              <div
-                <Link href="/beers/create" className="btn-primary btn">
+                className="tooltip tooltip-left h-full"
-                  Create a new beer post
+                data-tip="Create a new beer post"
+              >
+                <Link href="/beers/create" className="btn-ghost btn-sm btn">
+                  <FaPlus />
                 </Link>
               </div>
             )}

src/pages/index.tsx

@@ -16,7 +16,7 @@ const Home: NextPage = () => {
               The Biergarten App
             </h1>
             <p className="mt-4 text-lg lg:text-2xl">
-              An app for beer lovers to share their favorite brews and breweries with
+              An app for beer lovers to share their favourite brews and breweries with
               like-minded people online.
             </p>
           </div>