From 881a6d147d5349bdb8139404e4bd195b36d1c270 Mon Sep 17 00:00:00 2001
From: Lejun Deng <darwindenglejun@gmail.com>
Date: Sun, 21 Apr 2024 11:23:25 -0400
Subject: [PATCH] Re-added profile dropdown, fixed hight issues

---
 .../src/navbar/account/MeDropdown.module.css  |   1 -
 frontend/src/navbar/account/MeDropdown.tsx    |   7 +-
 frontend/src/pages/Courses/Courses.tsx        | 121 +++++++++++++-----
 frontend/src/pages/Graduation/Graduation.tsx  |  83 +++++++-----
 frontend/src/pages/Majors/Majors.tsx          |  66 ++++++----
 5 files changed, 185 insertions(+), 93 deletions(-)

diff --git a/frontend/src/navbar/account/MeDropdown.module.css b/frontend/src/navbar/account/MeDropdown.module.css
index 1adc531..c05f09d 100644
--- a/frontend/src/navbar/account/MeDropdown.module.css
+++ b/frontend/src/navbar/account/MeDropdown.module.css
@@ -37,7 +37,6 @@
 
 .navbarMe {
   /* padding-left: 1rem; */
-  height: 40px;
   display: flex;
 }
 
diff --git a/frontend/src/navbar/account/MeDropdown.tsx b/frontend/src/navbar/account/MeDropdown.tsx
index 30873dc..8a71c8c 100644
--- a/frontend/src/navbar/account/MeDropdown.tsx
+++ b/frontend/src/navbar/account/MeDropdown.tsx
@@ -8,7 +8,10 @@ import { FaSignOutAlt } from "react-icons/fa";
 import clsx from "clsx";
 
 import styles from "./MeDropdown.module.css";
