PopupMain UI integrated

* CalendarHeader alignment progress

* Boom

* css

* Between

* Lol

* Gap fix

* whitespace-nowrap

* Gaps

* Finished alignment of CourseStatus and Buttons

* Colors

* ESLint auto format

* Color UT Registration Plus text

* Reverting vscode

---------

Co-authored-by: Vinson Zheng <vinsonzheng499@gmail.com>

.eslintrc

@@ -73,6 +73,7 @@
                 "ignoreReadBeforeAssign": false
             }
         ],
+        "no-plusplus": "off",
         "no-inner-declarations": "off",
         "sort-imports": "off",
         "no-case-declarations": "off",

.vscode/settings.json

@@ -1,5 +1,8 @@
 {
     "editor.formatOnSave": true,
+    "editor.codeActionsOnSave": {
+        "source.fixAll.eslint": "explicit"
+    },
     "editor.defaultFormatter": "esbenp.prettier-vscode",
     "[javascript]": {
         "editor.defaultFormatter": "esbenp.prettier-vscode"
@@ -34,4 +37,4 @@
         "editor.defaultFormatter": "esbenp.prettier-vscode"
     },
     "typescript.tsdk": "node_modules/typescript/lib",
-}
+}

README.md

@@ -2,17 +2,29 @@
 
 ## Built Using
 
-- React 18
-- TypeScript
-- Vite 5
-- ESLint
-- Prettier
-- Semantic-Release
-- Custom Messaging & Storage Wrappers
+-   React 18
+-   TypeScript
+-   Vite 5
+-   ESLint
+-   Prettier
+-   Semantic-Release
+-   Custom Messaging & Storage Wrappers
 
 ## Getting Started
 
 1. Clone this repo
 2. Run `pnpm install` to install and patch all the required dependencies
-3. Run `pnpm run dev` to start the development server
-4. Run `pnpm build` to build the extension for production
+
+-   If you want to run the development build:
+
+    -   Run `pnpm run dev`
+
+-   If you want to build the extension for production:
+
+    -   Run `pnpm build`
+
+You may have to rename the `__uno.css.js` to `uno.css.js` in dist
+
+Go to chrome://extensions, ensure you have "Developer Mode" enabled, and click 'Load unpacked'
+
+Navigate to the 'dist' folder and click 'select' to import the extension

package.json

@@ -17,47 +17,54 @@
         "build-storybook": "storybook build"
     },
     "dependencies": {
+        "@headlessui/react": "^1.7.18",
+        "@headlessui/tailwindcss": "^0.2.0",
+        "@hello-pangea/dnd": "^16.5.0",
         "@types/sql.js": "^1.4.9",
         "@vitejs/plugin-react": "^4.2.1",
         "chrome-extension-toolkit": "^0.0.51",
         "clsx": "^2.1.0",
         "highcharts": "^11.3.0",
         "highcharts-react-official": "^3.2.1",
+        "html2canvas": "^1.4.1",
         "react": "^18.2.0",
         "react-devtools-core": "^5.0.0",
         "react-dom": "^18.2.0",
+        "react-icons": "^5.0.1",
+        "react-window": "^1.8.10",
         "sass": "^1.70.0",
         "sql.js": "1.10.2",
+        "styled-components": "^6.1.8",
         "uuid": "^9.0.1"
     },
     "devDependencies": {
         "@crxjs/vite-plugin": "2.0.0-beta.21",
         "@iconify-json/material-symbols": "^1.1.72",
         "@storybook/addon-designs": "^7.0.9",
-        "@storybook/addon-essentials": "^7.6.12",
-        "@storybook/addon-links": "^7.6.12",
-        "@storybook/blocks": "^7.6.12",
-        "@storybook/react": "^7.6.12",
-        "@storybook/react-vite": "^7.6.12",
-        "@storybook/test": "^7.6.12",
+        "@storybook/addon-essentials": "^7.6.13",
+        "@storybook/addon-links": "^7.6.13",
+        "@storybook/blocks": "^7.6.13",
+        "@storybook/react": "^7.6.13",
+        "@storybook/react-vite": "^7.6.13",
+        "@storybook/test": "^7.6.13",
         "@svgr/core": "^8.1.0",
         "@svgr/plugin-jsx": "^8.1.0",
         "@types/chrome": "^0.0.260",
-        "@types/node": "^20.11.16",
+        "@types/node": "^20.11.17",
         "@types/prompts": "^2.4.9",
-        "@types/react": "^18.2.51",
-        "@types/react-dom": "^18.2.18",
+        "@types/react": "^18.2.55",
+        "@types/react-dom": "^18.2.19",
         "@types/semver": "^7.5.6",
         "@types/uuid": "^9.0.8",
-        "@typescript-eslint/eslint-plugin": "^6.20.0",
-        "@typescript-eslint/parser": "^6.20.0",
-        "@unocss/eslint-config": "^0.58.4",
-        "@unocss/postcss": "^0.58.4",
-        "@unocss/preset-uno": "^0.58.4",
-        "@unocss/preset-web-fonts": "^0.58.4",
+        "@typescript-eslint/eslint-plugin": "^6.21.0",
+        "@typescript-eslint/parser": "^6.21.0",
+        "@unocss/eslint-config": "^0.58.5",
+        "@unocss/postcss": "^0.58.5",
+        "@unocss/preset-uno": "^0.58.5",
+        "@unocss/preset-web-fonts": "^0.58.5",
         "@unocss/reset": "^0.58.5",
-        "@unocss/transformer-directives": "^0.58.4",
-        "@unocss/transformer-variant-group": "^0.58.4",
+        "@unocss/transformer-directives": "^0.58.5",
+        "@unocss/transformer-variant-group": "^0.58.5",
         "@vitejs/plugin-react-swc": "^3.6.0",
         "chromatic": "^10.9.1",
         "cssnano": "^6.0.3",
@@ -71,7 +78,7 @@
         "eslint-config-prettier": "^9.1.0",
         "eslint-import-resolver-typescript": "^3.6.1",
         "eslint-plugin-import": "^2.29.1",
-        "eslint-plugin-jsdoc": "^48.0.4",
+        "eslint-plugin-jsdoc": "^48.0.6",
         "eslint-plugin-prettier": "^5.1.3",
         "eslint-plugin-react": "^7.33.2",
         "eslint-plugin-react-hooks": "^4.6.0",
@@ -79,15 +86,15 @@
         "eslint-plugin-react-refresh": "^0.4.5",
         "eslint-plugin-storybook": "^0.6.15",
         "path": "^0.12.7",
-        "postcss": "^8.4.33",
-        "prettier": "^3.2.4",
+        "postcss": "^8.4.35",
+        "prettier": "^3.2.5",
         "react-dev-utils": "^12.0.1",
         "react-devtools": "^5.0.0",
-        "storybook": "^7.6.12",
+        "storybook": "^7.6.13",
         "typescript": "^5.3.3",
-        "unocss": "^0.58.4",
-        "unplugin-icons": "^0.18.3",
-        "vite": "^5.0.12",
+        "unocss": "^0.58.5",
+        "unplugin-icons": "^0.18.5",
+        "vite": "^5.1.1",
         "vite-plugin-inspect": "^0.8.3"
     },
     "pnpm": {

src/assets/icons/cal.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3175_7842" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
+<rect y="0.5" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_3175_7842)">
+<path d="M12 14.5C11.7167 14.5 11.4792 14.4042 11.2875 14.2125C11.0958 14.0208 11 13.7833 11 13.5C11 13.2167 11.0958 12.9792 11.2875 12.7875C11.4792 12.5958 11.7167 12.5 12 12.5C12.2833 12.5 12.5208 12.5958 12.7125 12.7875C12.9042 12.9792 13 13.2167 13 13.5C13 13.7833 12.9042 14.0208 12.7125 14.2125C12.5208 14.4042 12.2833 14.5 12 14.5ZM8 14.5C7.71667 14.5 7.47917 14.4042 7.2875 14.2125C7.09583 14.0208 7 13.7833 7 13.5C7 13.2167 7.09583 12.9792 7.2875 12.7875C7.47917 12.5958 7.71667 12.5 8 12.5C8.28333 12.5 8.52083 12.5958 8.7125 12.7875C8.90417 12.9792 9 13.2167 9 13.5C9 13.7833 8.90417 14.0208 8.7125 14.2125C8.52083 14.4042 8.28333 14.5 8 14.5ZM16 14.5C15.7167 14.5 15.4792 14.4042 15.2875 14.2125C15.0958 14.0208 15 13.7833 15 13.5C15 13.2167 15.0958 12.9792 15.2875 12.7875C15.4792 12.5958 15.7167 12.5 16 12.5C16.2833 12.5 16.5208 12.5958 16.7125 12.7875C16.9042 12.9792 17 13.2167 17 13.5C17 13.7833 16.9042 14.0208 16.7125 14.2125C16.5208 14.4042 16.2833 14.5 16 14.5ZM12 18.5C11.7167 18.5 11.4792 18.4042 11.2875 18.2125C11.0958 18.0208 11 17.7833 11 17.5C11 17.2167 11.0958 16.9792 11.2875 16.7875C11.4792 16.5958 11.7167 16.5 12 16.5C12.2833 16.5 12.5208 16.5958 12.7125 16.7875C12.9042 16.9792 13 17.2167 13 17.5C13 17.7833 12.9042 18.0208 12.7125 18.2125C12.5208 18.4042 12.2833 18.5 12 18.5ZM8 18.5C7.71667 18.5 7.47917 18.4042 7.2875 18.2125C7.09583 18.0208 7 17.7833 7 17.5C7 17.2167 7.09583 16.9792 7.2875 16.7875C7.47917 16.5958 7.71667 16.5 8 16.5C8.28333 16.5 8.52083 16.5958 8.7125 16.7875C8.90417 16.9792 9 17.2167 9 17.5C9 17.7833 8.90417 18.0208 8.7125 18.2125C8.52083 18.4042 8.28333 18.5 8 18.5ZM16 18.5C15.7167 18.5 15.4792 18.4042 15.2875 18.2125C15.0958 18.0208 15 17.7833 15 17.5C15 17.2167 15.0958 16.9792 15.2875 16.7875C15.4792 16.5958 15.7167 16.5 16 16.5C16.2833 16.5 16.5208 16.5958 16.7125 16.7875C16.9042 16.9792 17 17.2167 17 17.5C17 17.7833 16.9042 18.0208 16.7125 18.2125C16.5208 18.4042 16.2833 18.5 16 18.5ZM5 22.5C4.45 22.5 3.97917 22.3042 3.5875 21.9125C3.19583 21.5208 3 21.05 3 20.5V6.5C3 5.95 3.19583 5.47917 3.5875 5.0875C3.97917 4.69583 4.45 4.5 5 4.5H6V2.5H8V4.5H16V2.5H18V4.5H19C19.55 4.5 20.0208 4.69583 20.4125 5.0875C20.8042 5.47917 21 5.95 21 6.5V20.5C21 21.05 20.8042 21.5208 20.4125 21.9125C20.0208 22.3042 19.55 22.5 19 22.5H5ZM5 20.5H19V10.5H5V20.5Z" fill="#333F48"/>
+</g>
+</svg>

src/assets/icons/png.svg

@@ -0,0 +1,8 @@
+<svg width="24" height="25" viewBox="0 0 24 25" fill="none" xmlns="http://www.w3.org/2000/svg">
+<mask id="mask0_3211_5369" style="mask-type:alpha" maskUnits="userSpaceOnUse" x="0" y="0" width="24" height="25">
+<rect y="0.5" width="24" height="24" fill="#D9D9D9"/>
+</mask>
+<g mask="url(#mask0_3211_5369)">
+<path d="M5 21.5C4.45 21.5 3.97917 21.3042 3.5875 20.9125C3.19583 20.5208 3 20.05 3 19.5V5.5C3 4.95 3.19583 4.47917 3.5875 4.0875C3.97917 3.69583 4.45 3.5 5 3.5H19C19.55 3.5 20.0208 3.69583 20.4125 4.0875C20.8042 4.47917 21 4.95 21 5.5V19.5C21 20.05 20.8042 20.5208 20.4125 20.9125C20.0208 21.3042 19.55 21.5 19 21.5H5ZM6 17.5H18L14.25 12.5L11.25 16.5L9 13.5L6 17.5Z" fill="#333F48"/>
+</g>
+</svg>

src/pages/background/lib/createSchedule.ts

@@ -14,6 +14,7 @@ export default async function createSchedule(scheduleName: string): Promise<stri
     schedules.push({
         name: scheduleName,
         courses: [],
+        hours: 0
     });
 
     await UserScheduleStore.set('schedules', schedules);

src/pages/calendar/CalendarMain.tsx

@@ -1,6 +1,10 @@
 import React from 'react';
 import ExtensionRoot from '@views/components/common/ExtensionRoot/ExtensionRoot';
 
