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

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>
     );
 }