hardcoded icons

frontend/src/pages/Courses/Courses.module.css

@@ -1,12 +1,11 @@
 @import url('https://fonts.googleapis.com/css2?family=Open+Sans:ital,wght@0,300..800;1,300..800&display=swap');
 
 .Container {
-    margin: 2% 0% 3% 2%;
+    margin: 2% 0% 2% 2%;
 }
 .Row {
     display: flex;
     flex-direction: row;
-    margin-bottom: 0.5%;
 }
 
 .Column {
@@ -16,22 +15,50 @@
     width: 100%;
 }
 
+.MetadataColumn {
+    font-size:small;
+    display: flex;
+    flex-direction: column;
+    margin-right: 1%;
+}
+
+.MetadataHeading {
+    color: #727272;
+    margin-bottom: 2px;
+}
+
+.MetadataBox {
+    border: 1px solid #C2C2C2;
+    color: #727272;
+    font-weight: 600;
+    width: 40px;
+    text-align: center
+}
+
+.Season {
+    margin-right: 1.5%;
+    margin-left: 1%;
+}
+
+.CourseCode {
+    font-size: small;
+    font-weight: 600;
+}
+
+.CourseName {
+    font-size: x-small;
+}
+
 .Grade {
     font-weight: 600;
-    font-size:larger;
+    font-size:x-large;
     margin-right: 0.5%;
 }
 
 .Year {
-    font-size:small;
+    font-size:medium;
     font-weight: 600;
     color: #727272;
-    vertical-align: bottom;
-}
-
-.Course {
-    border-radius: 25px;
-    background-color: #E1E9F8;
-    margin-bottom: 0.5%;
-    padding: 1%;
+    align-self:flex-end;
+    margin-bottom: 2.5px;
 }

frontend/src/pages/Courses/Courses.tsx

@@ -4,10 +4,10 @@ import YearBox from "./components/YearBox";
 export default function Courses() {
   return (
     <div>
-      <YearBox text="First Year"/>
-      <YearBox text="Sophmore"/>
-      <YearBox text="Junior"/>
-      <YearBox text="Senior"/>
+      <YearBox grade="First Year"/>
+      <YearBox grade="Sophomore"/>
+      <YearBox grade="Junior"/>
+      <YearBox grade="Senior"/>
     </div>
   );
 }

frontend/src/pages/Courses/components/CourseBox.tsx

@@ -1,15 +1,61 @@
 import styles from "./../Courses.module.css"
 
+import fall_image from './../images/fall.png';
+import spring_image from './../images/spring.png';
+import checkmark from './../images/checkmark.png';
 
 type Props = {
-  readonly text: string;
+    readonly course: string;
+    readonly season: string;
+    readonly completed: string;
 };
 