+/**
+ * Calendar page
+ * @returns entire page
+ */
 export default function CalendarMain() {
     return (
         <ExtensionRoot>

src/shared/storage/UserScheduleStore.ts

@@ -14,6 +14,7 @@ export const UserScheduleStore = createLocalStore<IUserScheduleStore>({
         new UserSchedule({
             courses: [],
             name: 'Schedule 1',
+            hours: 0,
         }),
     ],
     activeIndex: 0,

src/shared/types/CourseMeeting.ts

@@ -2,6 +2,7 @@ import { Serialized } from 'chrome-extension-toolkit';
 
 /**
  * a map of the days of the week that a class is taught, and the corresponding abbreviation
+ * Don't modify the keys
  */
 export const DAY_MAP = {
     M: 'Monday',
@@ -14,7 +15,7 @@ export const DAY_MAP = {
 } as const;
 
 /** A day of the week that a class is taught */
-export type Day = typeof DAY_MAP[keyof typeof DAY_MAP];
+export type Day = (typeof DAY_MAP)[keyof typeof DAY_MAP];
 
 /** A physical room that a class is taught in */
 export type Location = {

src/shared/types/UserSchedule.ts

@@ -7,13 +7,18 @@ import { Course } from './Course';
 export class UserSchedule {
     courses: Course[];
     name: string;
+    hours: number;
 
     constructor(schedule: Serialized<UserSchedule>) {
         this.courses = schedule.courses.map(c => new Course(c));
         this.name = schedule.name;
+        this.hours = 0;
+        for (const course of this.courses) {
+            this.hours += course.creditHours;
+        }
     }
 
     containsCourse(course: Course): boolean {
         return this.courses.some(c => c.uniqueId === course.uniqueId);
     }
-}
+}

src/shared/util/colors.ts

@@ -42,9 +42,9 @@ export function pickFontColor(bgColor: string): 'text-white' | 'text-black' {
  * 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 {
+export function getCourseColors(colorway: keyof typeof theme.colors, index = 600, offset = 200): CourseColors {
     return {
-        primaryColor: theme.colors[colorway][600] as string,
-        secondaryColor: theme.colors[colorway][800] as string,
+        primaryColor: theme.colors[colorway][index] as string,
+        secondaryColor: theme.colors[colorway][index + offset] as string,
     };
 }

src/shared/util/themeColors.ts

@@ -0,0 +1,60 @@
+export const colors = {
+    ut: {
+        burntorange: '#BF5700',
+        black: '#333F48',
+        orange: '#f8971f',
+        yellow: '#ffd600',
+        lightgreen: '#a6cd57',
+        green: '#579d42',
+        teal: '#00a9b7',
+        blue: '#005f86',
+        gray: '#9cadb7',
+        offwhite: '#d6d2c4',
+        concrete: '#95a5a6',
+    },
+    theme: {
+        red: '#af2e2d',
+        black: '#1a2024',
+    },
+} as const;
+
+type NestedKeys<T> = {
+    [K in keyof T]: T[K] extends Record<string, any> ? `${string & K}-${string & keyof T[K]}` : never;
+}[keyof T];
+
+/**
+ * A union of all colors in the theme
+ */
+export type ThemeColor = NestedKeys<typeof colors>;
+
+export const colorsFlattened = Object.entries(colors).reduce(
+    (acc, [prefix, group]) => {
+        for (const [name, hex] of Object.entries(group)) {
+            acc[`${prefix}-${name}`] = hex;
+        }
+        return acc;
+    },
+    {} as Record<ThemeColor, string>
+);
+
+const hexToRgb = (hex: string) =>
+    hex.match(/[0-9a-f]{2}/gi).map(partialHex => parseInt(partialHex, 16)) as [number, number, number];
+
+const colorsFlattenedRgb = Object.fromEntries(
+    Object.entries(colorsFlattened).map(([name, hex]) => [name, hexToRgb(hex)])
+) as Record<ThemeColor, ReturnType<typeof hexToRgb>>;
+
+/**
+ * Retrieves the hexadecimal color value by name from the theme.
+ *
+ * @param name - The name of the theme color.
+ * @returns The hexadecimal color value.
+ */
+export const getThemeColorHexByName = (name: ThemeColor): string => colorsFlattened[name];
+
+/**
+ *
+ * @param name - The name of the theme color.
+ * @returns An array of the red, green, and blue values, respectively
+ */
+export const getThemeColorRgbByName = (name: ThemeColor) => colorsFlattenedRgb[name];

src/stories/components/Button.stories.tsx

@@ -1,24 +1,33 @@
-import { Button } from 'src/views/components/common/Button/Button';
 import type { Meta, StoryObj } from '@storybook/react';
 import React from 'react';
+import { colorsFlattened } from 'src/shared/util/themeColors';
+import { Button } from 'src/views/components/common/Button/Button';
+import AddIcon from '~icons/material-symbols/add';
+import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
+import DescriptionIcon from '~icons/material-symbols/description';
+import ImagePlaceholderIcon from '~icons/material-symbols/image';
+import HappyFaceIcon from '~icons/material-symbols/mood';
+import RemoveIcon from '~icons/material-symbols/remove';
+import ReviewsIcon from '~icons/material-symbols/reviews';
 
 // More on how to set up stories at: https://storybook.js.org/docs/writing-stories#default-export
 const meta = {
-  title: 'Components/Common/Button',
-  component: Button,
-  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: {
-    children: 'Button',
-  },
-  argTypes: {
-    children: { control: 'text' },
-  },
+    title: 'Components/Common/Button',
+    component: Button,
+    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: {
+        children: 'Button',
+        icon: ImagePlaceholderIcon,
+    },
+    argTypes: {
+        children: { control: 'text' },
+    },
 } satisfies Meta<typeof Button>;
 
 export default meta;
@@ -26,72 +35,112 @@ type Story = StoryObj<typeof meta>;
 
 // More on writing stories with args: https://storybook.js.org/docs/writing-stories/args
 export const Default: Story = {
-  args: {},
+    args: {
+        variant: 'filled',
+        color: 'ut-black',
+    },
 };
 
 export const Disabled: Story = {
-  args: {
-    disabled: true,
-  },
-};
-
-export const Grid: Story = {
-  render: props => (
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <div style={{ display: 'flex' }}>
-        <Button {...props} type='primary' />
-        <Button {...props} type='secondary' />
-        <Button {...props} type='tertiary' />
-        <Button {...props} type='danger' />
-        <Button {...props} type='warning' />
-        <Button {...props} type='success' />
-        <Button {...props} type='info' />
-      </div>
-      <div style={{ display: 'flex' }}>
-        <Button {...props} type='primary' disabled />
-        <Button {...props} type='secondary' disabled />
-        <Button {...props} type='tertiary' disabled />
-        <Button {...props} type='danger' disabled />
-        <Button {...props} type='warning' disabled />
-        <Button {...props} type='success' disabled />
-        <Button {...props} type='info' disabled />
-      </div>
-    </div>
-  ),
-};
-
-
-// TODO: Actually show the buttons as they appear in the design
-export const CourseButtons: Story = {
-  args: {
-    children: 'Add Course',
-  },
-  render: props => (
-    <div style={{ display: 'flex', flexDirection: 'column' }}>
-      <div style={{ display: 'flex' }}>
-        <Button {...props} type='primary' />
-        <Button {...props} type='secondary' />
-        <Button {...props} type='tertiary' />
-        <Button {...props} type='danger' />
-        <Button {...props} type='warning' />
-        <Button {...props} type='success' />
-        <Button {...props} type='info' />
-      </div>
-      <div style={{ display: 'flex' }}>
-        <Button {...props} type='primary' disabled />
-        <Button {...props} type='secondary' disabled />
-        <Button {...props} type='tertiary' disabled />
-        <Button {...props} type='danger' disabled />
-        <Button {...props} type='warning' disabled />
-        <Button {...props} type='success' disabled />
-        <Button {...props} type='info' disabled />
-      </div>
-    </div>
-  ),
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=324-389&mode=design&t=BoS5xBrpSsjgQXqv-4',
+    args: {
+        variant: 'filled',
+        color: 'ut-black',
+        disabled: true,
     },
-  },
+};
+
+// @ts-ignore
+export const Grid: Story = {
+    render: props => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+            <div style={{ display: 'flex', gap: '15px' }}>
+                <Button {...props} variant='filled' color='ut-black' />
+                <Button {...props} variant='outline' color='ut-black' />
+                <Button {...props} variant='single' color='ut-black' />
+            </div>
+
+            <hr />
+
+            <div style={{ display: 'flex', gap: '15px' }}>
+                <Button {...props} variant='filled' color='ut-black' disabled />
+                <Button {...props} variant='outline' color='ut-black' disabled />
+                <Button {...props} variant='single' color='ut-black' disabled />
+            </div>
+        </div>
+    ),
+};
+
+export const PrettyColors: Story = {
+    // @ts-ignore
+    args: {
+        children: '',
+    },
+    render: props => {
+        const colorsNames = Object.keys(colorsFlattened) as (keyof typeof colorsFlattened)[];
+
+        return (
+            <div style={{ display: 'flex', flexDirection: 'column', gap: '15px' }}>
+                {colorsNames.map(color => (
+                    <div style={{ display: 'flex', gap: '15px' }} key={color}>
+                        <Button {...props} variant='filled' color={color}>
+                            Button
+                        </Button>
+                        <Button {...props} variant='outline' color={color}>
+                            Button
+                        </Button>
+                        <Button {...props} variant='single' color={color}>
+                            Button
+                        </Button>
+                        <Button {...props} variant='filled' color={color} />
+                        <Button {...props} variant='outline' color={color} />
+                        <Button {...props} variant='single' color={color} />
+                    </div>
+                ))}
+            </div>
+        );
+    },
+};
+
+// @ts-ignore
+export const CourseButtons: Story = {
+    render: props => (
+        <div style={{ display: 'flex', flexDirection: 'column', gap: '15px', alignItems: 'center' }}>
+            <Button {...props} variant='filled' color='ut-green' icon={AddIcon}>
+                Add Course
+            </Button>
+            <Button {...props} variant='filled' color='theme-red' icon={RemoveIcon}>
+                Remove Course
+            </Button>
+        </div>
+    ),
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=324-389&mode=design&t=BoS5xBrpSsjgQXqv-4',
+        },
+    },
+};
+
+export const CourseCatalogActionButtons: Story = {
+    // @ts-ignore
+    args: {
+        children: '',
+    },
+    render: props => (
+        <div style={{ display: 'flex', gap: '15px' }}>
+            <Button {...props} variant='filled' color='ut-burntorange' icon={CalendarMonthIcon} />
+            <Button {...props} variant='outline' color='ut-blue' icon={ReviewsIcon}>
+                RateMyProf
+            </Button>
+            <Button {...props} variant='outline' color='ut-teal' icon={HappyFaceIcon}>
+                CES
+            </Button>
+            <Button {...props} variant='outline' color='ut-yellow' icon={DescriptionIcon}>
+                Past Syllabi
+            </Button>
+            <Button {...props} variant='filled' color='ut-green' icon={AddIcon}>
+                Add Course
+            </Button>
+        </div>
+    ),
 };

src/stories/components/CalendarBottomBar.stories.tsx

@@ -0,0 +1,101 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import { Course, Status } from '@shared/types/Course';
+import Instructor from '@shared/types/Instructor';
+import { CalendarBottomBar } from '@views/components/common/CalendarBottomBar/CalendarBottomBar';
+import { getCourseColors } from '../../shared/util/colors';
+
+const exampleGovCourse: Course = new Course({
+    courseName: 'Nope',
+    creditHours: 3,
+    department: 'GOV',
+    description: ['nah', 'aint typing this', 'corndog'],
+    flags: ['no flag for you >:)'],
+    fullName: 'GOV 312L Something something',
+    instructionMode: 'Online',
+    instructors: [
+        new Instructor({
+            firstName: 'Bevo',
+            lastName: 'Barrymore',
+            fullName: 'Bevo Barrymore',
+        }),
+    ],
+    isReserved: false,
+    number: '312L',
+    schedule: {
+        meetings: [],
+    },
+    semester: {
+        code: '12345',
+        season: 'Spring',
+        year: 2024,
+    },
+    status: Status.OPEN,
+    uniqueId: 12345,
+    url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+});
+
+const examplePsyCourse: Course = new Course({
+    courseName: 'Nope Again',
+    creditHours: 3,
+    department: 'PSY',
+    description: ['nah', 'aint typing this', 'corndog'],
+    flags: ['no flag for you >:)'],
+    fullName: 'PSY 317L Yada yada',
+    instructionMode: 'Online',
+    instructors: [
+        new Instructor({
+            firstName: 'Bevo',
+            lastName: 'Etz',
+            fullName: 'Bevo Etz',
+        }),
+    ],
+    isReserved: false,
+    number: '317L',
+    schedule: {
+        meetings: [],
+    },
+    semester: {
+        code: '12346',
+        season: 'Spring',
+        year: 2024,
+    },
+    status: Status.CLOSED,
+    uniqueId: 12346,
+    url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+});
+
+const meta = {
+    title: 'Components/Common/CalendarBottomBar',
+    component: CalendarBottomBar,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+} satisfies Meta<typeof CalendarBottomBar>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        courses: [
+            {
+                colors: getCourseColors('pink', 200),
+                courseDeptAndInstr: `${exampleGovCourse.department} ${exampleGovCourse.number} – ${exampleGovCourse.instructors[0].lastName}`,
+                status: exampleGovCourse.status,
+            },
+            {
+                colors: getCourseColors('slate', 500),
+                courseDeptAndInstr: `${examplePsyCourse.department} ${examplePsyCourse.number} – ${examplePsyCourse.instructors[0].lastName}`,
+                status: examplePsyCourse.status,
+            },
+        ],
+    },
+    render: props => (
+        <div className='outline-red outline w-292.5!'>
+            <CalendarBottomBar {...props} />
+        </div>
+    ),
+};

src/stories/components/CalendarCourse.stories.tsx

@@ -0,0 +1,62 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Course, Status } from '@shared/types/Course';
+import { CourseMeeting, DAY_MAP } from '@shared/types/CourseMeeting';
+import { CourseSchedule } from '@shared/types/CourseSchedule';
+import Instructor from '@shared/types/Instructor';
+import CalendarCourse from '@views/components/common/CalendarCourseBlock/CalendarCourseMeeting';
+
+const meta = {
+    title: 'Components/Common/CalendarCourseMeeting',
+    component: CalendarCourse,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        course: { control: 'object' },
+        meetingIdx: { control: 'number' },
+        color: { control: 'color' },
+        rightIcon: { control: 'object' },
+    },
+} satisfies Meta<typeof CalendarCourse>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        course: new Course({
+            uniqueId: 123,
+            number: '311C',
+            fullName: "311C - Bevo's Default Course",
+            courseName: "Bevo's Default Course",
+            department: 'BVO',
+            creditHours: 3,
+            status: Status.OPEN,
+            instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+            isReserved: false,
+            url: '',
+            flags: [],
+            schedule: new CourseSchedule({
+                meetings: [
+                    new CourseMeeting({
+                        days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                        startTime: 480,
+                        endTime: 570,
+                        location: {
+                            building: 'UTC',
+                            room: '123',
+                        },
+                    }),
+                ],
+            }),
+            instructionMode: 'In Person',
+            semester: {
+                year: 2024,
+                season: 'Spring',
+            },
+        }),
+        meetingIdx: 0,
+        color: 'red',
+    },
+};

src/stories/components/CalendarCourseCell.stories.tsx

@@ -1,10 +1,9 @@
+import { Course, Status } from '@shared/types/Course';
+import { getCourseColors } from '@shared/util/colors';
 import { Meta, StoryObj } from '@storybook/react';
+import CalendarCourseCell from '@views/components/common/CalendarCourseCell/CalendarCourseCell';
 import React from 'react';
