demo code version

package.json

@@ -20,7 +20,7 @@
     "react": "^18.3.1",
     "react-dom": "^18.3.1",
     "react-router-dom": "^6.27.0",
-    "react-select": "^5.8.1",
+    "react-select": "^5.8.2",
     "styled-components": "^6.1.13"
   },
   "devDependencies": {

src/SemesterHome.css

@@ -1,3 +1,6 @@
+/* .body {
+    display: block !important;
+} */
 .content {
     display: flex;
     flex: 1;

src/components/AddClass/addclass.css

@@ -13,10 +13,6 @@ body {
     background-color: white !important;
   }
 
-  /* .searchContent {
-    background-color: white;
-    color: black;
-} */
 
 .searchBar {
     background-color: white;

src/components/AddDegree/AddDegree.css

@@ -7,6 +7,10 @@
     width: 500px;
     flex-direction: column;
     gap: var(--L, 32px);
+    align-items: flex-start;
+    justify-content: center;
+    align-self: stretch;
+    margin-left: 450px;
 }
 @media (max-width: 600px) {
     .container {

src/components/AddDegree/AddDegree.tsx

@@ -1,5 +1,6 @@
 import React, { useState } from 'react';
 import {useNavigate} from 'react-router-dom';
+import { useLocation } from 'react-router-dom';
 import Select from 'react-select'
 import { Separator, Flex } from "@radix-ui/themes";
 import MAJORS from './majors.json';
@@ -20,6 +21,8 @@ type AddDegreeProps = {
 
 export default function AddDegree({ isMajor }: AddDegreeProps) {
     const navigate = useNavigate();
+    const location = useLocation();
+    const { startYear, gradYear, summerCheck } = location.state || {};
     const optionType = isMajor ? "Major" : "Minor";
     const [selectedDegree, setSelectedDegree] = useState<DegreeOption | null>(null);
     const [selectedDegreeList, setSelectedDegreeList] = useState<DegreeOption[]>([]);
@@ -41,7 +44,7 @@ export default function AddDegree({ isMajor }: AddDegreeProps) {
     };
 
     const handleConfirmClick = () => {
-        navigate('/next', { state : {  } })
+        navigate('/next', { state : { startYear, gradYear, summerCheck }  })
     };
 
     const DegreeSelect = () => (

src/components/CustomClass/custom-class.tsx

@@ -0,0 +1,8 @@
+
+function CustomClass() {
+    return (
+        <></>
+    )
+}
+
+export default CustomClass;

src/components/SemesterBlock/index.tsx

@@ -3,6 +3,9 @@ import React, { useState } from 'react';
 import { Button } from "@radix-ui/themes";
 import "./semesterblock.css"
 import AddClass from "../AddClass/AddClass";
+import * as DropdownMenu from '@radix-ui/react-dropdown-menu';
+import { DotsHorizontalIcon, TrashIcon, FileTextIcon } from '@radix-ui/react-icons';
+
 
 interface SemesterYearProps  {
     selectedYear: number | string;
@@ -16,15 +19,19 @@ interface SemesterYearProps  {
   };
 
 function SemesterBlock({ selectedYear, selectedSemester }: SemesterYearProps) {
-    const [classList, setClassList] = useState<string[]>([]);
 
   const [isAddClassOpen, setIsAddClassOpen] = useState(false);
   const [selectedClasses, setSelectedClasses] = useState<ClassType[]>([]);
   const [totalUnits, setTotalUnits] = useState(0);
 
-  const handleDeleteClass = (name: string) => {
-    setClassList(classList.filter((className) => className !== name));
+  const handleDeleteClass = (indexToDelete: number) => {
+    const deletedClassUnits = selectedClasses[indexToDelete].units;
+    setSelectedClasses((prevClasses) => 
+      prevClasses.filter((_, index) => index !== indexToDelete)
+    );
+    setTotalUnits((prevTotalUnits) => prevTotalUnits - deletedClassUnits);
   };
+
   const handleEditClass = () => {};
   const addClass = (cls: ClassType) => {
     setSelectedClasses((prevClasses) => [...prevClasses, cls]);
@@ -43,6 +50,33 @@ function SemesterBlock({ selectedYear, selectedSemester }: SemesterYearProps) {
         {/* <div className="classContainer"> */}
           {selectedClasses.map((cls, index) => (
             <div key={index} className="classContainer">
+              <DropdownMenu.Root>
+                    <DropdownMenu.Trigger asChild>
+                        <Button className="dropDownBtn">
+                            <DotsHorizontalIcon className="three-dot-icon" />
+                        </Button>
+                    </DropdownMenu.Trigger>
+
+                    {/* Dropdown Menu Content */}
+                    <DropdownMenu.Content
+                    className="three-dot-menu"
+                    sideOffset={5}
+                    align="end"
+                    >
+                    <DropdownMenu.Item
+                        className="menu-item"
+                        onClick={handleEditClass}
+                    >
+                        <FileTextIcon/> Edit Course Details
+                    </DropdownMenu.Item>
+                    <DropdownMenu.Item
+                        className="menu-item"
+                        onClick={() => handleDeleteClass(index)}
+                    >
+                        <TrashIcon/> Delete Class
+                    </DropdownMenu.Item>
+                    </DropdownMenu.Content>
+                </DropdownMenu.Root>
               <h3 className="classTitle">{cls.name}</h3>
               <p className="units">{cls.units} Units</p>
             </div>

src/components/SemesterBlock/semesterblock.css

@@ -30,6 +30,10 @@
 
   }
 
+  .classContainer:hover {
+    background-color: #e0e0e0; /* Grayer background on hover */
+  }
+
   .classTitle {
     color: var(--Primary-Text, #000);
     align-items: flex-start;
@@ -96,3 +100,42 @@
     align-items: flex-start;
 }
 
+
+.three-dot-menu {
+  border-radius: var(--XXS, 4px);
+  background: var(--White, #FFF);
+  /* highdrop */
+  box-shadow: 0px 8px 12px 0px rgba(60, 66, 87, 0.15), 0px 0px 1px 0px rgba(0, 0, 0, 0.30);
+  padding: var(--XS, 8px);  
+}
+
+.dropDownBtn {
+  width: 32px;
+  height: 16px;
+  position: absolute;
+  opacity: 0;
+  /* position: absolute;
+  top: 8px;
+  right: 8px; */
+  /* background: none;
+  border: none;
+  font-size: 20px;
+  color: #666; */
+  cursor: pointer;
+  /* opacity: 0; Initially hidden
+  transition: opacity 0.3s; */
+}
+
+
+.classContainer:hover .dropDownBtn {
+  opacity: 1;
+}
+
+.menu-item {
+  cursor: pointer;
+}
+
+.menu-item:hover {
+  background-color: #bfdbfe;
+}
+

src/components/SetUpPage/setup.css

@@ -1,8 +1,16 @@
+.radix-themes {
+    display: flex !important;
+    justify-content: center;
+    align-items: center;
+    place-items: center;
+}
 .setup-container {
-    width: 500px;
-    /* flex-direction: column;
-    gap: var(--L, 32px); */
+    width: 420px;
+    margin-left: 500px;
     background-color: white !important;
+    display: flex;
+    justify-content: center !important;
+    align-items: center !important;
 }
 @media (max-width: 600px) {
     .container {
@@ -12,11 +20,11 @@
 
 body {
     background-color: white;
+    /* display: inline !important; */
 }
 
 .setup {
     color: var(--Primary-Text, #000);
-    /* Web UI/Heading/Heading Medium */
     font-family: "Inter Variable";
     font-size: 20px;
     font-style: normal;

yarn.lock

@@ -2288,10 +2288,10 @@ [email protected]:
   dependencies:
     "@remix-run/router" "1.20.0"
 
-react-select@^5.8.1:
-  version "5.8.1"
-  resolved "https://registry.npmjs.org/react-select/-/react-select-5.8.1.tgz"
-  integrity sha512-RT1CJmuc+ejqm5MPgzyZujqDskdvB9a9ZqrdnVLsvAHjJ3Tj0hELnLeVPQlmYdVKCdCpxanepl6z7R5KhXhWzg==
+react-select@^5.8.2:
+  version "5.8.2"
+  resolved "https://registry.npmjs.org/react-select/-/react-select-5.8.2.tgz"
+  integrity sha512-a/LkOckoI62710gGPQSQqUp7A10fGbH/ya3/IR49qaq3XoBvwymgD5mJgtiHxBDsutyEQfdKNycWVh8Cg8UCjw==
   dependencies:
     "@babel/runtime" "^7.12.0"
     "@emotion/cache" "^11.4.0"