-import { scrollToTop, useComponentVisible } from "../../commons/utilities/display";
+import {
+  scrollToTop,
+  useComponentVisible,
+} from "../../commons/utilities/display";
 import { SurfaceComponent, TextComponent, HoverText } from "../Typography";
 
 function DropdownItem({
@@ -102,6 +105,7 @@ function DropdownContent({
           smooth */}
         <div>
           <Col className="px-3 pt-3">
+            {/*
             <DropdownItem icon={FcInfo} to="/about">
               About
             </DropdownItem>
@@ -111,6 +115,7 @@ function DropdownContent({
             <DropdownItem icon={FcNews} to="/releases">
               Release Notes
             </DropdownItem>
+        */}
             <DropdownItem icon={FaSignOutAlt} iconColor="#ed5f5f">
               Sign Out
             </DropdownItem>
diff --git a/frontend/src/pages/Courses/Courses.tsx b/frontend/src/pages/Courses/Courses.tsx
index c874b57..94eac8d 100644
--- a/frontend/src/pages/Courses/Courses.tsx
+++ b/frontend/src/pages/Courses/Courses.tsx
@@ -1,4 +1,3 @@
-
 import React, { useState, useEffect } from "react";
 import styles from "./Courses.module.css";
 
@@ -6,7 +5,7 @@ import YearBox from "./components/YearBox";
 import AddCourseMenu from "./components/add_course/AddCourse";
 
 import { MockStudent } from "./../../commons/mock/MockStudent";
-
+import MeDropdown from "../../navbar/account/MeDropdown";
 import nav_styles from "./../../commons/components/navbar/NavBar.module.css";
 import img_logo from "./../../commons/images/ma_logo.png";
 import { NavLink } from "react-router-dom";
@@ -15,59 +14,102 @@ function NavBar() {
   return (
     <div className={nav_styles.NavBar}>
       <div style={{ marginLeft: "20px" }}>
-        <img src={img_logo} alt="" style={{ width: "150px", height: "auto", marginRight: "10px" }}/>
+        <img
+          src={img_logo}
+          alt=""
+          style={{ width: "150px", height: "auto", marginRight: "10px" }}
+        />
       </div>
 
       <div className={nav_styles.row} style={{ marginRight: "20px" }}>
-        <NavLink to="/" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+        <NavLink
+          to="/"
+          className={({ isActive }) =>
+            isActive ? nav_styles.activeLink : nav_styles.dormantLink
+          }
+        >
           Graduation
         </NavLink>
-        <NavLink to="/courses" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+        <NavLink
+          to="/courses"
+          className={({ isActive }) =>
+            isActive ? nav_styles.activeLink : nav_styles.dormantLink
+          }
+        >
           Courses
         </NavLink>
-        <NavLink to="/majors" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+        <NavLink
+          to="/majors"
+          className={({ isActive }) =>
+            isActive ? nav_styles.activeLink : nav_styles.dormantLink
+          }
+        >
           Majors
         </NavLink>
-        {/* <MeDropdown /> */}
+        <MeDropdown />
       </div>
     </div>
   );
 }
 
 export interface DisplaySetting {
-  rating: boolean,
-  workload: boolean,
+  rating: boolean;
+  workload: boolean;
 }
 
 const defaultDisplaySetting = { rating: true, workload: true };
 
-function Settings(props: { displaySetting: DisplaySetting, updateDisplaySetting: Function }) {
-    
+function Settings(props: {
+  displaySetting: DisplaySetting;
+  updateDisplaySetting: Function;
+}) {
   const [isOpen, setIsOpen] = useState(false);
-  const toggleDropdown = () => { setIsOpen(!isOpen); };
+  const toggleDropdown = () => {
+    setIsOpen(!isOpen);
+  };
 
   const throwBack = (key: string) => {
-    if(key === "rating"){
-      const newSetting = { ...props.displaySetting, rating: !props.displaySetting.rating };
+    if (key === "rating") {
+      const newSetting = {
+        ...props.displaySetting,
+        rating: !props.displaySetting.rating,
+      };
       props.updateDisplaySetting(newSetting);
-    } else 
-    if(key === "workload"){
-      const newSetting = { ...props.displaySetting, workload: !props.displaySetting.workload };
+    } else if (key === "workload") {
+      const newSetting = {
+        ...props.displaySetting,
+        workload: !props.displaySetting.workload,
+      };
       props.updateDisplaySetting(newSetting);
     }
-  }
+  };
 
   return (
     <div className={styles.row} style={{ alignItems: "center" }}>
-      <button className={`${styles.optionsButton} ${isOpen ? styles.activeButton : ''}`} onClick={toggleDropdown}>
+      <button
+        className={`${styles.optionsButton} ${
+          isOpen ? styles.activeButton : ""
+        }`}
+        onClick={toggleDropdown}
+      >
         Options
       </button>
       {isOpen && (
         <div style={{ display: "flex" }}>
-          <button className={`${styles.optionsChoice} ${props.displaySetting.rating ? styles.activeButton : ''}`} onClick={() => throwBack("rating")}>
+          <button
+            className={`${styles.optionsChoice} ${
+              props.displaySetting.rating ? styles.activeButton : ""
+            }`}
+            onClick={() => throwBack("rating")}
+          >
             Rating
           </button>
-          <button className={`${styles.optionsChoice} ${props.displaySetting.workload ? styles.activeButton : ''}`} onClick={() => throwBack("workload")}>
+          <button
+            className={`${styles.optionsChoice} ${
+              props.displaySetting.workload ? styles.activeButton : ""
+            }`}
+            onClick={() => throwBack("workload")}
+          >
             Workload
           </button>
         </div>
@@ -77,35 +119,44 @@ function Settings(props: { displaySetting: DisplaySetting, updateDisplaySetting:
 }
 
 function Courses() {
-
   const [displaySetting, setDisplaySetting] = useState(defaultDisplaySetting);
-  const updateDisplaySetting = (newSetting: DisplaySetting) => { setDisplaySetting(newSetting); };
+  const updateDisplaySetting = (newSetting: DisplaySetting) => {
+    setDisplaySetting(newSetting);
+  };
   useEffect(() => {}, [displaySetting]);
 
   const [addCourse, setAddCourse] = useState(false);
-  const toggleAddCourse = () => { setAddCourse(!addCourse); };
+  const toggleAddCourse = () => {
+    setAddCourse(!addCourse);
+  };
   useEffect(() => {}, [addCourse]);
 
   const yearboxComponents = [];
-  for(let i=0; i <MockStudent["metadata"].length; i++) 
-  {
-    yearboxComponents.push(<YearBox year={MockStudent["metadata"][i]} displaySetting={displaySetting}/>); 
+  for (let i = 0; i < MockStudent["metadata"].length; i++) {
+    yearboxComponents.push(
+      <YearBox
+        year={MockStudent["metadata"][i]}
+        displaySetting={displaySetting}
+      />
+    );
   }
 
-  return(
+  return (
     <div>
-      <NavBar/>
-    
+      <NavBar />
+
       <div className={styles.CoursesPage}>
         <button className={styles.AddCourseButton} onClick={toggleAddCourse}>
           +
         </button>
-        <div className={`${styles.AddCourseMenuDormant} ${addCourse ? styles.AddCourseMenuActive : ''}`}>
-          {addCourse && (<AddCourseMenu/>)}
-        </div>
-        <div className={styles.column}>
-          {yearboxComponents}
+        <div
+          className={`${styles.AddCourseMenuDormant} ${
+            addCourse ? styles.AddCourseMenuActive : ""
+          }`}
+        >
+          {addCourse && <AddCourseMenu />}
         </div>
+        <div className={styles.column}>{yearboxComponents}</div>
       </div>
     </div>
   );
diff --git a/frontend/src/pages/Graduation/Graduation.tsx b/frontend/src/pages/Graduation/Graduation.tsx
index 2e80077..01dc253 100644
--- a/frontend/src/pages/Graduation/Graduation.tsx
+++ b/frontend/src/pages/Graduation/Graduation.tsx
@@ -1,12 +1,11 @@
-
 import React, { useState } from "react";
 import styles from "./Graduation.module.css";
 
 import GraduationDistribution from "./components/DistributionTable";
 import GraduationOverview from "./components/Overview";
 
-import { CPSC } from "./../../commons/mock/MockProgram"
-
+import { CPSC } from "./../../commons/mock/MockProgram";
+import MeDropdown from "../../navbar/account/MeDropdown";
 import nav_styles from "./../../commons/components/navbar/NavBar.module.css";
 import img_logo from "./../../commons/images/ma_logo.png";
 import { NavLink } from "react-router-dom";
@@ -14,62 +13,80 @@ import { NavLink } from "react-router-dom";
 function NavBar() {
   return (
     <div className={nav_styles.NavBar}>
-      
       <div style={{ marginLeft: "20px" }}>
-        <img src={img_logo} alt="" style={{ width: "150px", height: "auto", marginRight: "10px" }}/>
+        <img
+          src={img_logo}
+          alt=""
+          style={{ width: "150px", height: "auto", marginRight: "10px" }}
+        />
       </div>
 
       <div className={nav_styles.row} style={{ marginRight: "20px" }}>
-        <NavLink to="/" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+        <NavLink
+          to="/"
+          className={({ isActive }) =>
+            isActive ? nav_styles.activeLink : nav_styles.dormantLink
+          }
+        >
           Graduation
         </NavLink>
-        <NavLink to="/courses" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+        <NavLink
+          to="/courses"
+          className={({ isActive }) =>
+            isActive ? nav_styles.activeLink : nav_styles.dormantLink
+          }
+        >
           Courses
         </NavLink>
-        <NavLink to="/majors" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+        <NavLink
+          to="/majors"
+          className={({ isActive }) =>
+            isActive ? nav_styles.activeLink : nav_styles.dormantLink
+          }
+        >
           Majors
         </NavLink>
-        {/* <MeDropdown /> */}
+        <MeDropdown />
       </div>
     </div>
   );
 }
 
-function Recommendations(){
-  return(
+function Recommendations() {
+  return (
     <div>
-      <div style={{ fontSize: "30px", fontWeight: "500" }}>
-        Hello, Ryan!
-      </div>
+      <div style={{ fontSize: "30px", fontWeight: "500" }}>Hello, Ryan!</div>
     </div>
   );
 }
 
 function Graduation() {
+  const UserYear = () => {
+    return 2;
+  };
+  const [currYear, setCurrYear] = useState(UserYear());
+  const alterCurrYear = (num: number) => {
+    setCurrYear(num);
+  };
 
-const UserYear = () => { return 2; }
-const [currYear, setCurrYear] = useState(UserYear());
-const alterCurrYear = (num: number) => { 
-  setCurrYear(num); 
-};
+  return (
+    <div>
+      <NavBar />
 
-return (
-  <div>
-    
-    <NavBar/>
-    
-    <div className={styles.GraduationPage}>
-      <div className={styles.row}>
-        <div className={styles.column} style={{ marginRight: "60px" }}>
-          <Recommendations/>
-          <GraduationDistribution currYear={currYear} alterCurrYear={alterCurrYear}/>
+      <div className={styles.GraduationPage}>
+        <div className={styles.row}>
+          <div className={styles.column} style={{ marginRight: "60px" }}>
+            <Recommendations />
+            <GraduationDistribution
+              currYear={currYear}
+              alterCurrYear={alterCurrYear}
+            />
+          </div>
+          <GraduationOverview degree={CPSC.degrees[0]} />
         </div>
-        <GraduationOverview degree={CPSC.degrees[0]}/>
       </div>
     </div>
-  </div>
-);
+  );
 }
 
 export default Graduation;
-
diff --git a/frontend/src/pages/Majors/Majors.tsx b/frontend/src/pages/Majors/Majors.tsx
index ae9b11a..d486573 100644
--- a/frontend/src/pages/Majors/Majors.tsx
+++ b/frontend/src/pages/Majors/Majors.tsx
@@ -1,5 +1,4 @@
-
-import React, { useState } from 'react';
+import React, { useState } from "react";
 import styles from "./Majors.module.css";
 
 import ProgramRequirementsBox from "./components/ProgramRequirementsBox";
@@ -8,7 +7,7 @@ import ProgramMetadataBox from "./components/ProgramMetadataBox";
 import nav_styles from "./../../commons/components/navbar/NavBar.module.css";
 import img_logo from "./../../commons/images/ma_logo.png";
 import { NavLink } from "react-router-dom";
-
+import MeDropdown from "../../navbar/account/MeDropdown";
 import { CGSC, CPSC, ECON, HIST } from "./../../commons/mock/MockProgram";
 const programs = [CGSC, CPSC, ECON, HIST];
 
@@ -16,54 +15,75 @@ function NavBar() {
   return (
     <div className={nav_styles.NavBar}>
       <div style={{ marginLeft: "20px" }}>
-        <img src={img_logo} alt="" style={{ width: "150px", height: "auto", marginRight: "10px" }}/>
+        <img
+          src={img_logo}
+          alt=""
+          style={{ width: "150px", height: "auto", marginRight: "10px" }}
+        />
       </div>
 
       <div className={nav_styles.row} style={{ marginRight: "20px" }}>
-        <NavLink to="/" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+        <NavLink
+          to="/"
+          className={({ isActive }) =>
+            isActive ? nav_styles.activeLink : nav_styles.dormantLink
+          }
+        >
           Graduation
         </NavLink>
-        <NavLink to="/courses" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+        <NavLink
+          to="/courses"
+          className={({ isActive }) =>
+            isActive ? nav_styles.activeLink : nav_styles.dormantLink
+          }
+        >
           Courses
         </NavLink>
-        <NavLink to="/majors" className={({ isActive }) => isActive ? nav_styles.activeLink : nav_styles.dormantLink }>
+        <NavLink
+          to="/majors"
+          className={({ isActive }) =>
+            isActive ? nav_styles.activeLink : nav_styles.dormantLink
+          }
+        >
           Majors
         </NavLink>
-        {/* <MeDropdown /> */}
+        <MeDropdown />
       </div>
     </div>
   );
 }
 
 export const Majors = () => {
-
   // Which Program
   const [currdex, setCurrdex] = useState(0);
-  const alterCurrdex = (dir: number) => { 
+  const alterCurrdex = (dir: number) => {
     setCurrdex((currdex + dir + programs.length) % programs.length);
-    setCurrDegree(0); 
+    setCurrDegree(0);
   };
-  const seeProgram = (dir: number) => { 
-    return programs[(currdex + dir + programs.length) % programs.length]; 
+  const seeProgram = (dir: number) => {
+    return programs[(currdex + dir + programs.length) % programs.length];
   };
 
   // Which Degree
   const [currDegree, setCurrDegree] = useState(0);
-  const alterCurrDegree = (num: number) => { 
-    setCurrDegree(num); 
+  const alterCurrDegree = (num: number) => {
+    setCurrDegree(num);
   };
-  
-  return(
+
+  return (
     <div>
-      <NavBar/>
+      <NavBar />
       <div className={styles.MajorsPage}>
-        <ProgramMetadataBox 
-          program={programs[currdex]} 
-          scrollProgram={alterCurrdex} 
+        <ProgramMetadataBox
+          program={programs[currdex]}
+          scrollProgram={alterCurrdex}
           seeProgram={seeProgram}
           whichDegree={currDegree}
-          alterCurrDegree={alterCurrDegree}/>
-        <ProgramRequirementsBox degree={programs[currdex].degrees[currDegree]}/>
+          alterCurrDegree={alterCurrDegree}
+        />
+        <ProgramRequirementsBox
+          degree={programs[currdex].degrees[currDegree]}
+        />
       </div>
     </div>
   );