updated menu hover colors

ScottyLabs · Jan 5, 2024 · b598e62 · b598e62
1 parent d680654
commit b598e62
Show file tree

Hide file tree

Showing 4 changed files with 60 additions and 14 deletions.
diff --git a/src/components/menu/Menu/MenuItem.tsx b/src/components/menu/Menu/MenuItem.tsx
@@ -2,17 +2,35 @@ import { Link, Typography } from "@mui/material"
 import NextLink from "next/link"
 import { ReactElement } from "react"
 import styles from "./index.module.scss"
+import clsx from "clsx"
 
 const MenuItem = ({
   text,
-  url
+  url,
+  id
 }: {
   text: string
   url: string
+  id: number
 }): ReactElement => {
+  let linkColorClass
+  switch (id % 4) {
+    case 0:
+      linkColorClass = styles.menuItem0
+      break
+    case 1:
+      linkColorClass = styles.menuItem1
+      break
+    case 2:
+      linkColorClass = styles.menuItem2
+      break
+    case 3:
+      linkColorClass = styles.menuItem3
+      break
+  }
   return (
     <NextLink href={url} passHref>
-      <Link className={styles.link}>
+      <Link className={clsx(styles.link, linkColorClass)}>
         <div className={styles.menuItem}>
           <Typography variant="h5">{text}</Typography>
         </div>

diff --git a/src/components/menu/Menu/index.module.scss b/src/components/menu/Menu/index.module.scss
@@ -87,10 +87,28 @@
 
 .link:hover {
   text-decoration: underline;
-  filter: brightness(85%);
   cursor: pointer;
 }
 
+.menuItem0:hover {
+  background-color: $color-theme-blue;
+}
+
+.menuItem1:hover {
+  background-color: $color-theme-purple;
+  color: black;
+}
+
+.menuItem2:hover {
+  background-color: $color-theme-yellow;
+  color: black;
+}
+
+.menuItem3:hover {
+  background-color: $color-theme-pink;
+  color: black;
+}
+
 .menuLine {
   position: relative;
   width: 100%;
@@ -100,5 +118,4 @@
 .menuItem {
   padding: 2em;
   text-align: center;
-  color: $text-color-contrast;
 }
diff --git a/src/components/menu/Menu/index.tsx b/src/components/menu/Menu/index.tsx
@@ -37,41 +37,41 @@ const Menu = (): ReactElement => {
       <Modal open={open} onClose={handleClose}>
         <div className={styles.menuWrapper}>
           <div className={styles.menuBox}>
-            <MenuItem text="HOME" url="/" />
+            <MenuItem text="HOME" url="/" id={0} />
             <MenuLine />
             {status === Status.VERIFIED ? (
               <>
-                <MenuItem text="APPLY" url="/apply" />
+                <MenuItem text="APPLY" url="/apply" id={1} />
                 <MenuLine />
               </>
             ) : null}
             {status === Status.COMPLETED_PROFILE ? (
               <>
-                <MenuItem text="EDIT APPLICATION" url="/apply" />
+                <MenuItem text="EDIT APPLICATION" url="/apply" id={1} />
                 <MenuLine />
               </>
             ) : null}
             {status === Status.ADMITTED ? (
               <>
-                <MenuItem text="CONFIRM" url="/confirmation" />
+                <MenuItem text="CONFIRM" url="/confirmation" id={1} />
                 <MenuLine />
               </>
             ) : null}
             {isAdmin || status === Status.CONFIRMED ? (
               <>
-                <MenuItem text="TEAM" url="/teams" />
+                <MenuItem text="TEAM" url="/teams" id={1} />
                 <MenuLine />
-                <MenuItem text="MESSAGES" url="/messages" />
+                <MenuItem text="MESSAGES" url="/messages" id={2} />
                 <MenuLine />
               </>
             ) : null}
             {isAdmin ? (
               <>
-                <MenuItem text="ADMIN" url="/admin" />
+                <MenuItem text="ADMIN" url="/admin" id={1} />
                 <MenuLine />
               </>
             ) : null}
-            <MenuItem text="LOGOUT" url="/logout" />
+            <MenuItem text="LOGOUT" url="/logout" id={3} />
           </div>
         </div>
       </Modal>

diff --git a/styles/variables.scss b/styles/variables.scss
@@ -4,6 +4,11 @@ $color-secondary: #000;
 $color-primary-darker: #000;
 $color-contrast: #fff;
 
+$color-theme-blue: #1028f1;
+$color-theme-pink: #ff7aa5;
+$color-theme-yellow: #f2dc00;
+$color-theme-purple: #735fff;
+
 $body-background-color: #fff;
 
 // Text colors
@@ -31,8 +36,8 @@ $color-error: #f44336;
 $gradient-color-start: $color-primary-darker;
 $gradient-color-end: $color-secondary;
 
-$wave-gradient-color-start: $color-secondary;
-$wave-gradient-color-end: $color-primary;
+$wave-gradient-color-start: #1b1818;
+$wave-gradient-color-end: #1b1818;
 
 $light-gradient-color-start: #ffffff;
 $light-gradient-color-end: #ffe3e3;
@@ -43,6 +48,12 @@ $dialog-container-gradient: linear-gradient(
   rgba(0, 0, 0, 0.4) 150%
 );
 
+$dialog-container-gradient-lighter: linear-gradient(
+  316.54deg,
+  rgba(255, 255, 255, 0.95) 3%,
+  rgba(0, 0, 0, 0.4) 200%
+);
+
 // Additional component colors
 $button-color: $color-primary;
 $button-color-focused: $color-primary;