Dev: add placeholder avatar, change image urls

.gitignore

@@ -37,12 +37,11 @@ yarn-error.log*
 *.tsbuildinfo
 next-env.d.ts
 
-# http requests
+# HTTP playground
 *.http
 
-# uploaded images
-public/uploads
-
 # vscode
 .vscode
 
+/cloudinary-images
+

src/components/Account/UserAvatar.tsx

@@ -2,6 +2,7 @@ import { FC } from 'react';
 import Image from 'next/image';
 import { z } from 'zod';
 import GetUserSchema from '@/services/User/schema/GetUserSchema';
+import { FaUser } from 'react-icons/fa';
 
 interface UserAvatarProps {
   user: {
@@ -13,13 +14,23 @@ interface UserAvatarProps {
 
 const UserAvatar: FC<UserAvatarProps> = ({ user }) => {
   const { userAvatar } = user;
-  return !userAvatar ? null : (
+  return !userAvatar ? (
+    <div
+      className="h-32 w-full bg-primary mask mask-circle flex items-center justify-center"
+      aria-label="Default user avatar"
+      role="img"
+    >
+      <span className="text-2xl font-bold text-base-content h-full">
+        <FaUser className="h-full" />
+      </span>
+    </div>
+  ) : (
     <Image
       src={userAvatar.path}
       alt="user avatar"
       width={1000}
       height={1000}
-      className="h-full w-full object-cover mask mask-circle ring ring-primary ring-offset-base-100 ring-offset-2"
+      className="h-full w-full object-cover mask mask-circle"
     />
   );
 };

src/components/BeerBreweryComments/CommentCardBody.tsx

@@ -31,7 +31,7 @@ const CommentCardBody: FC<CommentCardProps> = ({
   return (
     <div ref={ref} className="flex">
       <div className="w-[12%] py-4 justify-center">
-        <div className="px-1">
+        <div className="px-3 h-20">
           <UserAvatar user={comment.postedBy} />
         </div>
       </div>

src/pages/404.tsx

@@ -1,5 +1,3 @@
-// create a 404 next js page using tailwind
-
 import { NextPage } from 'next';
 import Head from 'next/head';
 

src/pages/account/index.tsx

@@ -35,7 +35,7 @@ const AccountPage: NextPage = () => {
       <div className="flex 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="h-32">
+            <div className="h-20 mb-10 w-20">
               <UserAvatar user={user} />
             </div>
 

src/pages/breweries/index.tsx

@@ -8,7 +8,7 @@ import { NextPage } from 'next';
 import Head from 'next/head';
 import { useContext, MutableRefObject, useRef } from 'react';
 import Link from 'next/link';
-import { FaPlus, FaArrowUp } from 'react-icons/fa';
+import { FaPlus, FaArrowUp, FaMap } from 'react-icons/fa';
 import { useInView } from 'react-intersection-observer';
 import { z } from 'zod';
 
@@ -51,25 +51,24 @@ const BreweryPage: NextPage<BreweryPageProps> = () => {
                 <h1 className="text-4xl font-bold lg:text-6xl">The Biergarten App</h1>
                 <h2 className="text-2xl font-bold lg:text-4xl">Breweries</h2>
               </div>
-              <div>
-                <Link
-                  className="link-hover link text-xl font-bold lg:text-2xl"
-                  href="/breweries/map"
-                >
-                  View map
-                </Link>
-              </div>
             </div>
+            <div className="flex flex-col">
               {!!user && (
                 <div
-                className="tooltip tooltip-left h-full"
+                  className="tooltip tooltip-left"
                   data-tip="Create a new brewery post"
                 >
                   <Link href="/breweries/create" className="btn-ghost btn-sm btn">
-                  <FaPlus />
+                    <FaPlus className="text-lg" />
                   </Link>
                 </div>
               )}
+              <div className="tooltip tooltip-left" data-tip="View map">
+                <Link className="btn-ghost btn-sm btn" href="/breweries/map">
+                  <FaMap className="text-lg" />
+                </Link>
+              </div>
+            </div>
           </header>
           <div className="grid gap-6 xl:grid-cols-2">
             {!!breweryPosts.length && !isLoading && (

src/pages/breweries/map.tsx

@@ -34,7 +34,7 @@ const BreweryMapPage: NextPage<BreweryMapPageProps> = ({ token }) => {
 
   const mapStyles: MapStyles = {
     light: 'mapbox://styles/mapbox/light-v10',
-    dark: 'mapbox://styles/mapbox/dark-v11',
+    dark: 'mapbox://styles/mapbox/dark-v10',
   };
 
   const pins = useMemo(

src/prisma/seed/util/imageUrls.ts

@@ -1,9 +1,13 @@
 const imageUrls = [
-  'https://res.cloudinary.com/dxie9b7na/image/upload/v1683482214/cld-sample.jpg',
+  'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056802/cloudinary-images/pexels-brett-sayles-1551944_era4te.jpg',
-  'https://res.cloudinary.com/dxie9b7na/image/upload/v1683482214/cld-sample-2.jpg',
+  'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056801/cloudinary-images/pexels-ketut-subiyanto-5055809_fwkfoj.jpg',
-  'https://res.cloudinary.com/dxie9b7na/image/upload/v1683482214/cld-sample-3.jpg',
+  'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056801/cloudinary-images/pexels-cottonbro-studio-5537954_zsxs7n.jpg',
-  'https://res.cloudinary.com/dxie9b7na/image/upload/v1683482214/cld-sample-4.jpg',
+  'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056800/cloudinary-images/pexels-tembela-bohle-1089931_f7jcer.jpg',
-  'https://res.cloudinary.com/dxie9b7na/image/upload/v1683482214/cld-sample-5.jpg',
+  'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056798/cloudinary-images/pexels-tembela-bohle-1089930_yzfjlv.jpg',
+  'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056797/cloudinary-images/pexels-cottonbro-studio-5529918_e0jlle.jpg',
+  'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056797/cloudinary-images/pexels-casalfilmsestudio-2076748_xymlox.jpg',
+  'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056795/cloudinary-images/pexels-elevate-3009770_simouh.jpg',
+  'https://res.cloudinary.com/dxie9b7na/image/upload/v1701056793/cloudinary-images/pexels-elevate-1267700_jrno3s.jpg',
 ] as const;
 
 export default imageUrls;

tailwind.config.js

@@ -12,12 +12,12 @@ const myThemes = {
     warning: 'hsl(50, 98%, 50%)',
     'primary-content': 'hsl(0, 0%, 98%)',
     'error-content': 'hsl(0, 0%, 98%)',
-    'base-100': 'hsl(227, 20%, 10%)',
+    'base-100': 'hsl(227, 20%, 20%)',
-    'base-200': 'hsl(227, 20%, 8%)',
+    'base-200': 'hsl(227, 20%, 13%)',
-    'base-300': 'hsl(227, 20%, 1%)',
+    'base-300': 'hsl(227, 20%, 10%)',
   },
   light: {
-    primary: 'hsl(180, 15%, 60%)',
+    primary: 'hsl(180, 15%, 70%)',
     secondary: 'hsl(21, 54%, 83%)',
     error: 'hsl(4, 87%, 74%)',
     accent: 'hsl(93, 27%, 73%)',