belinda-nextjs-refactor-410-add-belinda-designs (#415)

* add light images

* modify category component to switch images based on current mode

* move images to a folder and add header logo

* update mascot path

app/auth/change-password-page/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import logo from "@/app/logo.png";
+import logo from "@/public/belinda-images/logo.png";
 import { ChangeEventHandler, FormEventHandler, useState } from "react";
 import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";

app/auth/reset-password-page/page.tsx

@@ -1,6 +1,6 @@
 "use client";
 import Image from "next/image";
-import logo from "@/app/logo.png";
+import logo from "@/public/belinda-images/logo.png";
 import { ChangeEventHandler, FormEventHandler, useState } from "react";
 import Visibility from "@mui/icons-material/Visibility";
 import VisibilityOff from "@mui/icons-material/VisibilityOff";

app/auth/sign-in/page.tsx

@@ -3,7 +3,7 @@
 import { ChangeEventHandler, FormEventHandler, useState } from "react";
 import { useRouter } from "next/navigation";
 import Image from "next/image";
-import mascot from "../../nsc_mascot_green_cropped.png";
+import mascot from "@/public/belinda-images/nsc_mascot_green_cropped.png";
 import {
   Stack,
   Paper,

app/auth/sign-up/page.tsx

@@ -6,7 +6,7 @@ import VisibilityOff from "@mui/icons-material/VisibilityOff";
 import { IconButton, InputAdornment, TextField } from "@mui/material";
 import { Box, Button, Paper, Typography, Stack } from "@mui/material";
 import Image from "next/image";
-import mascot from "../../nsc_mascot_green_cropped.png";
+import mascot from "@/public/belinda-images/nsc_mascot_green_cropped.png";
 import { Link as MuiLink } from "@mui/material";
 import ErrorAlert from "@/components/ErrorAlert";
 import SuccessAlert from "@/components/SuccessAlert";

app/category-page/[categoryId]/page.tsx

@@ -2,7 +2,7 @@
 
 import React, { useState, useEffect, Dispatch, SetStateAction } from "react";
 import ProductCard from "@/components/ProductCard";
-import logo from "../../logo.png";
+import logo from "@/public/belinda-images/logo.png";
 import { Container, Grid, Typography } from "@mui/material";
 // WARNING: You won't be able to connect to local backend unless you remove the env variable below.
 const URL =

app/category-page/[categoryId]/products/[productId]/ProductDetailDisplay.tsx

@@ -1,6 +1,6 @@
 import React, { useState, useEffect } from "react";
 import Image from "next/image";
-import logo from "@/app/logo.png";
+import logo from "@/public/belinda-images/logo.png";
 import {
   Box,
   Button,

app/page.tsx

@@ -1,8 +1,8 @@
 "use client";
 import React from "react";
 import Image from "next/image";
-import logo from "./logo.png";
-import google_play from "./google_play.png";
+import logo from "@/public/belinda-images/logo.png";
+import google_play from "@/public/belinda-images/google_play.png";
 import CustomCardContent from "@/components/CustomCardContent";
 import Grid from "@mui/material/Unstable_Grid2";
 import Stack from "@mui/material/Stack";

components/CategoryImages.tsx

@@ -1,4 +1,5 @@
 import Image from "next/image";
+import { useTheme } from "@mui/material";
 
 // Categories list
 export const categories = [
@@ -23,14 +24,14 @@ export function Category({
   title: string;
   alt: string;
 }) {
+  const { palette } = useTheme();
+  const darkImagePath = `/categories-images/dark-images/${id}.png`;
+  const lightImagePath = `/categories-images/light-images/${id}.png`;
+
+  // Check the current theme mode and set the image path accordingly
+  const imagePath = palette.mode === "dark" ? lightImagePath : darkImagePath;
   return (
-    <Image
-      src={`/categories-images/${id}.png`}
-      title={title}
-      alt={alt}
-      width={100}
-      height={100}
-    />
+    <Image src={imagePath} title={title} alt={alt} width={100} height={100} />
   );
 }
 

components/Navbar.tsx

@@ -3,7 +3,7 @@
 import Link from "next/link";
 import React, { useEffect, useState } from "react";
 import Image from "next/image";
-import logo from "../app/logo.png";
+import header_logo from "@/public/belinda-images/header_logo.png";
 import {
   AppBar,
   Button,
@@ -52,7 +52,7 @@ export default function Navbar() {
     <Box sx={{ textAlign: "center" }}>
       <Link href="/" passHref>
         <Button color="secondary">
-          <Image src={logo} alt="logo" width={70} height={50} />
+          <Image src={header_logo} alt="logo" width={100} height={50} />
         </Button>
       </Link>
       <Divider />
@@ -122,7 +122,7 @@ export default function Navbar() {
           <Box sx={{ flexGrow: 1 }}>
             <Link href="/" passHref>
               <Button color="secondary">
-                <Image src={logo} alt="logo" width={70} height={50}/>
+                <Image src={header_logo} alt="logo" width={100} height={50}/>
               </Button>
             </Link>
           </Box>