Link component, Card component, Course Popup component styling, and wrangling with the serialization type"

src/views/components/injected/CoursePopup/CoursePopup.module.scss

@@ -1,35 +1,30 @@
-.popupBody {
-    height: auto;
-    color: white;
-    padding: 10px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-}
+.popup {
+    border-radius: 12px;
+    position: relative;
 
-.coursePopupBase {
-    position: fixed;
-    transform: translateY(-50%);
-    top: 15px;
-    right: 15px;
-    z-index: 2147483647;
-}
+    .close {
+        position: absolute;
+        top: 12px;
+        right: 12px;
+        cursor: pointer;
+    }
 
-.coursePopupHeader {
-    display: flex;
-    height: 50;
-    background-color: #29465b;
-    width: 100%;
-
-    .closePopupButton {
-        display: flex;
+    .body {
+        height: auto;
+        color: white;
+        padding: 12px;
+        margin: 40px;
         align-items: center;
         justify-content: center;
-        width: 20px;
-        height: 20px;
-        margin: 5px;
-        margin-left: auto;
-        cursor: pointer;
-        color: white;
+
+        .title {
+            display: flex;
+            align-items: center;
+            justify-content: center;
+
+            .uniqueId {
+                margin-left: 8px;
+            }
+        }
     }
 }

src/views/components/injected/CoursePopup/CoursePopup.tsx

@@ -1,7 +1,10 @@
 import React from 'react';
 import { Course } from 'src/shared/types/Course';
+import Card from '../../common/Card/Card';
 import Icon from '../../common/Icon/Icon';
+import Link from '../../common/Link/Link';
 import Popup from '../../common/Popup/Popup';
+import Text from '../../common/Text/Text';
 import styles from './CoursePopup.module.scss';
 
 interface Props {
@@ -14,11 +17,24 @@ interface Props {
  */
 export default function CoursePopup({ course, onClose }: Props) {
     return (
-        <Popup overlay>
-            <div className={styles.popupBody}>
-                <div className={styles.courseTitle}>{course.courseName}</div>
-                <div className={styles.courseDescription}>{course.uniqueId}</div>
-            </div>
+        <Popup className={styles.popup} overlay>
+            <Icon className={styles.close} size='large' name='close' onClick={onClose} />
+            <Card className={styles.body}>
+                <Text className={styles.title} size='large' weight='bold' color='black'>
+                    {course.courseName} ({course.department} {course.number})
+                    <Link
+                        span
+                        url={course.url}
+                        className={styles.uniqueId}
+                        size='medium'
+                        weight='semi_bold'
+                        color='burnt_orange'
+                    >
+                        #{course.uniqueId}
+                    </Link>
+                </Text>
+                
+            </Card>
         </Popup>
     );
 }