From 2b1a14a69df77b48ec40a0aafee5140ee85d0d95 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sat, 24 Jan 2026 23:10:16 -0500
Subject: [PATCH 1/3] Changed logo file name, removed some of the in-line css
 and replaced with tailwind, add black and red to tailwind config

---
 frontend/src/Login.tsx                        |   2 +-
 frontend/src/Register.tsx                     |   2 +-
 frontend/src/RegisterLanding.tsx              |   2 +-
 .../src/images/{bcan_logo.png => logo.png}    | Bin
 .../src/images/{bcan_logo.svg => logo.svg}    |   0
 frontend/src/main-page/header/Bell.tsx        |  28 +---
 frontend/src/main-page/header/Header.tsx      |   2 +-
 frontend/src/main-page/header/UserButton.tsx  |  10 +-
 frontend/src/main-page/header/styles/Bell.css | 140 ++++++++++--------
 .../notifications/GrantNotification.tsx       |   5 +-
 .../notifications/NotificationPopup.tsx       |   2 +-
 .../main-page/restricted/RestrictedPage.tsx   |  10 +-
 .../src/main-page/users/PendingUserCard.tsx   |   4 +-
 frontend/tailwind.config.ts                   |   2 +
 14 files changed, 100 insertions(+), 109 deletions(-)
 rename frontend/src/images/{bcan_logo.png => logo.png} (100%)
 rename frontend/src/images/{bcan_logo.svg => logo.svg} (100%)

diff --git a/frontend/src/Login.tsx b/frontend/src/Login.tsx
index 9de21546..4f96449e 100644
--- a/frontend/src/Login.tsx
+++ b/frontend/src/Login.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { useAuthContext } from "./context/auth/authContext";
 import { observer } from "mobx-react-lite";
-import logo from "./images/bcan_logo.svg";
+import logo from "./images/logo.svg";
 import { useNavigate } from "react-router-dom";
 import "./external/bcanSatchel/mutators";
 
diff --git a/frontend/src/Register.tsx b/frontend/src/Register.tsx
index 58fe0a11..8e48a980 100644
--- a/frontend/src/Register.tsx
+++ b/frontend/src/Register.tsx
@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { observer } from "mobx-react-lite";
 import { useNavigate } from "react-router-dom";
-import logo from "./images/bcan_logo.svg";
+import logo from "./images/logo.svg";
 import { useAuthContext } from "./context/auth/authContext";
 import "./styles/index.css";
 
diff --git a/frontend/src/RegisterLanding.tsx b/frontend/src/RegisterLanding.tsx
index 4af03c5f..3562e756 100644
--- a/frontend/src/RegisterLanding.tsx
+++ b/frontend/src/RegisterLanding.tsx
@@ -1,5 +1,5 @@
 import { Link } from "react-router-dom";
-import logo from "./images/bcan_logo.svg";
+import logo from "./images/logo.svg";
 import { ButtonColorOption } from "./custom/RingButton";
 import { useAuthContext } from "./context/auth/authContext";
 