-import { Course, Status } from 'src/shared/types/Course';
-import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
-import { CourseSchedule } from 'src/shared/types/CourseSchedule';
-import Instructor from 'src/shared/types/Instructor';
-import CalendarCourseCell from 'src/views/components/common/CalendarCourseCell/CalendarCourseCell';
+import { exampleCourse } from './PopupCourseBlock.stories';
 
 const meta = {
     title: 'Components/Common/CalendarCourseCell',
@@ -14,54 +13,102 @@ const meta = {
     },
     tags: ['autodocs'],
     argTypes: {
-        course: { control: 'object' },
-        meetingIdx: { control: 'number' },
-        color: { control: 'color' },
+        courseDeptAndInstr: { control: { type: 'text' } },
+        className: { control: { type: 'text' } },
+        status: { control: { type: 'select', options: Object.values(Status) } },
+        timeAndLocation: { control: { type: 'text' } },
+        colors: { control: { type: 'object' } },
     },
     render: (args: any) => (
-        <div className="w-45">
+        <div className='w-45'>
             <CalendarCourseCell {...args} />
         </div>
     ),
+    args: {
+        courseDeptAndInstr: exampleCourse.department,
+        className: exampleCourse.number,
+        status: exampleCourse.status,
+        timeAndLocation: exampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),
+
+        colors: getCourseColors('emerald', 500),
+    },
 } satisfies Meta<typeof CalendarCourseCell>;
 export default meta;
 
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {
-    args: {
-        course: new Course({
-            uniqueId: 123,
-            number: '311C',
-            fullName: "311C - Bevo's Default Course",
-            courseName: "Bevo's Default Course",
-            department: 'BVO',
-            creditHours: 3,
-            status: Status.WAITLISTED,
-            instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
-            isReserved: false,
-            url: '',
-            flags: [],
-            schedule: new CourseSchedule({
-                meetings: [
-                    new CourseMeeting({
-                        days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
-                        startTime: 480,
-                        endTime: 570,
-                        location: {
-                            building: 'UTC',
-                            room: '123',
-                        },
-                    }),
-                ],
-            }),
-            instructionMode: 'In Person',
-            semester: {
-                year: 2024,
-                season: 'Spring',
-            },
-        }),
-        meetingIdx: 0,
-        color: 'red',
-    },
+export const Default: Story = {};
+
+export const Variants: Story = {
+    render: props => (
+        <div className='grid grid-cols-2 h-40 max-w-60 w-90vw gap-x-4 gap-y-2'>
+            <CalendarCourseCell
+                {...props}
+                // course={new Course({ ...exampleCourse, status: Status.OPEN })}
+                // Course = new Course({
+                //     courseName: 'PRINCIPLES OF COMPUTER SYSTEMS',
+                //     creditHours: 3,
+                //     department: 'C S',
+                //     description: [
+                //         'Restricted to computer science majors.',
+                //         'An introduction to computer systems software abstractions with an emphasis on the connection of these abstractions to underlying computer hardware. Key abstractions include threads, virtual memory, protection, and I/O. Requires writing of synchronized multithreaded programs and pieces of an operating system.',
+                //         'Computer Science 439 and 439H may not both be counted.',
+                //         'Prerequisite: Computer Science 429, or 429H with a grade of at least C-.',
+                //         'May be counted toward the Independent Inquiry flag requirement.',
+                //     ],
+                //     flags: ['Independent Inquiry'],
+                //     fullName: 'C S 439 PRINCIPLES OF COMPUTER SYSTEMS',
+                //     instructionMode: 'In Person',
+                //     instructors: [
+                //         new Instructor({
+                //             firstName: 'Allison',
+                //             lastName: 'Norman',
+                //             fullName: 'Allison Norman',
+                //         }),
+                //     ],
+                //     isReserved: false,
+                //     number: '439',
+                //     schedule: {
+                //         meetings: [
+                //             new CourseMeeting({
+                //                 days: ['Tuesday', 'Thursday'],
+                //                 startTime: 930,
+                //                 endTime: 1050,
+                //             }),
+                //             new CourseMeeting({
+                //                 days: ['Friday'],
+                //                 startTime: 600,
+                //                 endTime: 720,
+                //             }),
+                //         ],
+                //     },
+                //     semester: {
+                //         code: '12345',
+                //         season: 'Spring',
+                //         year: 2024,
+                //     },
+                //     status: Status.WAITLISTED,
+                //     uniqueId: 67890,
+                //     url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+                // });
+                
+                colors={getCourseColors('green', 500)}
+            />
+            <CalendarCourseCell
+                {...props}
+                // course={new Course({ ...exampleCourse, status: Status.CLOSED })}
+                colors={getCourseColors('teal', 400)}
+            />
+            <CalendarCourseCell
+                {...props}
+                // course={new Course({ ...exampleCourse, status: Status.WAITLISTED })}
+                colors={getCourseColors('indigo', 400)}
+            />
+            <CalendarCourseCell
+                {...props}
+                // course={new Course({ ...exampleCourse, status: Status.CANCELLED })}
+                colors={getCourseColors('red', 500)}
+            />
+        </div>
+    ),
 };

src/stories/components/CalendarGrid.stories.tsx

@@ -1,19 +1,57 @@
-// Calendar.stories.tsx
-import React from 'react';
-import Calendar from '@views/components/common/CalendarGrid/CalendarGrid';
-import type { Meta, StoryObj } from '@storybook/react';
+import { Meta, StoryObj } from '@storybook/react';
+import CalendarGrid from 'src/views/components/common/CalendarGrid/CalendarGrid';
+import { getCourseColors } from 'src/shared/util/colors';
+import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
+import { Status } from 'src/shared/types/Course';
 
 const meta = {
-  title: 'Components/Common/Calendar',
-  component: Calendar,
-  parameters: {
-    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
-    layout: 'centered',
+    title: 'Components/Common/CalendarGrid',
+    component: CalendarGrid,
+    parameters: {
+        layout: 'centered',
+    },
     tags: ['autodocs'],
-  }
-} satisfies Meta<typeof Calendar>;
-
+    argTypes: {
+        saturdayClass: { control: 'boolean' },
+    },
+} satisfies Meta<typeof CalendarGrid>;
 export default meta;
+
+const testData: CalendarGridCourse[] = [
+  {
+      calendarGridPoint: {
+          dayIndex: 0,
+          startIndex: 1,
+          endIndex: 2,
+      },
+      componentProps: {
+          courseDeptAndInstr: 'Course 1',
+          timeAndLocation: '9:00 AM - 10:00 AM, Room 101',
+          status: Status.OPEN,
+          colors: getCourseColors('emerald', 500),
+      },
+  },
+  {
+      calendarGridPoint: {
+          dayIndex: 1,
+          startIndex: 2,
+          endIndex: 3,
+      },
+      componentProps: {
+          courseDeptAndInstr: 'Course 2',
+          timeAndLocation: '10:00 AM - 11:00 AM, Room 102',
+          status: Status.CLOSED,
+          colors: getCourseColors('emerald', 500),
+      },
+  },
+  // add more data as needed
+];
+
 type Story = StoryObj<typeof meta>;
 
-export const Default: Story = {};
+export const Default: Story = {
+    args: {
+        saturdayClass: true,
+        courseCells: testData,
+    },
+};

src/stories/components/CalendarGridCell.stories.tsx

@@ -0,0 +1,19 @@
+// Calendar.stories.tsx
+import React from 'react';
+import CalendarCell from '@views/components/common/CalendarGridCell/CalendarGridCell';
+import type { Meta, StoryObj } from '@storybook/react';
+
+const meta = {
+  title: 'Components/Common/CalendarGridCell',
+  component: CalendarCell,
+  parameters: {
+    // Optional parameter to center the component in the Canvas. More info: https://storybook.js.org/docs/configure/story-layout
+    layout: 'centered',
+    tags: ['autodocs'],
+  }
+} satisfies Meta<typeof CalendarCell>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/stories/components/CalendarHeader.stories.tsx

@@ -0,0 +1,17 @@
+import React from 'react';
+import { Meta, StoryObj } from '@storybook/react';
+import CalendarHeader from '@views/components/common/CalendarHeader/CalenderHeader';
+
+const meta = {
+    title: 'Components/Common/CalendarHeader',
+    component: CalendarHeader,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+} satisfies Meta<typeof CalendarHeader>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {};

src/stories/components/CalendarSchedules.stories.tsx

@@ -0,0 +1,146 @@
+import { Course, Status } from '@shared/types/Course';
+import { UserSchedule } from '@shared/types/UserSchedule';
+import type { Meta, StoryObj } from '@storybook/react';
+import React from 'react';
+import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
+import { CourseSchedule } from 'src/shared/types/CourseSchedule';
+import Instructor from 'src/shared/types/Instructor';
+import { CalendarSchedules } from 'src/views/components/common/CalendarSchedules/CalendarSchedules';
+
+const meta = {
+    title: 'Components/Common/CalendarSchedules',
+    component: CalendarSchedules,
+    parameters: {
+        layout: 'centered',
+        tags: ['autodocs'],
+    },
+    argTypes: {
+        dummySchedules: { control: 'object' },
+        dummyActiveIndex: { control: 'number' },
+        
+    },
+    render: (args: any) => (
+        <div>
+            <CalendarSchedules {...args} />
+        </div>
+    ),
+} satisfies Meta<typeof CalendarSchedules>;
+
+export default meta;
+type Story = StoryObj<typeof meta>;
+
+const schedules = [
+    new UserSchedule({
+        courses: [
+            new Course({
+                uniqueId: 123,
+                number: '311C',
+                fullName: "311C - Bevo's Default Course",
+                courseName: "Bevo's Default Course",
+                department: 'BVO',
+                creditHours: 3,
+                status: Status.WAITLISTED,
+                instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+                isReserved: false,
+                url: '',
+                flags: [],
+                schedule: new CourseSchedule({
+                    meetings: [
+                        new CourseMeeting({
+                            days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                            startTime: 480,
+                            endTime: 570,
+                            location: {
+                                building: 'UTC',
+                                room: '123',
+                            },
+                        }),
+                    ],
+                }),
+                instructionMode: 'In Person',
+                semester: {
+                    year: 2024,
+                    season: 'Fall',
+                },
+            }),
+        ],
+        name: 'Main Schedule',
+        hours: 0, // Add the missing 'hours' property
+    }),
+    new UserSchedule({
+        courses: [
+            new Course({
+                uniqueId: 123,
+                number: '311C',
+                fullName: "311C - Bevo's Default Course",
+                courseName: "Bevo's Default Course",
+                department: 'BVO',
+                creditHours: 3,
+                status: Status.WAITLISTED,
+                instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+                isReserved: false,
+                url: '',
+                flags: [],
+                schedule: new CourseSchedule({
+                    meetings: [
+                        new CourseMeeting({
+                            days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                            startTime: 480,
+                            endTime: 570,
+                            location: {
+                                building: 'UTC',
+                                room: '123',
+                            },
+                        }),
+                    ],
+                }),
+                instructionMode: 'In Person',
+                semester: {
+                    year: 2024,
+                    season: 'Spring',
+                },
+            }),
+            new Course({
+                uniqueId: 123,
+                number: '311C',
+                fullName: "311C - Bevo's Default Course",
+                courseName: "Bevo's Default Course",
+                department: 'BVO',
+                creditHours: 3,
+                status: Status.WAITLISTED,
+                instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+                isReserved: false,
+                url: '',
+                flags: [],
+                schedule: new CourseSchedule({
+                    meetings: [
+                        new CourseMeeting({
+                            days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                            startTime: 480,
+                            endTime: 570,
+                            location: {
+                                building: 'UTC',
+                                room: '123',
+                            },
+                        }),
+                    ],
+                }),
+                instructionMode: 'In Person',
+                semester: {
+                    year: 2024,
+                    season: 'Fall',
+                },
+            }),
+        ],
+        name: 'Backup #3',
+        hours: 0, // Add the missing 'hours' property
+    }),
+];
+
+export const Default: Story = {
+    args: {
+        dummySchedules: schedules,
+        dummyActiveIndex: 0,
+
+    },
+};

src/stories/components/Chip.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { Chip } from 'src/views/components/common/Chip/Chip';
+
+const meta = {
+    title: 'Components/Common/Chip',
+    component: Chip,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        label: { control: 'text' },
+    },
+} satisfies Meta<typeof Chip>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        label: 'QR',
+    },
+};

src/stories/components/ConflictsWithWarning.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning';
+
+const meta = {
+    title: 'Components/Common/ConflictsWithWarning',
+    component: ConflictsWithWarning,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        ConflictingCourse: { control: 'string' },
+        SectionNumber: { control: 'string' },
+    },
+} satisfies Meta<typeof ConflictsWithWarning>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        ConflictingCourse: 'BVO 311C',
+        SectionNumber: '47280',
+    },
+};

src/stories/components/Dropdown.stories.tsx

@@ -0,0 +1,157 @@
+import { Course, Status } from '@shared/types/Course';
+import { UserSchedule } from '@shared/types/UserSchedule';
+import type { Meta, StoryObj } from '@storybook/react';
+import { Serialized } from 'chrome-extension-toolkit';
+import React from 'react';
+import { CourseMeeting, DAY_MAP } from 'src/shared/types/CourseMeeting';
+import { CourseSchedule } from 'src/shared/types/CourseSchedule';
+import Instructor from 'src/shared/types/Instructor';
+import Dropdown from 'src/views/components/common/Dropdown/Dropdown';
+import ScheduleListItem from 'src/views/components/common/ScheduleListItem/ScheduleListItem';
+
+const meta: Meta<typeof Dropdown> = {
+    title: 'Components/Common/Dropdown',
+    component: Dropdown,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        dummySchedules: { control: 'object' },
+        dummyActiveIndex: { control: 'number' },
+        scheduleComponents: { control: 'object' },
+    },
+    render: (args: any) => (
+        <div className='w-80'>
+            <Dropdown {...args} />
+        </div>
+    ),
+} satisfies Meta<typeof Dropdown>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+const schedules = [
+    new UserSchedule({
+        courses: [
+            new Course({
+                uniqueId: 123,
+                number: '311C',
+                fullName: "311C - Bevo's Default Course",
+                courseName: "Bevo's Default Course",
+                department: 'BVO',
+                creditHours: 3,
+                status: Status.WAITLISTED,
+                instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+                isReserved: false,
+                url: '',
+                flags: [],
+                schedule: new CourseSchedule({
+                    meetings: [
+                        new CourseMeeting({
+                            days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                            startTime: 480,
+                            endTime: 570,
+                            location: {
+                                building: 'UTC',
+                                room: '123',
+                            },
+                        }),
+                    ],
+                }),
+                instructionMode: 'In Person',
+                semester: {
+                    year: 2024,
+                    season: 'Fall',
+                },
+            }),
+        ],
+        name: 'Main Schedule',
+        hours: 0,
+    } as Serialized<UserSchedule>),
+    new UserSchedule({
+        courses: [
+            new Course({
+                uniqueId: 123,
+                number: '311C',
+                fullName: "311C - Bevo's Default Course",
+                courseName: "Bevo's Default Course",
+                department: 'BVO',
+                creditHours: 3,
+                status: Status.WAITLISTED,
+                instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+                isReserved: false,
+                url: '',
+                flags: [],
+                schedule: new CourseSchedule({
+                    meetings: [
+                        new CourseMeeting({
+                            days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                            startTime: 480,
+                            endTime: 570,
+                            location: {
+                                building: 'UTC',
+                                room: '123',
+                            },
+                        }),
+                    ],
+                }),
+                instructionMode: 'In Person',
+                semester: {
+                    year: 2024,
+                    season: 'Fall',
+                },
+            }),
+            new Course({
+                uniqueId: 123,
+                number: '311C',
+                fullName: "311C - Bevo's Default Course",
+                courseName: "Bevo's Default Course",
+                department: 'BVO',
+                creditHours: 3,
+                status: Status.WAITLISTED,
+                instructors: [new Instructor({ firstName: '', lastName: 'Bevo', fullName: 'Bevo' })],
+                isReserved: false,
+                url: '',
+                flags: [],
+                schedule: new CourseSchedule({
+                    meetings: [
+                        new CourseMeeting({
+                            days: [DAY_MAP.M, DAY_MAP.W, DAY_MAP.F],
+                            startTime: 480,
+                            endTime: 570,
+                            location: {
+                                building: 'UTC',
+                                room: '123',
+                            },
+                        }),
+                    ],
+                }),
+                instructionMode: 'In Person',
+                semester: {
+                    year: 2024,
+                    season: 'Fall',
+                },
+            }),
+        ],
+        name: 'Backup #3',
+        hours: 0,
+    } as Serialized<UserSchedule>),
+];
+
+export const Hidden: Story = {
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=1579-5083&mode=dev',
+        },
+    },
+
+    args: {
+        dummySchedules: schedules,
+        dummyActiveIndex: 0,
+        scheduleComponents: schedules.map((schedule, index) => (
+            <ScheduleListItem active={index === 0} name={schedule.name} />
+        )),
+    },
+};

src/stories/components/ImportantLinks.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import ImportantLinks from 'src/views/components/ImportantLinks';
+
+const meta = {
+    title: 'Components/Common/ImportantLinks',
+    component: ImportantLinks,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+} satisfies Meta<typeof ImportantLinks>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};

src/stories/components/InfoCard.stories.tsx

@@ -0,0 +1,25 @@
+import { Meta, StoryObj } from '@storybook/react';
+import { InfoCard } from 'src/views/components/common/InfoCard/InfoCard';
+
+const meta = {
+    title: 'Components/Common/InfoCard',
+    component: InfoCard,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        titleText: { control: 'text' },
+        bodyText: { control: 'text' },
+    },
+} satisfies Meta<typeof InfoCard>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        titleText: 'WAITLIST SIZE',
+        bodyText: '14 Students',
+    },
+};

src/stories/components/List.stories.tsx

