From 04f43758028deaca8f8e22f0c2b7b04959f00ac9 Mon Sep 17 00:00:00 2001 From: mahathiryali Date: Sat, 7 Dec 2024 13:27:43 -0800 Subject: [PATCH] added major/minor/total units functionality --- package-lock.json | 136 +++++++++++------- package.json | 1 + src/App.css | 4 + .../Onboarding/SemesterHome/SemesterHome.css | 64 ++++++--- .../Onboarding/SemesterHome/SemesterHome.tsx | 26 ++-- src/components/AddDegree/AddDegree.tsx | 8 +- src/components/CustomClass/custom-class.css | 61 ++++++-- src/components/CustomClass/custom-class.tsx | 51 +++---- .../CustomClass/requirements-dropdown.tsx | 2 +- src/components/SemesterBlock/index.tsx | 14 +- .../SemesterBlock/semesterblock.css | 4 + src/components/SetUpPage/setup.css | 4 - src/components/SidePanel/SidePanel.css | 8 ++ src/components/SidePanel/SidePanel.tsx | 104 ++++++++++---- yarn.lock | 133 +++++++++-------- 15 files changed, 403 insertions(+), 217 deletions(-) diff --git a/package-lock.json b/package-lock.json index ed439c9..1d3db85 100644 --- a/package-lock.json +++ b/package-lock.json @@ -10,6 +10,7 @@ "dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", + "@mui/icons-material": "^6.1.10", "@mui/material": "^6.1.4", "@mui/styled-engine-sc": "^6.1.4", "@radix-ui/react-icons": "^1.3.0", @@ -1633,9 +1634,9 @@ } }, "node_modules/@babel/runtime": { - "version": "7.25.7", - "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz", - "integrity": "sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w==", + "version": "7.26.0", + "resolved": "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz", + "integrity": "sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw==", "dependencies": { "regenerator-runtime": "^0.14.0" }, @@ -1728,13 +1729,13 @@ } }, "node_modules/@emotion/cache": { - "version": "11.13.1", - "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz", - "integrity": "sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw==", + "version": "11.13.5", + "resolved": "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.5.tgz", + "integrity": "sha512-Z3xbtJ+UcK76eWkagZ1onvn/wAVb1GOMuR15s30Fm2wrMgC7jzpnO2JZXr4eujTTqoQFUrZIw/rT0c6Zzjca1g==", "dependencies": { "@emotion/memoize": "^0.9.0", "@emotion/sheet": "^1.4.0", - "@emotion/utils": "^1.4.0", + "@emotion/utils": "^1.4.2", "@emotion/weak-memoize": "^0.4.0", "stylis": "4.2.0" } @@ -1781,14 +1782,14 @@ } }, "node_modules/@emotion/serialize": { - "version": "1.3.2", - "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz", - "integrity": "sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA==", + "version": "1.3.3", + "resolved": "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz", + "integrity": "sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA==", "dependencies": { "@emotion/hash": "^0.9.2", "@emotion/memoize": "^0.9.0", "@emotion/unitless": "^0.10.0", - "@emotion/utils": "^1.4.1", + "@emotion/utils": "^1.4.2", "csstype": "^3.0.2" } }, @@ -1833,9 +1834,9 @@ } }, "node_modules/@emotion/utils": { - "version": "1.4.1", - "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz", - "integrity": "sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA==" + "version": "1.4.2", + "resolved": "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz", + "integrity": "sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA==" }, "node_modules/@emotion/weak-memoize": { "version": "0.4.0", @@ -2086,24 +2087,49 @@ } }, "node_modules/@mui/core-downloads-tracker": { - "version": "6.1.4", - "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.4.tgz", - "integrity": "sha512-jCRsB9NDJJatVCHvwWSTfYUzuTQ7E0Km6tAQWz2Md1SLHIbVj5visC9yHbf/Cv2IDcG6XdHRv3e7Bt1rIburNw==", + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.10.tgz", + "integrity": "sha512-LY5wdiLCBDY7u+Od8UmFINZFGN/5ZU90fhAslf/ZtfP+5RhuY45f679pqYIxe0y54l6Gkv9PFOc8Cs10LDTBYg==", "funding": { "type": "opencollective", "url": "https://opencollective.com/mui-org" } }, - "node_modules/@mui/material": { - "version": "6.1.4", - "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.4.tgz", - "integrity": "sha512-mIVdjzDYU4U/XYzf8pPEz3zDZFS4Wbyr0cjfgeGiT/s60EvtEresXXQy8XUA0bpJDJjgic1Hl5AIRcqWDyi2eg==", + "node_modules/@mui/icons-material": { + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.10.tgz", + "integrity": "sha512-G6P1BCSt6EQDcKca47KwvKjlqgOXFbp2I3oWiOlFgKYTANBH89yk7ttMQ5ysqNxSYAB+4TdM37MlPYp4+FkVrQ==", "dependencies": { - "@babel/runtime": "^7.25.7", - "@mui/core-downloads-tracker": "^6.1.4", - "@mui/system": "^6.1.4", - "@mui/types": "^7.2.18", - "@mui/utils": "^6.1.4", + "@babel/runtime": "^7.26.0" + }, + "engines": { + "node": ">=14.0.0" + }, + "funding": { + "type": "opencollective", + "url": "https://opencollective.com/mui-org" + }, + "peerDependencies": { + "@mui/material": "^6.1.10", + "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", + "react": "^17.0.0 || ^18.0.0 || ^19.0.0" + }, + "peerDependenciesMeta": { + "@types/react": { + "optional": true + } + } + }, + "node_modules/@mui/material": { + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@mui/material/-/material-6.1.10.tgz", + "integrity": "sha512-txnwYObY4N9ugv5T2n5h1KcbISegZ6l65w1/7tpSU5OB6MQCU94YkP8n/3slDw2KcEfRk4+4D8EUGfhSPMODEQ==", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/core-downloads-tracker": "^6.1.10", + "@mui/system": "^6.1.10", + "@mui/types": "^7.2.19", + "@mui/utils": "^6.1.10", "@popperjs/core": "^2.11.8", "@types/react-transition-group": "^4.4.11", "clsx": "^2.1.1", @@ -2122,7 +2148,7 @@ "peerDependencies": { "@emotion/react": "^11.5.0", "@emotion/styled": "^11.3.0", - "@mui/material-pigment-css": "^6.1.4", + "@mui/material-pigment-css": "^6.1.10", "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react": "^17.0.0 || ^18.0.0 || ^19.0.0", "react-dom": "^17.0.0 || ^18.0.0 || ^19.0.0" @@ -2143,12 +2169,12 @@ } }, "node_modules/@mui/private-theming": { - "version": "6.1.4", - "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.4.tgz", - "integrity": "sha512-FPa+W5BSrRM/1QI5Gf/GwJinJ2WsrKPpJB6xMmmXMXSUIp31YioIVT04i28DQUXFFB3yZY12ukcZi51iLvPljw==", + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.10.tgz", + "integrity": "sha512-DqgsH0XFEweeG3rQfVkqTkeXcj/E76PGYWag8flbPdV8IYdMo+DfVdFlZK8JEjsaIVD2Eu1kJg972XnH5pfnBQ==", "dependencies": { - "@babel/runtime": "^7.25.7", - "@mui/utils": "^6.1.4", + "@babel/runtime": "^7.26.0", + "@mui/utils": "^6.1.10", "prop-types": "^15.8.1" }, "engines": { @@ -2169,13 +2195,13 @@ } }, "node_modules/@mui/styled-engine": { - "version": "6.1.4", - "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.4.tgz", - "integrity": "sha512-D+aiIDtJsU9OVJ7dgayhCDABJHT7jTlnz1FKyxa5mNVHsxjjeG1M4OpLsRQvx4dcvJfDywnU2cE+nFm4Ln2aFQ==", + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.10.tgz", + "integrity": "sha512-+NV9adKZYhslJ270iPjf2yzdVJwav7CIaXcMlPSi1Xy1S/zRe5xFgZ6BEoMdmGRpr34lIahE8H1acXP2myrvRw==", "dependencies": { - "@babel/runtime": "^7.25.7", - "@emotion/cache": "^11.13.1", - "@emotion/serialize": "^1.3.2", + "@babel/runtime": "^7.26.0", + "@emotion/cache": "^11.13.5", + "@emotion/serialize": "^1.3.3", "@emotion/sheet": "^1.4.0", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -2223,15 +2249,15 @@ } }, "node_modules/@mui/system": { - "version": "6.1.4", - "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.4.tgz", - "integrity": "sha512-lCveY/UtDhYwMg1WnLc3wEEuGymLi6YI79VOwFV9zfZT5Et+XEw/e1It26fiKwUZ+mB1+v1iTYMpJnwnsrn2aQ==", - "dependencies": { - "@babel/runtime": "^7.25.7", - "@mui/private-theming": "^6.1.4", - "@mui/styled-engine": "^6.1.4", - "@mui/types": "^7.2.18", - "@mui/utils": "^6.1.4", + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@mui/system/-/system-6.1.10.tgz", + "integrity": "sha512-5YNIqxETR23SIkyP7MY2fFnXmplX/M4wNi2R+10AVRd3Ub+NLctWY/Vs5vq1oAMF0eSDLhRTGUjaUe+IGSfWqg==", + "dependencies": { + "@babel/runtime": "^7.26.0", + "@mui/private-theming": "^6.1.10", + "@mui/styled-engine": "^6.1.10", + "@mui/types": "^7.2.19", + "@mui/utils": "^6.1.10", "clsx": "^2.1.1", "csstype": "^3.1.3", "prop-types": "^15.8.1" @@ -2262,9 +2288,9 @@ } }, "node_modules/@mui/types": { - "version": "7.2.18", - "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.18.tgz", - "integrity": "sha512-uvK9dWeyCJl/3ocVnTOS6nlji/Knj8/tVqVX03UVTpdmTJYu/s4jtDd9Kvv0nRGE0CUSNW1UYAci7PYypjealg==", + "version": "7.2.19", + "resolved": "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz", + "integrity": "sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA==", "peerDependencies": { "@types/react": "^17.0.0 || ^18.0.0 || ^19.0.0" }, @@ -2275,12 +2301,12 @@ } }, "node_modules/@mui/utils": { - "version": "6.1.4", - "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.4.tgz", - "integrity": "sha512-v0wXkyh3/Hpw48ivlNvgs4ZT6M8BIEAMdLgvct59rQBggYFhoAVKyliKDzdj37CnIlYau3DYIn7x5bHlRYFBow==", + "version": "6.1.10", + "resolved": "https://registry.npmjs.org/@mui/utils/-/utils-6.1.10.tgz", + "integrity": "sha512-1ETuwswGjUiAf2dP9TkBy8p49qrw2wXa+RuAjNTRE5+91vtXJ1HKrs7H9s8CZd1zDlQVzUcUAPm9lpQwF5ogTw==", "dependencies": { - "@babel/runtime": "^7.25.7", - "@mui/types": "^7.2.18", + "@babel/runtime": "^7.26.0", + "@mui/types": "^7.2.19", "@types/prop-types": "^15.7.13", "clsx": "^2.1.1", "prop-types": "^15.8.1", diff --git a/package.json b/package.json index 40f3ad7..d4f63d3 100644 --- a/package.json +++ b/package.json @@ -12,6 +12,7 @@ "dependencies": { "@emotion/react": "^11.13.3", "@emotion/styled": "^11.13.0", + "@mui/icons-material": "^6.1.10", "@mui/material": "^6.1.4", "@mui/styled-engine-sc": "^6.1.4", "@radix-ui/react-icons": "^1.3.0", diff --git a/src/App.css b/src/App.css index 7456048..57cc7da 100644 --- a/src/App.css +++ b/src/App.css @@ -24,4 +24,8 @@ a:nth-of-type(2) .logo { animation: logo-spin infinite 20s linear; } +} + +button:hover { + cursor: pointer; } \ No newline at end of file diff --git a/src/app/Onboarding/SemesterHome/SemesterHome.css b/src/app/Onboarding/SemesterHome/SemesterHome.css index 3547ff8..5b3fae0 100644 --- a/src/app/Onboarding/SemesterHome/SemesterHome.css +++ b/src/app/Onboarding/SemesterHome/SemesterHome.css @@ -1,28 +1,60 @@ -/* .body { - display: block !important; -} */ +.body { + display: flex !important; + justify-content: start !important; +} .content { display: flex; flex: 1; - padding: 16px; + /* padding: 16px; */ overflow: auto; box-sizing: border-box; } .semester-layout { - margin-left: 32px; - margin-right: 32px; + margin: 32px; +} + +.semester-home { + display: flex; + flex-direction: row; /* Stack items vertically */ + justify-content: flex-start; /* Align content to the top */ + align-items: flex-start; /* Align content to the left */ + /* width: auto; */ + /* min-width: 240px; */ + height: 100vh; /* Make the panel span the full height of the viewport */ + position: fixed; /* Fix the panel to the left side of the page */ + top: 0; + left: 0; + /* padding: 16px; */ + z-index: 1000; /* Ensure it stays above other elements */ +} + +.semester-blocks { + overflow-x: auto; /* Enable horizontal scrolling */ + gap: 12px; + width: 100vw; + height: calc(100vh - 80px); + box-sizing: border-box; + position: relative; + top: 50px; + + } .semester-title { - color: var(--Primary-Text, #000); - /* Web UI/Heading/Heading Large */ - font-family: "Inter Variable"; - font-size: 28px; - font-style: normal; - font-weight: 580; - line-height: 36px; /* 128.571% */ - letter-spacing: -0.28px; - text-align: left; - margin-left: 32px; +position: fixed; /* Fix the position */ + top: 32px; /* Align it to the top */ + left: 314px; /* Offset to account for the fixed side panel */ + padding-left: 32px; + z-index: 100; /* Ensure it appears above other elements */ + /* width: calc(100% - 240px); Take up the remaining width after the side panel */ + color: var(--Primary-Text, #000); /* Ensure consistent text styling */ + background-color: white; + width: 100%; + font-size: 28px; + font-style: normal; + font-weight: 580; + line-height: 36px; /* 128.571% */ + letter-spacing: -0.28px; + text-align: left; } \ No newline at end of file diff --git a/src/app/Onboarding/SemesterHome/SemesterHome.tsx b/src/app/Onboarding/SemesterHome/SemesterHome.tsx index 53d171c..27b8574 100644 --- a/src/app/Onboarding/SemesterHome/SemesterHome.tsx +++ b/src/app/Onboarding/SemesterHome/SemesterHome.tsx @@ -18,16 +18,18 @@ function SemesterHome() { gradYear: string; summerCheck: boolean; selectedDegreeList: DegreeOption[]; + selectedMinorList: DegreeOption[]; }; - const { startYear, gradYear, summerCheck, selectedDegreeList } = state; + const { startYear, gradYear, summerCheck, selectedDegreeList, selectedMinorList } = state; const selectedDegreeStrings: string[] = selectedDegreeList.map((degree) => degree.value); + const selectedMinorStrings: string[] = selectedMinorList.map((minor) => minor.value); // Pretend this is the queried data const user = { "name": "Khankamol Chor Kongrukgreatiyos", "majors": selectedDegreeStrings, - "minors": [] + "minors": selectedMinorStrings } const numStartYear = parseInt(startYear, 10); @@ -38,6 +40,14 @@ function SemesterHome() { (_, i) => numStartYear + i ); + const [semesterTotals, setSemesterTotals] = React.useState>({}); + + const updateTotalUnits = (semesterKey: string, newTotal: number) => { + setSemesterTotals((prev) => ({ ...prev, [semesterKey]: newTotal })); + }; + + const totalUnits = Object.values(semesterTotals).reduce((sum, units) => sum + units, 0); + return ( <> @@ -46,23 +56,23 @@ function SemesterHome() { name={user.name} majors={user.majors} minors={user.minors} - totalUnits={140} + totalUnits={totalUnits} transferUnits={40} pnpTotal={15} requirements={requirements} /> {/* Page body */} - +

Semesters

- + updateTotalUnits("Miscellaneous", newTotal)}> {years.map((year) => ( - - + updateTotalUnits(`Fall-${year}`, newTotal)}> + updateTotalUnits(`Spring-${year}`, newTotal)}> {summerCheck && - + updateTotalUnits(`Summer-${year}`, newTotal)}> } ))} diff --git a/src/components/AddDegree/AddDegree.tsx b/src/components/AddDegree/AddDegree.tsx index 9024fa6..7317509 100644 --- a/src/components/AddDegree/AddDegree.tsx +++ b/src/components/AddDegree/AddDegree.tsx @@ -39,12 +39,14 @@ export default function AddDegree({ isMajor }: AddDegreeProps) { const handleAddDegree = () => { if (selectedDegree && !selectedDegreeList.some((degree) => degree.value === selectedDegree.value)) { setSelectedDegreeList([...selectedDegreeList, selectedDegree]); + setSelectedDegree(null); } }; const handleAddMinor = () => { - if (selectedDegree && !selectedDegreeList.some((degree) => degree.value === selectedDegree.value)) { + if (selectedDegree && !selectedMinorList.some((degree) => degree.value === selectedDegree.value)) { setSelectedMinorList([...selectedMinorList, selectedDegree]); + setSelectedDegree(null); } }; @@ -72,7 +74,7 @@ export default function AddDegree({ isMajor }: AddDegreeProps) { isClearable={true} placeholder={`Search for a ${optionType.toLowerCase()}...`} value={selectedDegree} - onChange={(option) => setSelectedDegree(option as DegreeOption)} + onChange={(option) => setSelectedDegree(option as DegreeOption | null)} /> ) @@ -96,7 +98,7 @@ export default function AddDegree({ isMajor }: AddDegreeProps) {

Selected {optionType}s

- {selectedDegreeList.length === 0 ? ( + {(selectedDegreeList.length === 0 && isMajor) || (selectedMinorList.length === 0 && !isMajor) ? (

None Selected

) : (
diff --git a/src/components/CustomClass/custom-class.css b/src/components/CustomClass/custom-class.css index ca4702d..c32c61e 100644 --- a/src/components/CustomClass/custom-class.css +++ b/src/components/CustomClass/custom-class.css @@ -1,16 +1,17 @@ .dialog-overlay { - background-color: rgba(0, 0, 0, 0.5); + background-color: rgba(0, 0, 0, 0.5) !important; position: fixed; inset: 0; + z-index: 1000; + } .dialog-content { + z-index: 1010; background-color: white; - padding: 20px; border-radius: 8px; display: flex; width: 400px; - /* height: 900px; */ flex-direction: column; align-items: flex-start; margin: auto; @@ -18,25 +19,30 @@ top: 50%; left: 50%; transform: translate(-50%, -50%); + gap: 8px; + min-height: 200px; + /* max-height: 90%; */ + max-height: 100%; + overflow-y: auto; } .dialog-title { color: var(--Primary-Text, #000); + margin: 0; width: 100%; -/* Web UI/Heading/Heading Medium */ - font-family: "Inter Variable"; font-size: 20px; font-style: normal; font-weight: 580; - line-height: 24px; /* 120% */ + line-height: 24px; letter-spacing: -0.2px; - margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; - align-self: stretch; + /* align-self: stretch; */ border-bottom: 1px solid #EAEAEA; background: var(--Hover-Primary, #F8F8F8); + padding: var(--M, 24px); + box-sizing: border-box; } @@ -73,7 +79,6 @@ padding: 0; border-radius: 100%; border-color: #C7C7C7; - /* box-shadow: 0 2px 10px var(--black-a7); */ } .RadioGroupItem:hover { background-color: lightgray; @@ -107,13 +112,14 @@ .info { color: var(--Secondary-Text, #8A8A8A); /* Web UI/Heading/Heading Caps */ - font-family: "Inter Variable"; font-size: 12px; font-style: normal; font-weight: 580; line-height: 14px; /* 116.667% */ letter-spacing: 1px; text-transform: uppercase; + padding-bottom: 8px; + /* padding-left: var(--S, 16px); */ } .Label { @@ -124,10 +130,17 @@ } .reqBox { - background-color: white; + /* background-color: white; */ + border-radius: var(--XXS, 4px); border: 1px solid var(--Gray-2, #C7C7C7); + background: var(--White, #FFF); + width: 100%; color: black; text-align: left; + display: flex; + justify-content: space-between; + + } .reqOptions { @@ -137,7 +150,7 @@ .reqOptionsBox { background-color: white; - width: 206px; + width: 100%; } input { @@ -151,4 +164,28 @@ input { align-items: center; align-self: stretch; width: 100%; +} + +.separate { + /* margin-top: 16px; + margin-bottom: 16px; */ + width: 100%; + height: 1px; + background-color: lightgray; + /* margin: 10px 0; */ +} + +.sections { + padding-left: var(--S, 16px); + +} + +.pinIcon { + font-size: 24; + color: '#e8eaed'; + +} + +.s1 { + display: inline; } \ No newline at end of file diff --git a/src/components/CustomClass/custom-class.tsx b/src/components/CustomClass/custom-class.tsx index 971e479..de78d89 100644 --- a/src/components/CustomClass/custom-class.tsx +++ b/src/components/CustomClass/custom-class.tsx @@ -3,6 +3,8 @@ import "./custom-class.css"; import React, { useState } from 'react'; import * as Dialog from "@radix-ui/react-dialog"; import * as RadioGroup from '@radix-ui/react-radio-group'; +import { Separator } from "@radix-ui/themes"; +import PinIcon from '@mui/icons-material/Pin'; import { Xmark } from 'iconoir-react'; import RequirementDropdown from "./requirements-dropdown"; @@ -34,30 +36,32 @@ function CustomClass({open, onClose, onConfirm}: CustomClassProps) { - Add Custom Class - - -
+ Add Custom Class +

INFO

- setClassId((e.target.value))}/> +
+ + setClassId((e.target.value))} /> +
setClassName(e.target.value)}/>
-
+ {/*
*/} + -
-

UNITS

+
+

UNITS

setClassUnits((e.target.value))}/>
-
+ -
-

SEMESTER

+
+

SEMESTER

-
+ -
-

GRADING

+
+

GRADING

-
+ -
-

CREDIT

+
+

CREDIT

-
+ -
-

REQUIREMENTS FULFILLED

+
+

REQUIREMENTS FULFILLED

-
- - {/* Dialog content goes here */} - + + - {/* */} diff --git a/src/components/CustomClass/requirements-dropdown.tsx b/src/components/CustomClass/requirements-dropdown.tsx index fa38eff..5524e83 100644 --- a/src/components/CustomClass/requirements-dropdown.tsx +++ b/src/components/CustomClass/requirements-dropdown.tsx @@ -14,7 +14,7 @@ function RequirementDropdown() { return ( - {reqFulfilled ? reqFulfilled : 'Select requirement...'} + {reqFulfilled ? reqFulfilled : 'Select a requirement...'} diff --git a/src/components/SemesterBlock/index.tsx b/src/components/SemesterBlock/index.tsx index a70beaa..c5deeee 100644 --- a/src/components/SemesterBlock/index.tsx +++ b/src/components/SemesterBlock/index.tsx @@ -11,6 +11,7 @@ import CustomClass from "../CustomClass/custom-class"; interface SemesterYearProps { selectedYear: number | string; selectedSemester: string; + onTotalUnitsChange: (newTotal: number) => void; }; type ClassType = { @@ -19,7 +20,7 @@ interface SemesterYearProps { units: number; }; -function SemesterBlock({ selectedYear, selectedSemester }: SemesterYearProps) { +function SemesterBlock({ selectedYear, selectedSemester, onTotalUnitsChange }: SemesterYearProps) { const [isAddClassOpen, setIsAddClassOpen] = useState(false); const [selectedClasses, setSelectedClasses] = useState([]); @@ -33,16 +34,23 @@ function SemesterBlock({ selectedYear, selectedSemester }: SemesterYearProps) { const handleDeleteClass = (indexToDelete: number) => { const deletedClassUnits = selectedClasses[indexToDelete].units; + const newTotalUnits = totalUnits - deletedClassUnits; setSelectedClasses((prevClasses) => prevClasses.filter((_, index) => index !== indexToDelete) ); - setTotalUnits((prevTotalUnits) => prevTotalUnits - deletedClassUnits); + setTotalUnits(newTotalUnits); + onTotalUnitsChange(newTotalUnits); + // setTotalUnits((prevTotalUnits) => prevTotalUnits - deletedClassUnits); }; const handleEditClass = () => {}; const addClass = (cls: ClassType) => { setSelectedClasses((prevClasses) => [...prevClasses, cls]); - setTotalUnits((prevTotal) => prevTotal + cls.units); // Update total units + const newTotalUnits = totalUnits + cls.units; + // setTotalUnits((prevTotal) => prevTotal + cls.units); + setTotalUnits(newTotalUnits); + onTotalUnitsChange(newTotalUnits); + }; return ( diff --git a/src/components/SemesterBlock/semesterblock.css b/src/components/SemesterBlock/semesterblock.css index c3e5ba7..6d642d4 100644 --- a/src/components/SemesterBlock/semesterblock.css +++ b/src/components/SemesterBlock/semesterblock.css @@ -68,6 +68,10 @@ font-style: normal; font-weight: 500; line-height: 16px; /* 133.333% */ + padding: 6px 4px; + border-radius: 4px; + + } .semesterCount { diff --git a/src/components/SetUpPage/setup.css b/src/components/SetUpPage/setup.css index 41a25c1..a2fd65d 100644 --- a/src/components/SetUpPage/setup.css +++ b/src/components/SetUpPage/setup.css @@ -1,8 +1,4 @@ .radix-themes { - /* display: flex !important; */ - /* justify-content: center; - align-items: center; - place-items: center; */ margin-left: auto; margin-right: auto; diff --git a/src/components/SidePanel/SidePanel.css b/src/components/SidePanel/SidePanel.css index 4214d35..42e4385 100644 --- a/src/components/SidePanel/SidePanel.css +++ b/src/components/SidePanel/SidePanel.css @@ -148,4 +148,12 @@ button.secondary:hover { width: 20px; height: 10px; color: var(--Green, #13B56B); +} + +.units-title { + color: var(--Secondary-Text, #8A8A8A); +} + +.units-comp { + color: var(--Red, #ED6363); } \ No newline at end of file diff --git a/src/components/SidePanel/SidePanel.tsx b/src/components/SidePanel/SidePanel.tsx index cbcc0c1..959e270 100644 --- a/src/components/SidePanel/SidePanel.tsx +++ b/src/components/SidePanel/SidePanel.tsx @@ -56,50 +56,100 @@ export default function SidePanel({ name, majors, minors, totalUnits, transferUn ); // TODO: Add functionality - const Requirement = ( + const Requirement = (title: string, requirements: string[]) => (
- University of California + {title}
+
-
-
-

Entry-Level Writing

-
-
-
-

American History

-
-
-
-

American Institutions

+ {requirements.map((req, index) => ( +
+
+

{req}

+
+ ))} +
+ +
+ ) + + const MajorRequirements = ( +
+ {majors.map((major, index) => ( +
+
+
+

{major}

+
+
+
+
+

Upper Division Units:

+

0/8

+
+
+

Lower Division Units:

+

0/8

+
+
+

Elective Units:

+

0/7

+
+
-
-
-

American Cultures

+ ))} +
+ ) + + const MinorRequirements = ( +
+ {minors.map((minor, index) => ( +
+
+
+

{minor}

+
+
+
+
+

Upper Division Units:

+

0/8

+
+
+

Lower Division Units:

+

0/8

+
+
+

Elective Units:

+

0/7

+
+
-
+ ))}
) return (
{UserInfo} - - {Requirement} - - {Requirement} - - {Requirement} - - {Requirement} + + {MajorRequirements} + + {MinorRequirements} + + {Requirement("University of California", + ["Entry-Level Writing", "American History", "American Institutions", "American Cultures"])} - {Requirement} + {Requirement("Essential Skills", + ["R&C Part A", "R&C Part B", "Quantitative Reasoning", "Foreign Language"])} - {Requirement} + {Requirement("Breadth Requirements", + ["Arts & Literature", "Biological Science", "Historical Studies", "International Studies", + "Social & Behavioral Sciences", "Physical Science", "Philosophy & Values"])}
) diff --git a/yarn.lock b/yarn.lock index 852165e..1e2e84e 100644 --- a/yarn.lock +++ b/yarn.lock @@ -866,10 +866,10 @@ "@babel/plugin-transform-modules-commonjs" "^7.25.9" "@babel/plugin-transform-typescript" "^7.25.9" -"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.25.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": - version "7.25.7" - resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.25.7.tgz" - integrity sha512-FjoyLe754PMiYsFaN5C94ttGiOmBNYTf6pLr4xXHAT5uctHb092PBszndLDR5XA/jghQvn4n7JMHl7dmTgbm9w== +"@babel/runtime@^7.12.0", "@babel/runtime@^7.12.5", "@babel/runtime@^7.18.3", "@babel/runtime@^7.25.7", "@babel/runtime@^7.26.0", "@babel/runtime@^7.5.5", "@babel/runtime@^7.8.4", "@babel/runtime@^7.8.7": + version "7.26.0" + resolved "https://registry.npmjs.org/@babel/runtime/-/runtime-7.26.0.tgz" + integrity sha512-FDSOghenHTiToteC/QRlv2q3DhPZ/oOXTBoirfWNx1Cx3TMVcGWQtMMmQcSvb/JjpNeGzx8Pq/b4fKEJuWm1sw== dependencies: regenerator-runtime "^0.14.0" @@ -920,14 +920,14 @@ source-map "^0.5.7" stylis "4.2.0" -"@emotion/cache@^11.13.0", "@emotion/cache@^11.13.1", "@emotion/cache@^11.4.0": - version "11.13.1" - resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.1.tgz" - integrity sha512-iqouYkuEblRcXmylXIwwOodiEK5Ifl7JcX7o6V4jI3iW4mLXX3dmt5xwBtIkJiQEXFAI+pC8X0i67yiPkH9Ucw== +"@emotion/cache@^11.13.0", "@emotion/cache@^11.13.5", "@emotion/cache@^11.4.0": + version "11.13.5" + resolved "https://registry.npmjs.org/@emotion/cache/-/cache-11.13.5.tgz" + integrity sha512-Z3xbtJ+UcK76eWkagZ1onvn/wAVb1GOMuR15s30Fm2wrMgC7jzpnO2JZXr4eujTTqoQFUrZIw/rT0c6Zzjca1g== dependencies: "@emotion/memoize" "^0.9.0" "@emotion/sheet" "^1.4.0" - "@emotion/utils" "^1.4.0" + "@emotion/utils" "^1.4.2" "@emotion/weak-memoize" "^0.4.0" stylis "4.2.0" @@ -974,15 +974,15 @@ "@emotion/weak-memoize" "^0.4.0" hoist-non-react-statics "^3.3.1" -"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.0", "@emotion/serialize@^1.3.1", "@emotion/serialize@^1.3.2": - version "1.3.2" - resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.2.tgz" - integrity sha512-grVnMvVPK9yUVE6rkKfAJlYZgo0cu3l9iMC77V7DW6E1DUIrU68pSEXRmFZFOFB1QFo57TncmOcvcbMDWsL4yA== +"@emotion/serialize@^1.2.0", "@emotion/serialize@^1.3.0", "@emotion/serialize@^1.3.1", "@emotion/serialize@^1.3.3": + version "1.3.3" + resolved "https://registry.npmjs.org/@emotion/serialize/-/serialize-1.3.3.tgz" + integrity sha512-EISGqt7sSNWHGI76hC7x1CksiXPahbxEOrC5RjmFRJTqLyEK9/9hZvBbiYn70dw4wuwMKiEMCUlR6ZXTSWQqxA== dependencies: "@emotion/hash" "^0.9.2" "@emotion/memoize" "^0.9.0" "@emotion/unitless" "^0.10.0" - "@emotion/utils" "^1.4.1" + "@emotion/utils" "^1.4.2" csstype "^3.0.2" "@emotion/sheet@^1.4.0": @@ -1017,10 +1017,10 @@ resolved "https://registry.npmjs.org/@emotion/use-insertion-effect-with-fallbacks/-/use-insertion-effect-with-fallbacks-1.1.0.tgz" integrity sha512-+wBOcIV5snwGgI2ya3u99D7/FJquOIniQT1IKyDsBmEgwvpxMNeS65Oib7OnE2d2aY+3BU4OiH+0Wchf8yk3Hw== -"@emotion/utils@^1.4.0", "@emotion/utils@^1.4.1": - version "1.4.1" - resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.1.tgz" - integrity sha512-BymCXzCG3r72VKJxaYVwOXATqXIZ85cuvg0YOUDxMGNrKc1DJRZk8MgV5wyXRyEayIMd4FuXJIUgTBXvDNW5cA== +"@emotion/utils@^1.4.0", "@emotion/utils@^1.4.2": + version "1.4.2" + resolved "https://registry.npmjs.org/@emotion/utils/-/utils-1.4.2.tgz" + integrity sha512-3vLclRofFziIa3J2wDh9jjbkUz9qk5Vi3IZ/FSTKViB0k+ef0fPV7dYrUIugbgupYDx7v9ud/SjrtEP8Y4xLoA== "@emotion/weak-memoize@^0.4.0": version "0.4.0" @@ -1159,21 +1159,28 @@ "@jridgewell/resolve-uri" "^3.1.0" "@jridgewell/sourcemap-codec" "^1.4.14" -"@mui/core-downloads-tracker@^6.1.4": - version "6.1.4" - resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.4.tgz" - integrity sha512-jCRsB9NDJJatVCHvwWSTfYUzuTQ7E0Km6tAQWz2Md1SLHIbVj5visC9yHbf/Cv2IDcG6XdHRv3e7Bt1rIburNw== +"@mui/core-downloads-tracker@^6.1.10": + version "6.1.10" + resolved "https://registry.npmjs.org/@mui/core-downloads-tracker/-/core-downloads-tracker-6.1.10.tgz" + integrity sha512-LY5wdiLCBDY7u+Od8UmFINZFGN/5ZU90fhAslf/ZtfP+5RhuY45f679pqYIxe0y54l6Gkv9PFOc8Cs10LDTBYg== -"@mui/material@^6.1.4": - version "6.1.4" - resolved "https://registry.npmjs.org/@mui/material/-/material-6.1.4.tgz" - integrity sha512-mIVdjzDYU4U/XYzf8pPEz3zDZFS4Wbyr0cjfgeGiT/s60EvtEresXXQy8XUA0bpJDJjgic1Hl5AIRcqWDyi2eg== +"@mui/icons-material@^6.1.10": + version "6.1.10" + resolved "https://registry.npmjs.org/@mui/icons-material/-/icons-material-6.1.10.tgz" + integrity sha512-G6P1BCSt6EQDcKca47KwvKjlqgOXFbp2I3oWiOlFgKYTANBH89yk7ttMQ5ysqNxSYAB+4TdM37MlPYp4+FkVrQ== dependencies: - "@babel/runtime" "^7.25.7" - "@mui/core-downloads-tracker" "^6.1.4" - "@mui/system" "^6.1.4" - "@mui/types" "^7.2.18" - "@mui/utils" "^6.1.4" + "@babel/runtime" "^7.26.0" + +"@mui/material@^6.1.10", "@mui/material@^6.1.4": + version "6.1.10" + resolved "https://registry.npmjs.org/@mui/material/-/material-6.1.10.tgz" + integrity sha512-txnwYObY4N9ugv5T2n5h1KcbISegZ6l65w1/7tpSU5OB6MQCU94YkP8n/3slDw2KcEfRk4+4D8EUGfhSPMODEQ== + dependencies: + "@babel/runtime" "^7.26.0" + "@mui/core-downloads-tracker" "^6.1.10" + "@mui/system" "^6.1.10" + "@mui/types" "^7.2.19" + "@mui/utils" "^6.1.10" "@popperjs/core" "^2.11.8" "@types/react-transition-group" "^4.4.11" clsx "^2.1.1" @@ -1182,13 +1189,13 @@ react-is "^18.3.1" react-transition-group "^4.4.5" -"@mui/private-theming@^6.1.4": - version "6.1.4" - resolved "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.4.tgz" - integrity sha512-FPa+W5BSrRM/1QI5Gf/GwJinJ2WsrKPpJB6xMmmXMXSUIp31YioIVT04i28DQUXFFB3yZY12ukcZi51iLvPljw== +"@mui/private-theming@^6.1.10": + version "6.1.10" + resolved "https://registry.npmjs.org/@mui/private-theming/-/private-theming-6.1.10.tgz" + integrity sha512-DqgsH0XFEweeG3rQfVkqTkeXcj/E76PGYWag8flbPdV8IYdMo+DfVdFlZK8JEjsaIVD2Eu1kJg972XnH5pfnBQ== dependencies: - "@babel/runtime" "^7.25.7" - "@mui/utils" "^6.1.4" + "@babel/runtime" "^7.26.0" + "@mui/utils" "^6.1.10" prop-types "^15.8.1" "@mui/styled-engine-sc@^6.1.4": @@ -1201,44 +1208,44 @@ hoist-non-react-statics "^3.3.2" prop-types "^15.8.1" -"@mui/styled-engine@^6.1.4": - version "6.1.4" - resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.4.tgz" - integrity sha512-D+aiIDtJsU9OVJ7dgayhCDABJHT7jTlnz1FKyxa5mNVHsxjjeG1M4OpLsRQvx4dcvJfDywnU2cE+nFm4Ln2aFQ== +"@mui/styled-engine@^6.1.10": + version "6.1.10" + resolved "https://registry.npmjs.org/@mui/styled-engine/-/styled-engine-6.1.10.tgz" + integrity sha512-+NV9adKZYhslJ270iPjf2yzdVJwav7CIaXcMlPSi1Xy1S/zRe5xFgZ6BEoMdmGRpr34lIahE8H1acXP2myrvRw== dependencies: - "@babel/runtime" "^7.25.7" - "@emotion/cache" "^11.13.1" - "@emotion/serialize" "^1.3.2" + "@babel/runtime" "^7.26.0" + "@emotion/cache" "^11.13.5" + "@emotion/serialize" "^1.3.3" "@emotion/sheet" "^1.4.0" csstype "^3.1.3" prop-types "^15.8.1" -"@mui/system@^6.1.4": - version "6.1.4" - resolved "https://registry.npmjs.org/@mui/system/-/system-6.1.4.tgz" - integrity sha512-lCveY/UtDhYwMg1WnLc3wEEuGymLi6YI79VOwFV9zfZT5Et+XEw/e1It26fiKwUZ+mB1+v1iTYMpJnwnsrn2aQ== +"@mui/system@^6.1.10": + version "6.1.10" + resolved "https://registry.npmjs.org/@mui/system/-/system-6.1.10.tgz" + integrity sha512-5YNIqxETR23SIkyP7MY2fFnXmplX/M4wNi2R+10AVRd3Ub+NLctWY/Vs5vq1oAMF0eSDLhRTGUjaUe+IGSfWqg== dependencies: - "@babel/runtime" "^7.25.7" - "@mui/private-theming" "^6.1.4" - "@mui/styled-engine" "^6.1.4" - "@mui/types" "^7.2.18" - "@mui/utils" "^6.1.4" + "@babel/runtime" "^7.26.0" + "@mui/private-theming" "^6.1.10" + "@mui/styled-engine" "^6.1.10" + "@mui/types" "^7.2.19" + "@mui/utils" "^6.1.10" clsx "^2.1.1" csstype "^3.1.3" prop-types "^15.8.1" -"@mui/types@^7.2.18": - version "7.2.18" - resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.18.tgz" - integrity sha512-uvK9dWeyCJl/3ocVnTOS6nlji/Knj8/tVqVX03UVTpdmTJYu/s4jtDd9Kvv0nRGE0CUSNW1UYAci7PYypjealg== +"@mui/types@^7.2.19": + version "7.2.19" + resolved "https://registry.npmjs.org/@mui/types/-/types-7.2.19.tgz" + integrity sha512-6XpZEM/Q3epK9RN8ENoXuygnqUQxE+siN/6rGRi2iwJPgBUR25mphYQ9ZI87plGh58YoZ5pp40bFvKYOCDJ3tA== -"@mui/utils@^6.1.4": - version "6.1.4" - resolved "https://registry.npmjs.org/@mui/utils/-/utils-6.1.4.tgz" - integrity sha512-v0wXkyh3/Hpw48ivlNvgs4ZT6M8BIEAMdLgvct59rQBggYFhoAVKyliKDzdj37CnIlYau3DYIn7x5bHlRYFBow== +"@mui/utils@^6.1.10": + version "6.1.10" + resolved "https://registry.npmjs.org/@mui/utils/-/utils-6.1.10.tgz" + integrity sha512-1ETuwswGjUiAf2dP9TkBy8p49qrw2wXa+RuAjNTRE5+91vtXJ1HKrs7H9s8CZd1zDlQVzUcUAPm9lpQwF5ogTw== dependencies: - "@babel/runtime" "^7.25.7" - "@mui/types" "^7.2.18" + "@babel/runtime" "^7.26.0" + "@mui/types" "^7.2.19" "@types/prop-types" "^15.7.13" clsx "^2.1.1" prop-types "^15.8.1"