diff --git a/frontend/src/images/bcan_logo.png b/frontend/src/images/logo.png
similarity index 100%
rename from frontend/src/images/bcan_logo.png
rename to frontend/src/images/logo.png
diff --git a/frontend/src/images/bcan_logo.svg b/frontend/src/images/logo.svg
similarity index 100%
rename from frontend/src/images/bcan_logo.svg
rename to frontend/src/images/logo.svg
diff --git a/frontend/src/main-page/header/Bell.tsx b/frontend/src/main-page/header/Bell.tsx
index 5e06da94..0e9fd649 100644
--- a/frontend/src/main-page/header/Bell.tsx
+++ b/frontend/src/main-page/header/Bell.tsx
@@ -45,34 +45,22 @@ const BellButton: React.FC<BellButtonProps> = observer(({ setOpenModal, openModa
   return (
     <div className="bell-container">
       <div
-        className="bell-wrapper"
-        style={{ position: "relative", display: "inline-block" }}
+        className="bell-wrapper inline-block relative p-2 hover:bg-light-orange rounded-md"
       >
         <button
-          className={`bell-button ${openModal === "bell" ? "hovered" : ""}`}
+          className={`bell-button ${openModal === "bell" ? "hovered" : ""} bg-none border-none relative`}
           onClick={handleClick}
-          style={{ background: "none", position: "relative" }}
         >
           <FontAwesomeIcon
-            icon={faBell}
-            style={{ color: "black"}}
+            icon={faBell} className="text-black"
           />
-        </button>
-
-        {notifications.length > 0 && (
-          <span
-            style={{
-              position: "absolute",
-              top: "0px",
-              right: "0px",
-              width: "10px",
-              height: "10px",
-              backgroundColor: "red",
-              borderRadius: "50%",
-              border: "2px solid white",
-            }}
+          {notifications.length == 0 && (
+          <span className="absolute top-0 -right-[0.10rem] w-3 h-3 rounded-full bg-red border-2 border-white"
           />
         )}
+        </button>
+
+        
       </div>
 
       {(openModal === "bell" ? (
diff --git a/frontend/src/main-page/header/Header.tsx b/frontend/src/main-page/header/Header.tsx
index 506b48e5..5dcbaff9 100644
--- a/frontend/src/main-page/header/Header.tsx
+++ b/frontend/src/main-page/header/Header.tsx
@@ -1,6 +1,6 @@
 import { Link } from "react-router-dom";
 import "./styles/Header.css";
-import logo from "../../images/bcan_logo.svg";
+import logo from "../../images/logo.svg";
 import {
   Status,
   stringToStatus,
diff --git a/frontend/src/main-page/header/UserButton.tsx b/frontend/src/main-page/header/UserButton.tsx
index 1b6ff1ca..95a1b654 100644
--- a/frontend/src/main-page/header/UserButton.tsx
+++ b/frontend/src/main-page/header/UserButton.tsx
@@ -1,8 +1,6 @@
 import { faUser } from "@fortawesome/free-solid-svg-icons";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import AccountInfo from "./AccountInfo";
-
-import "./styles/UserButton.css";
 import { useAuthContext } from "../../context/auth/authContext";
 
 interface UserButtonProps {
@@ -20,15 +18,13 @@ const UserButton: React.FC<UserButtonProps> = ({ setOpenModal, openModal }) => {
   return (
     <div className="user-container">
       <div
-        className="user-wrapper"
-        style={{ position: "relative", display: "inline-block" }}
+        className="user-wrapper relative inline-block p-2 hover:bg-light-orange rounded-md"
       >
         <button
-          className={`user-button ${openModal === "user" ? "hovered" : ""}`}
+          className={`user-button ${openModal === "user" ? "hovered" : ""} bg-none border-none relative`}
           onClick={toggleAccountInfo}
-          style={{ background: "none", position: "relative" }}
         >
-          <FontAwesomeIcon icon={faUser} style={{ color: "black" }} />
+          <FontAwesomeIcon className="text-black" icon={faUser} />
         </button>
 
         {openModal === "user" && (
diff --git a/frontend/src/main-page/header/styles/Bell.css b/frontend/src/main-page/header/styles/Bell.css
index 6568aa77..a5a12963 100644
--- a/frontend/src/main-page/header/styles/Bell.css
+++ b/frontend/src/main-page/header/styles/Bell.css
@@ -3,97 +3,109 @@
 @import "tailwindcss/utilities";
 
 .bell-container {
-    display: inline-block;
-    top: 10px;
-    right: 10px;
+  display: inline-block;
+  top: 10px;
+  right: 10px;
 }
 
 .bell-container button {
-    background-color: 'transparent';
-    border: none;
-    border-radius: 5%;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
+  background-color: "transparent";
+  border: none;
+  border-radius: 5%;
+  cursor: pointer;
+  transition:
+    background-color 0.3s,
+    color 0.3s;
 }
 
 .bell-container:hover {
-    background-color: #f39c12;
-    border-radius: 5%;
-    color: white;
+  background-color: #f39c12;
+  border-radius: 5%;
+  color: white;
 }
 
 .bell-button.hovered {
-    background-color: #f39c12;
-    /* Hover color */
-    color: white;
+  background-color: #f39c12;
+  /* Hover color */
+  color: white;
 }
 
 .bell-button:hover {
-    background-color: #f39c12;
-    color: white;
+  background-color: #f39c12;
+  color: white;
 }
 
-
 .notification-modal {
-    pointer-events: auto;
-    position: absolute;
-    top: 50px;
-    right: 0;
-    background-color: #f7a781;
-    border: 1px solid #F26624;
-    border-radius: 8px;
-    box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-    z-index: 1000;
-    min-width: 200px;
-    max-width: 300px;
-    padding: 16px;
-    margin: 0px 16px;
-    overflow-x: auto;
-    overflow-y: auto;
-    z-index: 2000;
+  pointer-events: auto;
+  position: absolute;
+  top: 50px;
+  right: 0;
+  background-color: #f7a781;
+  border: 1px solid #f26624;
+  border-radius: 8px;
+  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
+  z-index: 1000;
+  min-width: 200px;
+  max-width: 300px;
+  padding: 16px;
+  margin: 0px 16px;
+  overflow-x: auto;
+  overflow-y: auto;
+  z-index: 2000;
 }
 
 .notification-modal-content ul {
-    list-style-type: none;
-    padding: 0;
-    margin: 0;
-    width: 100%;
+  list-style-type: none;
+  padding: 0;
+  margin: 0;
+  width: 100%;
 }
 
 .notification-item {
-    list-style-type: none;
-    padding: 8px 12px;
-    margin-bottom: 8px;
-    border: 1px solid #F58D5C;
-    border-radius: 10px;
-    background-color: #F2EBE4;
-    color: black;
-    text-align: center;
-    font-size: 1rem;
-    width: 90%;
-    margin-left: auto;
-    margin-right: auto;
+  list-style-type: none;
+  padding: 8px 12px;
+  margin-bottom: 8px;
+  border: 1px solid #f58d5c;
+  border-radius: 10px;
+  background-color: #f2ebe4;
+  color: black;
+  text-align: center;
+  font-size: 1rem;
+  width: 90%;
+  margin-left: auto;
+  margin-right: auto;
 }
 
 .notification-modal-content {
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    text-align: center;
-    gap: 12px;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  text-align: center;
+  gap: 12px;
 }
 
 div.notification-modal-content .notification-close-button {
-    margin-top: 12px;
-    padding: 6px 12px;
-    color: black;
-    border: 2px solid #F26624;
-    border-radius: 5px;
-    cursor: pointer;
-    font-size: 1rem;
-    text-align: center;
+  margin-top: 12px;
+  padding: 6px 12px;
+  color: black;
+  border: 2px solid #f26624;
+  border-radius: 5px;
+  cursor: pointer;
+  font-size: 1rem;
+  text-align: center;
 }
 
 .notification-close-button:hover {
-    background-color: #965217;
-}
\ No newline at end of file
+  background-color: #965217;
+}
+
+.notification-dot {
+  position: absolute;
+  top: 0px;
+  right: 0px;
+  width: 10px;
+  height: 10px;
+  background-color: red;
+  border-radius: 50%;
+  border: 2px solid white;
+}
diff --git a/frontend/src/main-page/notifications/GrantNotification.tsx b/frontend/src/main-page/notifications/GrantNotification.tsx
index ee09a9ca..0483ccb0 100644
--- a/frontend/src/main-page/notifications/GrantNotification.tsx
+++ b/frontend/src/main-page/notifications/GrantNotification.tsx
@@ -22,17 +22,16 @@ const GrantNotification: React.FC<GrantNotificationProps> = ({
     return (
         <div className="grant-notification" role="listitem">
             <div className="bell-notif">
-                <FontAwesomeIcon icon={faBell} style={{ color: "gray"}} />
+                <FontAwesomeIcon className="text-red" icon={faBell}/>
             </div>
             <div className="notification-text">
                 <div className="notification-title">{title}</div>
                 <div className="notification-message">{message}</div>
             </div>
             <FaTrash
-                className="notification-trash-icon"
+                className="notification-trash-icon cursor-pointer"
                 title="Delete notification"
                 onClick={handleDelete}
-                style={{ cursor: "pointer" }}
             />
             </div>
     );
diff --git a/frontend/src/main-page/notifications/NotificationPopup.tsx b/frontend/src/main-page/notifications/NotificationPopup.tsx
index 91a89f7b..ca7e4661 100644
--- a/frontend/src/main-page/notifications/NotificationPopup.tsx
+++ b/frontend/src/main-page/notifications/NotificationPopup.tsx
@@ -71,7 +71,7 @@ const NotificationPopup: React.FC<NotificationPopupProps> = observer(({
                         />
                     ))
                 ) : (
-                    <p className="empty-text">No new notifications</p>
+                    <p className="empty-text pl-2 pb-2">No new notifications</p>
                 )}
             </div>
         </div>,
diff --git a/frontend/src/main-page/restricted/RestrictedPage.tsx b/frontend/src/main-page/restricted/RestrictedPage.tsx
index f9421e91..02b48bc9 100644
--- a/frontend/src/main-page/restricted/RestrictedPage.tsx
+++ b/frontend/src/main-page/restricted/RestrictedPage.tsx
@@ -1,6 +1,5 @@
 import { Link } from "react-router-dom";
-import logo from "../../images/bcan_logo.svg";
-import { ButtonColorOption } from "../../custom/RingButton";
+import logo from "../../images/logo.svg";
 import { useAuthContext } from "../../context/auth/authContext";
 
 function RestrictedPage() {
@@ -17,12 +16,7 @@ function RestrictedPage() {
         </p>
         <Link to="/login">
           <button
-            style={{
-              backgroundColor: ButtonColorOption.ORANGE ,
-              color: 'black',
-              borderStyle: 'solid', borderColor: 'black', borderWidth: '1px'
-            }}
-            className="py-2 px-4 rounded"
+            className="py-2 px-4 rounded w-48 font-semibold grant-button text-black bg-light-orange"
             onClick={() => {
               logout()
             }}
diff --git a/frontend/src/main-page/users/PendingUserCard.tsx b/frontend/src/main-page/users/PendingUserCard.tsx
index 5a4867a0..a2b89560 100644
--- a/frontend/src/main-page/users/PendingUserCard.tsx
+++ b/frontend/src/main-page/users/PendingUserCard.tsx
@@ -100,13 +100,13 @@ const PendingUserCard = ({
           className="bg-[#c6fbd3] w-8 h-8 focus:outline-none rounded"
           onClick={approveUser}
           disabled={isLoading}>
-          <FontAwesomeIcon icon={faCheck} style={{ color: "black" }} />
+          <FontAwesomeIcon icon={faCheck} className="text-black" />
         </button>
         <button 
         className="bg-[#fe9d92] w-8 h-8 focus:outline-none rounded"
           onClick={rejectUser}
           disabled={isLoading}>
-          <FontAwesomeIcon icon={faX} style={{ color: "black" }} />
+          <FontAwesomeIcon icon={faX} className="text-black"/>
         </button>
       </div>
     </div>
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 4d78e2c4..5033ed25 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -8,6 +8,8 @@ export default {
       'light-blue': '#90c4e5',
       'green': '#119548',
       'yellow': '#F8CC16',
+      'black': '#000000',
+      'red': '#ff0000',
       'tan': '#F2EBE4',
       'dark-orange': "#F26624",
       'light-orange': "#f7a781",

From e0dca81bc4e7da1e8dd4e07f30fb652a8b2fa989 Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sat, 24 Jan 2026 23:26:29 -0500
Subject: [PATCH 2/3] Removed unused css files

---
 frontend/src/main-page/header/styles/Bell.css | 111 ------------------
 .../main-page/header/styles/UserButton.css    |  23 ----
 2 files changed, 134 deletions(-)
 delete mode 100644 frontend/src/main-page/header/styles/Bell.css
 delete mode 100644 frontend/src/main-page/header/styles/UserButton.css

diff --git a/frontend/src/main-page/header/styles/Bell.css b/frontend/src/main-page/header/styles/Bell.css
deleted file mode 100644
index a5a12963..00000000
--- a/frontend/src/main-page/header/styles/Bell.css
+++ /dev/null
@@ -1,111 +0,0 @@
-@import "tailwindcss/base";
-@import "tailwindcss/components";
-@import "tailwindcss/utilities";
-
-.bell-container {
-  display: inline-block;
-  top: 10px;
-  right: 10px;
-}
-
-.bell-container button {
-  background-color: "transparent";
-  border: none;
-  border-radius: 5%;
-  cursor: pointer;
-  transition:
-    background-color 0.3s,
-    color 0.3s;
-}
-
-.bell-container:hover {
-  background-color: #f39c12;
-  border-radius: 5%;
-  color: white;
-}
-
-.bell-button.hovered {
-  background-color: #f39c12;
-  /* Hover color */
-  color: white;
-}
-
-.bell-button:hover {
-  background-color: #f39c12;
-  color: white;
-}
-
-.notification-modal {
-  pointer-events: auto;
-  position: absolute;
-  top: 50px;
-  right: 0;
-  background-color: #f7a781;
-  border: 1px solid #f26624;
-  border-radius: 8px;
-  box-shadow: 0px 4px 6px rgba(0, 0, 0, 0.1);
-  z-index: 1000;
-  min-width: 200px;
-  max-width: 300px;
-  padding: 16px;
-  margin: 0px 16px;
-  overflow-x: auto;
-  overflow-y: auto;
-  z-index: 2000;
-}
-
-.notification-modal-content ul {
-  list-style-type: none;
-  padding: 0;
-  margin: 0;
-  width: 100%;
-}
-
-.notification-item {
-  list-style-type: none;
-  padding: 8px 12px;
-  margin-bottom: 8px;
-  border: 1px solid #f58d5c;
-  border-radius: 10px;
-  background-color: #f2ebe4;
-  color: black;
-  text-align: center;
-  font-size: 1rem;
-  width: 90%;
-  margin-left: auto;
-  margin-right: auto;
-}
-
-.notification-modal-content {
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-  text-align: center;
-  gap: 12px;
-}
-
-div.notification-modal-content .notification-close-button {
-  margin-top: 12px;
-  padding: 6px 12px;
-  color: black;
-  border: 2px solid #f26624;
-  border-radius: 5px;
-  cursor: pointer;
-  font-size: 1rem;
-  text-align: center;
-}
-
-.notification-close-button:hover {
-  background-color: #965217;
-}
-
-.notification-dot {
-  position: absolute;
-  top: 0px;
-  right: 0px;
-  width: 10px;
-  height: 10px;
-  background-color: red;
-  border-radius: 50%;
-  border: 2px solid white;
-}
diff --git a/frontend/src/main-page/header/styles/UserButton.css b/frontend/src/main-page/header/styles/UserButton.css
deleted file mode 100644
index 1273aa99..00000000
--- a/frontend/src/main-page/header/styles/UserButton.css
+++ /dev/null
@@ -1,23 +0,0 @@
-
-.user-container {
-    display: inline-block;
-}
-
-.user-container button {
-    background-color: transparent;
-    border: none;
-    cursor: pointer;
-    transition: background-color 0.3s, color 0.3s;
-    padding: 8px;
-    border-radius: 5px;
-}
-
-.user-button.hovered {
-    background-color: #f39c12;
-    color: white;
-}
-
-.user-button:hover {
-    background-color: #f39c12;
-    color: white;
-} 
\ No newline at end of file

From b80ff4d79a7afb3c77867bcbfc81d88de49762ed Mon Sep 17 00:00:00 2001
From: Jane Kamata <janekamata8@gmail.com>
Date: Sun, 25 Jan 2026 23:36:29 -0500
Subject: [PATCH 3/3] Fixing color typo

---
 frontend/src/main-page/header/Bell.tsx                     | 2 +-
 frontend/src/main-page/notifications/GrantNotification.tsx | 2 +-
 frontend/tailwind.config.ts                                | 1 +
 3 files changed, 3 insertions(+), 2 deletions(-)

diff --git a/frontend/src/main-page/header/Bell.tsx b/frontend/src/main-page/header/Bell.tsx
index 0e9fd649..827d8c99 100644
--- a/frontend/src/main-page/header/Bell.tsx
+++ b/frontend/src/main-page/header/Bell.tsx
@@ -54,7 +54,7 @@ const BellButton: React.FC<BellButtonProps> = observer(({ setOpenModal, openModa
           <FontAwesomeIcon
             icon={faBell} className="text-black"
           />
-          {notifications.length == 0 && (
+          {notifications.length > 0 && (
           <span className="absolute top-0 -right-[0.10rem] w-3 h-3 rounded-full bg-red border-2 border-white"
           />
         )}
diff --git a/frontend/src/main-page/notifications/GrantNotification.tsx b/frontend/src/main-page/notifications/GrantNotification.tsx
index 0483ccb0..84c6eb1a 100644
--- a/frontend/src/main-page/notifications/GrantNotification.tsx
+++ b/frontend/src/main-page/notifications/GrantNotification.tsx
@@ -22,7 +22,7 @@ const GrantNotification: React.FC<GrantNotificationProps> = ({
     return (
         <div className="grant-notification" role="listitem">
             <div className="bell-notif">
-                <FontAwesomeIcon className="text-red" icon={faBell}/>
+                <FontAwesomeIcon className="text-gray" icon={faBell}/>
             </div>
             <div className="notification-text">
                 <div className="notification-title">{title}</div>
diff --git a/frontend/tailwind.config.ts b/frontend/tailwind.config.ts
index 5033ed25..2ffabc6e 100644
--- a/frontend/tailwind.config.ts
+++ b/frontend/tailwind.config.ts
@@ -16,6 +16,7 @@ export default {
       'medium-orange': '#F58D5C',
       'white': "#FFFFFF",
       'light-gray': '#F8F8F8',
+      'gray': '#808080',
       'pale-orange':'#FFCEB6',
       'white-orange': '#FFF1EB',
     },