@@ -0,0 +1,96 @@
+import { Course, Status } from '@shared/types/Course';
+import { CourseMeeting } from '@shared/types/CourseMeeting';
+import Instructor from '@shared/types/Instructor';
+import { Meta, StoryObj } from '@storybook/react';
+import List from '@views/components/common/List/List';
+import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
+import React from 'react';
+import { test_colors } from './PopupCourseBlock.stories';
+
+const numberOfCourses = 5;
+
+export const generateCourses = count => {
+    const courses = [];
+
+    for (let i = 0; i < count; i++) {
+        const 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 + i, // Make uniqueId different for each course
+            url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+        });
+
+        courses.push(course);
+    }
+
+    return courses;
+};
+
+const exampleCourses = generateCourses(numberOfCourses);
+const generateCourseBlocks = (exampleCourses, colors) =>
+    exampleCourses.map((course, i) => <PopupCourseBlock key={course.uniqueId} course={course} colors={colors[i]} />);
+export const exampleCourseBlocks = generateCourseBlocks(exampleCourses, test_colors);
+
+const meta = {
+    title: 'Components/Common/List',
+    component: List,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        draggableElements: { control: 'object' },
+        itemHeight: { control: 'number' },
+        listHeight: { control: 'number' },
+        listWidth: { control: 'number' },
+        gap: { control: 'number' },
+    },
+} satisfies Meta<typeof List>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        draggableElements: exampleCourseBlocks,
+        itemHeight: 55,
+        listHeight: 300,
+        listWidth: 300,
+        gap: 12,
+    },
+};

src/stories/components/PopupCourseBlock.stories.tsx

@@ -1,13 +1,13 @@
 import type { Meta, StoryObj } from '@storybook/react';
+import PopupCourseBlock from '@views/components/common/PopupCourseBlock/PopupCourseBlock';
 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({
+export const exampleCourse: Course = new Course({
     courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
     creditHours: 3,
     department: 'C S',
@@ -95,7 +95,7 @@ export const Variants: Story = {
     ),
 };
 
-const colors = Object.keys(theme.colors)
+export const test_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)
@@ -103,8 +103,8 @@ const colors = Object.keys(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) => (
+        <div className='grid grid-flow-col grid-cols-2 grid-rows-9 max-w-2xl w-90vw gap-x-4 gap-y-2'>
+            {test_colors.map((color, i) => (
                 <PopupCourseBlock key={color.primaryColor} course={exampleCourse} colors={color} />
             ))}
         </div>

src/stories/components/PopupMain.stories.tsx

@@ -0,0 +1,23 @@
+import { Meta, StoryObj } from '@storybook/react';
+import PopupMain from '@views/components/PopupMain';
+
+const meta = {
+    title: 'Components/Common/PopupMain',
+    component: PopupMain,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        
+    },
+} satisfies Meta<typeof PopupMain>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        
+    },
+};

src/stories/components/SchedulTotalHoursAndCourses.stories.tsx

@@ -0,0 +1,27 @@
+import { Meta, StoryObj } from '@storybook/react';
+import ScheduleTotalHoursAndCourses from '@views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
+
+const meta = {
+    title: 'Components/Common/ScheduleTotalHoursAndCourses',
+    component: ScheduleTotalHoursAndCourses,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {
+        scheduleName: { control: 'text' },
+        totalHours: { control: 'number' },
+        totalCourses: { control: 'number' }
+    },
+} satisfies Meta<typeof ScheduleTotalHoursAndCourses>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {
+        scheduleName: 'SCHEDULE',
+        totalHours: 22,
+        totalCourses: 8
+    },
+};

src/stories/components/ScheduleListItem.stories.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import ScheduleListItem from 'src/views/components/common/ScheduleListItem/ScheduleListItem';
+
+export default {
+    title: 'Components/Common/ScheduleListItem',
+    component: ScheduleListItem,
+    parameters: {
+        layout: 'centered',
+        tags: ['autodocs'],
+    },
+    argTypes: {
+        active: { control: 'boolean' },
+        name: { control: 'text' },
+    },
+};
+
+export const Default = (args) => <ScheduleListItem {...args} />;
+
+Default.args = {
+    name: 'My Schedule',
+    active: true,
+};
+
+export const Active = (args) => <ScheduleListItem {...args} />;
+
+Active.args = {
+    name: 'My Schedule',
+    active: true,
+};
+
+export const Inactive = (args) => <ScheduleListItem {...args} />;
+
+Inactive.args = {
+    name: 'My Schedule',
+    active: false,
+};

src/stories/components/Settings.stories.tsx

@@ -0,0 +1,19 @@
+import { Meta, StoryObj } from '@storybook/react';
+import Settings from 'src/views/components/Settings';
+
+const meta = {
+    title: 'Components/Common/Settings',
+    component: Settings,
+    parameters: {
+        layout: 'centered',
+    },
+    tags: ['autodocs'],
+    argTypes: {},
+} satisfies Meta<typeof Settings>;
+export default meta;
+
+type Story = StoryObj<typeof meta>;
+
+export const Default: Story = {
+    args: {},
+};

src/stories/injected/CoursePopup.stories.ts

@@ -3,97 +3,113 @@ import { CourseMeeting } from 'src/shared/types/CourseMeeting';
 import { UserSchedule } from 'src/shared/types/UserSchedule';
 import CoursePopup from 'src/views/components/injected/CoursePopup/CoursePopup';
 import type { Meta, StoryObj } from '@storybook/react';
+import Instructor from 'src/shared/types/Instructor';
 
 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: [],
