From 1b51d65c89a4b544f4f2a9c60106e14300f9a3b0 Mon Sep 17 00:00:00 2001
From: Dhruv <dhruvarora@utexas.edu>
Date: Mon, 5 Feb 2024 18:24:02 -0600
Subject: [PATCH 1/7] feat: Create icon helper (#77)

* create icon helper

* change getStatusIcon to StatusIcon react component

---------

Co-authored-by: Razboy20 <razboy20@gmail.com>
---
 src/shared/util/icons.tsx | 24 ++++++++++++++++++++++++
 1 file changed, 24 insertions(+)
 create mode 100644 src/shared/util/icons.tsx

diff --git a/src/shared/util/icons.tsx b/src/shared/util/icons.tsx
new file mode 100644
index 00000000..88f4ebfd
--- /dev/null
+++ b/src/shared/util/icons.tsx
@@ -0,0 +1,24 @@
+import React, { SVGProps } from 'react';
+import ClosedIcon from '~icons/material-symbols/lock';
+import WaitlistIcon from '~icons/material-symbols/timelapse';
+import CancelledIcon from '~icons/material-symbols/warning';
+import { Status } from '../types/Course';
+
+/**
+ * Get Icon component based on status
+ * @param props.status status
+ * @returns React.ReactElement - the icon component
+ */
+export function StatusIcon(props: SVGProps<SVGSVGElement> & { status: Status }): React.ReactElement {
+    const { status, ...rest } = props;
+
+    switch (props.status) {
+        case Status.WAITLISTED:
+            return <WaitlistIcon {...rest} />;
+        case Status.CLOSED:
+            return <ClosedIcon {...rest} />;
+        case Status.CANCELLED:
+            return <CancelledIcon {...rest} />;
+        default:
+    }
+}

From b2b6a062805141b1a4a716981fcafec75df41fb0 Mon Sep 17 00:00:00 2001
From: Razboy20 <razboy20@gmail.com>
Date: Mon, 5 Feb 2024 21:27:22 -0600
Subject: [PATCH 2/7] refactor: replace classnames with clsx (#78)

---
 package.json                                      |  2 +-
 pnpm-lock.yaml                                    | 15 ++++++++-------
 src/views/components/common/Button/Button.tsx     |  4 ++--
 src/views/components/common/Card/Card.tsx         |  6 +++---
 src/views/components/common/Divider/Divider.tsx   |  4 ++--
 src/views/components/common/Icon/Icon.tsx         |  4 ++--
 src/views/components/common/Link/Link.tsx         |  4 ++--
 src/views/components/common/Popup/Popup.tsx       |  6 +++---
 src/views/components/common/Spinner/Spinner.tsx   |  4 ++--
 src/views/components/common/Text/Text.tsx         |  4 ++--
 .../CourseDescription/CourseDescription.tsx       |  4 ++--
 11 files changed, 29 insertions(+), 28 deletions(-)

diff --git a/package.json b/package.json
index e8515d4e..fd7ab2a6 100644
--- a/package.json
+++ b/package.json
@@ -20,7 +20,7 @@
         "@types/sql.js": "^1.4.9",
         "@vitejs/plugin-react": "^4.2.1",
         "chrome-extension-toolkit": "^0.0.51",
-        "classnames": "^2.5.1",
+        "clsx": "^2.1.0",
         "highcharts": "^11.3.0",
         "highcharts-react-official": "^3.2.1",
         "react": "^18.2.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4310cf74..c5afb4a9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -22,9 +22,9 @@ dependencies:
   chrome-extension-toolkit:
     specifier: ^0.0.51
     version: 0.0.51
-  classnames:
-    specifier: ^2.5.1
-    version: 2.5.1
+  clsx:
+    specifier: ^2.1.0
+    version: 2.1.0
   highcharts:
     specifier: ^11.3.0
     version: 11.3.0
@@ -6104,10 +6104,6 @@ packages:
       consola: 3.2.3
     dev: true
 
-  /classnames@2.5.1:
-    resolution: {integrity: sha512-saHYOzhIQs6wy2sVxTM6bUDsQO4F50V9RQ22qBpEdCW+I+/Wmke2HOl6lS6dTpdxVhb88/I6+Hs+438c3lfUow==}
-    dev: false
-
   /clean-stack@2.2.0:
     resolution: {integrity: sha512-4diC9HaTE+KRAMWhDhrGOECgWZxoevMc5TlkObMqNSsVU62PYzXZ/SMTjzyGAFF1YusgxGcSWTEXBhp0CPwQ1A==}
     engines: {node: '>=6'}
@@ -6159,6 +6155,11 @@ packages:
     engines: {node: '>=0.8'}
     dev: true
 
+  /clsx@2.1.0:
+    resolution: {integrity: sha512-m3iNNWpd9rl3jvvcBnu70ylMdrXt8Vlq4HYadnU5fwcOtvkSQWPmj7amUcDT2qYI7risszBjI5AUIUox9D16pg==}
+    engines: {node: '>=6'}
+    dev: false
+
   /color-convert@1.9.3:
     resolution: {integrity: sha512-QfAUtd+vFdAtFQcC8CCyYt1fYWxSqAiK2cSD6zDB8N3cpsEBAvRxp9zOGg6G/SHHJYAT88/az/IuDGALsNVbGg==}
     dependencies:
diff --git a/src/views/components/common/Button/Button.tsx b/src/views/components/common/Button/Button.tsx
index 902325bd..98d1e4ef 100644
--- a/src/views/components/common/Button/Button.tsx
+++ b/src/views/components/common/Button/Button.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import styles from './Button.module.scss';
 
@@ -30,7 +30,7 @@ export function Button({
         <button
             style={style}
             data-testid={testId}
-            className={classNames(styles.button, className, styles[type ?? 'primary'], {
+            className={clsx(styles.button, className, styles[type ?? 'primary'], {
                 [styles.disabled]: disabled,
             })}
             title={title}
diff --git a/src/views/components/common/Card/Card.tsx b/src/views/components/common/Card/Card.tsx
index f063c4b8..725490a2 100644
--- a/src/views/components/common/Card/Card.tsx
+++ b/src/views/components/common/Card/Card.tsx
@@ -1,5 +1,5 @@
-import classNames from 'classnames';
-import React, { Component } from 'react';
+import clsx from 'clsx';
+import React from 'react';
 import styles from './Card.module.scss';
 
 export type Props = {
@@ -17,7 +17,7 @@ export default function Card(props: Props) {
     return (
         <div
             style={props.style}
-            className={classNames(styles.card, props.className)}
+            className={clsx(styles.card, props.className)}
             onClick={props.onClick}
             data-testid={props.testId}
         >
diff --git a/src/views/components/common/Divider/Divider.tsx b/src/views/components/common/Divider/Divider.tsx
index d515bc3b..3ad13117 100644
--- a/src/views/components/common/Divider/Divider.tsx
+++ b/src/views/components/common/Divider/Divider.tsx
@@ -1,4 +1,4 @@
-import classnames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import { Color } from '@views/styles/colors.module.scss';
 import styles from './Divider.module.scss';
@@ -21,5 +21,5 @@ export default function Divider(props: Props) {
         borderStyle: props.type,
     };
 
-    return <hr data-testid={props.testId} style={style} className={classnames(styles.divider, props.className)} />;
+    return <hr data-testid={props.testId} style={style} className={clsx(styles.divider, props.className)} />;
 }
diff --git a/src/views/components/common/Icon/Icon.tsx b/src/views/components/common/Icon/Icon.tsx
index 084c7111..9f6192e3 100644
--- a/src/views/components/common/Icon/Icon.tsx
+++ b/src/views/components/common/Icon/Icon.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import colors, { Color } from '@views/styles/colors.module.scss';
 import fonts, { Size } from '@views/styles/fonts.module.scss';
@@ -36,7 +36,7 @@ export default function Icon(props: Props) {
         <span
             data-testid={props.testId}
             style={style}
-            className={classNames(styles.icon, props.className)}
+            className={clsx(styles.icon, props.className)}
             onClick={props.onClick}
         >
             {props.name}
diff --git a/src/views/components/common/Link/Link.tsx b/src/views/components/common/Link/Link.tsx
index f4e9a9a1..51a21eca 100644
--- a/src/views/components/common/Link/Link.tsx
+++ b/src/views/components/common/Link/Link.tsx
@@ -1,5 +1,5 @@
 import { background } from '@shared/messages';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { PropsWithChildren } from 'react';
 import Text, { TextProps } from '../Text/Text';
 import styles from './Link.module.scss';
@@ -29,7 +29,7 @@ export default function Link(props: PropsWithChildren<Props>) {
             color='bluebonnet'
             {...passedProps}
             span
-            className={classNames(
+            className={clsx(
                 styles.link,
                 {
                     [styles.disabled]: isDisabled,
diff --git a/src/views/components/common/Popup/Popup.tsx b/src/views/components/common/Popup/Popup.tsx
index 24f8e495..15264de2 100644
--- a/src/views/components/common/Popup/Popup.tsx
+++ b/src/views/components/common/Popup/Popup.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { PropsWithChildren, useCallback } from 'react';
 import styles from './Popup.module.scss';
 
@@ -46,12 +46,12 @@ export default function Popup({ onClose, children, className, style, testId, ove
         <div
             style={style}
             ref={containerRef}
-            className={classNames(styles.container, {
+            className={clsx(styles.container, {
                 [styles.overlay]: overlay,
             })}
             data-testid={testId}
         >
-            <div ref={bodyRef} className={classNames(styles.body, className)}>
+            <div ref={bodyRef} className={clsx(styles.body, className)}>
                 {children}
             </div>
         </div>
diff --git a/src/views/components/common/Spinner/Spinner.tsx b/src/views/components/common/Spinner/Spinner.tsx
index 6d15c2c5..6aa0620f 100644
--- a/src/views/components/common/Spinner/Spinner.tsx
+++ b/src/views/components/common/Spinner/Spinner.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React from 'react';
 import styles from './Spinner.module.scss';
 
@@ -12,5 +12,5 @@ type Props = {
  * A simple spinner component that can be used to indicate loading.
  */
 export default function Spinner({ className, testId, style }: Props) {
-    return <div data-testid={testId} style={style} className={classNames(styles.spinner, className)} />;
+    return <div data-testid={testId} style={style} className={clsx(styles.spinner, className)} />;
 }
diff --git a/src/views/components/common/Text/Text.tsx b/src/views/components/common/Text/Text.tsx
index 99d62d28..c444619c 100644
--- a/src/views/components/common/Text/Text.tsx
+++ b/src/views/components/common/Text/Text.tsx
@@ -1,4 +1,4 @@
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { PropsWithChildren } from 'react';
 import styles from './Text.module.scss';
 
@@ -20,7 +20,7 @@ type Variant = (typeof variants)[number];
  * A reusable Text component with props that build on top of the design system for the extension
  */
 export default function Text({ variant, as, className, ...props }: PropsWithChildren<TextProps>) {
-    const mergedClassName = classNames(styles.text, styles[variant], className);
+    const mergedClassName = clsx(styles.text, styles[variant], className);
 
     if (as === 'div') return <div className={mergedClassName} {...props} />;
 
diff --git a/src/views/components/injected/CoursePopup/CourseDescription/CourseDescription.tsx b/src/views/components/injected/CoursePopup/CourseDescription/CourseDescription.tsx
index a130948a..c1eedc25 100644
--- a/src/views/components/injected/CoursePopup/CourseDescription/CourseDescription.tsx
+++ b/src/views/components/injected/CoursePopup/CourseDescription/CourseDescription.tsx
@@ -1,5 +1,5 @@
 import { Course } from '@shared/types/Course';
-import classNames from 'classnames';
+import clsx from 'clsx';
 import React, { useEffect, useState } from 'react';
 import Spinner from '@views/components/common/Spinner/Spinner';
 import Text from '@views/components/common/Text/Text';
@@ -64,7 +64,7 @@ interface LineProps {
 function DescriptionLine({ line }: LineProps) {
     const lowerCaseLine = line.toLowerCase();
 
-    const className = classNames({
+    const className = clsx({
         [styles.prerequisite]: lowerCaseLine.includes('prerequisite'),
         [styles.onlyOne]:
             lowerCaseLine.includes('may be') || lowerCaseLine.includes('only one') || lowerCaseLine.includes('may not'),

From dd2f696f8de2c0b291e917ef4d4cb2171b76712c Mon Sep 17 00:00:00 2001
From: Derek Chen <derex1987@gmail.com>
Date: Mon, 5 Feb 2024 23:04:24 -0600
Subject: [PATCH 3/7] feat: Calendar Grid and Grid Cells (#81)

---
 .../CalendarGrid/CalendarGrid.module.scss     | 76 ++++++++++++++-----
 .../common/CalendarGrid/CalendarGrid.tsx      | 59 ++++++++------
 .../CalendarGridCell.module.scss              | 34 ++++-----
 .../CalendarGridCell/CalendarGridCell.tsx     |  4 +-
 4 files changed, 112 insertions(+), 61 deletions(-)

diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
index 6f1cf6c8..a2e208a4 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.module.scss
@@ -3,6 +3,7 @@
 
 .dayLabelContainer {
     display: flex;
+    flex-direction: row;
     height: 13px;
     min-width: 40px;
     min-height: 13px;
@@ -13,24 +14,44 @@
     flex: 1 0 0;
 }
 
-.dayLabel {
+.calendarGrid {
+    display: grid;
+    grid-template-columns: repeat(5, 1fr);
+    grid-template-rows: repeat(13, 1fr);
+}
+
+.calendarRow {
+    display: flex;
+}
+
+.calendar {
+    // display: grid;
+    // grid-template-columns: auto repeat(5, 1fr);
+    gap: 10px;
+}
+
+.day {
+    gap: 5px;
     color: colors.$burnt_orange;
     text-align: center;
-    font-family: Roboto;
     font-size: 14.22px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
 }
 
-.calendar {
-    display: grid;
-    grid-template-columns: auto repeat(5, 1fr);
-    gap: 10px;
+.timeAndGrid {
+    display: flex;
 }
 
-.day {
-    gap: 5px;
+.timeColumn {
+    display: flex;
+    min-height: 573px;
+    flex-direction: column;
+    justify-content: space-between;
+    align-items: flex-start;
+    flex: 1 0 0;
+    border-radius: var(--border-radius-none, 0px);
 }
 
 .timeBlock {
@@ -41,18 +62,33 @@
     max-width: 50px;
     min-height: 40px;
     flex-direction: column;
-    justify-content: flex-end;
     align-items: flex-end;
+    
+    .timeLabelContainer {
+        display: flex;
+        max-height: 20px;
+        flex-direction: column;
+        align-items: flex-end;
+        gap: 17px;
+        flex: 1 0 0;
+        align-self: stretch;
+        border-radius: var(--border-radius-none, 0px);
+    }
+
+    p {
+        color: #1A2024;
+        text-align: left;
+        height: 6.6px;
+        align-self: stretch;
+        margin-top: 0;
+        margin-bottom: 0;
+
+        /* Type scale/small */
+        font-family: "Roboto Flex";
+        font-size: 14.22px;
+        font-style: normal;
+        font-weight: 500;
+        line-height: normal;
+    } 
 }
 
-.timeLabelContainer {
-    display: flex;
-    max-height: 20px;
-    flex-direction: column;
-    justify-content: flex-end;
-    align-items: flex-end;
-    gap: 17px;
-    flex: 1 0 0;
-    align-self: stretch;
-    border-radius: var(--border-radius-none, 0px);
-}
\ No newline at end of file
diff --git a/src/views/components/common/CalendarGrid/CalendarGrid.tsx b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
index f653b5bd..4b90edf1 100644
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -3,35 +3,50 @@ import styles from './CalendarGrid.module.scss';
 import CalendarCell from '../CalendarGridCell/CalendarGridCell';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 
-const daysOfWeek = Object.values(DAY_MAP);
+const daysOfWeek = Object.values(DAY_MAP).filter(d => d != "Saturday" && d != "Sunday")
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
+const grid = Array.from({ length: 5 }, () =>
+  Array.from({ length: 13 }, (_, columnIndex) => (
+    <CalendarCell key={columnIndex} />
+  ))
+);
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
  * @param props 
  */
 const Calendar: React.FC = (props) => {
-  
-    return (
-      <div className={styles.calendar}>
-        <div className={styles.dayLabelContainer}></div>
-        {daysOfWeek.map((day, dayIndex) => (
-          <div key={dayIndex} className={styles.day}>
-            <div className={styles.dayLabelContainer}>
-              <div className={styles.dayLabel}>{day}</div>
-            </div>
-            {hoursOfDay.map((hour) => (
-              <div key={`${day}-${hour}`} className={styles.timeBlock}>
-                <div className={styles.timeLabelContainer}>
-                  <span>{hour}:00</span>
-                </div>
-                <CalendarCell />
-              </div>
-            ))}
+  return (
+    <div className={styles.calendar}>
+      <div className={styles.dayLabelContainer}>
+        {/* Empty cell in the top-left corner */}
+        <div className={styles.day} />
+        {/* Displaying day labels */}
+        {daysOfWeek.map(day => (
+          <div key={day} className={styles.day}>
+            {day}
           </div>
         ))}
       </div>
-    );
-  };
-  
-  export default Calendar;
\ No newline at end of file
+      {/* Displaying the rest of the calendar */}
+      <div className={styles.timeAndGrid}>
+        <div className={styles.timeColumn}>
+          {hoursOfDay.map((hour) => (
+            <div key={hour} className={styles.timeBlock}>
+              <div className={styles.timeLabelContainer}>
+                <p>{hour % 12 === 0 ? 12 : hour % 12}:00 {hour < 12 ? 'AM' : 'PM'}</p>
+              </div>
+            </div>
+          ))}
+        </div>
+        <div className={styles.calendarGrid}>
+          {grid.map((row, rowIndex) => (
+            row
+          ))}
+        </div>
+      </div>
+    </div>
+  )
+};
+
+export default Calendar;
\ No newline at end of file
diff --git a/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss b/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss
index 52db015a..2199d866 100644
--- a/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss
+++ b/src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss
@@ -1,20 +1,18 @@
 .calendarCell {
-    display: flex;
-    width: 165px;
-    height: 52.231px;
-    min-width: 45px;
-    min-height: 40px;
-    flex-direction: column;
-    justify-content: center;
-    align-items: flex-start;
-    position: relative;
-  }
+  display: flex;
+  width: 165px;
+  height: 52.231px;
+  min-width: 45px;
+  min-height: 40px;
+  flex-direction: column;
+  justify-content: center;
+  align-items: flex-start;
+  border: 1px solid #DADCE0;
+}
   
-  .hourLine {
-    position: absolute;
-    left: 0;
-    right: 0;
-    top: 50%;
-    border-top: 1px solid black; /* Adjust line styles as needed */
-  }
-  
\ No newline at end of file
+.hourLine {
+  width: 165px;
+  height: 1px;
+  border-radius: var(--border-radius-none, 0px);
+  background: rgba(218, 220, 224, 0.25);
+}
\ No newline at end of file
diff --git a/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx b/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx
index 03bbfdf0..cdc2c1b1 100644
--- a/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx
+++ b/src/views/components/common/CalendarGridCell/CalendarGridCell.tsx
@@ -8,7 +8,9 @@ import styles from './CalendarGridCell.module.scss';
 const CalendarCell: React.FC = (props) => {
   return (
     <div className={styles.calendarCell}>
-      <div className={styles.hourLine}></div>
+      <div className={styles.hourLine}>
+
+      </div>
     </div>
   );
 };

From f045b400a56569f7353eb00ecd0d081b68660fc5 Mon Sep 17 00:00:00 2001
From: Dhruv <dhruvarora@utexas.edu>
Date: Thu, 8 Feb 2024 11:52:29 -0600
Subject: [PATCH 4/7] feat: PopupCourseBlock Component (#79)

Co-authored-by: Razboy20 <Razboy20@users.noreply.github.com>
Co-authored-by: Razboy20 <razboy20@gmail.com>
---
 package.json                                  |   1 +
 pnpm-lock.yaml                                |   7 ++
 src/shared/util/colors.ts                     |  50 ++++++++
 .../components/PopupCourseBlock.stories.tsx   | 118 ++++++++++++++++++
 .../common/ExtensionRoot/ExtensionRoot.tsx    |   1 +
 .../PopupCourseBlock/PopupCourseBlock.tsx     |  61 +++++++++
 .../components/common/Text/Text.module.scss   | 104 +++++++--------
 7 files changed, 291 insertions(+), 51 deletions(-)
 create mode 100644 src/shared/util/colors.ts
 create mode 100644 src/stories/components/PopupCourseBlock.stories.tsx
 create mode 100644 src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx

diff --git a/package.json b/package.json
index fd7ab2a6..1ed328d0 100644
--- a/package.json
+++ b/package.json
@@ -55,6 +55,7 @@
         "@unocss/postcss": "^0.58.4",
         "@unocss/preset-uno": "^0.58.4",
         "@unocss/preset-web-fonts": "^0.58.4",
+        "@unocss/reset": "^0.58.5",
         "@unocss/transformer-directives": "^0.58.4",
         "@unocss/transformer-variant-group": "^0.58.4",
         "@vitejs/plugin-react-swc": "^3.6.0",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index c5afb4a9..4f621764 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -123,6 +123,9 @@ devDependencies:
   '@unocss/preset-web-fonts':
     specifier: ^0.58.4
     version: 0.58.4
+  '@unocss/reset':
+    specifier: ^0.58.5
+    version: 0.58.5
   '@unocss/transformer-directives':
     specifier: ^0.58.4
     version: 0.58.4
@@ -5046,6 +5049,10 @@ packages:
     resolution: {integrity: sha512-ZZTrAdl4WWmMjQdOqcOSWdgFH6kdFKZjPu4c6Ijxk7KvY2BW3nttTTBa7IYeuXFHVfcExUFqlOgRurt+NeWYyQ==}
     dev: true
 
+  /@unocss/reset@0.58.5:
+    resolution: {integrity: sha512-2wMrkCj3SSb5hrx9TKs5jZa34QIRkHv9FotbJutAPo7o8hx+XXn56ogzdoUrcFPJZJUx2R2nyOVbSlGMIjtFtw==}
+    dev: true
+
   /@unocss/rule-utils@0.58.4:
     resolution: {integrity: sha512-52Jp4I+joGTaDm7ehB/7uZ2kJL+9BZcYRDUVk4IDacDH5W9yxf1F75LzYT8jJVWXD/HIhiS0r9V6qhcBq2OWZw==}
     engines: {node: '>=14'}
diff --git a/src/shared/util/colors.ts b/src/shared/util/colors.ts
new file mode 100644
index 00000000..807a2c16
--- /dev/null
+++ b/src/shared/util/colors.ts
@@ -0,0 +1,50 @@
+import { theme } from 'unocss/preset-mini';
+
+export interface CourseColors {
+    primaryColor: string;
+    secondaryColor: string;
+}
+
+// calculates luminance of a hex string
+function getLuminance(hex: string): number {
+    let r = parseInt(hex.substring(1, 3), 16);
+    let g = parseInt(hex.substring(3, 5), 16);
+    let b = parseInt(hex.substring(5, 7), 16);
+
+    [r, g, b] = [r, g, b].map(color => {
+        let c = color / 255;
+
+        c = c > 0.03928 ? ((c + 0.055) / 1.055) ** 2.4 : (c /= 12.92);
+
+        return c;
+    });
+
+    return 0.2126 * r + 0.7152 * g + 0.0722 * b;
+}
+
+// calculates contrast ratio between two hex strings
+function contrastRatioPair(hex1: string, hex2: string) {
+    const lum1 = getLuminance(hex1);
+    const lum2 = getLuminance(hex2);
+
+    return (Math.max(lum1, lum2) + 0.05) / (Math.min(lum1, lum2) + 0.05);
+}
+
+/**
+ * Generate a tailwind classname for the font color based on the background color
+ * @param bgColor the tailwind classname for background ex. "bg-emerald-500"
+ */
+export function pickFontColor(bgColor: string): 'text-white' | 'text-black' {
+    return contrastRatioPair(bgColor, '#606060') > contrastRatioPair(bgColor, '#ffffff') ? 'text-black' : 'text-white';
+}
+
+/**
+ * Get primary and secondary colors from a tailwind colorway
+ * @param colorway the tailwind colorway ex. "emerald"
+ */
+export function getCourseColors(colorway: keyof typeof theme.colors): CourseColors {
+    return {
+        primaryColor: theme.colors[colorway][600] as string,
+        secondaryColor: theme.colors[colorway][800] as string,
+    };
+}
diff --git a/src/stories/components/PopupCourseBlock.stories.tsx b/src/stories/components/PopupCourseBlock.stories.tsx
new file mode 100644
index 00000000..636617f5
--- /dev/null
+++ b/src/stories/components/PopupCourseBlock.stories.tsx
@@ -0,0 +1,118 @@
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { Course, Status } from 'src/shared/types/Course';
+import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import Instructor from 'src/shared/types/Instructor';
+import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
+import { getCourseColors } from 'src/shared/util/colors';
+import { theme } from 'unocss/preset-mini';
+
+const exampleCourse: Course = new Course({
+    courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
+    creditHours: 3,
+    department: 'C S',
+    description: [
+        'Problem solving and fundamental algorithms for various applications in science, business, and on the World Wide Web, and introductory programming in a modern object-oriented programming language.',
+        'Only one of the following may be counted: Computer Science 303E, 312, 312H. Credit for Computer Science 303E may not be earned after a student has received credit for Computer Science 314, or 314H. May not be counted toward a degree in computer science.',
+        'May be counted toward the Quantitative Reasoning flag requirement.',
+        'Designed to accommodate 100 or more students.',
+        'Taught as a Web-based course.',
+    ],
+    flags: ['Quantitative Reasoning'],
+    fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
+    instructionMode: 'Online',
+    instructors: [
+        new Instructor({
+            firstName: 'Bevo',
+            lastName: 'Bevo',
+            fullName: 'Bevo Bevo',
+        }),
+    ],
+    isReserved: false,
+    number: '303E',
+    schedule: {
+        meetings: [
+            new CourseMeeting({
+                days: ['Tuesday', 'Thursday'],
+                endTime: 660,
+                startTime: 570,
+            }),
+        ],
+    },
+    semester: {
+        code: '12345',
+        season: 'Spring',
+        year: 2024,
+    },
+    status: Status.WAITLISTED,
+    uniqueId: 12345,
+    url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+});
+
+// More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
+const meta = {
+    title: 'Components/Common/PopupCourseBlock',
+    component: PopupCourseBlock,
+    parameters: {
+        // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+        layout: 'centered',
+    },
+    // This component will have an automatically generated Autodocs entry: https://storybook.js.org/docs/writing-docs/autodocs
+    tags: ['autodocs'],
+    // More on argTypes: https://storybook.js.org/docs/api/argtypes
+    args: {
+        colors: getCourseColors('emerald'),
+        course: exampleCourse,
+    },
+    argTypes: {
+        colors: {
+            description: 'the colors to use for the course block',
+            control: 'object',
+        },
+        course: {
+            description: 'the course to show data for',
+            control: 'object',
+        },
+    },
+} satisfies Meta<typeof PopupCourseBlock>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+// More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
+export const Default: Story = {
+    args: {},
+};
+
+export const Variants: Story = {
+    render: props => (
+        <div className='grid grid-cols-2 max-w-2xl w-90vw gap-x-4 gap-y-2'>
+            <PopupCourseBlock {...props} course={new Course({ ...exampleCourse, status: Status.OPEN })} />
+            <PopupCourseBlock {...props} course={new Course({ ...exampleCourse, status: Status.CLOSED })} />
+            <PopupCourseBlock {...props} course={new Course({ ...exampleCourse, status: Status.WAITLISTED })} />
+            <PopupCourseBlock {...props} course={new Course({ ...exampleCourse, status: Status.CANCELLED })} />
+        </div>
+    ),
+};
+
+const colors = Object.keys(theme.colors)
+    // check that the color is a colorway (is an object)
+    .filter(color => typeof theme.colors[color] === 'object')
+    .slice(0, 17)
+    .map(color => getCourseColors(color as keyof typeof theme.colors));
+
+export const AllColors: Story = {
+    render: props => (
+        <div className='grid grid-rows-9 grid-cols-2 grid-flow-col max-w-2xl w-90vw gap-x-4 gap-y-2'>
+            {colors.map((color, i) => (
+                <PopupCourseBlock key={color.primaryColor} course={exampleCourse} colors={color} />
+            ))}
+        </div>
+    ),
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=1046-6714&mode=design&t=5Bjr7qGHNXmjfMTc-0',
+        },
+    },
+};
diff --git a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
index 9bc27972..bb2fd081 100644
--- a/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
+++ b/src/views/components/common/ExtensionRoot/ExtensionRoot.tsx
@@ -1,6 +1,7 @@
 import React from 'react';
 import styles from './ExtensionRoot.module.scss';
 
+import '@unocss/reset/tailwind-compat.css';
 import 'uno.css';
 
 interface Props {
diff --git a/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx
new file mode 100644
index 00000000..d1389649
--- /dev/null
+++ b/src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx
@@ -0,0 +1,61 @@
+import clsx from 'clsx';
+import React, { useState } from 'react';
+import { Course, Status } from '@shared/types/Course';
+import { StatusIcon } from '@shared/util/icons';
+import { CourseColors, getCourseColors, pickFontColor } from '@shared/util/colors';
+import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
+import Text from '../Text/Text';
+
+/**
+ * Props for PopupCourseBlock
+ */
+export interface PopupCourseBlockProps {
+    className?: string;
+    course: Course;
+    colors: CourseColors;
+}
+
+/**
+ * The "course block" to be used in the extension popup.
+ *
+ * @param props PopupCourseBlockProps
+ */
+export default function PopupCourseBlock({ className, course, colors }: PopupCourseBlockProps): JSX.Element {
+    // whiteText based on secondaryColor
+    const fontColor = pickFontColor(colors.primaryColor);
+
+    return (
+        <div
+            style={{
+                backgroundColor: colors.primaryColor,
+            }}
+            className={clsx('h-full w-full inline-flex items-center justify-center gap-1 rounded pr-3', className)}
+        >
+            <div
+                style={{
+                    backgroundColor: colors.secondaryColor,
+                }}
+                className='flex cursor-move items-center self-stretch rounded rounded-r-0'
+            >
+                <DragIndicatorIcon className='h-6 w-6 text-white' />
+            </div>
+            <Text
+                className={clsx('flex-1 py-3.5 text-ellipsis whitespace-nowrap overflow-hidden', fontColor)}
+                variant='h1-course'
+            >
+                <span className='px-0.5 font-450'>{course.uniqueId}</span> {course.department} {course.number} &ndash;{' '}
+                {course.instructors.length === 0 ? 'Unknown' : course.instructors.map(v => v.lastName)}
+            </Text>
+            {course.status !== Status.OPEN && (
+                <div
+                    style={{
+                        backgroundColor: colors.secondaryColor,
+                    }}
+                    className='ml-1 flex items-center justify-center justify-self-end rounded p-1px text-white'
+                >
+                    <StatusIcon status={course.status} className='h-5 w-5' />
+                </div>
+            )}
+        </div>
+    );
+}
diff --git a/src/views/components/common/Text/Text.module.scss b/src/views/components/common/Text/Text.module.scss
index 1f52a96b..16f52b29 100644
--- a/src/views/components/common/Text/Text.module.scss
+++ b/src/views/components/common/Text/Text.module.scss
@@ -1,65 +1,67 @@
 @use 'src/views/styles/colors.module.scss';
 @use 'src/views/styles/fonts.module.scss';
 
-.text {
-    font-family: 'Roboto Flex', sans-serif;
-    line-height: normal;
-    font-style: normal;
-}
+@layer theme {
+    .text {
+        font-family: 'Roboto Flex', sans-serif;
+        line-height: normal;
+        font-style: normal;
+    }
 
-.mini {
-    font-size: 0.79rem;
-    font-weight: 500;
-}
+    .mini {
+        font-size: 0.79rem;
+        font-weight: 500;
+    }
 
-.small {
-    font-size: 0.88875rem;
-    font-weight: 500;
-}
+    .small {
+        font-size: 0.88875rem;
+        font-weight: 500;
+    }
 
-.p {
-    font-size: 1rem;
-    font-weight: 400;
-    letter-spacing: 0.025rem;
-}
+    .p {
+        font-size: 1rem;
+        font-weight: 400;
+        letter-spacing: 0.025rem;
+    }
 
-.h4 {
-    font-size: 1.125rem;
-    font-weight: 500;
-}
+    .h4 {
+        font-size: 1.125rem;
+        font-weight: 500;
+    }
 
-.h3-course {
-    font-size: 0.6875rem;
-    font-weight: 400;
-    line-height: 100%; /* 0.6875rem */
-}
+    .h3-course {
+        font-size: 0.6875rem;
+        font-weight: 400;
+        line-height: 100%; /* 0.6875rem */
+    }
 
-.h3 {
-    font-size: 1.26563rem;
-    font-weight: 600;
-    text-transform: uppercase;
-}
+    .h3 {
+        font-size: 1.26563rem;
+        font-weight: 600;
+        text-transform: uppercase;
+    }
 
-.h2-course {
-    font-size: 1rem;
-    font-weight: 500;
-    letter-spacing: 0.03125rem;
-    text-transform: capitalize;
-}
+    .h2-course {
+        font-size: 1rem;
+        font-weight: 500;
+        letter-spacing: 0.03125rem;
+        text-transform: capitalize;
+    }
 
-.h2 {
-    font-size: 1.42375rem;
-    font-weight: 500;
-}
+    .h2 {
+        font-size: 1.42375rem;
+        font-weight: 500;
+    }
 
-.h1-course {
-    font-size: 1rem;
-    font-weight: 600;
-    text-transform: capitalize;
-}
+    .h1-course {
+        font-size: 1rem;
+        font-weight: 600;
+        text-transform: capitalize;
+    }
 
-.h1 {
-    font-size: 1.60188rem;
-    font-weight: 700;
-    text-transform: uppercase;
+    .h1 {
+        font-size: 1.60188rem;
+        font-weight: 700;
+        text-transform: uppercase;
+    }
 }

From 708a136a5cc4bd1d0494eef26dc9749f1c35aad3 Mon Sep 17 00:00:00 2001
From: Razboy20 <razboy20@gmail.com>
Date: Fri, 9 Feb 2024 17:30:12 -0600
Subject: [PATCH 5/7] ci: chromatic builds (#84)

* ci: chromatic builds

* hotfix: add pnpm install to workflow

* hotfix: add pnpm version
---
 .github/workflows/chromatic.yml | 26 ++++++++++++++++++++++++++
 package.json                    |  1 +
 pnpm-lock.yaml                  | 16 ++++++++++++++++
 3 files changed, 43 insertions(+)
 create mode 100644 .github/workflows/chromatic.yml

diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
new file mode 100644
index 00000000..da6df08a
--- /dev/null
+++ b/.github/workflows/chromatic.yml
@@ -0,0 +1,26 @@
+name: "Chromatic"
+
+on: [push, pull_request]
+
+jobs:
+  chromatic:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v4
+        with:
+          fetch-depth: 0
+      - name: Setup pnpm
+        uses: pnpm/action-setup@v2
+        with:
+          version: 8.15.1
+
+      - name: Install dependencies
+        run: pnpm install
+
+      - name: Publish to Chromatic
+        uses: chromaui/action@latest
+        with:
+          projectToken: ${{ secrets.CHROMATIC_PROJECT_TOKEN }}
+          exitZeroOnChanges: true
+          autoAcceptChanges: "main"
diff --git a/package.json b/package.json
index 1ed328d0..f9a374c4 100644
--- a/package.json
+++ b/package.json
@@ -59,6 +59,7 @@
         "@unocss/transformer-directives": "^0.58.4",
         "@unocss/transformer-variant-group": "^0.58.4",
         "@vitejs/plugin-react-swc": "^3.6.0",
+        "chromatic": "^10.9.1",
         "cssnano": "^6.0.3",
         "cssnano-preset-advanced": "^6.0.3",
         "dotenv": "^16.4.1",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 4f621764..27a985f9 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -135,6 +135,9 @@ devDependencies:
   '@vitejs/plugin-react-swc':
     specifier: ^3.6.0
     version: 3.6.0(vite@5.0.12)
+  chromatic:
+    specifier: ^10.9.1
+    version: 10.9.1
   cssnano:
     specifier: ^6.0.3
     version: 6.0.3(postcss@8.4.33)
@@ -6084,6 +6087,19 @@ packages:
     engines: {node: '>=10'}
     dev: true
 
+  /chromatic@10.9.1:
+    resolution: {integrity: sha512-6Ypho74fQu45ns48KaBuIMKqlzik0fJo//dLB3lkiphz8vCiMm75uU3xhkfZh4NbOS51MbWZKjPfefM53bIHpg==}
+    hasBin: true
+    peerDependencies:
+      '@chromatic-com/cypress': ^0.5.2 || ^1.0.0
+      '@chromatic-com/playwright': ^0.5.2 || ^1.0.0
+    peerDependenciesMeta:
+      '@chromatic-com/cypress':
+        optional: true
+      '@chromatic-com/playwright':
+        optional: true
+    dev: true
+
   /chrome-extension-toolkit@0.0.51:
     resolution: {integrity: sha512-XzOOE2+/aYG43bJOwuJT4oWcn80jBJr5mwGyrSzKKFoqALixT15AsPcfZId/UOoc4pIavu2XcHeJga6ng0m1jQ==}
     dependencies:

From c122e744ef4561b556fbb3eafdc4e69212c51bd5 Mon Sep 17 00:00:00 2001
From: Razboy20 <razboy20@gmail.com>
Date: Fri, 9 Feb 2024 18:39:20 -0600
Subject: [PATCH 6/7] ci: update pnpm action (#86)

* ci: update pnpm action

* hotfix: change action type
---
 .github/workflows/chromatic.yml | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/.github/workflows/chromatic.yml b/.github/workflows/chromatic.yml
index da6df08a..ae5482b6 100644
--- a/.github/workflows/chromatic.yml
+++ b/.github/workflows/chromatic.yml
@@ -1,6 +1,6 @@
 name: "Chromatic"
 
-on: [push, pull_request]
+on: [push, pull_request_target]
 
 jobs:
   chromatic:
@@ -11,9 +11,9 @@ jobs:
         with:
           fetch-depth: 0
       - name: Setup pnpm
-        uses: pnpm/action-setup@v2
+        uses: pnpm/action-setup@v3
         with:
-          version: 8.15.1
+          version: 8
 
       - name: Install dependencies
         run: pnpm install

From fa1d7374bcafbe19673dc31f33b3f8075e45f37a Mon Sep 17 00:00:00 2001
From: Som Gupta <78577376+knownotunknown@users.noreply.github.com>
Date: Sat, 10 Feb 2024 21:26:21 -0600
Subject: [PATCH 7/7] feat: CourseStatus Component implemented (#83)

Co-authored-by: Razboy20 <razboy20@gmail.com>
---
 .../components/CourseStatus.stories.tsx       | 48 +++++++++++++++++++
 .../common/CourseStatus/CourseStatus.tsx      | 36 ++++++++++++++
 2 files changed, 84 insertions(+)
 create mode 100644 src/stories/components/CourseStatus.stories.tsx
 create mode 100644 src/views/components/common/CourseStatus/CourseStatus.tsx

diff --git a/src/stories/components/CourseStatus.stories.tsx b/src/stories/components/CourseStatus.stories.tsx
new file mode 100644
index 00000000..0e35fd26
--- /dev/null
+++ b/src/stories/components/CourseStatus.stories.tsx
@@ -0,0 +1,48 @@
+import React from 'react';
+
+import { Status } from '@shared/types/Course';
+import { Meta, StoryObj } from '@storybook/react';
+import CourseStatus from '@views/components/common/CourseStatus/CourseStatus';
+
+const meta = {
+    title: 'Components/Common/CourseStatus',
+    component: CourseStatus,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    args: {
+        status: Status.WAITLISTED,
+        size: 'small',
+    },
+    argTypes: {
+        status: {
+            options: Object.values(Status),
+            mapping: Object.values(Status),
+            control: {
+                type: 'select',
+                labels: Object.keys(Status),
+            },
+        },
+        size: {
+            options: ['small', 'mini'],
+            control: {
+                type: 'radio',
+            },
+        },
+    },
+} satisfies Meta<typeof CourseStatus>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};
+
+export const Variants: Story = {
+    render: args => (
+        <div className='flex flex-col gap-4 items-center'>
+            <CourseStatus {...args} size='small' />
+            <CourseStatus {...args} size='mini' />
+        </div>
+    ),
+};
diff --git a/src/views/components/common/CourseStatus/CourseStatus.tsx b/src/views/components/common/CourseStatus/CourseStatus.tsx
new file mode 100644
index 00000000..8615fbd0
--- /dev/null
+++ b/src/views/components/common/CourseStatus/CourseStatus.tsx
@@ -0,0 +1,36 @@
+import { Status } from '@shared/types/Course';
+import { StatusIcon } from '@shared/util/icons';
+import clsx from 'clsx';
+import React from 'react';
+import Text from '../Text/Text';
+
+type SizeType = 'small' | 'mini';
+
+/**
+ * Props for CourseStatus
+ */
+export interface CourseStatusProps {
+    status: Status;
+    size: SizeType;
+}
+
+/**
+ * The CourseStatus component as per the Labels and Details Figma section
+ *
+ * @param props CourseStatusProps
+ */
+export default function CourseStatus({ status, size }: CourseStatusProps): JSX.Element {
+    const statusIconSizeClass = clsx({
+        'h-5 w-5': size === 'small',
+        'h-4 w-4': size === 'mini',
+    });
+
+    return (
+        <div className={`inline-flex items-center ${size === 'small' ? 'gap-2' : 'gap-1.5'}`}>
+            <div className='ml-1 flex items-center justify-center rounded bg-slate-700 p-1px text-white'>
+                <StatusIcon status={status} className={statusIconSizeClass} />
+            </div>
+            <Text variant={size}>{status}</Text>
+        </div>
+    );
+}