Realigned some stylings in Onboarding flow

asuc-octo · Nov 13, 2024 · 5969ab4 · 5969ab4
1 parent 1b90047
commit 5969ab4
Show file tree

Hide file tree

Showing 7 changed files with 27 additions and 43 deletions.
diff --git a/src/App.css b/src/App.css
diff --git a/src/App.tsx b/src/App.tsx
@@ -1,8 +1,7 @@
-import "./App.css";
 import { BrowserRouter as Router, Routes, Route } from 'react-router-dom';
 import SetUpPage from "./components/SetUpPage"
 import AddDegree from "./components/AddDegree/AddDegree";
-import SemesterHome from './SemesterHome';
+import SemesterHome from './app/SemesterHome/SemesterHome';
 
 function App() {
   return (
@@ -11,7 +10,7 @@ function App() {
         <Route path="/" element={<SetUpPage />} />
         <Route path="/add-major" element={<AddDegree isMajor={true}/>} />
         <Route path="/add-minor" element={<AddDegree isMajor={false}/>} />
-        <Route path="/next" element={<SemesterHome />} />
+        <Route path="/semester-home" element={<SemesterHome />} />
       </Routes>
     </Router>
   );

diff --git a/src/SemesterHome.css → src/app/SemesterHome/SemesterHome.css b/src/SemesterHome.css → src/app/SemesterHome/SemesterHome.css
@@ -1,6 +1,13 @@
 /* .body {
     display: block !important;
 } */
+.semester-home-container {
+    display: flex;
+    direction: row;
+    height: 100vh;
+    width: 100vh;
+}
+
 .content {
     display: flex;
     flex: 1;

diff --git a/src/SemesterHome.tsx → src/app/SemesterHome/SemesterHome.tsx b/src/SemesterHome.tsx → src/app/SemesterHome/SemesterHome.tsx
@@ -1,9 +1,9 @@
 import React from 'react';
 import { useLocation } from 'react-router-dom';
-import SemesterBlock from "./components/SemesterBlock"
+import SemesterBlock from "../../components/SemesterBlock"
 import { Flex } from '@radix-ui/themes';
-import SidePanel from "./components/SidePanel/SidePanel" 
-import { requirements } from "./components/SidePanel/types"
+import SidePanel from "../../components/SidePanel/SidePanel" 
+import { requirements } from "../../components/SidePanel/types"
 import "./SemesterHome.css"
 
 

diff --git a/src/components/AddDegree/AddDegree.tsx b/src/components/AddDegree/AddDegree.tsx
@@ -44,7 +44,7 @@ export default function AddDegree({ isMajor }: AddDegreeProps) {
     };
 
     const handleConfirmClick = () => {
-        navigate('/next', { state : { startYear, gradYear, summerCheck }  })
+        navigate('/semester-home', { state : { startYear, gradYear, summerCheck }  })
     };
 
     const DegreeSelect = () => (

diff --git a/src/components/SetUpPage/index.tsx b/src/components/SetUpPage/index.tsx
@@ -32,8 +32,10 @@ function SetUpPage() {
   return (
     <Flex className="setup-container" direction="column" gap="32px" width="100%" align="center">
       <Flex direction="column" gap="8px" width="100%" align="center">
-        <Text className="setup">Set Up</Text>
-        <Text className="enteryear">Enter your start year and graduation year</Text>
+        <h1>Set Up</h1>
+        <p className="secondary-text">
+          Enter your start year and graduation year
+        </p>
       </Flex>
 
       <Flex className= "yearContainer" direction="row" gap="16px" align="center">
@@ -55,7 +57,7 @@ function SetUpPage() {
           Include Summer Semesters?
         </Flex>
       </Text>
-			<Button className='next-btn' onClick={handleNextClick}>Next</Button>
+      <button className="primary"  onClick={handleNextClick}>Next</button>
 		</Flex>
   );
 }

diff --git a/src/components/SetUpPage/setup.css b/src/components/SetUpPage/setup.css
@@ -4,20 +4,23 @@
     align-items: center;
     place-items: center;
 }
+
 .setup-container {
-    width: 420px;
-    margin-left: 500px;
-    background-color: white !important;
-    display: flex;
-    justify-content: center !important;
-    align-items: center !important;
+    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 {
         width: 100%; 
     }
 }
 
+
 body {
     background-color: white;
     /* display: inline !important; */