-  isReserved: false,
-  number: '303E',
-  schedule: {
-    meetings: [
-      new CourseMeeting({
-        days: ['Tuesday', 'Thursday'],
-        endTime: 660,
-        startTime: 570,
-      }),
+    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.',
     ],
-  },
-  semester: {
-    code: '12345',
-    season: 'Spring',
-    year: 2024,
-  },
-  status: Status.CANCELLED,
-  uniqueId: 12345,
-  url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
+    flags: ['Quantitative Reasoning'],
+    fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
+    instructionMode: 'Online',
+    instructors: [
+        new Instructor({
+            firstName: 'William',
+            lastName: 'Young',
+            middleInitial: 'D',
+            fullName: 'William D Young',
+        }),
+        new Instructor({
+            firstName: 'William',
+            lastName: 'Young',
+            middleInitial: 'D',
+            fullName: 'William D Young',
+        }),
+    ],
+    isReserved: false,
+    number: '303E',
+    schedule: {
+        meetings: [
+            new CourseMeeting({
+                days: ['Tuesday', 'Thursday'],
+                endTime: 660,
+                startTime: 570,
+            }),
+        ],
+    },
+    semester: {
+        code: '12345',
+        season: 'Spring',
+        year: 2024,
+    },
+    status: Status.CANCELLED,
+    uniqueId: 12345,
+    url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
 });
 
 const exampleSchedule: UserSchedule = new UserSchedule({
-  courses: [exampleCourse],
-  name: 'Example Schedule',
+    courses: [exampleCourse],
+    name: 'Example Schedule',
+    hours: 0,
 });
 
 const meta = {
-  title: 'Components/Injected/CoursePopup',
-  component: CoursePopup,
-  // tags: ['autodocs'],
-  args: {
-    course: exampleCourse,
-    activeSchedule: exampleSchedule,
-  },
-  argTypes: {
-    course: {
-      control: {
-        type: 'other',
-      },
+    title: 'Components/Injected/CoursePopup',
+    component: CoursePopup,
+    // tags: ['autodocs'],
+    args: {
+        course: exampleCourse,
+        activeSchedule: exampleSchedule,
     },
-    activeSchedule: {
-      control: {
-        type: 'other',
-      },
+    argTypes: {
+        course: {
+            control: {
+                type: 'other',
+            },
+        },
+        activeSchedule: {
+            control: {
+                type: 'other',
+            },
+        },
     },
-  },
-  parameters: {
-    design: {
-      type: 'figma',
-      url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=602-1879&mode=design&t=BoS5xBrpSsjgQXqv-11',
+    parameters: {
+        design: {
+            type: 'figma',
+            url: 'https://www.figma.com/file/8tsCay2FRqctrdcZ3r9Ahw/UTRP?type=design&node-id=602-1879&mode=design&t=BoS5xBrpSsjgQXqv-11',
+        },
     },
-  },
 } satisfies Meta<typeof CoursePopup>;
 
 export default meta;
 type Story = StoryObj<typeof meta>;
 
 export const Open: Story = {
-  args: {
-    course: new Course({ ...exampleCourse, status: Status.OPEN }),
-    activeSchedule: new UserSchedule({
-      courses: [],
-      name: 'Example Schedule',
-    }),
-  },
+    args: {
+        course: new Course({ ...exampleCourse, status: Status.OPEN }),
+        activeSchedule: new UserSchedule({
+            courses: [],
+            name: 'Example Schedule',
+            hours: 0,
+        }),
+    },
 };
 
 export const Closed: Story = {
-  args: {
-    course: new Course({ ...exampleCourse, status: Status.CLOSED }),
-  },
+    args: {
+        course: new Course({ ...exampleCourse, status: Status.CLOSED }),
+    },
 };
 
 export const Cancelled: Story = {
-  args: {
-    course: new Course({ ...exampleCourse, status: Status.CANCELLED }),
-  },
+    args: {
+        course: new Course({ ...exampleCourse, status: Status.CANCELLED }),
+    },
 };

src/views/components/ImportantLinks.tsx

@@ -0,0 +1,65 @@
+import React from 'react';
+import clsx from 'clsx';
+import Text from './common/Text/Text';
+import OutwardArrowIcon from '~icons/material-symbols/arrow-outward';
+
+type Props = {
+    className?: string;
+};
+
+/**
+ * The "Important Links" section of the calendar website
+ * @returns
+ */
+export default function ImportantLinks({ className }: Props) {
+    return (
+        <article className={clsx(className, 'flex flex-col gap-2')}>
+            <Text variant='h3'>Important Links</Text>
+            <a
+                href='https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/'
+                className='flex items-center gap-0.5 text-ut-burntorange'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Spring Course Schedule</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+            <a
+                href='https://utdirect.utexas.edu/apps/registrar/course_schedule/20236/'
+                className='flex items-center gap-0.5 text-ut-burntorange'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Summer Course Schedule</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+            <a
+                href='https://utdirect.utexas.edu/registrar/ris.WBX'
+                className='flex items-center gap-0.5 text-ut-burntorange'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Registration Info Sheet</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+            <a
+                href='https://utdirect.utexas.edu/registration/chooseSemester.WBX'
+                className='flex items-center gap-0.5 text-ut-burntorange'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Register For Courses</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+            <a
+                href='https://utdirect.utexas.edu/apps/degree/audits/'
+                className='flex items-center gap-0.5 text-ut-burntorange'
+                target='_blank'
+                rel='noreferrer'
+            >
+                <Text variant='p'>Degree Audit</Text>
+                <OutwardArrowIcon className='h-3 w-3' />
+            </a>
+        </article>
+    );
+}

src/views/components/PopupMain.tsx

@@ -1,24 +1,99 @@
-import { background } from '@shared/messages';
 import React from 'react';
-import useSchedules from '../hooks/useSchedules';
-import { Button } from './common/Button/Button';
+import { FaCalendarAlt, FaCog, FaRedo } from 'react-icons/fa'; // Added FaRedo for the refresh icon
+import { StatusIcon } from '@shared/util/icons';
 import ExtensionRoot from './common/ExtensionRoot/ExtensionRoot';
+import PopupCourseBlock from './common/PopupCourseBlock/PopupCourseBlock';
+import Text from './common/Text/Text';
+import Divider from './common/Divider/Divider';
+import logoImage from '../../assets/logo.png'; // Adjust the path as necessary
+import List from './common/List/List'; // Ensure this path is correctly pointing to your List component
+import { generateCourses } from 'src/stories/components/List.stories';
 
 export default function PopupMain() {
-    const [activeSchedule, schedules] = useSchedules();
+   const courses = generateCourses(5); 
 
-    // TODO: Add a button to to switch the active schedule
 
-    return (
-        <ExtensionRoot>
-            <Button
-                onClick={() => {
-                    if (!activeSchedule) return;
-                    background.clearCourses({ scheduleName: activeSchedule?.name });
-                }}
-            >
-                Clear Courses
-            </Button>
-        </ExtensionRoot>
-    );
+   // Manually applying colors for the demonstration
+   const colors = {
+       OPEN: { primaryColor: '#34D399', secondaryColor: '#059669' },
+       CLOSED: { primaryColor: '#818cf8', secondaryColor: '#4f46e5' },
+       WAITLISTED: { primaryColor: '#F59E00', secondaryColor: '#B45309' },
+       CANCELLED: { primaryColor: '#EF4444', secondaryColor: '#b91c1c' },
+       TEMP: { primaryColor: '#fde047', secondaryColor: '#eab308' },
+   };
+
+   const draggableElements = courses.map((course) => (
+    <PopupCourseBlock
+        key={course.uniqueId}
+        course={course}
+        colors={colors[course.status]}
+    />
+));
+
+
+return (
+    <ExtensionRoot>
+        <div className="p-4 bg-white max-w-sm mx-auto rounded-lg shadow-md">
+            <div className="mb-2 flex items-center justify-between bg-white">
+                <div className="flex items-center">
+                    <img src={logoImage} alt="Logo" style={{ width: '40px', height: '40px', marginRight: '8px' }} />
+                    <div>
+                        <Text as="div" variant="h1-course" style={{ color: '#bf5700', fontSize: '1.3rem' }}>UT Registration</Text>
+                        <Text as="div" variant="h1-course" style={{ color: '#f8971f', fontSize: '1.3rem' }}>Plus</Text>
+                    </div>
+                </div>
+                <div className="flex items-center">
+                    <button style={{ backgroundColor: '#bf5700', borderRadius: '8px', padding: '8px' }}>
+                        <FaCalendarAlt color="white" />
+                    </button>
+                    <button style={{ backgroundColor: 'white', marginLeft: '10px', borderRadius: '8px', padding: '8px', boxShadow: '0px 2px 4px rgba(0, 0, 0, 0.1)' }}>
+                        <FaCog color="#C05621" />
+                    </button>
+                </div>
+            </div>
+            <Divider color="#E2E8F0" type="solid" style={{ margin: '1rem 0' }} />
+            <div className="mb-4 p-2 bg-white text-left rounded-lg shadow-inner" style={{ backgroundColor: 'white', border: '1px solid #FBD38D', borderRadius: '0.5rem' }}>
+                <Text as="div" variant="h2-course" style={{ color: '#DD6B20', fontSize: '1.2rem' }}>MAIN SCHEDULE:</Text>
+                <div style={{ display: 'flex', alignItems: 'center', justifyContent: 'start', color: '#333f48' }}>
+                    <Text as="div" variant="h1" style={{ fontSize: '1.2rem', fontWeight: 'bold', marginRight: '0.5rem' }}>22 HOURS</Text>
+                    <Text as="div" variant="h2-course" style={{ fontSize: '1.2rem' }}>8 Courses</Text>
+                </div>
+            </div>
+            {/* Integrate the List component here */}
+            <List
+                draggableElements={draggableElements}
+                itemHeight={100} // Adjust based on your content size
+                listHeight={500} // Adjust based on total height you want for the list
+                listWidth={350} // Adjust based on your layout/design
+                gap={12} // Spacing between items
+            />
+            <div className="mt-4 p-4 border-t border-gray-200 flex justify-between text-xs">
+                <div className="flex items-center">
+                    <div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
+                        <StatusIcon status="WAITLISTED" className="text-white h-5 w-5" />
+                    </div>
+                    <Text as="span" variant="mini">WAITLISTED</Text>
+                </div>
+                <div className="flex items-center">
+                    <div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
+                        <StatusIcon status="CLOSED" className="text-white h-5 w-5" />
+                    </div>
+                    <Text as="span" variant="mini">CLOSED</Text>
+                </div>
+                <div className="flex items-center">
+                    <div style={{ backgroundColor: '#6B7280', padding: '1px', borderRadius: '4px', marginRight: '3px', marginLeft: '8px' }}>
+                        <StatusIcon status="CANCELLED" className="text-white h-5 w-5" />
+                    </div>
+                    <Text as="span" variant="mini">CANCELLED</Text>
+                </div>
+            </div>
+            <div className="mt-2 text-center text-xs">
+                <div className="inline-flex items-center justify-center">
+                    <Text as="div" variant="mini">DATA UPDATED ON: 12:00 AM 02/01/2024</Text>
+                    <FaRedo className="text-gray-600 h-4 w-4 ml-2" />
+                </div>
+            </div>
+        </div>
+    </ExtensionRoot>
+);
 }

src/views/components/Settings.tsx

@@ -0,0 +1,14 @@
+import React from 'react';
+
+type Props = {
+    className?: string;
+};
+
+/**
+ * Component to hold everything for the settings page
+ * @param props className
+ * @returns The content for the settings page
+ */
+export default function Settings({ className }: Props) {
+    return <div className={className}>this will be finished laterrrrrrr</div>;
+}

src/views/components/common/Button/Button.module.scss

@@ -1,67 +0,0 @@
-@use 'sass:color';
-@use 'src/views/styles/colors.module.scss';
-
-.button {
-    background-color: #000;
-    color: #fff;
-    padding: 10px;
-    margin: 10px;
-    border-radius: 8px;
-    border: none;
-    cursor: pointer;
-    transition: all 0.1s ease-in-out;
-    font-family: 'Inter';
-
-    display: flex;
-    align-items: center;
-    justify-content: center;
-
-    &:hover {
-        background-color: #fff;
-        color: #000;
-    }
-
-    &:active {
-        transform: scale(0.96);
-    }
-
-    &.disabled {
-        cursor: not-allowed !important;
-        opacity: 0.5 !important;
-
-        &:active {
-            transform: unset;
-        }
-    }
-
-    @each $color,
-        $value
-            in (
-                primary: colors.$burnt_orange,
-                secondary: colors.$charcoal,
-                tertiary: colors.$bluebonnet,
-                danger: colors.$speedway_brick,
-                warning: colors.$tangerine,
-                success: colors.$turtle_pond,
-                info: colors.$turquoise
-            )
-    {
-        &.#{$color} {
-            background-color: $value;
-            color: #fff;
-
-            &:hover {
-                background-color: color.adjust($value, $lightness: 10%);
-            }
-
-            &:focus-visible,
-            &:active {
-                background-color: color.adjust($value, $lightness: -10%);
-            }
-
-            &.disabled {
-                background-color: $value !important;
-            }
-        }
-    }
-}

src/views/components/common/Button/Button.tsx

@@ -1,15 +1,18 @@
 import clsx from 'clsx';
 import React from 'react';
-import styles from './Button.module.scss';
+import type IconComponent from '~icons/material-symbols';
+import { ThemeColor, getThemeColorHexByName, getThemeColorRgbByName } from '../../../../shared/util/themeColors';
+import Text from '../Text/Text';
 
 interface Props {
     className?: string;
     style?: React.CSSProperties;
+    variant: 'filled' | 'outline' | 'single';
     onClick?: () => void;
-    type?: 'primary' | 'secondary' | 'tertiary' | 'danger' | 'warning' | 'success' | 'info';
+    icon?: typeof IconComponent;
     disabled?: boolean;
     title?: string;
-    testId?: string;
+    color: ThemeColor;
 }
 
 /**
@@ -17,26 +20,53 @@ interface Props {
  * @returns
  */
 export function Button({
-    style,
     className,
-    type,
-    testId,
-    children,
+    style,
+    variant,
+    onClick,
+    icon,
     disabled,
     title,
-    onClick,
+    color,
+    children,
 }: React.PropsWithChildren<Props>): JSX.Element {
+    const Icon = icon;
+    const isIconOnly = !children && !!icon;
+    const colorHex = getThemeColorHexByName(color);
+    const colorRgb = getThemeColorRgbByName(color)?.join(' ');
+
     return (
         <button
-            style={style}
-            data-testid={testId}
-            className={clsx(styles.button, className, styles[type ?? 'primary'], {
-                [styles.disabled]: disabled,
-            })}
+            style={
+                {
+                    ...style,
+                    color: colorHex,
+                    backgroundColor: `rgb(${colorRgb} / var(--un-bg-opacity)`,
+                } as React.CSSProperties
+            }
+            className={clsx(
+                'btn',
+                {
+                    'text-white! bg-opacity-100 hover:enabled:shadow-md active:enabled:shadow-sm shadow-black/20':
+                        variant === 'filled',
+                    'bg-opacity-0 border-current hover:enabled:bg-opacity-8 border': variant === 'outline',
+                    'bg-opacity-0 border-none hover:enabled:bg-opacity-8': variant === 'single', // settings is the only "single"
+                    'px-2 py-1.25': isIconOnly && variant !== 'outline',
+                    'px-1.75 py-1.25': isIconOnly && variant === 'outline',
+                    'px-3.75': variant === 'outline' && !isIconOnly,
+                },
+                className
+            )}
             title={title}
+            disabled={disabled}
             onClick={disabled ? undefined : onClick}
         >
-            {children}
+            {icon && <Icon className='h-6 w-6' />}
+            {!isIconOnly && (
+                <Text variant='h4' className='translate-y-0.08'>
+                    {children}
+                </Text>
+            )}
         </button>
     );
 }

src/views/components/common/CalendarBottomBar/CalendarBottomBar.tsx

@@ -0,0 +1,44 @@
+import React from 'react';
+import clsx from 'clsx';
+import Text from '../Text/Text';
+import CalendarCourseBlock, { CalendarCourseCellProps } from '../CalendarCourseCell/CalendarCourseCell';
+import { Button } from '../Button/Button';
+import ImageIcon from '~icons/material-symbols/image';
+import CalendarMonthIcon from '~icons/material-symbols/calendar-month';
+
+type CalendarBottomBarProps = {
+    courses: CalendarCourseCellProps[];
+};
+
+/**
+ *
+ */
+export const CalendarBottomBar = ({ courses }: CalendarBottomBarProps): JSX.Element => {
+    if (courses.length === -1) console.log('foo'); // dumb line to make eslint happy
+    return (
+        <div className='w-full flex py-1.25'>
+            <div className='flex flex-grow items-center gap-3.75 pl-7.5 pr-2.5'>
+                <Text variant='h4'>Async. and Other:</Text>
+                <div className='h-14 inline-flex gap-2.5'>
+                    {courses.map(course => (
+                        <CalendarCourseBlock
+                            courseDeptAndInstr={course.courseDeptAndInstr}
+                            status={course.status}
+                            colors={course.colors}
+                            key={course.courseDeptAndInstr}
+                            className={clsx(course.className, 'w-35!')}
+                        />
+                    ))}
+                </div>
+            </div>
+            <div className='flex items-center pl-2.5 pr-7.5'>
+                <Button variant='single' color='ut-black' icon={CalendarMonthIcon}>
+                    Save as .CAL
+                </Button>
+                <Button variant='single' color='ut-black' icon={ImageIcon}>
+                    Save as .PNG
+                </Button>
+            </div>
+        </div>
+    );
+};

src/views/components/common/CalendarCourseBlock/CalendarCourseMeeting.module.scss

@@ -0,0 +1,34 @@
+.component {
+    display: flex;
+    padding: 7px 7px 9px 7px;
+    flex-direction: column;
+    align-items: flex-start;
+    gap: 5px;
+    flex: 1 0 0;
+    align-self: stretch;
+    border-radius: 4px;
+    background: #cbd5e1;
+    .content {
+        display: flex;
+        gap: 7px;
+        .course-detail {
+            display: flex;
+            flex-direction: column;
+            gap: 5px;
+            width: 154px;
+            .course {
+                font-size: 16px;
+                line-height: 16px;
+                font-weight: 600;
+                white-space: nowrap;
+                overflow: hidden;
+                text-overflow: ellipsis;
+            }
+            .time-and-location {
+                font-size: 11px;
+                line-height: 11px;
+                font-weight: 400;
+            }
+        }
+    }
+}

src/views/components/common/CalendarCourseBlock/CalendarCourseMeeting.tsx

@@ -0,0 +1,49 @@
+import React from 'react';
+import { Course } from 'src/shared/types/Course';
+import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import styles from './CalendarCourseMeeting.module.scss';
+
+/**
+ * Props for the CalendarCourseMeeting component.
+ */
+export interface CalendarCourseMeetingProps {
+    /** The Course that the meeting is for. */
+    course: Course;
+    /* index into course meeting array to display */
+    meetingIdx?: number;
+    /** The background color for the course. */
+    color: string;
+    /** The icon to display on the right side of the course. This is optional. */
+    rightIcon?: React.ReactNode;
+}
+
+/**
+ * `CalendarCourseMeeting` is a functional component that displays a course meeting.
+ *
+ * @example
+ * <CalendarCourseMeeting course={course} meeting={meeting} color="red" rightIcon={<Icon />} />
+ */
+const CalendarCourseMeeting: React.FC<CalendarCourseMeetingProps> = ({
+    course,
+    meetingIdx,
+}: CalendarCourseMeetingProps) => {
+    let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
+    return (
+        <div className={styles.component}>
+            <div className={styles.content}>
+                <div className={styles['course-detail']}>
+                    <div className={styles.course}>
+                        {course.department} {course.number} - {course.instructors[0].lastName}
+                    </div>
+                    <div className={styles['time-and-location']}>
+                        {`${meeting.getTimeString({ separator: '-', capitalize: true })}${
+                            meeting.location ? ` - ${meeting.location.building}` : ''
+                        }`}
+                    </div>
+                </div>
+            </div>
+        </div>
+    );
+};
+
+export default CalendarCourseMeeting;

src/views/components/common/CalendarCourseCell/CalendarCourseCell.tsx

@@ -1,45 +1,68 @@
+import { Status } from '@shared/types/Course';
+import clsx from 'clsx';
 import React from 'react';
-import { Course, Status } from 'src/shared/types/Course';
-import { CourseMeeting } from 'src/shared/types/CourseMeeting';
+import { CourseColors, pickFontColor } from 'src/shared/util/colors';
 import ClosedIcon from '~icons/material-symbols/lock';
 import WaitlistIcon from '~icons/material-symbols/timelapse';
 import CancelledIcon from '~icons/material-symbols/warning';
 import Text from '../Text/Text';
 
-export interface CalendarCourseBlockProps {
-    /** The Course that the meeting is for. */
-    course: Course;
-    /* index into course meeting array to display */
-    meetingIdx?: number;
-    /** The background color for the course. */
-    color: string;
+export interface CalendarCourseCellProps {
+    courseDeptAndInstr: string;
+    timeAndLocation?: string;
+    status: Status;
+    colors: CourseColors;
+    className?: string;
 }
 
-const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meetingIdx }: CalendarCourseBlockProps) => {
-    let meeting: CourseMeeting | null = meetingIdx !== undefined ? course.schedule.meetings[meetingIdx] : null;
+const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
+    courseDeptAndInstr,
+    timeAndLocation,
+    status,
+    colors,
+    className,
+}: CalendarCourseCellProps) => {
     let rightIcon: React.ReactNode | null = null;
-    if (course.status === Status.WAITLISTED) {
+    if (status === Status.WAITLISTED) {
         rightIcon = <WaitlistIcon className='h-5 w-5' />;
-    } else if (course.status === Status.CLOSED) {
+    } else if (status === Status.CLOSED) {
         rightIcon = <ClosedIcon className='h-5 w-5' />;
-    } else if (course.status === Status.CANCELLED) {
+    } else if (status === Status.CANCELLED) {
         rightIcon = <CancelledIcon className='h-5 w-5' />;
     }
 
+    // whiteText based on secondaryColor
+    const fontColor = pickFontColor(colors.primaryColor);
+
     return (
-        <div className='w-full flex justify-center rounded bg-slate-300 p-2 text-ut-black'>
-            <div className='flex flex-1 flex-col gap-1'>
-                <Text variant='h1-course' className='leading-[75%]!'>
-                    {course.department} {course.number} - {course.instructors[0].lastName}
-                </Text>
-                <Text variant='h3-course' className='leading-[75%]!'>
-                    {`${meeting.getTimeString({ separator: '–', capitalize: true })}${
-                        meeting.location ? ` – ${meeting.location.building}` : ''
-                    }`}
+        <div
+            className={clsx('w-full flex justify-center rounded p-2', fontColor, className)}
+            style={{
+                backgroundColor: colors.primaryColor,
+            }}
+        >
+            <div className='flex flex-1 flex-col gap-1 overflow-x-hidden'>
+                <Text
+                    variant='h1-course'
+                    className={clsx('-my-0.8 leading-tight', {
+                        truncate: timeAndLocation,
+                    })}
+                >
+                    {courseDeptAndInstr}
                 </Text>
+                {timeAndLocation && (
+                    <Text variant='h3-course' className='-mb-0.5'>
+                        {timeAndLocation}
+                    </Text>
+                )}
             </div>
             {rightIcon && (
-                <div className='h-fit flex items-center justify-center justify-self-start rounded bg-slate-700 p-0.5 text-white'>
+                <div
+                    className='h-fit flex items-center justify-center justify-self-start rounded p-0.5 text-white'
+                    style={{
+                        backgroundColor: colors.secondaryColor,
+                    }}
+                >
                     {rightIcon}
                 </div>
             )}
@@ -47,4 +70,4 @@ const CalendarCourseBlock: React.FC<CalendarCourseBlockProps> = ({ course, meeti
     );
 };
 
-export default CalendarCourseBlock;
+export default CalendarCourseCell;

src/views/components/common/CalendarGrid/CalendarGrid.module.scss

@@ -1,6 +1,3 @@
-@use 'sass:color';
-@use 'src/views/styles/colors.module.scss';
-
 .dayLabelContainer {
     display: flex;
     flex-direction: row;
@@ -16,7 +13,7 @@
 
 .calendarGrid {
     display: grid;
-    grid-template-columns: repeat(5, 1fr);
+    grid-template-columns: repeat(6, 1fr);
     grid-template-rows: repeat(13, 1fr);
 }
 
@@ -25,19 +22,24 @@
 }
 
 .calendar {
-    // display: grid;
-    // grid-template-columns: auto repeat(5, 1fr);
+    display: flex;
+    flex-direction: column;
     gap: 10px;
+    position: relative; // Ensuring that child elements can be positioned in relation to this.
 }
 
 .day {
     gap: 5px;
-    color: colors.$burnt_orange;
+    color: #bf5700;
     text-align: center;
     font-size: 14.22px;
     font-style: normal;
     font-weight: 500;
     line-height: normal;
+    margin-top: 20px;
+    border-right: 1px solid #dadce0;
+    border-bottom: 1px solid #dadce0;
+    border-left: 1px solid #dadce0;
 }
 
 .timeAndGrid {
@@ -56,14 +58,11 @@
 
 .timeBlock {
     display: flex;
-    width: 50px;
-    height: 40.279px;
-    min-width: 50px;
-    max-width: 50px;
-    min-height: 40px;
+    width: auto;
+    height: auto;
     flex-direction: column;
     align-items: flex-end;
-    
+
     .timeLabelContainer {
         display: flex;
         max-height: 20px;
@@ -71,24 +70,58 @@
         align-items: flex-end;
         gap: 17px;
         flex: 1 0 0;
-        align-self: stretch;
         border-radius: var(--border-radius-none, 0px);
     }
 
     p {
-        color: #1A2024;
+        color: #1a2024;
         text-align: left;
         height: 6.6px;
         align-self: stretch;
-        margin-top: 0;
+        margin-top: -10px;
+        margin-right: 10px;
         margin-bottom: 0;
 
         /* Type scale/small */
-        font-family: "Roboto Flex";
+        font-family: 'Roboto Flex';
         font-size: 14.22px;
         font-style: normal;
         font-weight: 500;
         line-height: normal;
-    } 
+    }
 }
 
+.buttonContainer {
+    display: flex;
+    align-items: center;
+    justify-content: flex-end;
+    gap: 10px;
+    padding: 10px;
+    margin-top: auto;
+}
+
+.calendarButton {
+    display: flex;
+    align-items: center;
+    gap: 5px;
+    padding: 6px 6px;
+    border: none;
+    background-color: transparent;
+    color: #333;
+    cursor: pointer;
+    
+    &:hover {
+        background-color: rgba(0, 0, 0, 0.1);
+    }
+}
+
+.buttonIcon {
+    height: 24px;
+    fill: currentColor;
+}
+
+.divider {
+    height: 30px;
+    width: 1px;
+    background-color: grey;
+}

src/views/components/common/CalendarGrid/CalendarGrid.tsx

@@ -1,52 +1,111 @@
-import React from 'react';
-import styles from './CalendarGrid.module.scss';
-import CalendarCell from '../CalendarGridCell/CalendarGridCell';
+import React, { useRef } from 'react';
+import html2canvas from 'html2canvas';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
+import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
+import calIcon from 'src/assets/icons/cal.svg';
+import pngIcon from 'src/assets/icons/png.svg';
+import CalendarCell from '../CalendarGridCell/CalendarGridCell';
+import CalendarCourseCell from '../CalendarCourseCell/CalendarCourseCell';
+import styles from './CalendarGrid.module.scss';
 
-const daysOfWeek = Object.values(DAY_MAP).filter(d => d != "Saturday" && d != "Sunday")
+const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
-const grid = Array.from({ length: 5 }, () =>
-  Array.from({ length: 13 }, (_, columnIndex) => (
-    <CalendarCell key={columnIndex} />
-  ))
-);
+const grid = [];
+for (let i = 0; i < 13; i++) {
+    const row = [];
+    let hour = hoursOfDay[i];
+    row.push(
+        <div key={hour} className={styles.timeBlock}>
+            <div className={styles.timeLabelContainer}>
+                <p>{(hour % 12 === 0 ? 12 : hour % 12) + (hour < 12 ? ' AM' : ' PM')}</p>
+            </div>
+        </div>
+    );
+    row.push(Array.from({ length: 5 }, (_, j) => <CalendarCell key={j} />));
+    grid.push(row);
+}
+
+interface Props {
+    courseCells: CalendarGridCourse[];
+    saturdayClass: boolean;
+}
 
 /**
  * Grid of CalendarGridCell components forming the user's course schedule calendar view
- * @param props 
+ * @param props
  */
-const Calendar: React.FC = (props) => {
-  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>
-      {/* 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>
-  )
-};
+function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Props>): JSX.Element {
+    const calendarRef = useRef(null); // Create a ref for the calendar grid
 
-export default Calendar;
+    const saveAsPNG = () => {
+        if (calendarRef.current) {
+            html2canvas(calendarRef.current).then(canvas => {
+                // Create an a element to trigger download
+                const a = document.createElement('a');
+                a.href = canvas.toDataURL('image/png');
+                a.download = 'calendar.png';
+                a.click();
+            });
+        }
+    };
+
+    return (
+        <div className={styles.calendar}>
+            <div className={styles.dayLabelContainer} />
+            {/* Displaying the rest of the calendar */}
+            <div ref={calendarRef} className={styles.timeAndGrid}>
+                {/* <div className={styles.timeColumn}>
+            <div className={styles.timeBlock}></div>
+            {hoursOfDay.map((hour) => (
+                <div key={hour} className={styles.timeBlock}>
+                <div className={styles.timeLabelContainer}>
+                    <p>{hour % 12 === 0 ? 12 : hour % 12} {hour < 12 ? 'AM' : 'PM'}</p>
+                </div>
+                </div>
+            ))}
+            </div> */}
+                <div className={styles.calendarGrid}>
+                    {/* Displaying day labels */}
+                    <div className={styles.timeBlock} />
+                    {daysOfWeek.map(day => (
+                        <div key={day} className={styles.day}>
+                            {day}
+                        </div>
+                    ))}
+                    {grid.map((row, index) => (
+                        <React.Fragment key={index}>{row}</React.Fragment>
+                    ))}
+                </div>
+            </div>
+            {courseCells.map((block: CalendarGridCourse) => (
+                <div
+                    key={`${block}`}
+                    style={{
+                        gridColumn: `${block.calendarGridPoint.dayIndex}`,
+                        gridRow: `${block.calendarGridPoint.startIndex} / ${block.calendarGridPoint.endIndex}`,
+                    }}
+                >
+                    <CalendarCourseCell
+                        courseDeptAndInstr={block.componentProps.courseDeptAndInstr}
+                        status={block.componentProps.status}
+                        colors={block.componentProps.colors}
+                    />
+                </div>
+            ))}
+            <div className={styles.buttonContainer}>
+                <div className={styles.divider} /> {/* First divider */}
+                <button className={styles.calendarButton}>
+                    <img src={calIcon} className={styles.buttonIcon} alt='CAL' />
+                    Save as .CAL
+                </button>
+                <div className={styles.divider} /> {/* Second divider */}
+                <button onClick={saveAsPNG} className={styles.calendarButton}>
+                    <img src={pngIcon} className={styles.buttonIcon} alt='PNG' />
+                    Save as .PNG
+                </button>
+            </div>
+        </div>
+    );
+}
+
+export default CalendarGrid;

src/views/components/common/CalendarGridCell/CalendarGridCell.module.scss

@@ -1,18 +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;
-  border: 1px solid #DADCE0;
+    display: flex;
+    width: 213.8px;
+    height: 44.769px;
+    min-width: 45px;
+    min-height: 40px;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    border: 1px solid #dadce0;
 }
-  
+
 .hourLine {
-  width: 165px;
-  height: 1px;
-  border-radius: var(--border-radius-none, 0px);
-  background: rgba(218, 220, 224, 0.25);
-}
+    width: 213.8px;
+    height: 1px;
+    border-radius: var(--border-radius-none, 0px);
+    background: rgba(218, 220, 224, 0.25);
+}

