From d1a35dd2c14c0f4318289b591bb2cc56ce29ea32 Mon Sep 17 00:00:00 2001
From: Jagraj Aulakh <aulakhjagraj@gmail.com>
Date: Thu, 23 Mar 2023 16:41:46 -0400
Subject: [PATCH] Changed widget layout. Also changed the dummy data

---
 frontend/src/components/CoursesWidget.jsx | 51 ++++++++++++++---------
 frontend/src/pages/HomePage.jsx           |  2 +-
 2 files changed, 32 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/CoursesWidget.jsx b/frontend/src/components/CoursesWidget.jsx
index c938e9a..84b0f3e 100644
--- a/frontend/src/components/CoursesWidget.jsx
+++ b/frontend/src/components/CoursesWidget.jsx
@@ -22,29 +22,40 @@ const CoursesWidget = ({ className = "" }) => {
       instructor: "Serif Saad",
     },
     {
-      course_id: 1,
-      course_title: "Advanced Website Design",
-      couse_code: "COMP 2707",
-      instructor: "Saja Al Mamoori",
+      course_id: 4,
+      course_title: "Selected Topics in Software Engineering",
+      couse_code: "COMP 4800",
+      instructor: "Jessica Chen",
+    },
+    {
+      course_id: 5,
+      course_title: "Project Management: Techniques and Tools",
+      couse_code: "COMP 4990",
+      instructor: "Arunita Jaekel",
     },
   ];
   return (
-    <Container
-      className={`${className} py-3 d-flex flex-wrap justify-content-around`}
-    >
-      {dummyData.map((course, i) => {
-        return (
-          <Link is="a" key={i} href={`/course/${course.course_id}`}>
-            <Card role="button" className="m-2" style={{ width: "300px" }}>
-              <h2 className="text-center py-5 border">{course.couse_code}</h2>
-              <Card.Body>
-                <Card.Title>{course.course_title}</Card.Title>
-                <Card.Text>{course.instructor}</Card.Text>
-              </Card.Body>
-            </Card>
-          </Link>
-        );
-      })}
+    <Container className={`${className} py-3 grid`}>
+      <div className="row justify-content-center">
+        {dummyData.map((course, i) => {
+          return (
+            <Link
+              is="a"
+              key={i}
+              href={`/course/${course.course_id}`}
+              className="col col-lg-2"
+            >
+              <Card role="button" className="m-2" style={{ width: "300px" }}>
+                <h2 className="text-center py-5 border">{course.couse_code}</h2>
+                <Card.Body>
+                  <Card.Title>{course.course_title}</Card.Title>
+                  <Card.Text>{course.instructor}</Card.Text>
+                </Card.Body>
+              </Card>
+            </Link>
+          );
+        })}
+      </div>
     </Container>
   );
 };
diff --git a/frontend/src/pages/HomePage.jsx b/frontend/src/pages/HomePage.jsx
index 0c517d0..f8ba751 100644
--- a/frontend/src/pages/HomePage.jsx
+++ b/frontend/src/pages/HomePage.jsx
@@ -19,7 +19,7 @@ const HomePage = () => {
         <br />
         <div>
           <h2>Courses</h2>
-          <CoursesWidget className="ms-0 w-75 border" />
+          <CoursesWidget className="ms-0 border" />
         </div>
       </Container>
     </div>
-- 
2.49.1