Saving current

docker-compose.yaml

@@ -0,0 +1,21 @@
+version: "3.8"
+
+services:
+  backend:
+    image: chengmingli/berkeleytime-test-backend
+    ports:
+      - "4000:4000"
+    depends_on:
+      - mongodb
+    environment:
+      MONGODB_URI: mongodb://mongodb:27017/BerkeleytimeTest
+
+  mongodb:
+    image: mongo:5.0
+    ports:
+      - "27017:27017"
+    volumes:
+      - mongo-data:/data/db
+
+volumes:
+  mongo-data:

package.json

@@ -10,9 +10,16 @@
     "preview": "vite preview"
   },
   "dependencies": {
+    "@emotion/react": "^11.13.3",
+    "@emotion/styled": "^11.13.0",
+    "@mui/material": "^6.1.4",
+    "@mui/styled-engine-sc": "^6.1.4",
     "@radix-ui/themes": "^3.1.4",
+    "iconoir-react": "^7.9.0",
     "react": "^18.3.1",
-    "react-dom": "^18.3.1"
+    "react-dom": "^18.3.1",
+    "react-select": "^5.8.1",
+    "styled-components": "^6.1.13"
   },
   "devDependencies": {
     "@eslint/js": "^9.9.0",

src/App.css

@@ -1,7 +1,6 @@
 #root {
   max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
+  margin: 0;
   text-align: center;
 }
 

src/App.tsx

@@ -1,13 +1,11 @@
 import "./App.css";
-import Onboarding from "./app/Onboarding/Onboarding" 
+import Kanban from "./app/Kanban/Kanban" 
 
 function App() {
 
   return (
     <>
-      <div>
-        <Onboarding/>
-      </div>
+      <Kanban/>
     </>
   );
 }

src/app/Kanban/Kanban.css

@@ -0,0 +1,7 @@
+.content {
+    display: flex;
+    flex: 1;
+    padding: 16px;
+    overflow: auto;
+    box-sizing: border-box;
+}

src/app/Kanban/Kanban.tsx

@@ -0,0 +1,39 @@
+import SidePanel from "../../components/SidePanel/SidePanel" 
+import { Flex } from "@radix-ui/themes";
+import { requirements } from "../../components/SidePanel/types"
+import "./Kanban.css"
+
+export default function Kanban() {
+  // Pretend this is the queried data
+  const user = {
+    "name": "Khankamol Chor Kongrukgreatiyos",
+    "majors": ["Computer Science BA", "Data Science"],
+    "minors": []
+  }
+
+  return (
+    <>
+    <Flex direction="row" height="100vh">
+        <SidePanel 
+          name={user.name} 
+          majors={user.majors} 
+          minors={user.minors}
+          totalUnits={140}
+          transferUnits={40}
+          pnpTotal={15}
+          requirements={requirements}
+        />
+        <div className="content">
+            <Flex width="100%">
+            TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
+            TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
+            TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
+            TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
+            TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTest
+            TestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTestTests
+            </Flex>
+        </div>
+    </Flex>
+    </>
+  );
+}

src/app/Onboarding/Onboarding.tsx

@@ -0,0 +1,12 @@
+import AddDegree from "../../components/AddDegree/AddDegree" 
+
+export default function Onboarding() {
+
+  return (
+    <>
+      <div>
+        <AddDegree isMajor={false}/>
+      </div>
+    </>
+  );
+}

src/components/AddDegree/AddDegree.css

@@ -1,3 +1,8 @@
+#root {
+    padding: 0;
+    margin: 0;
+}
+
 .container {
     width: 500px;
     flex-direction: column;
@@ -9,6 +14,10 @@
     }
 }
 
+/* -------------------*/
+/* -- Button Styles --*/
+/* ------------------ */
+
 .primary {
     display: flex;
     width: 100%;
@@ -51,6 +60,10 @@
     gap: 16px;
 }
 
