Frontend cleanup

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";
 

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";
 

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";
 

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" ? (

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,

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" && (

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-gray" 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>
     );

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>,

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()
             }}

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>

frontend/tailwind.config.ts

@@ -8,12 +8,15 @@ export default {
       'light-blue': '#90c4e5',
       'green': '#119548',
       'yellow': '#F8CC16',
+      'black': '#000000',
+      'red': '#ff0000',
       'tan': '#F2EBE4',
       'dark-orange': "#F26624",
       'light-orange': "#f7a781",
       'medium-orange': '#F58D5C',
       'white': "#FFFFFF",
       'light-gray': '#F8F8F8',
+      'gray': '#808080',
       'pale-orange':'#FFCEB6',
       'white-orange': '#FFF1EB',
     },