From 683d55fcda98402dacece26a13241177227fff11 Mon Sep 17 00:00:00 2001
From: eyeriss42 <iris.mck@pm.me>
Date: Wed, 6 Dec 2023 01:16:16 +0600
Subject: [PATCH 1/5] add hover color

---
 client/src/Components/Header.tsx        | 40 +++++++++++++++++--------
 client/src/Components/header.module.css | 29 ------------------
 2 files changed, 27 insertions(+), 42 deletions(-)
 delete mode 100644 client/src/Components/header.module.css

diff --git a/client/src/Components/Header.tsx b/client/src/Components/Header.tsx
index 02d4e5b..819ee74 100644
--- a/client/src/Components/Header.tsx
+++ b/client/src/Components/Header.tsx
@@ -2,27 +2,30 @@ import { useState } from "react";
 import { Link } from "react-router-dom";
 import IceCreamLogo from "./IceCreamLogo";
 import CartPage from "../pages/cart/CartPage";
-import styles from "./header.module.css";
-
 
 export default function IceCreamHeader() {
   const [currentPagePath, setCurrentPagePath] = useState<string>("/");
-  
+
   function handleSetStarPage(path: string) {
-    setCurrentPagePath(path)
+    setCurrentPagePath(path);
   }
 
   return (
-    <header className={styles["header-container"]}>
-      <Link to="/" onClick={() => handleSetStarPage("/")}><IceCreamLogo />Randomice</Link>
+    <header className="w-full flex justify-between items-center h-[100px] px-4">
+      <Link to="/" onClick={() => handleSetStarPage("/")}>
+        <IceCreamLogo />
+        Randomice
+      </Link>
       <nav>
-        <ul className={styles["nav-container"]}>
+        <ul className="flex justify-center list-none mb-0">
           <NavOption
+            className="flex"
             destinationUrl="/hall-of-fame"
             destinationPage="Hall of Fame"
             currentPagePath={currentPagePath}
             setCurrentPagePath={setCurrentPagePath}
           />
+
           <NavOption
             destinationUrl="/random-flavors"
             destinationPage="Generate Random Flavors"
@@ -31,8 +34,8 @@ export default function IceCreamHeader() {
           />
         </ul>
       </nav>
-      <div className={styles["header-end"]}>
-        <button className={styles["login-button"]}>login/logout</button>
+      <div className="flex min-w-[10rem]">
+        <button className="mr-2.5">login/logout</button>
         <CartPage />
       </div>
     </header>
@@ -40,17 +43,28 @@ export default function IceCreamHeader() {
 }
 
 interface NavOptionProps {
+  className?: string;
   destinationUrl: string;
   destinationPage: string;
   currentPagePath: string;
   setCurrentPagePath(pageUrl: string): void;
 }
 
-function NavOption(props: NavOptionProps) {
+function NavOption({ className, destinationUrl, destinationPage, currentPagePath, setCurrentPagePath }) {
+  const isActive = currentPagePath === destinationUrl;
+  const linkBaseClasses = "text-center block py-2 px-4 rounded w-auto whitespace-nowrap";
+  const activeClasses = "border bg-purple-500 hover:bg-purple-700 text-white";
+  const inactiveClasses = "border border-white text-black-500 hover:border-black hover:bg-white";
+
   return (
-    <li className={styles["nav-item"]}>
-      <Link to={props.destinationUrl} onClick={() => props.setCurrentPagePath(props.destinationUrl)}>{props.currentPagePath === props.destinationUrl ? "*" : ""} 
-        {props.destinationPage}</Link>
+    <li className={`${className}`}>
+      <Link
+        to={destinationUrl}
+        className={`${linkBaseClasses} ${isActive ? activeClasses : inactiveClasses}`}
+        onClick={() => setCurrentPagePath(destinationUrl)}
+      >
+        {destinationPage}
+      </Link>
     </li>
   );
 }
diff --git a/client/src/Components/header.module.css b/client/src/Components/header.module.css
deleted file mode 100644
index 83f004b..0000000
--- a/client/src/Components/header.module.css
+++ /dev/null
@@ -1,29 +0,0 @@
-.header-container {
-    display: flex;
-    justify-content: space-between;
-    align-items: flex-end;
-}
-
-.nav-container {
-    display: flex;
-    list-style-type: none;
-    margin-bottom: 0px;
-}
-
-.nav-item {
-    margin-right: 10px;
-}
-
-.login-button {
-    margin-right: 10px;
-}
-
-.disabled {
-    cursor: default;
-    pointer-events: none;
-}
-
-.header-end {
-    display: flex;
-    min-width: 10rem;
-}
\ No newline at end of file

From fd93a14067dbaf9aba729fd9342aef237f09482c Mon Sep 17 00:00:00 2001
From: eyeriss42 <iris.mck@pm.me>
Date: Wed, 6 Dec 2023 23:10:58 +0600
Subject: [PATCH 2/5] move header to the left

---
 client/src/Components/Header.tsx | 17 ++++++++++-------
 1 file changed, 10 insertions(+), 7 deletions(-)

diff --git a/client/src/Components/Header.tsx b/client/src/Components/Header.tsx
index 819ee74..a0ffac4 100644
--- a/client/src/Components/Header.tsx
+++ b/client/src/Components/Header.tsx
@@ -11,13 +11,16 @@ export default function IceCreamHeader() {
   }
 
   return (
-    <header className="w-full flex justify-between items-center h-[100px] px-4">
+    <header className="w-full flex justify-between items-center h-[100px] px-4 mt-4">
       <Link to="/" onClick={() => handleSetStarPage("/")}>
-        <IceCreamLogo />
-        Randomice
+      <div className="flex items-center justify-center mb-2">
+        <IceCreamLogo/>
+        </div>
+           <span className="mx-2">Randomice </span>  
       </Link>
+
       <nav>
-        <ul className="flex justify-center list-none mb-0">
+        <ul className="flex justify-center list-none ml-2">
           <NavOption
             className="flex"
             destinationUrl="/hall-of-fame"
@@ -34,9 +37,9 @@ export default function IceCreamHeader() {
           />
         </ul>
       </nav>
-      <div className="flex min-w-[10rem]">
-        <button className="mr-2.5">login/logout</button>
+      <div className="flex ml-auto">
         <CartPage />
+        <button className="ml-2.5 mr-2.5 hover:underline">login/logout</button>
       </div>
     </header>
   );
@@ -54,7 +57,7 @@ function NavOption({ className, destinationUrl, destinationPage, currentPagePath
   const isActive = currentPagePath === destinationUrl;
   const linkBaseClasses = "text-center block py-2 px-4 rounded w-auto whitespace-nowrap";
   const activeClasses = "border bg-purple-500 hover:bg-purple-700 text-white";
-  const inactiveClasses = "border border-white text-black-500 hover:border-black hover:bg-white";
+  const inactiveClasses = "border border-white text-black-500 hover:border-black";
 
   return (
     <li className={`${className}`}>

From 5570d7a46eee235a2f2488490d70e21ac6c44cad Mon Sep 17 00:00:00 2001
From: eyeriss42 <iris.mck@pm.me>
Date: Thu, 7 Dec 2023 11:55:16 +0600
Subject: [PATCH 3/5] add navlink

---
 client/src/Components/Header.tsx | 29 ++++++++---------------------
 1 file changed, 8 insertions(+), 21 deletions(-)

diff --git a/client/src/Components/Header.tsx b/client/src/Components/Header.tsx
index a0ffac4..6441713 100644
--- a/client/src/Components/Header.tsx
+++ b/client/src/Components/Header.tsx
@@ -1,18 +1,12 @@
-import { useState } from "react";
 import { Link } from "react-router-dom";
 import IceCreamLogo from "./IceCreamLogo";
 import CartPage from "../pages/cart/CartPage";
+import { NavLink } from "react-router-dom";
 
 export default function IceCreamHeader() {
-  const [currentPagePath, setCurrentPagePath] = useState<string>("/");
-
-  function handleSetStarPage(path: string) {
-    setCurrentPagePath(path);
-  }
-
   return (
     <header className="w-full flex justify-between items-center h-[100px] px-4 mt-4">
-      <Link to="/" onClick={() => handleSetStarPage("/")}>
+      <Link to="/">
       <div className="flex items-center justify-center mb-2">
         <IceCreamLogo/>
         </div>
@@ -22,18 +16,13 @@ export default function IceCreamHeader() {
       <nav>
         <ul className="flex justify-center list-none ml-2">
           <NavOption
-            className="flex"
             destinationUrl="/hall-of-fame"
             destinationPage="Hall of Fame"
-            currentPagePath={currentPagePath}
-            setCurrentPagePath={setCurrentPagePath}
           />
 
           <NavOption
             destinationUrl="/random-flavors"
             destinationPage="Generate Random Flavors"
-            currentPagePath={currentPagePath}
-            setCurrentPagePath={setCurrentPagePath}
           />
         </ul>
       </nav>
@@ -49,25 +38,23 @@ interface NavOptionProps {
   className?: string;
   destinationUrl: string;
   destinationPage: string;
-  currentPagePath: string;
-  setCurrentPagePath(pageUrl: string): void;
 }
 
-function NavOption({ className, destinationUrl, destinationPage, currentPagePath, setCurrentPagePath }) {
-  const isActive = currentPagePath === destinationUrl;
+function NavOption({ className, destinationUrl, destinationPage}) {
   const linkBaseClasses = "text-center block py-2 px-4 rounded w-auto whitespace-nowrap";
   const activeClasses = "border bg-purple-500 hover:bg-purple-700 text-white";
   const inactiveClasses = "border border-white text-black-500 hover:border-black";
 
   return (
     <li className={`${className}`}>
-      <Link
+      <NavLink
         to={destinationUrl}
-        className={`${linkBaseClasses} ${isActive ? activeClasses : inactiveClasses}`}
-        onClick={() => setCurrentPagePath(destinationUrl)}
+        className={({ isActive }) => 
+          `${linkBaseClasses} ${isActive ? activeClasses : inactiveClasses}`
+      }
       >
         {destinationPage}
-      </Link>
+      </NavLink>
     </li>
   );
 }

From 09cd6b2ccefdb8d832dcd7a95607e43429148084 Mon Sep 17 00:00:00 2001
From: eyeriss42 <iris.mck@pm.me>
Date: Thu, 7 Dec 2023 14:01:29 +0600
Subject: [PATCH 4/5] center flavor thumbnail

---
 client/src/components/FlavorThumbnail.tsx     | 28 +++++++++++--------
 .../components/flavor-thumbnail.module.css    | 18 ------------
 2 files changed, 16 insertions(+), 30 deletions(-)
 delete mode 100644 client/src/components/flavor-thumbnail.module.css

diff --git a/client/src/components/FlavorThumbnail.tsx b/client/src/components/FlavorThumbnail.tsx
index a6a2b5b..03a998a 100644
--- a/client/src/components/FlavorThumbnail.tsx
+++ b/client/src/components/FlavorThumbnail.tsx
@@ -1,5 +1,3 @@
-import styles from "./flavor-thumbnail.module.css";
-
 export type Flavor = {
   name: string;
   price: number;
@@ -11,17 +9,23 @@ export type Flavor = {
 export default function FlavorThumbnail({ flavor }: { flavor: Flavor }) {
   return (
     <>
-      <div className={styles.container}>
-        <img
-          className={styles.image}
-          src={flavor.image}
-          alt={`Photo of ${flavor.name}`}
-        />
-        <p className={styles.text}>
-          <strong>{flavor.name}</strong>
-        </p>
-        <p className={styles.text}>${flavor.price}</p>
+      <div className="max-w-xs mx-auto bg-white p-5">
+        <div className="flex justify-center">
+        <img className="w-2/3 h-1/2 object-contain"
+            src={flavor.image}
+            alt={`Photo of ${flavor.name}`}
+          />
+        </div>
+        <div className="text-center mt-4">
+            <h3 className="text-lg font-semibold">{flavor.name}</h3>    
+            <p className="text-lg mt-2 mb-2">${flavor.price}</p>
+           <button className="bg-white text-black uppercase text-sm px-6 py-3 rounded-full border-2 border-black hover:bg-black hover:text-white focus:outline-none focus:border-4 focus:border-black">
+            Add to your cart
+            </button> 
+        </div>
       </div>
     </>
   );
 }
+
+  
\ No newline at end of file
diff --git a/client/src/components/flavor-thumbnail.module.css b/client/src/components/flavor-thumbnail.module.css
deleted file mode 100644
index f990fb5..0000000
--- a/client/src/components/flavor-thumbnail.module.css
+++ /dev/null
@@ -1,18 +0,0 @@
-@import url('https://fonts.googleapis.com/css2?family=Roboto&display=swap');
-
-.container {
-  width: 200px;
-  height: 300px;
-  border: 1px solid lightgrey;
-  text-align: center;
-}
-
-.image {
-  width: 86%;
-  height: 66.6667%;
-  object-fit: contain;
-}
-
-.text {
-  font-family: 'Roboto', sans-serif;
-}
\ No newline at end of file

From ee658cf04966f729a7155bde00106ea77f8904de Mon Sep 17 00:00:00 2001
From: eyeriss42 <iris.mck@pm.me>
Date: Thu, 4 Apr 2024 15:48:52 -0400
Subject: [PATCH 5/5] curve name

---
 client/package-lock.json         | 43 +++++++++++++++++++++---------
 client/package.json              |  7 ++---
 client/src/Components/Header.tsx | 45 ++++++++++++++++++++++++++------
 server/controllers/halloffame.ts |  4 ++-
 4 files changed, 75 insertions(+), 24 deletions(-)

diff --git a/client/package-lock.json b/client/package-lock.json
index 9ca25ae..a5ad399 100644
--- a/client/package-lock.json
+++ b/client/package-lock.json
@@ -9,7 +9,8 @@
       "version": "0.0.0",
       "dependencies": {
         "@types/uuid": "^9.0.4",
-        "axios": "^1.5.1",
+        "axios": "^1.6.8",
+        "browserlist": "^1.0.1",
         "react": "^18.2.0",
         "react-dom": "^18.2.0",
         "react-router-dom": "^6.16.0",
@@ -395,6 +396,7 @@
       "cpu": [
         "x64"
       ],
+      "dev": true,
       "optional": true,
       "os": [
         "win32"
@@ -1215,11 +1217,11 @@
       }
     },
     "node_modules/axios": {
-      "version": "1.5.1",
-      "resolved": "https://registry.npmjs.org/axios/-/axios-1.5.1.tgz",
-      "integrity": "sha512-Q28iYCWzNHjAm+yEAot5QaAMxhMghWLFVf7rRdwhUI+c2jix2DUXjAHXVi+s1ibs3mjPO/cCgbA++3BjD0vP/A==",
+      "version": "1.6.8",
+      "resolved": "https://registry.npmjs.org/axios/-/axios-1.6.8.tgz",
+      "integrity": "sha512-v/ZHtJDU39mDpyBoFVkETcd/uNdxrWRrg3bKpOKzXFA6Bvqopts6ALSMU3y6ijYxbw2B+wPrIv46egTzJXCLGQ==",
       "dependencies": {
-        "follow-redirects": "^1.15.0",
+        "follow-redirects": "^1.15.6",
         "form-data": "^4.0.0",
         "proxy-from-env": "^1.1.0"
       }
@@ -1261,6 +1263,17 @@
         "node": ">=8"
       }
     },
+    "node_modules/browserlist": {
+      "version": "1.0.1",
+      "resolved": "https://registry.npmjs.org/browserlist/-/browserlist-1.0.1.tgz",
+      "integrity": "sha512-nYq9jiWv+qXcgrJxQzivfEc7Wo2GvAKkeRViE5L3cUJpq4SZO6NZR710I/8T+OjE5BPECbzpm8rpUkwslE3nTg==",
+      "dependencies": {
+        "chalk": "^2.4.1"
+      },
+      "bin": {
+        "browserlist": "cli.js"
+      }
+    },
     "node_modules/browserslist": {
       "version": "4.21.10",
       "resolved": "https://registry.npmjs.org/browserslist/-/browserslist-4.21.10.tgz",
@@ -1321,9 +1334,9 @@
       }
     },
     "node_modules/caniuse-lite": {
-      "version": "1.0.30001543",
-      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001543.tgz",
-      "integrity": "sha512-qxdO8KPWPQ+Zk6bvNpPeQIOH47qZSYdFZd6dXQzb2KzhnSXju4Kd7H1PkSJx6NICSMgo/IhRZRhhfPTHYpJUCA==",
+      "version": "1.0.30001605",
+      "resolved": "https://registry.npmjs.org/caniuse-lite/-/caniuse-lite-1.0.30001605.tgz",
+      "integrity": "sha512-nXwGlFWo34uliI9z3n6Qc0wZaf7zaZWA1CPZ169La5mV3I/gem7bst0vr5XQH5TJXZIMfDeZyOrZnSlVzKxxHQ==",
       "funding": [
         {
           "type": "opencollective",
@@ -1595,6 +1608,7 @@
       "version": "0.18.20",
       "resolved": "https://registry.npmjs.org/esbuild/-/esbuild-0.18.20.tgz",
       "integrity": "sha512-ceqxoedUrcayh7Y7ZX6NdbbDzGROiyVBgC4PriJThBKSVPWnnFHZAkfI1lJT8QFkOwH4qOS2SJkS4wvpGl8BpA==",
+      "dev": true,
       "hasInstallScript": true,
       "bin": {
         "esbuild": "bin/esbuild"
@@ -2023,9 +2037,9 @@
       "dev": true
     },
     "node_modules/follow-redirects": {
-      "version": "1.15.3",
-      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.3.tgz",
-      "integrity": "sha512-1VzOtuEM8pC9SFU1E+8KfTjZyMztRsgEfwQl44z8A25uy13jSzTj6dyK2Df52iV0vgHCfBwLhDWevLn95w5v6Q==",
+      "version": "1.15.6",
+      "resolved": "https://registry.npmjs.org/follow-redirects/-/follow-redirects-1.15.6.tgz",
+      "integrity": "sha512-wWN62YITEaOpSK584EZXJafH1AGpO8RVgElfkuXbTOrPX4fIfOyEpW/CsiNd8JdYrAoOvafRTOEnvsO++qCqFA==",
       "funding": [
         {
           "type": "individual",
@@ -2514,6 +2528,7 @@
       "version": "3.3.6",
       "resolved": "https://registry.npmjs.org/nanoid/-/nanoid-3.3.6.tgz",
       "integrity": "sha512-BGcqMMJuToF7i1rt+2PWSNVnWIkGCU78jBG3RxO/bZlnZPK2Cmi2QaffxGO/2RvWi9sL+FAiRiXMgsyxQ1DIDA==",
+      "dev": true,
       "funding": [
         {
           "type": "github",
@@ -2746,6 +2761,7 @@
       "version": "8.4.31",
       "resolved": "https://registry.npmjs.org/postcss/-/postcss-8.4.31.tgz",
       "integrity": "sha512-PS08Iboia9mts/2ygV3eLpY5ghnUcfLV/EXTOW1E2qYxJKGGBUtNjN76FYHnMs36RmARn41bC0AZmn+rR0OVpQ==",
+      "dev": true,
       "funding": [
         {
           "type": "opencollective",
@@ -3067,6 +3083,7 @@
       "version": "3.28.1",
       "resolved": "https://registry.npmjs.org/rollup/-/rollup-3.28.1.tgz",
       "integrity": "sha512-R9OMQmIHJm9znrU3m3cpE8uhN0fGdXiawME7aZIpQqvpS/85+Vt1Hq1/yVIcYfOmaQiHjvXkQAoJukvLpau6Yw==",
+      "dev": true,
       "bin": {
         "rollup": "dist/bin/rollup"
       },
@@ -3185,6 +3202,7 @@
       "version": "1.0.2",
       "resolved": "https://registry.npmjs.org/source-map-js/-/source-map-js-1.0.2.tgz",
       "integrity": "sha512-R0XvVJ9WusLiqTCEiGCmICCMplcCkIwwR11mOSD9CR5u+IXYdiseeEuXCVAjS54zqwkLcPNnmU4OeJ6tUrWhDw==",
+      "dev": true,
       "engines": {
         "node": ">=0.10.0"
       }
@@ -3418,7 +3436,7 @@
       "version": "5.2.2",
       "resolved": "https://registry.npmjs.org/typescript/-/typescript-5.2.2.tgz",
       "integrity": "sha512-mI4WrpHsbCIcwT9cF4FZvr80QUeKvsUsUvKDoR+X/7XHQH98xYD8YHZg7ANtz2GtZt/CBq2QJ0thkGJMHfqc1w==",
-      "devOptional": true,
+      "dev": true,
       "bin": {
         "tsc": "bin/tsc",
         "tsserver": "bin/tsserver"
@@ -3487,6 +3505,7 @@
       "version": "4.4.9",
       "resolved": "https://registry.npmjs.org/vite/-/vite-4.4.9.tgz",
       "integrity": "sha512-2mbUn2LlUmNASWwSCNSJ/EG2HuSRTnVNaydp6vMCm5VIqJsjMfbIWtbH2kDuwUVW5mMUKKZvGPX/rqeqVvv1XA==",
+      "dev": true,
       "dependencies": {
         "esbuild": "^0.18.10",
         "postcss": "^8.4.27",
diff --git a/client/package.json b/client/package.json
index bf30651..27e7f93 100644
--- a/client/package.json
+++ b/client/package.json
@@ -11,13 +11,14 @@
     "format": "prettier --write \"src/**/*.{ts,tsx}\""
   },
   "dependencies": {
-    "axios": "^1.5.1",
     "@types/uuid": "^9.0.4",
+    "axios": "^1.6.8",
+    "browserlist": "^1.0.1",
     "react": "^18.2.0",
     "react-dom": "^18.2.0",
     "react-router-dom": "^6.16.0",
-    "vite-plugin-svgr": "^3.2.0",
-    "uuid": "^9.0.1"
+    "uuid": "^9.0.1",
+    "vite-plugin-svgr": "^3.2.0"
   },
   "devDependencies": {
     "@types/react": "^18.2.15",
diff --git a/client/src/Components/Header.tsx b/client/src/Components/Header.tsx
index 6441713..24aa891 100644
--- a/client/src/Components/Header.tsx
+++ b/client/src/Components/Header.tsx
@@ -7,10 +7,37 @@ export default function IceCreamHeader() {
   return (
     <header className="w-full flex justify-between items-center h-[100px] px-4 mt-4">
       <Link to="/">
-      <div className="flex items-center justify-center mb-2">
-        <IceCreamLogo/>
+        <div className="flex flex-col justify-center items-center justify-center mb-2">
+          {/* <svg viewBox="-250 0 1000 250">
+            <path
+              id="curve"
+              fill="transparent"
+              d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97"
+              // d="M73.2,148.6c6-9.15,98.25-145.2,267.9-143.4c167.95,1.8,256.2,135.45,262.65,145.5"
+              />
+            <text width="400" fill="#1719ad" color="#1720ad" fontSize="90px" transform="translate(0, 20)">
+              <textPath xlinkHref="#curve">Randomice</textPath>
+            </text>
+          </svg> */}
+
+          <svg viewBox="-40 -350 1000 500">
+            <path
+              id="curve"
+              fill="transparent"
+              // d="M73.2,148.6c4-6.1,65.5-96.8,178.6-95.6c111.3,1.2,170.8,90.3,175.1,97"
+              // d="M127.8,148.6c7-10.675,114.125-169.4,312.05-167.3c194.775,2.1,298.1,157.575,306.425,169.75"
+              d="M73.2,148.6c12.8,-19.52,208.96,-309.76,570.72,-304.64c355.36,3.84,547.52,288.96,560.32,310.4"
+
+              />
+            <text width="400" fill="#1719ad" color="#1720ad" fontSize="200px" >
+              <textPath xlinkHref="#curve">Randomice</textPath>
+            </text>
+          </svg>
+
+          <IceCreamLogo />
+
         </div>
-           <span className="mx-2">Randomice </span>  
+        {/* <span className="mx-2">Randomice </span>   */}
       </Link>
 
       <nav>
@@ -40,18 +67,20 @@ interface NavOptionProps {
   destinationPage: string;
 }
 
-function NavOption({ className, destinationUrl, destinationPage}) {
-  const linkBaseClasses = "text-center block py-2 px-4 rounded w-auto whitespace-nowrap";
+function NavOption({ className, destinationUrl, destinationPage }) {
+  const linkBaseClasses =
+    "text-center block py-2 px-4 rounded w-auto whitespace-nowrap";
   const activeClasses = "border bg-purple-500 hover:bg-purple-700 text-white";
-  const inactiveClasses = "border border-white text-black-500 hover:border-black";
+  const inactiveClasses =
+    "border border-white text-black-500 hover:border-black";
 
   return (
     <li className={`${className}`}>
       <NavLink
         to={destinationUrl}
-        className={({ isActive }) => 
+        className={({ isActive }) =>
           `${linkBaseClasses} ${isActive ? activeClasses : inactiveClasses}`
-      }
+        }
       >
         {destinationPage}
       </NavLink>
diff --git a/server/controllers/halloffame.ts b/server/controllers/halloffame.ts
index 0bab0f1..5c50863 100644
--- a/server/controllers/halloffame.ts
+++ b/server/controllers/halloffame.ts
@@ -22,7 +22,9 @@ hofRouter.get("/", async (request: Request, response: Response) => {
     // Create an array of Flavor Names, total times sold, and user generated boolean
     for (const orderSum of result) {
         const icecream = await Icecream.findById(orderSum['_id']);
-        allFlavors.push({'name': icecream['name'], quantity: orderSum['sum'], isUserGenerated: icecream['isUserGenerated']})
+        if (icecream!=null){
+          allFlavors.push({'name': icecream['name'], quantity: orderSum['sum'], isUserGenerated: icecream['isUserGenerated']})
+        }
       }
 
     // Sort the array, and return only the 100 most commonly sold flavors