src/views/components/common/CalendarGridCell/CalendarGridCell.tsx

@@ -3,16 +3,12 @@ import styles from './CalendarGridCell.module.scss';
 
 /**
  * Component representing each 1 hour time block of a calendar
- * @param props 
+ * @param props
  */
-const CalendarCell: React.FC = (props) => {
-  return (
+const CalendarCell: React.FC = props => (
     <div className={styles.calendarCell}>
-      <div className={styles.hourLine}>
-
-      </div>
+        <div className={styles.hourLine} />
     </div>
-  );
-};
+);
 
 export default CalendarCell;

src/views/components/common/CalendarHeader/CalenderHeader.tsx

@@ -0,0 +1,54 @@
+import React from 'react';
+import { Status } from '@shared/types/Course';
+import Divider from '../Divider/Divider';
+import { Button } from '../Button/Button';
+import Text from '../Text/Text';
+import MenuIcon from '~icons/material-symbols/menu';
+import LogoIcon from '~icons/material-symbols/add-circle-outline';
+import UndoIcon from '~icons/material-symbols/undo';
+import RedoIcon from '~icons/material-symbols/redo';
+import SettingsIcon from '~icons/material-symbols/settings';
+import ScheduleTotalHoursAndCourses from '../ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses';
+import CourseStatus from '../CourseStatus/CourseStatus';
+
+const CalendarHeader = () => (
+    <div className='min-h-79px min-w-672px flex px-0 py-15'>
+        <div className='flex flex-row gap-20'>
+            <div className='flex gap-10'>
+                <div className='flex gap-1'>
+                    <Button variant='single' icon={MenuIcon} color='ut-gray' />
+                    <div className='flex items-center'>
+                        <LogoIcon style={{ marginRight: '5px' }} />
+                        <div className='flex flex-col gap-1 whitespace-nowrap'>
+                            <Text className='leading-trim text-cap font-roboto text-base text-ut-burntorange font-medium'>
+                                UT Registration
+                            </Text>
+                            <Text className='leading-trim text-cap font-roboto text-base text-ut-orange font-medium'>
+                                Plus
+                            </Text>
+                        </div>
+                    </div>
+                </div>
+                <div className='flex flex-col'>
+                    <ScheduleTotalHoursAndCourses scheduleName='SCHEDULE' totalHours={22} totalCourses={8} />
+                    DATA UPDATED ON: 12:00 AM 02/01/2024
+                </div>
+            </div>
+            <div className='flex flex-row items-center space-x-8'>
+                <div className='flex flex-row space-x-4'>
+                    <CourseStatus size='small' status={Status.WAITLISTED} />
+                    <CourseStatus size='small' status={Status.CLOSED} />
+                    <CourseStatus size='small' status={Status.CANCELLED} />
+                </div>
+                <div className='flex flex-row'>
+                    <Button variant='single' icon={UndoIcon} color='ut-black' />
+                    <Button variant='single' icon={RedoIcon} color='ut-black' />
+                    <Button variant='single' icon={SettingsIcon} color='ut-black' />
+                </div>
+            </div>
+        </div>
+        <Divider type='solid' />
+    </div>
+);
+
+export default CalendarHeader;

src/views/components/common/CalendarSchedules/CalendarSchedules.tsx

@@ -0,0 +1,36 @@
+import { UserSchedule } from '@shared/types/UserSchedule';
+import React, { useState } from 'react';
+import AddSchedule from '~icons/material-symbols/add';
+import List from '../List/List';
+import ScheduleListItem from '../ScheduleListItem/ScheduleListItem';
+import Text from '../Text/Text';
+
+export type Props = {
+    style?: React.CSSProperties;
+    dummySchedules?: UserSchedule[];
+    dummyActiveIndex?: number;
+};
+
+export function CalendarSchedules(props: Props) {
+    const [activeScheduleIndex, setActiveScheduleIndex] = useState(props.dummyActiveIndex || 0);
+    const [schedules, setSchedules] = useState(props.dummySchedules || []);
+
+    const scheduleComponents = schedules.map((schedule, index) => (
+            <ScheduleListItem active={index === activeScheduleIndex} name={schedule.name} />
+    ));
+
+    return (
+        <div style={{ ...props.style }} className='items-center'>
+            <div className='m0 m-b-2 w-full flex justify-between'>
+                <Text variant='h3'>MY SCHEDULES</Text>
+                <div className='cursor-pointer items-center justify-center btn-transition -ml-1.5 hover:text-zinc-400'>
+                    <Text variant='h3'>
+                        <AddSchedule />
+                    </Text>
+                </div>
+            </div>
+
+            <List gap={10} draggableElements={scheduleComponents} itemHeight={30} listHeight={30} listWidth={240} />
+        </div>
+    );
+}

src/views/components/common/Chip/Chip.tsx

@@ -0,0 +1,27 @@
+import React from 'react';
+import Text from '../Text/Text';
+
+export const flags = ['WR', 'QR', 'GC', 'CD', 'E', 'II'];
+
+interface Props {
+    label: string;
+}
+
+/**
+ * A reusable chip component that follows the design system of the extension.
+ * @returns
+ */
+export function Chip({ label }: React.PropsWithChildren<Props>): JSX.Element {
+    return (
+        <Text
+            as='div'
+            variant='h4'
+            className='min-w-5 inline-flex items-center justify-center gap-2.5 rounded-lg px-1 py-0.5'
+            style={{
+                backgroundColor: '#FFD600',
+            }}
+        >
+            {label}
+        </Text>
+    );
+}

src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx

@@ -0,0 +1,43 @@
+import React from 'react';
+import Text from '../Text/Text';
+
+/**
+ * Props for ConflictWithWarningProps
+ */
+export interface ConflictsWithWarningProps {
+    ConflictingCourse: string;
+    SectionNumber: string;
+}
+
+/**
+ * The ConflictsWithWarning component is used to display a warning message when a course conflicts 
+ * with another course as part of the labels and details section
+ *
+ * @param props ConflictsWithWarningProps
+ */
+export default function ConflictsWithWarning( { ConflictingCourse, SectionNumber }: ConflictsWithWarningProps): JSX.Element {
+    const UniqueCourseConflictText = `${ConflictingCourse} (${SectionNumber})`;
+
+    return (
+        <div className="min-w-21 w-21 flex flex-col items-start gap-2.5 rounded bg-[#AF2E2D] p-2.5">
+            <ConflictsWithoutWarningText>
+               Conflicts With:
+            </ConflictsWithoutWarningText>
+            <ConflictsWithoutWarningText>
+                {UniqueCourseConflictText}
+            </ConflictsWithoutWarningText>
+        </div>
+    );
+}
+
+function ConflictsWithoutWarningText( {children}: {children: string} ) {
+    return (
+        <Text
+            variant='mini'
+            as='span'
+            className='text-white'
+        >
+            {children}
+        </Text>
+    );
+}

src/views/components/common/Dropdown/Dropdown.tsx

@@ -0,0 +1,110 @@
+import { Disclosure, Transition } from '@headlessui/react';
+import { UserSchedule } from '@shared/types/UserSchedule';
+import React from 'react';
+import userScheduleHandler from 'src/pages/background/handler/userScheduleHandler';
+import DropdownArrowDown from '~icons/material-symbols/arrow-drop-down';
+import DropdownArrowUp from '~icons/material-symbols/arrow-drop-up';
+import List from '../List/List';
+import Text from '../Text/Text';
+
+export type Props = {
+    style?: React.CSSProperties;
+    // Dummy value solely for storybook
+    dummySchedules?: UserSchedule[];
+    dummyActiveIndex?: number;
+    dummyActiveSchedule?: UserSchedule;
+    scheduleComponents?: any[];
+};
+
+/**
+ * This is a reusable dropdown component that can be used to toggle the visiblity of information
+ */
+export default function Dropdown(props: Props) {
+    // Expand/Hide state for dropdown
+    let [expanded, toggle] = React.useState(false);
+    let [activeScheduleIndex, select] = React.useState(props.dummyActiveIndex);
+    let [activeSchedule, selectFrom] = React.useState(props.dummyActiveSchedule);
+    let [scheduleComponents, setScheduleComponents] = React.useState(props.scheduleComponents);
+
+    const schedules = props.dummySchedules;
+    if (schedules == null) {
+        // if no dummy values passed in
+        // useSchedules hook here
+    }
+
+    const toggleSwitch = () => {
+        toggle(!expanded);
+    };
+
+    // WIP function to swap schedules. Prefer to use the hook when in production
+    const switchSchedule = (index: number) => {
+        const scheduleToSwitchTo = schedules[index];
+
+        select(index);
+        selectFrom(scheduleToSwitchTo);
+        if (scheduleToSwitchTo != null && scheduleToSwitchTo.name != null) {
+            userScheduleHandler.switchSchedule({
+                data: {
+                    scheduleName: scheduleToSwitchTo.name,
+                },
+                sender: null,
+                sendResponse: null,
+            });
+        }
+    };
+
+    return (
+        <div
+            style={{ ...props.style, height: expanded && schedules ? `${40 * schedules.length + 54}px` : '72px' }}
+            className='items-left absolute w-72 flex flex-col border'
+        >
+            <Disclosure>
+                <Disclosure.Button>
+                    <div className='flex items-center border-none bg-white p-3 text-left'>
+                        <div className='flex-1'>
+                            <Text as='div' variant='h4' className='text-ut-burntorange mb-1 w-100%'>
+                                MAIN SCHEDULE:
+                            </Text>
+                            <div>
+                                <Text variant='h3' className='text-theme-black leading-[75%]!'>
+                                    {activeSchedule ? activeSchedule.hours : 0} HOURS
+                                </Text>
+                                <Text variant='h4' className='ml-2.5 text-ut-black leading-[75%]!'>
+                                    {activeSchedule ? activeSchedule.courses.length : 0} Courses
+                                </Text>
+                            </div>
+                        </div>
+                        <Text className='text-ut-burntorange text-2xl font-normal'>
+                            {expanded ? <DropdownArrowDown /> : <DropdownArrowUp />}
+                        </Text>
+                    </div>
+                </Disclosure.Button>
+
+                <Transition
+                    enter='transition duration-100 ease-out'
+                    enterFrom='transform scale-95 opacity-0'
+                    enterTo='transform scale-100 opacity-100'
+                    leave='transition duration-75 ease-out'
+                    leaveFrom='transform scale-100 opacity-100'
+                    leaveTo='transform scale-95 opacity-0'
+                    beforeEnter={() => {
+                        toggleSwitch();
+                    }}
+                    afterLeave={() => {
+                        toggleSwitch();
+                    }}
+                >
+                    <Disclosure.Panel>
+                        <List
+                            draggableElements={scheduleComponents}
+                            itemHeight={30}
+                            listHeight={30}
+                            listWidth={240}
+                            gap={10}
+                        />
+                    </Disclosure.Panel>
+                </Transition>
+            </Disclosure>
+        </div>
+    );
+}