-export default function CourseBox({ text }: Props) {
-  return (
-    <div className={styles.Course}>
-        <div>{text}</div>
-        <div>{"full course name"}</div>
-    </div>
-  );
+export default function CourseBox({ season, course, completed }: Props) {
+    return (
+        <div
+            style={{
+                borderRadius: "20px",
+                backgroundColor: completed === "true" ? "#E1E9F8" : "#F5F5F5",
+                marginBottom: "0.5%",
+                padding: "1%"
+            }}
+        >
+            <div className={styles.Row}>
+                <img src={checkmark}
+                    alt={completed}
+                    style={{
+                        marginLeft: "1%",
+                        display: completed === "true" ? "flow" : "none"
+                    }}></img>
+                <img src={season === "fall" ? fall_image : spring_image} alt={season} className={styles.Season}></img>
+                <div className={styles.Column}>
+                    <div className={styles.CourseCode}>{course}</div>
+                    <div className={styles.CourseName}>{"full course name"}</div>
+                </div>
+                <div className={styles.Row} style={{ fontSize: "small", alignItems: "center"}}>
+                    <div className={styles.MetadataBox}
+                        style={{
+                            borderRadius: "25px",
+                            marginRight: "5%"
+                        }}>
+                        {"~4.0"}
+                    </div>
+                    <div className={styles.MetadataBox}
+                        style={{
+                            borderRadius: "25px",
+                            marginRight: "5%"
+                        }}>
+                        {"~4.0"}
+                    </div>
+                    <div className={styles.MetadataBox}
+                        style={{
+                            borderRadius: "25px",
+                            marginRight: "5%"
+                        }}>{
+                            "~3.8"}
+                    </div>
+                </div>
+            </div>
+        </div >
+    );
 }

frontend/src/pages/Courses/components/MetadataBox.tsx

@@ -0,0 +1,18 @@
+import styles from "./../Courses.module.css"
+
+
+type Props = {
+  readonly heading: string;
+  readonly text: string;
+};
+
+export default function MetadataBox({ heading, text }: Props) {
+  return (
+    <div className={styles.MetadataColumn}>
+        <div className={styles.MetadataHeading}>{heading}</div>
+        <div className={styles.Row} style={{marginBottom:"10%"}}>
+            <div className={styles.MetadataBox} style={{borderRadius: "7px"}}>{text}</div>
+        </div>
+    </div>
+  );
+}

frontend/src/pages/Courses/components/SemesterBox.tsx

@@ -0,0 +1,23 @@
+import styles from "./../Courses.module.css"
+import CourseBox from "./CourseBox";
+import MetadataBox from "./MetadataBox";
+
+
+type Props = {
+    readonly season: string;
+};
+
+export default function SemesterBox({ season }: Props) {
+    return (
+        <div className={styles.Column}>
+            <div className={styles.Row}>
+                <MetadataBox heading="CREDITS" text="5.5"/>
+                <MetadataBox heading="RATING" text="~4.0"/>
+                <MetadataBox heading="WORKLOAD" text="~3.8"/>
+                <MetadataBox heading="DISTRIBUTIONALS" text="So"/>
+            </div>
+            <CourseBox season={season} course="COURSE NAME #1" completed="true"/>
+            <CourseBox season={season} course="COURSE NAME #2" completed="false"/>
+        </div>
+    );
+}

frontend/src/pages/Courses/components/YearBox.tsx

@@ -1,37 +1,20 @@
 import styles from "./../Courses.module.css"
-import CourseBox from "./CourseBox";
+import SemesterBox from "./SemesterBox";
 
 type Props = {
-  readonly text: string;
+  readonly grade: string;
 };
 
-export default function YearBox({ text }: Props) {
+export default function YearBox({ grade }: Props) {
   return (
     <div className={styles.Container}>
         <div className={styles.Row}>
-            <div className={styles.Grade}>{text}</div>
-            <div className={styles.Year}>{"(year-year)"}</div>
+            <div className={styles.Grade}>{grade}</div>
+            <div className={styles.Year}>{"2022-2023"}</div>
         </div>
         <div className={styles.Row}>
-            <div className={styles.Column}>
-                <div className={styles.Row}>
-                    <div>{"CREDITS"}</div>
-                    <div>{"RATING"}</div>
-                    <div>{"WORKLOAD"}</div>
-                    <div>{"DISTRIBUTIONALS"}</div>
-                </div>
-                <CourseBox text="COURSE NAME #1"/>
-                <CourseBox text="COURSE NAME #2"/>
-            </div>
-            <div className={styles.Column}>
-                <div className={styles.Row}>
-                    <div>{"CREDITS"}</div>
-                    <div>{"RATING"}</div>
-                    <div>{"WORKLOAD"}</div>
-                    <div>{"DISTRIBUTIONALS"}</div>
-                </div>
-                <CourseBox text="COURSE NAME #3"/>
-            </div>
+            <SemesterBox season="fall"/>
+            <SemesterBox season="spring"/>
         </div>
     </div>
   );