+/* ------------------*/
+/* ------ MISC ------*/
+/* ----------------- */
+
 .degree-select {
     width: 100%;
     text-align: start;

src/components/AddDegree/AddDegree.tsx

@@ -53,19 +53,19 @@ export default function AddDegree({ isMajor }: AddDegreeProps) {
     return (
         <div>
             <Flex className="container">
-                <Flex className="header-container">
+                <Flex className="header-container" align="center">
                     <h1>Add {optionType}s</h1>
                     <p className="secondary-text">
                         Search for your {optionType.toLowerCase()} and add it to Gradtrak to list specific requirements.
                     </p>
                 </Flex>
-                <Flex direction="column" align="start" gap="16px">
+                <Flex direction="column" align="start" gap="16px" width="100%">
                     <DegreeSelect/>
                     <a>Don't see your {optionType.toLowerCase()}?</a>
                     <button className="secondary" onClick={handleAddDegree}>Add</button>
                 </Flex>
-                <Separator size="4" />
-                <Flex direction="column" align="start" gap="16px">
+                <Separator size="4"/>
+                <Flex direction="column" align="start" gap="16px"  width="100%">
                     <h2>Selected {optionType}s</h2>
                     {selectedDegreeList.length === 0 ? (
                         <p className="secondary-text">None Selected</p>
@@ -80,7 +80,7 @@ export default function AddDegree({ isMajor }: AddDegreeProps) {
                         </div>
                     )}
                 </Flex>
-                <Flex gap="10px">
+                <Flex gap="10px" width="100%">
                     <button className="secondary">Skip</button>
                     <button className="primary">Confirm</button>
                 </Flex>

src/components/SidePanel/SidePanel.css

@@ -0,0 +1,151 @@
+.sidepanel {
+  width: 314px; 
+  height: 100vh; 
+  padding-top: var(--S, 16px);
+  flex-direction: column;  
+  border-right: 1px solid #EAEAEA; 
+  background: var(--White, #FFF); 
+  position: relative; 
+  overflow-y: auto; 
+  box-sizing: border-box; 
+}
+
+/* ----------------------*/
+/* -- Container Styles --*/
+/* ----------------------*/
+
+.sidepanel-container {
+	display: flex;
+	padding: var(--M, 24px);
+	flex-direction: column;
+	align-items: flex-start;
+	gap: var(--S, 16px);
+	align-self: stretch;
+}
+.sidepanel-container.accordion {
+	padding: var(--S, 16px); 
+  gap: var(--XS, 8px);
+}
+
+.accordion-contents {
+  display: flex;
+  flex-direction: column;
+  align-items: flex-start;
+  gap: var(--XXS, 4px);
+}
+
+.sidepanel-header-container {
+	display: flex;
+  flex-direction: row;
+	justify-content: space-between;
+	align-items: flex-start;
+	align-self: stretch;
+}
+
+.user-header {
+	display: flex;
+	flex-direction: column;
+	align-items: flex-start;
+	flex-grow: 1;
+	max-width: calc(100% - 52px);
+}
+
+.accordion-item {
+  display: flex;
+  align-items: flex-start;
+  gap: var(--XS, 8px);
+  align-self: stretch;
+}
+
+.user-info-grid {
+	display: grid;
+	grid-template-columns: 2fr 3fr; 
+	gap: 12px 24px;
+}
+
+.label {
+	color: var(--Secondary-Text, #8A8A8A);
+	font-size: 0.875em;
+	text-align: left;
+	align-self: start; 
+  }
+
+  .value {
+	font-size: 0.875em;
+	text-align: left;
+	align-self: start;
+  }
+
+  .value ul {
+	list-style: none; 
+	padding: 0;
+	margin: 0;
+  }
+
+/* -------------------*/
+/* -- Button Styles --*/
+/* ------------------ */
+
+button.primary {
+    display: flex;
+    width: 100%;
+    padding: 12px var(--S, 16px);
+    justify-content: center;
+    align-items: center;
+    gap: 10px; 
+    border-radius: var(--XXS, 4px);
+    background: var(--Blue, #2F80ED); /* Berkeleytime Blue */
+    font-size: 14px;
+    color: #FFF; 
+    transition: background-color 0.3s ease;
+}
+button.primary:hover {
+    background: var(--Hover-A, #0069D9);
+}
+
+button.secondary {
+    display: flex;
+    padding: var(--XXS, 6px) var(--XS, 12px);
+    justify-content: center;
+    align-items: center;
+    gap: 10px;
+    border-radius: var(--XXS, 4px);
+    border: 1px solid var(--Gray-2, #C7C7C7);
+    background: #FFF;
+    font-size: 14px;
+    color: var(--Blue, #2F80ED);
+    transition: background-color 0.3s ease, border-color 0.3s ease;
+}
+button.secondary:hover {
+    border: 1px solid var(--Gray-2, #C7C7C7);
+    background: var(--Hover-B, #F3F4F9);
+}
+
+/* ----------------------*/
+/* -------- MISC --------*/
+/* ----------------------*/
+
+.truncate {
+	white-space: nowrap; 
+	overflow: hidden;
+	text-overflow: ellipsis; 
+	max-width: 100%;
+}
+
+.requirement-header{
+  color: var(--Secondary-Text, #8A8A8A);
+  font-size: 0.75em;
+  font-weight: 580;
+  text-transform: uppercase;
+}
+
+.icon {
+  width: 20px;
+  height: 20px;
+  color: var(--Secondary-Text, #8A8A8A);
+}
+.icon.green{
+  width: 20px;
+  height: 10px;
+  color: var(--Green, #13B56B);
+}