src/views/components/common/ExtensionRoot/ExtensionRoot.module.scss

@@ -1,7 +1,7 @@
 @import 'src/views/styles/base.module.scss';
 
 .extensionRoot {
-    font-family: 'Inter' !important;
+    @apply font-sans;
     color: #303030;
     -webkit-box-sizing: border-box;
     box-sizing: border-box;

src/views/components/common/InfoCard/InfoCard.tsx

@@ -0,0 +1,40 @@
+import React from 'react';
+import Text from '../Text/Text';
+
+interface Props {
+    titleText: string;
+    bodyText: string;
+}
+
+/**
+ * A maybe reusable InfoCard component that follows the design system of the extension.
+ * @returns
+ */
+export function InfoCard({
+    titleText,
+    bodyText
+}: React.PropsWithChildren<Props>): JSX.Element {
+    return (
+        <div
+            className = 'w-50 flex flex-col items-start justify-center border rounded p-4'  
+            style = {{
+                border: "1px solid #D6D2C4",
+                background: "#FFF" //   White
+            }}>
+                <div className="flex flex-col items-start self-stretch gap-1.5">
+                    <Text variant = "h4" as = 'span'
+                        style = {{
+                            color: '#F8971F', //    Orange
+                        }}> 
+                        {titleText} 
+                    </Text>
+                    <Text variant = "small" as = 'span'
+                        style = {{
+                            color: '#333F48', //    Black
+                        }}> 
+                        {bodyText} 
+                    </Text>
+                </ div>
+        </div>
+    );
+}

src/views/components/common/Link/Link.tsx

@@ -28,7 +28,7 @@ export default function Link(props: PropsWithChildren<Props>) {
         <Text
             color='bluebonnet'
             {...passedProps}
-            span
+            as='span'
             className={clsx(
                 styles.link,
                 {

src/views/components/common/List/List.tsx

@@ -0,0 +1,168 @@
+import { DragDropContext, Draggable, Droppable } from '@hello-pangea/dnd';
+import React, { ReactElement, useCallback, useState } from 'react';
+import { areEqual } from 'react-window';
+
+/*
+ * Ctrl + f dragHandleProps on PopupCourseBlock.tsx for example implementation of drag handle (two lines of code)
+ *
+ */
+
+/**
+ * Props for the List component.
+ */
+export interface ListProps {
+    draggableElements: any[]; // Will later define draggableElements based on what types
+    // of components are draggable.
+    itemHeight: number;
+    listHeight: number;
+    listWidth: number;
+    gap: number; // Impacts the spacing between items in the list
+}
+
+function initial(draggableElements: any[] = []) {
+    return draggableElements.map((element, index) => ({
+        id: `id:${index}`,
+        content: element as ReactElement,
+    }));
+}
+
+function reorder(list: { id: string; content: ReactElement }[], startIndex: number, endIndex: number) {
+    const result = Array.from(list);
+    const [removed] = result.splice(startIndex, 1);
+    result.splice(endIndex, 0, removed);
+    return result;
+}
+
+function getStyle({ provided, style /*  , isDragging, gap   */ }) {
+    const combined = {
+        ...style,
+        ...provided.draggableProps.style,
+    };
+
+    return combined;
+}
+
+function Item({ provided, item, style, isDragging /* , gap */ }) {
+    return (
+        <div
+            {...provided.draggableProps}
+            ref={provided.innerRef}
+            style={getStyle({ provided, style /* , isDragging, gap   */ })}
+            className={`item ${isDragging ? 'is-dragging' : ''}`}
+        >
+            {React.cloneElement(item.content, { dragHandleProps: provided.dragHandleProps })}
+        </div>
+    );
+}
+
+interface RowProps {
+    data: any; //   DraggableElements[]; Need to define DraggableElements interface once those components are ready
+    index: number;
+    style: React.CSSProperties;
+}
+
+const Row: React.FC<RowProps> = React.memo(({ data: { items, gap }, index, style }) => {
+    const item = items[index];
+    const adjustedStyle = {
+        ...style,
+        height: `calc(${style.height}px - ${gap}px)`, // Reduce the height by gap to accommodate the margin
+        marginBottom: `${gap}px`, // Add gap as bottom margin
+    };
+    return (
+        <Draggable draggableId={item.id} index={index} key={item.id}>
+            {/* @ts-ignore  */}
+            {provided => <Item provided={provided} item={item} style={adjustedStyle} gap={gap} />}
+        </Draggable>
+    );
+}, areEqual);
+
+/**
+ * `List` is a functional component that displays a course meeting.
+ *
+ * @example
+ * <List draggableElements={elements} />
+ */
+const List: React.FC<ListProps> = ({ draggableElements, itemHeight, listHeight, listWidth, gap = 12 }: ListProps) => {
+    const [items, setItems] = useState(() => initial(draggableElements));
+
+    const onDragEnd = useCallback(
+        result => {
+            if (!result.destination) {
+                return;
+            }
+
+            if (result.source.index === result.destination.index) {
+                return;
+            }
+
+            const newItems = reorder(items, result.source.index, result.destination.index);
+
+            setItems(newItems as { id: string; content: React.ReactElement }[]);
+        },
+        [items]
+    );
+
+    return (
+        <div style={{ overflow: 'hidden', width: listWidth }}>
+            <DragDropContext onDragEnd={onDragEnd}>
+                <Droppable
+                    droppableId='droppable'
+                    direction='vertical'
+                    renderClone={(provided, snapshot, rubric) => {
+                        let { style } = provided.draggableProps;
+                        const transform = style?.transform;
+
+                        if (snapshot.isDragging && transform) {
+                            console.log(transform);
+                            let [, _x, y] = transform.match(/translate\(([-\d]+)px, ([-\d]+)px\)/) || [];
+
+                            style.transform = `translate3d(0px, ${y}px, 0px)`; // Apply constrained y value
+                        }
+
+                        return (
+                            <Item
+                                provided={provided}
+                                isDragging={snapshot.isDragging}
+                                item={items[rubric.source.index]}
+                                style={{
+                                    style,
+                                }}
+                            />
+                        );
+                    }}
+                >
+                    {provided => (
+                        <div
+                            {...provided.droppableProps}
+                            ref={provided.innerRef}
+                            style={{ width: `${listWidth}px`, marginBottom: `-${gap}px` }}
+                        >
+                            {items.map((item, index) => (
+                                <Draggable key={item.id} draggableId={item.id} index={index}>
+                                    {draggableProvided => (
+                                        <div
+                                            ref={draggableProvided.innerRef}
+                                            {...draggableProvided.draggableProps}
+                                            style={{
+                                                ...draggableProvided.draggableProps.style,
+                                                // if last item, don't add margin
+                                                marginBottom: `${gap}px`,
+                                            }}
+                                        >
+                                            {React.cloneElement(item.content, {
+                                                dragHandleProps: draggableProvided.dragHandleProps,
+                                            })}
+                                        </div>
+                                    )}
+                                </Draggable>
+                            ))}
+                            {provided.placeholder}
+                        </div>
+                    )}
+                </Droppable>
+            </DragDropContext>
+        </div>
+    );
+};
+
+export default List;

src/views/components/common/PopupCourseBlock/PopupCourseBlock.tsx

@@ -1,8 +1,8 @@
-import clsx from 'clsx';
-import React, { useState } from 'react';
 import { Course, Status } from '@shared/types/Course';
+import { CourseColors, pickFontColor } from '@shared/util/colors';
 import { StatusIcon } from '@shared/util/icons';
-import { CourseColors, getCourseColors, pickFontColor } from '@shared/util/colors';
+import clsx from 'clsx';
+import React from 'react';
 import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
 import Text from '../Text/Text';
 
@@ -13,6 +13,7 @@ export interface PopupCourseBlockProps {
     className?: string;
     course: Course;
     colors: CourseColors;
+    dragHandleProps?: any;
 }
 
 /**
@@ -20,7 +21,12 @@ export interface PopupCourseBlockProps {
  *
  * @param props PopupCourseBlockProps
  */
-export default function PopupCourseBlock({ className, course, colors }: PopupCourseBlockProps): JSX.Element {
+export default function PopupCourseBlock({
+    className,
+    course,
+    colors,
+    dragHandleProps,
+}: PopupCourseBlockProps): JSX.Element {
     // whiteText based on secondaryColor
     const fontColor = pickFontColor(colors.primaryColor);
 
@@ -36,13 +42,11 @@ export default function PopupCourseBlock({ className, course, colors }: PopupCou
                     backgroundColor: colors.secondaryColor,
                 }}
                 className='flex cursor-move items-center self-stretch rounded rounded-r-0'
+                {...dragHandleProps}
             >
                 <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'
-            >
+            <Text className={clsx('flex-1 py-3.5 truncate', 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>

src/views/components/common/ScheduleListItem/ScheduleListItem.tsx

@@ -0,0 +1,46 @@
+import clsx from 'clsx';
+import React from 'react';
+import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
+import Text from '../Text/Text';
+
+export type Props = {
+    style?: React.CSSProperties;
+    active?: boolean;
+    name: string;
+    dragHandleProps?: any;
+};
+
+/**
+ * This is a reusable dropdown component that can be used to toggle the visiblity of information
+ */
+export default function ScheduleListItem(props: Props) {
+    const { dragHandleProps } = props;
+    console.log(props);
+    return (
+        <div style={{ ...props.style }} className='items-center'>
+            <li className='text-ut-burntorange w-100% flex cursor-pointer items-center self-stretch justify-left'>
+                <div className='group flex justify-center'>
+                    <div 
+                        className='flex cursor-move items-center self-stretch rounded rounded-r-0'
+                        {...dragHandleProps}  
+                    >
+                        <DragIndicatorIcon className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
+                    </div>
+                    <div className='inline-flex items-center justify-center gap-1.5'>
+                        <div className='h-5.5 w-5.5 flex items-center justify-center border-2px border-current rounded-full btn-transition group-active:scale-95'>
+                            <div
+                                className={clsx(
+                                    'bg-current h-3 w-3 rounded-full transition tansform scale-100 ease-out-expo duration-250',
+                                    {
+                                        'scale-0! opacity-0 ease-in-out! duration-200!': !props.active,
+                                    }
+                                )}
+                            />
+                        </div>
+                        <Text variant='p'>{props.name}</Text>
+                    </div>
+                </div>
+            </li>
+        </div>
+    );
+}

src/views/components/common/ScheduleTotalHoursAndCourses/ScheduleTotalHoursAndCourses.tsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import Text from '../Text/Text';
+
+/**
+ * Props for ScheduleTotalHoursAndCourses
+ */
+export interface ScheduleTotalHoursAndCoursesProps {
+    scheduleName: string;
+    totalHours: number;
+    totalCourses: number;
+}
+
+/**
+ * The ScheduleTotalHoursAndCourses as per the Labels and Details Figma section
+ *
+ * @param props ScheduleTotalHoursAndCoursesProps
+ */
+export default function ScheduleTotalHoursAndCourses({
+    scheduleName,
+    totalHours,
+    totalCourses,
+}: ScheduleTotalHoursAndCoursesProps): JSX.Element {
+    return (
+        <div className='min-w-64 flex whitespace-nowrap	content-center items-baseline gap-2 uppercase'>
+            <Text className='text-[#BF5700]' variant='h1' as='span'>
+                {`${scheduleName}: `}
+            </Text>
+            <Text variant='h3' as='div' className='flex flex-row items-center gap-2 text-[#1A2024]'>
+                {`${totalHours} HOURS`}
+                <Text variant='h4' as='span' className='text-[#333F48]'>
+                    {`${totalCourses} courses`}
+                </Text>
+            </Text>
+        </div>
+    );
+}

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

@@ -39,7 +39,7 @@ export default function CourseDescription({ course }: Props) {
     return (
         <Card className={styles.container}>
             {status === LoadStatus.ERROR && (
-                <Text color='speedway_brick' size='medium' weight='bold' align='center'>
+                <Text color='speedway_brick' /* size='medium' weight='bold' align='center'  */>
                     Please refresh the page and log back in using your UT EID and password
                 </Text>
             )}
@@ -72,7 +72,7 @@ function DescriptionLine({ line }: LineProps) {
     });
 
     return (
-        <Text className={className} size='medium'>
+        <Text className={className} /*  size='medium'   */>
             {line}
         </Text>
     );

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

@@ -1,11 +1,11 @@
 import { background } from '@shared/messages';
 import { Course } from '@shared/types/Course';
 import { UserSchedule } from '@shared/types/UserSchedule';
-import React from 'react';
 import { Button } from '@views/components/common/Button/Button';
 import Card from '@views/components/common/Card/Card';
 import Icon from '@views/components/common/Icon/Icon';
 import Text from '@views/components/common/Text/Text';
+import React from 'react';
 import styles from './CourseButtons.module.scss';
 
 type Props = {
@@ -83,47 +83,43 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
             <Button
                 onClick={openRateMyProfessorURL}
                 disabled={!course.instructors.length}
-                type='primary'
+                variant='filled'
                 className={styles.button}
+                color='ut-black'
                 title='Search for this professor on RateMyProfessor'
             >
-                <Text size='medium' weight='regular' color='white'>
-                    RateMyProf
-                </Text>
+                <Text /*    size='medium' weight='regular' */ color='white'>RateMyProf</Text>
                 <Icon className={styles.icon} color='white' name='school' size='medium' />
             </Button>
             <Button
                 onClick={openSyllabiURL}
-                type='secondary'
+                variant='filled'
                 className={styles.button}
+                color='ut-black'
                 title='Search for syllabi for this course'
             >
-                <Text size='medium' weight='regular' color='white'>
-                    Syllabi
-                </Text>
+                <Text /*    size='medium' weight='regular'  */ color='white'>Syllabi</Text>
                 <Icon className={styles.icon} color='white' name='grading' size='medium' />
             </Button>
             <Button
                 onClick={openTextbookURL}
-                type='tertiary'
+                variant='filled'
                 className={styles.button}
+                color='ut-black'
                 title='Search for textbooks for this course'
             >
-                <Text size='medium' weight='regular' color='white'>
-                    Textbook
-                </Text>
+                <Text /*   size='medium' weight='regular' color='white'    */>Textbook</Text>
                 <Icon className={styles.icon} color='white' name='collections_bookmark' size='medium' />
             </Button>
             <Button
                 disabled={!activeSchedule}
                 onClick={isCourseSaved ? handleRemoveCourse : handleSaveCourse}
                 title={isCourseSaved ? 'Remove this course from your schedule' : 'Add this course to your schedule'}
-                type={isCourseSaved ? 'danger' : 'success'}
+                variant='filled'
                 className={styles.button}
+                color='ut-black'
             >
-                <Text size='medium' weight='regular' color='white'>
-                    {isCourseSaved ? 'Remove' : 'Add'}
-                </Text>
+                <Text /*   size='medium' weight='regular' color='white'    */>{isCourseSaved ? 'Remove' : 'Add'}</Text>
                 <Icon className={styles.icon} color='white' name={isCourseSaved ? 'remove' : 'add'} size='medium' />
             </Button>
         </Card>

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

@@ -5,8 +5,11 @@ import Card from '@views/components/common/Card/Card';
 import Icon from '@views/components/common/Icon/Icon';
 import Link from '@views/components/common/Link/Link';
 import Text from '@views/components/common/Text/Text';
+import { Button } from 'src/views/components/common/Button/Button';
 import CourseButtons from './CourseButtons/CourseButtons';
 import styles from './CourseHeader.module.scss';
+import CopyIcon from '~icons/material-symbols/content-copy';
+import CloseIcon from '~icons/material-symbols/close';
 
 type Props = {
     course: Course;
@@ -19,86 +22,112 @@ type Props = {
  * It displays the course name, unique id, instructors, and schedule, all formatted nicely.
  */
 export default function CourseHeader({ course, activeSchedule, onClose }: Props) {
-    const getBuildingUrl = (building?: string): string | undefined => {
-        if (!building) return undefined;
-        return `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}/`;
-    };
+    // const getBuildingUrl = (building?: string): string | undefined => {
+    //     if (!building) return undefined;
+    //     return `https://utdirect.utexas.edu/apps/campus/buildings/nlogon/maps/UTM/${building}/`;
+    // };
 
     return (
-        <Card className={styles.header}>
-            <Icon className={styles.close} size='large' name='close' onClick={onClose} />
-            <div className={styles.title}>
-                <Text className={styles.courseName} size='large' weight='bold' color='black'>
-                    {course.courseName} ({course.department} {course.number})
+        <div className='mx-6 my-5'>
+            <div className='flex items-center justify-start'>
+                <Text variant='h1' className='shrink truncate'>
+                    {course.courseName}
                 </Text>
-                <Link
-                    url={course.url}
-                    className={styles.uniqueId}
-                    size='medium'
-                    weight='semi_bold'
-                    color='burnt_orange'
-                    title='View course details on UT Course Schedule'
-                >
-                    #{course.uniqueId}
-                </Link>
+                <Text variant='h1' className='ml-1 shrink-0'>
+                    {`(${course.department} ${course.number})`}
+                </Text>
+                <div className='ml-auto min-w-fit flex shrink-0 gap-0'>
+                    <Button icon={CopyIcon} variant='single' className='mr-1 px-2' color='ut-burntorange'>
+                        {course.uniqueId}
+                    </Button>
+                    <button className='btn bg-transparent p-0'>
+                        <CloseIcon className='h-7 w-7' />
+                    </button>
+                </div>
             </div>
-            <Text size='medium' className={styles.instructors}>
-                {`with ${!course.instructors.length ? 'TBA' : ''}`}
-                {course.instructors.map((instructor, index) => {
-                    const name = instructor.toString({
-                        format: 'first_last',
-                        case: 'capitalize',
-                    });
-
-                    const url = instructor.getDirectoryUrl();
-                    const numInstructors = course.instructors.length;
-                    const isLast = course.instructors.length > 1 && index === course.instructors.length - 1;
-                    return (
-                        <span key={name}>
-                            {numInstructors > 1 && index === course.instructors.length - 1 ? '& ' : ''}
-                            <Link
-                                key={name}
-                                size='medium'
-                                weight='normal'
-                                url={url}
-                                title="View instructor's directory page"
-                            >
-                                {name}
-                            </Link>
-                            {numInstructors > 2 && !isLast ? ', ' : ''}
-                        </span>
-                    );
-                })}
-            </Text>
-            {course.schedule.meetings.map(meeting => (
-                <Text size='medium' className={styles.meeting} key={meeting.startTime}>
-                    <Text span size='medium' weight='bold' color='black'>
-                        {meeting.getDaysString({
-                            format: 'long',
-                            separator: 'short',
-                        })}
-                    </Text>
-                    {' at '}
-                    <Text span size='medium'>
-                        {meeting.getTimeString({
-                            separator: 'to',
-                            capitalize: true,
-                        })}
-                    </Text>
-                    {' in '}
-                    <Link
-                        size='medium'
-                        weight='normal'
-                        title='View building on UT Map'
-                        url={getBuildingUrl(meeting.location?.building)}
-                        disabled={!meeting.location?.building}
-                    >
-                        {meeting.location?.building ?? 'TBA'}
-                    </Link>
+            <div>
+                <Text variant='p'>
+                    with{' '}
+                    {course.instructors.map(instructor => (
+                        <span className=''>{instructor.lastName}</span>
+                    ))}
                 </Text>
-            ))}
+            </div>
+        </div>
+        // <Card className={styles.header}>
+        //     <Icon className={styles.close} /*  size='large'    */ name='close' onClick={onClose} />
+        //     <div className={styles.title}>
+        //         <Text className={styles.courseName} /* size='large' weight='bold' color='black' */>
+        //             {course.courseName} ({course.department} {course.number}) blahhhhh
+        //         </Text>
+        //         <Link
+        //             url={course.url}
+        //             className={styles.uniqueId}
+        //             /* size='medium'
+        //             weight='semi_bold' */
+        //             color='burnt_orange'
+        //             title='View course details on UT Course Schedule'
+        //         >
+        //             #{course.uniqueId}
+        //         </Link>
+        //     </div>
+        //     <Text /*    size='medium' className={styles.instructors}    */>
+        //         {`with ${!course.instructors.length ? 'TBA' : ''}`}
+        //         {course.instructors.map((instructor, index) => {
+        //             const name = instructor.toString({
+        //                 format: 'first_last',
+        //                 case: 'capitalize',
+        //             });
 
-            <CourseButtons course={course} activeSchedule={activeSchedule} />
-        </Card>
+        //             const url = instructor.getDirectoryUrl();
+        //             const numInstructors = course.instructors.length;
+        //             const isLast = course.instructors.length > 1 && index === course.instructors.length - 1;
+        //             return (
+        //                 <span key={name}>
+        //                     {numInstructors > 1 && index === course.instructors.length - 1 ? '& ' : ''}
+        //                     <Link
+        //                         key={name}
+        //                         /*  size='medium'
+        //                         weight='normal' */
+        //                         url={url}
+        //                         title="View instructor's directory page"
+        //                     >
+        //                         {name}
+        //                     </Link>
+        //                     {numInstructors > 2 && !isLast ? ', ' : ''}
+        //                 </span>
+        //             );
+        //         })}
+        //     </Text>
+        //     {course.schedule.meetings.map(meeting => (
+        //         <Text /*    size='medium'   */ className={styles.meeting} key={meeting.startTime}>
+        //             <Text as='span' /*  size='medium'    weight='bold'  */ color='black'>
+        //                 {meeting.getDaysString({
+        //                     format: 'long',
+        //                     separator: 'short',
+        //                 })}
+        //             </Text>
+        //             {' at '}
+        //             <Text as='span' /*  size='medium'  */>
+        //                 {meeting.getTimeString({
+        //                     separator: 'to',
+        //                     capitalize: true,
+        //                 })}
+        //             </Text>
+        //             {' in '}
+        //             <Link
+        //                 /*  size='medium'
+        //                 weight='normal' */
+        //                 title='View building on UT Map'
+        //                 url={getBuildingUrl(meeting.location?.building)}
+        //                 disabled={!meeting.location?.building}
+        //             >
+        //                 {meeting.location?.building ?? 'TBA'}
+        //             </Link>
+        //         </Text>
+        //     ))}
+
+        //     <CourseButtons course={course} activeSchedule={activeSchedule} />
+        // </Card>
     );
 }

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

@@ -203,18 +203,18 @@ export default function GradeDistribution({ course }: Props) {
             {status === DataStatus.LOADING && <Spinner />}
             {status === DataStatus.ERROR && (
                 <Card className={styles.text}>
-                    <Text color='speedway_brick' size='medium' weight='semi_bold'>
+                    <Text color='speedway_brick' /* size='medium' weight='semi_bold'    */>
                         There was an error fetching the grade distribution data
                     </Text>
-                    <Icon color='speedway_brick' size='large' name='sentiment_dissatisfied' />
+                    <Icon color='speedway_brick' /* size='large'  */ name='sentiment_dissatisfied'    />
                 </Card>
             )}
             {status === DataStatus.NOT_FOUND && (
                 <Card className={styles.text}>
-                    <Text color='charcoal' size='medium' weight='semi_bold'>
+                    <Text color='charcoal' /*   size='medium' weight='semi_bold'    */>
                         No grade distribution data was found for this course
                     </Text>
-                    <Icon color='charcoal' size='x_large' name='search_off' />
+                    <Icon color='charcoal' /* size='x_large' */ name='search_off' />
                 </Card>
             )}
         </Card>

src/views/components/injected/TableRow/TableRow.tsx

@@ -76,7 +76,7 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
             element.classList.remove(styles.isConflict);
             setConflicts([]);
         };
-    }, [activeSchedule, course]);
+    }, [activeSchedule, course, element.classList]);
 
     if (!container) {
         return null;
@@ -84,14 +84,14 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
 
     return ReactDOM.createPortal(
         <>
-            <Button className={styles.rowButton} onClick={onClick} type='secondary'>
+            <Button className={styles.rowButton} onClick={onClick} variant='filled' color='ut-black'>
                 <Icon name='bar_chart' color='white' size='medium' />
             </Button>
             {conflicts.length > 0 && (
                 <div className={styles.conflictTooltip}>
                     <div className={styles.body}>
                         {conflicts.map(c => (
-                            <Text size='small' key={c.uniqueId}>
+                            <Text /*    size='small'    */ key={c.uniqueId}>
                                 {c.department} {c.number} ({c.uniqueId})
                             </Text>
                         ))}

src/views/hooks/useFlattenedCourseSchedule.ts

@@ -0,0 +1,102 @@
+import { CalendarCourseCellProps } from 'src/views/components/common/CalendarCourseCell/CalendarCourseCell';
+import useSchedules from './useSchedules';
+
+const dayToNumber: { [day: string]: number } = {
+    Monday: 0,
+    Tuesday: 1,
+    Wednesday: 2,
+    Thursday: 3,
+    Friday: 4,
+};
+
+interface CalendarGridPoint {
+    dayIndex: number;
+    startIndex: number;
+    endIndex: number;
+}
+
+/**
+ * Return type of useFlattenedCourseSchedule
+ */
+export interface CalendarGridCourse {
+    calendarGridPoint: CalendarGridPoint;
+    componentProps: CalendarCourseCellProps;
+}
+
+const convertMinutesToIndex = (minutes: number): number => Math.floor(minutes - 420 / 30);
+
+/**
+ * Get the active schedule, and convert it to be render-able into a calendar.
+ * @returns CalendarGridCourse
+ */
+export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
+    const [activeSchedule] = useSchedules();
+    const { courses } = activeSchedule;
+
+    return courses
+        .flatMap(course => {
+            const {
+                status,
+                department,
+                instructors,
+                schedule: { meetings },
+            } = course;
+            const courseDeptAndInstr = `${department} ${instructors[0].lastName}`;
+
+            if (meetings.length === 0) {
+                // asynch, online course
+                return [
+                    {
+                        calendarGridPoint: {
+                            dayIndex: 0,
+                            startIndex: 0,
+                            endIndex: 0,
+                        },
+                        componentProps: {
+                            courseDeptAndInstr,
+                            status,
+                            colors: {
+                                // TODO: figure out colors - these are defaults
+                                primaryColor: 'ut-gray',
+                                secondaryColor: 'ut-gray',
+                            },
+                        },
+                    },
+                ];
+            }
+
+            // in-person
+            return meetings.flatMap(meeting => {
+                const { days, startTime, endTime, location } = meeting;
+                const time = meeting.getTimeString({ separator: '-', capitalize: true });
+                const timeAndLocation = `${time} - ${location ? location.building : 'WB'}`;
+
+                return days.map(d => ({
+                    calendarGridPoint: {
+                        dayIndex: dayToNumber[d],
+                        startIndex: convertMinutesToIndex(startTime),
+                        endIndex: convertMinutesToIndex(endTime),
+                    },
+                    componentProps: {
+                        courseDeptAndInstr,
+                        timeAndLocation,
+                        status,
+                        colors: {
+                            // TODO: figure out colors - these are defaults
+                            primaryColor: 'ut-orange',
+                            secondaryColor: 'ut-orange',
+                        },
+                    },
+                }));
+            });
+        })
+        .sort((a: CalendarGridCourse, b: CalendarGridCourse) => {
+            if (a.calendarGridPoint.dayIndex !== b.calendarGridPoint.dayIndex) {
+                return a.calendarGridPoint.dayIndex - b.calendarGridPoint.dayIndex;
+            }
+            if (a.calendarGridPoint.startIndex !== b.calendarGridPoint.startIndex) {
+                return a.calendarGridPoint.startIndex - b.calendarGridPoint.startIndex;
+            }
+            return a.calendarGridPoint.endIndex - b.calendarGridPoint.endIndex;
+        });
+}

unocss.config.ts

@@ -3,10 +3,14 @@ import presetWebFonts from '@unocss/preset-web-fonts';
 import transformerDirectives from '@unocss/transformer-directives';
 import transformerVariantGroup from '@unocss/transformer-variant-group';
 import { defineConfig } from 'unocss';
+import { colors } from './src/shared/util/themeColors';
 
 export default defineConfig({
     rules: [
-        ['btn-transition', { transition: 'color 180ms, border-color 150ms, background-color 150ms, transform 50ms' }],
+        [
+            'btn-transition',
+            { transition: 'color 180ms, border-color 150ms, background-color 150ms, box-shadow 100ms, transform 50ms' },
+        ],
         [
             'ring-offset-0',
             {
@@ -16,31 +20,14 @@ export default defineConfig({
     ],
     shortcuts: {
         focusable: 'outline-none ring-blue-500/50 dark:ring-blue-400/60 ring-0 focus-visible:ring-4',
+        btn: 'h-10 w-auto flex cursor-pointer justify-center items-center gap-2 rounded-1 px-4 py-0 text-4.5 btn-transition btn-transition disabled:(cursor-not-allowed opacity-50) active:enabled:scale-96 focusable',
     },
     theme: {
         easing: {
             'in-out-expo': 'cubic-bezier(.46, 0, .21, 1)',
             'out-expo': 'cubic-bezier(0.19, 1, 0.22, 1)',
         },
-        colors: {
-            ut: {
-                'burnt-orange': '#BF5700',
-                black: '#333F48',
-                orange: '#f8971f',
-                yellow: '#ffd600',
-                'light-green': '#a6cd57',
-                green: '#579d42',
-                teal: '#00a9b7',
-                blue: '#005f86',
-                gray: '#9cadb7',
-                'off-white': '#d6d2c4',
-                concrete: '#95a5a6',
-            },
-            theme: {
-                red: '#af2e2d',
-                black: '#1a2024',
-            },
-        },
+        colors,
     },
 
     presets: [