Re-added profile dropdown, fixed hight issues

YaleComputerSociety · Apr 21, 2024 · 881a6d1 · 881a6d1
1 parent 0e7eb00
commit 881a6d1
Show file tree

Hide file tree

Showing 5 changed files with 185 additions and 93 deletions.
diff --git 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
@@ -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
@@ -1,12 +1,11 @@
-
 import React, { useState, useEffect } from "react";
 import styles from "./Courses.module.css";
 
 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
@@ -1,75 +1,92 @@
-
 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";
 
 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;
-