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>

README.md

@@ -14,5 +14,17 @@
 
 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-lock.json

@@ -19,6 +19,7 @@
                 "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",
@@ -20112,6 +20113,14 @@
             "integrity": "sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==",
             "dev": true
         },
+        "node_modules/react-icons": {
+            "version": "5.0.1",
+            "resolved": "https://registry.npmjs.org/react-icons/-/react-icons-5.0.1.tgz",
+            "integrity": "sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==",
+            "peerDependencies": {
+                "react": "*"
+            }
+        },
         "node_modules/react-is": {
             "version": "16.13.1",
             "resolved": "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz",

package.json

@@ -17,6 +17,8 @@
         "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",
@@ -28,6 +30,7 @@
         "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",

pnpm-lock.yaml

@@ -13,6 +13,12 @@ patchedDependencies:
     path: patches/@crxjs__vite-plugin@2.0.0-beta.21.patch
 
 dependencies:
+  '@headlessui/react':
+    specifier: ^1.7.18
+    version: 1.7.18(react-dom@18.2.0)(react@18.2.0)
+  '@headlessui/tailwindcss':
+    specifier: ^0.2.0
+    version: 0.2.0(tailwindcss@3.4.1)
   '@hello-pangea/dnd':
     specifier: ^16.5.0
     version: 16.5.0(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0)
@@ -46,6 +52,9 @@ dependencies:
   react-dom:
     specifier: ^18.2.0
     version: 18.2.0(react@18.2.0)
+  react-icons:
+    specifier: ^5.0.1
+    version: 5.0.1(react@18.2.0)
   react-window:
     specifier: ^1.8.10
     version: 1.8.10(react-dom@18.2.0)(react@18.2.0)
@@ -249,6 +258,11 @@ packages:
     resolution: {integrity: sha512-rE0Pygv0sEZ4vBWHlAgJLGDU7Pm8xoO6p3wsEceb7GYAjScrOHpEo8KK/eVkAcnSM+slAEtXjA2JpdjLp4fJQQ==}
     dev: true
 
+  /@alloc/quick-lru@5.2.0:
+    resolution: {integrity: sha512-UrcABB+4bUrFABwbluTIBErXwvbsU/V7TZWfmbgJfbkwiBuziS9gxdODUyuiecfdGQ85jglMW6juS3+z5TsKLw==}
+    engines: {node: '>=10'}
+    dev: false
+
   /@ampproject/remapping@2.2.1:
     resolution: {integrity: sha512-lFMjJTrFL3j7L9yBxwYfCq2k6qqwHyzuUl/XBnif78PWTJYyL/dfowQHWE3sp6U6ZzqWiiIZnpTMO96zhkjwtg==}
     engines: {node: '>=6.0.0'}
@@ -2228,6 +2242,28 @@ packages:
     resolution: {integrity: sha512-9TANp6GPoMtYzQdt54kfAyMmz1+osLlXdg2ENroU7zzrtflTLrrC/lgrIfaSe+Wu0b89GKccT7vxXA0MoAIO+Q==}
     dev: true
 
+  /@headlessui/react@1.7.18(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-4i5DOrzwN4qSgNsL4Si61VMkUcWbcSKueUV7sFhpHzQcSShdlHENE5+QBntMSRvHt8NyoFO2AGG8si9lq+w4zQ==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      react: ^16 || ^17 || ^18
+      react-dom: ^16 || ^17 || ^18
+    dependencies:
+      '@tanstack/react-virtual': 3.0.4(react-dom@18.2.0)(react@18.2.0)
+      client-only: 0.0.1
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@headlessui/tailwindcss@0.2.0(tailwindcss@3.4.1):
+    resolution: {integrity: sha512-fpL830Fln1SykOCboExsWr3JIVeQKieLJ3XytLe/tt1A0XzqUthOftDmjcCYLW62w7mQI7wXcoPXr3tZ9QfGxw==}
+    engines: {node: '>=10'}
+    peerDependencies:
+      tailwindcss: ^3.0
+    dependencies:
+      tailwindcss: 3.4.1
+    dev: false
+
   /@hello-pangea/dnd@16.5.0(@types/react-dom@18.2.19)(@types/react@18.2.55)(react-dom@18.2.0)(react@18.2.0):
     resolution: {integrity: sha512-n+am6O32jo/CFXciCysz83lPM3I3F58FJw4uS44TceieymcyxQSfzK5OhzPAKrVBZktmuOI6Zim9WABTMtXv4A==}
     peerDependencies:
@@ -2303,7 +2339,6 @@ packages:
       strip-ansi-cjs: /strip-ansi@6.0.1
       wrap-ansi: 8.1.0
       wrap-ansi-cjs: /wrap-ansi@7.0.0
-    dev: true
 
   /@istanbuljs/load-nyc-config@1.1.0:
     resolution: {integrity: sha512-VjeHSlIzpv/NyD3N0YuHfXOPDIixcA1q2ZV98wsMqcYlPmv2n3Yb2lYP9XMElnaFVXg5A7YLTeLu6V84uQDjmQ==}
@@ -2463,12 +2498,10 @@ packages:
     dependencies:
       '@nodelib/fs.stat': 2.0.5
       run-parallel: 1.2.0
-    dev: true
 
   /@nodelib/fs.stat@2.0.5:
     resolution: {integrity: sha512-RkhPPp2zrqDAQA/2jNhnztcPAlv64XdhIp7a7454A5ovI7Bukxgt7MX7udwAu3zg1DcpPU0rz3VV1SeaqvY4+A==}
     engines: {node: '>= 8'}
-    dev: true
 
   /@nodelib/fs.walk@1.2.8:
     resolution: {integrity: sha512-oGB+UxlgWcgQkgwo8GcEGwemoTFt3FIO9ababBmaGwXIoBKZ+GTy0pP185beGg7Llih/NSHSV2XAs1lnznocSg==}
@@ -2476,13 +2509,11 @@ packages:
     dependencies:
       '@nodelib/fs.scandir': 2.1.5
       fastq: 1.15.0
-    dev: true
 
   /@pkgjs/parseargs@0.11.0:
     resolution: {integrity: sha512-+1VkjdD0QBLPodGrJUeqarH8VAIvQODIbwh9XpP5Syisf7YoQgsJKPNFoqqLQlu+VQ/tVSshMR6loPMn8U+dPg==}
     engines: {node: '>=14'}
     requiresBuild: true
-    dev: true
     optional: true
 
   /@pkgr/core@0.1.1:
@@ -4306,6 +4337,21 @@ packages:
       defer-to-connect: 2.0.1
     dev: true
 
+  /@tanstack/react-virtual@3.0.4(react-dom@18.2.0)(react@18.2.0):
+    resolution: {integrity: sha512-tiqKW/e2MJVCr7/pRUXulpkyxllaOclkHNfhKTo4pmHjJIqnhMfwIjc1Q1R0Un3PI3kQywywu/791c8z9u0qeA==}
+    peerDependencies:
+      react: ^16.8.0 || ^17.0.0 || ^18.0.0
+      react-dom: ^16.8.0 || ^17.0.0 || ^18.0.0
+    dependencies:
+      '@tanstack/virtual-core': 3.0.0
+      react: 18.2.0
+      react-dom: 18.2.0(react@18.2.0)
+    dev: false
+
+  /@tanstack/virtual-core@3.0.0:
+    resolution: {integrity: sha512-SYXOBTjJb05rXa2vl55TTwO40A6wKu0R5i1qQwhJYNDIqaIGF7D0HsLw+pJAyi2OvntlEIVusx3xtbbgSUi6zg==}
+    dev: false
+
   /@testing-library/dom@9.3.4:
     resolution: {integrity: sha512-FlS4ZWlp97iiNWig0Muq8p+3rVDjRiYE+YKGbAqXOu9nwJFFOdL00kFpz42M+4huzYi86vAK1sOOfyOG45muIQ==}
     engines: {node: '>=14'}
@@ -5559,12 +5605,10 @@ packages:
   /ansi-regex@5.0.1:
     resolution: {integrity: sha512-quJQXlTSUGL2LH9SUXo8VwsY4soanhgo6LNSm84E1LBcE8s3O0wpdiRzyR9z/ZZJMlMWv37qOOb9pdJlMUEKFQ==}
     engines: {node: '>=8'}
-    dev: true
 
   /ansi-regex@6.0.1:
     resolution: {integrity: sha512-n5M855fKb2SsfMIiFFoVrABHJC8QtHwVx+mHWP3QcEqBHYienj5dHSgjbxtC0WEZXYt4wcD6zrQElDPhFuZgfA==}
     engines: {node: '>=12'}
-    dev: true
 
   /ansi-styles@3.2.1:
     resolution: {integrity: sha512-VT0ZI6kZRdTh8YyJw3SMbYm/u+NqfsAxEpWO0Pf9sq8/e94WxxOpPKx9FR1FlyCtOVDNOQ+8ntlqFxiRc+r5qA==}
@@ -5577,7 +5621,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       color-convert: 2.0.1
-    dev: true
 
   /ansi-styles@5.2.0:
     resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
@@ -5587,7 +5630,10 @@ packages:
   /ansi-styles@6.2.1:
     resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
     engines: {node: '>=12'}
-    dev: true
+
+  /any-promise@1.3.0:
+    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
+    dev: false
 
   /anymatch@3.1.3:
     resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -5605,6 +5651,10 @@ packages:
     engines: {node: '>=14'}
     dev: true
 
+  /arg@5.0.2:
+    resolution: {integrity: sha512-PYjyFOLKQ9y57JvQ6QLo8dAgNqswh8M1RMJYdQduT6xbWSgK36P/Z/v+p888pM69jMMfS8Xd8F6I1kQ/I9HUGg==}
+    dev: false
+
   /argparse@1.0.10:
     resolution: {integrity: sha512-o5Roy6tNG4SL/FOkCAN6RzjiakZS25RLYFrcMttJqbdd8BWrnA+fGz57iN5Pb06pvBGvl5gQ0B48dJlslXvoTg==}
     dependencies:
@@ -5854,7 +5904,6 @@ packages:
 
   /balanced-match@1.0.2:
     resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-    dev: true
 
   /base64-arraybuffer@1.0.2:
     resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
@@ -5950,7 +5999,6 @@ packages:
     resolution: {integrity: sha512-XnAIvQ8eM+kC6aULx6wuQiwVsnzsi9d3WxzV3FpWTGA19F621kwdbsAcFKXgKUHZWsy+mY6iL1sHTxWEFCytDA==}
     dependencies:
       balanced-match: 1.0.2
-    dev: true
 
   /braces@3.0.2:
     resolution: {integrity: sha512-b8um+L1RzM3WDSzvhm6gIz1yfTbBt6YTlcEKAvsmqCZZFw46z626lVj9j1yEPW33H5H+lBQpZMP1k8l+78Ha0A==}
@@ -6082,6 +6130,11 @@ packages:
     engines: {node: '>=6'}
     dev: true
 
+  /camelcase-css@2.0.1:
+    resolution: {integrity: sha512-QOSvevhslijgYwRx6Rv7zKdMF8lbRmx+uQGx2+vDc+KI/eBnsy9kit5aj23AgGu3pa4t9AgwbnXWqS+iOY+2aA==}
+    engines: {node: '>= 6'}
+    dev: false
+
   /camelcase@4.1.0:
     resolution: {integrity: sha512-FxAv7HpHrXbh3aPo4o2qxHay2lkLY3x5Mw3KeE4KQE8ysVfziWeRZDwcjauvwBSGEC/nXUPzZy8zeh4HokqOnw==}
     engines: {node: '>=4'}
@@ -6283,6 +6336,10 @@ packages:
       '@colors/colors': 1.5.0
     dev: true
 
+  /client-only@0.0.1:
+    resolution: {integrity: sha512-IV3Ou0jSMzZrd3pZ48nLkT9DA7Ag1pnPzaiQhpW7c3RbcqqzvzzVu+L8gfqMp/8IM2MQtSiqaCxrrcfu8I8rMA==}
+    dev: false
+
   /clone-deep@4.0.1:
     resolution: {integrity: sha512-neHB9xuzh/wk0dIHweyAXv2aPGZIVk3pLMe+/RNzINf17fe0OG96QroktYAUm7SM1PBnzTabaLboqqxDyMU+SQ==}
     engines: {node: '>=6'}
@@ -6318,14 +6375,12 @@ packages:
     engines: {node: '>=7.0.0'}
     dependencies:
       color-name: 1.1.4
-    dev: true
 
   /color-name@1.1.3:
     resolution: {integrity: sha512-72fSenhMw2HZMTVHeCA9KCmpEIbzWiQsjN+BHcBbS9vr1mtt+vJjPdksIBNUmKAW8TFUDPJK5SUU3QhE9NEXDw==}
 
   /color-name@1.1.4:
     resolution: {integrity: sha512-dOy+3AuW3a2wNbZHIuMZpTcgjGuLU/uBL/ubcZF9OXbDo8ff4O8yVp5Bf0efS8uEoYo5q4Fx7dY9OgQGXgAsQA==}
-    dev: true
 
   /colord@2.9.3:
     resolution: {integrity: sha512-jeC1axXpnb0/2nn/Y1LPuLdgXBLH7aDcHu4KEKfqw3CUhX7ZpfBSlPKyqXE6btIgEzfWtrX3/tyBCaCvXvMkOw==}
@@ -6346,6 +6401,11 @@ packages:
     resolution: {integrity: sha512-GpVkmM8vF2vQUkj2LvZmD35JxeJOLCwJ9cUkugyk2nuhbv3+mJvpLYYt+0+USMxE+oj+ey/lJEnhZw75x/OMcQ==}
     dev: true
 
+  /commander@4.1.1:
+    resolution: {integrity: sha512-NOKm8xhkzAjzFx8B2v5OAHT+u5pRQc2UCa2Vq9jYL/31o2wi9mxBA7LIFs3sV5VSC49z6pEhfbMULvShKj26WA==}
+    engines: {node: '>= 6'}
+    dev: false
+
   /commander@6.2.1:
     resolution: {integrity: sha512-U7VdrJFnJgo4xjrHpTzu0yrHPGImdsmD95ZlgYSEajAn2JKzDhDTPG9kBTefmObL2w/ngeZnilk+OV9CG3d7UA==}
     engines: {node: '>= 6'}
@@ -6521,7 +6581,6 @@ packages:
       path-key: 3.1.1
       shebang-command: 2.0.0
       which: 2.0.2
-    dev: true
 
   /crypto-random-string@1.0.0:
     resolution: {integrity: sha512-GsVpkFPlycH7/fRR7Dhcmnoii54gV1nz7y4CWyeFS14N+JVBBhY+r8amRHE4BwSYal7BPTDp8isvAlCxyFt3Hg==}
@@ -6606,7 +6665,6 @@ packages:
     resolution: {integrity: sha512-/Tb/JcjK111nNScGob5MNtsntNM1aCNUDipB/TkwZFhyDrrE47SOx/18wF2bbjgc3ZzCSKW1T5nt5EbFoAz/Vg==}
     engines: {node: '>=4'}
     hasBin: true
-    dev: true
 
   /cssnano-preset-advanced@6.0.3(postcss@8.4.35):
     resolution: {integrity: sha512-+DIOR5FFId+nb6/JcBkAMiXYDadEx2waDmSDhAA3rL1Q1N1AaZP0N25jiZnqLp3MdWnRg9t9CNaDs/OdB/lpPg==}
@@ -6947,6 +7005,10 @@ packages:
       - supports-color
     dev: true
 
+  /didyoumean@1.2.2:
+    resolution: {integrity: sha512-gxtyfqMg7GKyhQmb056K7M3xszy/myH8w+B4RT+QXBQsvAOdc3XymqDDPHx1BgPgsdAA5SIifona89YtRATDzw==}
+    dev: false
+
   /diff-sequences@29.6.3:
     resolution: {integrity: sha512-EjePK1srD3P08o2j4f0ExnylqRs5B9tJjcp9t1krH2qRi8CCdsYfwe9JgSLurFBWwq4uOlipzfk5fHNvwFKr8Q==}
     engines: {node: ^14.15.0 || ^16.10.0 || >=18.0.0}
@@ -6959,6 +7021,10 @@ packages:
       path-type: 4.0.0
     dev: true
 
+  /dlv@1.1.3:
+    resolution: {integrity: sha512-+HlytyjlPKnIG8XuRG8WvmBP8xs8P71y+SKKS6ZXWoEgLuePxtDoUEiH7WkdePWrQ5JBpE6aoVqfZfJUQkjXwA==}
+    dev: false
+
   /doctrine@2.1.0:
     resolution: {integrity: sha512-35mSku4ZXK0vfCuHEDAwt55dg2jNajHZ1odvF+8SSr82EsZY4QmXfuWso8oEd8zRhVObSN18aM0CjSdoBX7zIw==}
     engines: {node: '>=0.10.0'}
@@ -7051,7 +7117,6 @@ packages:
 
   /eastasianwidth@0.2.0:
     resolution: {integrity: sha512-I88TYZWc9XiYHRQ4/3c5rjjfgkjhLyW2luGIheGERbNQ6OY7yTybanSpDXZa8y7VUP9YmDcYa+eyq4ca7iLqWA==}
-    dev: true
 
   /ee-first@1.1.1:
     resolution: {integrity: sha512-WMwm9LhRUo+WUaRN+vRuETqG89IgZphVSNkdFgeb6sS/E4OrDIN7t48CAewSHXc6C8lefD8KKfr5vY61brQlow==}
@@ -7087,11 +7152,9 @@ packages:
 
   /emoji-regex@8.0.0:
     resolution: {integrity: sha512-MSjYzcWNOA0ewAHpz0MxpYFvwg6yjy1NG3xteoqz644VCo/RPgnr1/GGt+ic3iJTzQ8Eu3TdM14SawnVUmGE6A==}
-    dev: true
 
   /emoji-regex@9.2.2:
     resolution: {integrity: sha512-L18DaJsXSUk2+42pv8mLs5jJT2hqFkFE4j21wOmgbUqsZ2hL72NsUU785g9RXgo3s0ZNgVl42TiHp3ZtOv/Vyg==}
-    dev: true
 
   /encodeurl@1.0.2:
     resolution: {integrity: sha512-TPJXq8JqFaVYm2CWmPvnP2Iyo4ZSM7/QKcSmuMLDObfpH5fi7RUGmd/rTDf+rut/saiDiQEeVTNgAmJEdAOx0w==}
@@ -7969,7 +8032,6 @@ packages:
       glob-parent: 5.1.2
       merge2: 1.4.1
       micromatch: 4.0.5
-    dev: true
 
   /fast-json-stable-stringify@2.1.0:
     resolution: {integrity: sha512-lhd/wF+Lk98HZoTCtlVraHtfh5XYijIjalXck7saUtuanSDyLMxnHhSXEDJqHxD7msR8D0uCmqlkwjCV8xvwHw==}
@@ -7983,7 +8045,6 @@ packages:
     resolution: {integrity: sha512-wBrocU2LCXXa+lWBt8RoIRD89Fi8OdABODa/kEnyeyjS5aZO5/GNvI5sEINADqP/h8M29UHTHUb53sUu5Ihqdw==}
     dependencies:
       reusify: 1.0.4
-    dev: true
 
   /fb-watchman@2.0.2:
     resolution: {integrity: sha512-p5161BqbuCaSnB8jIbzQHOlpgsPmK5rJVDfDKO91Axs5NC1uu3HRQm6wt9cd9/+GtQQIO53JdGXXoyDpTAsgYA==}
@@ -8118,7 +8179,6 @@ packages:
     dependencies:
       cross-spawn: 7.0.3
       signal-exit: 4.1.0
-    dev: true
 
   /fork-ts-checker-webpack-plugin@6.5.3(eslint@8.56.0)(typescript@5.3.3)(webpack@5.90.0):
     resolution: {integrity: sha512-SbH/l9ikmMWycd5puHJKTkZJKddF4iRLyW3DeZ08HTI7NGyLS38MXd/KGgeWumQO7YNQbW2u/NtPT2YowbPaGQ==}
@@ -8253,7 +8313,6 @@ packages:
 
   /function-bind@1.1.2:
     resolution: {integrity: sha512-7XHNxH7qX9xG5mIwxkhumTox/MIRNcOgDrxWsMt2pAr23WHp6MrRlN7FBSFpCpr+oVO0F744iUgR82nJMfG2SA==}
-    dev: true
 
   /function.prototype.name@1.1.5:
     resolution: {integrity: sha512-uN7m/BzVKQnCUF/iW8jYea67v++2u7m5UgENbHRtdDVclOUP+FMPlCNdmk0h/ysGyo2tavMJEDqJAkJdRa1vMA==}
@@ -8390,7 +8449,6 @@ packages:
     engines: {node: '>=10.13.0'}
     dependencies:
       is-glob: 4.0.3
-    dev: true
 
   /glob-promise@4.2.2(glob@7.2.3):
     resolution: {integrity: sha512-xcUzJ8NWN5bktoTIX7eOclO1Npxd/dyVqUJxlLIDasT4C7KZyqlPIwkdJ0Ypiy3p2ZKahTjK4M9uC3sNSfNMzw==}
@@ -8416,7 +8474,6 @@ packages:
       minimatch: 9.0.3
       minipass: 7.0.4
       path-scurry: 1.10.1
-    dev: true
 
   /glob@7.2.3:
     resolution: {integrity: sha512-nFR0zLpU2YCaRxwoCJvL6UvCH2JFyFVIvwTLsIf21AuHlMskA1hhTdk+LlYJtOlYt9v6dvszD2BGRqBL+iQK9Q==}
@@ -8632,7 +8689,6 @@ packages:
     engines: {node: '>= 0.4'}
     dependencies:
       function-bind: 1.1.2
-    dev: true
 
   /highcharts-react-official@3.2.1(highcharts@11.3.0)(react@18.2.0):
     resolution: {integrity: sha512-hyQTX7ezCxl7JqumaWiGsroGWalzh24GedQIgO3vJbkGOZ6ySRAltIYjfxhrq4HszJOySZegotEF7v+haQ75UA==}
@@ -8910,7 +8966,6 @@ packages:
     resolution: {integrity: sha512-hHrIjvZsftOsvKSn2TRYl63zvxsgE0K+0mYMoH6gD4omR5IWB2KynivBQczo3+wF1cCkjzvptnI9Q0sPU66ilw==}
     dependencies:
       hasown: 2.0.0
-    dev: true
 
   /is-date-object@1.0.5:
     resolution: {integrity: sha512-9YQaSxsAiSwcvS33MBk3wTCVnWK+HhF8VZR2jRxehM16QcVOdHqPn4VPHmRK4lSr38n9JriurInLcP90xsYNfQ==}
@@ -8953,7 +9008,6 @@ packages:
   /is-fullwidth-code-point@3.0.0:
     resolution: {integrity: sha512-zymm5+u+sCsSWyD9qNaejV3DFvhCKclKdizYaJUuHA83RLjb7nSuGnddCHGv0hk+KY7BMAlsWeK4Ueg6EV6XQg==}
     engines: {node: '>=8'}
-    dev: true
 
   /is-generator-function@1.0.10:
     resolution: {integrity: sha512-jsEjy9l3yiXEQ+PsXdmBwEPcOxaXWLspKdplFUVI9vq1iZgIekeC0L167qeu86czQaxed3q/Uzuw0swL0irL8A==}
@@ -9187,7 +9241,6 @@ packages:
 
   /isexe@2.0.0:
     resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
-    dev: true
 
   /isobject@3.0.1:
     resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
@@ -9229,7 +9282,6 @@ packages:
       '@isaacs/cliui': 8.0.2
     optionalDependencies:
       '@pkgjs/parseargs': 0.11.0
-    dev: true
 
   /jake@10.8.7:
     resolution: {integrity: sha512-ZDi3aP+fG/LchyBzUM804VjddnwfSfsdeYkwt8NcbKRvo4rFkjhs456iLFn3k2ZUWvNe4i48WACDbza8fhq2+w==}
@@ -9300,7 +9352,6 @@ packages:
   /jiti@1.21.0:
     resolution: {integrity: sha512-gFqAIbuKyyso/3G2qhiO2OM6shY6EPP/R0+mkDbyspxKazh8BXDC5FiFsUjlczgdNz/vfra0da2y+aHrusLG/Q==}
     hasBin: true
-    dev: true
 
   /js-tokens@4.0.0:
     resolution: {integrity: sha512-RdJUflcE3cUzKiMqQgsCu06FPu9UdIJO0beYbPhHN4k6apgJtifcoCtT9bcxOpYBtpD2kCM6Sbzg4CausW/PKQ==}
@@ -9497,14 +9548,17 @@ packages:
       type-check: 0.4.0
     dev: true
 
+  /lilconfig@2.1.0:
+    resolution: {integrity: sha512-utWOt/GHzuUxnLKxB6dk81RoOeoNeHgbrXiuGk4yyF5qlRz+iIVWu56E2fqGHFrXz0QNUhLB/8nKqvRH66JKGQ==}
+    engines: {node: '>=10'}
+    dev: false
+
   /lilconfig@3.0.0:
     resolution: {integrity: sha512-K2U4W2Ff5ibV7j7ydLr+zLAkIg5JJ4lPn1Ltsdt+Tz/IjQ8buJ55pZAxoP34lqIiwtF9iAvtLv3JGv7CAyAg+g==}
     engines: {node: '>=14'}
-    dev: true
 
   /lines-and-columns@1.2.4:
     resolution: {integrity: sha512-7ylylesZQ/PV29jhEDl3Ufjo6ZX7gCqJr5F7PKrqc93v7fzSymt1BpwEU8nAUXs8qzzvqhbjhK5QZg6Mt/HkBg==}
-    dev: true
 
   /lit-element@3.3.3:
     resolution: {integrity: sha512-XbeRxmTHubXENkV4h8RIPyr8lXc+Ff28rkcQzw3G6up2xg5E8Zu1IgOWIwBLEQsu3cOVFqdYwiVi0hv0SlpqUA==}
@@ -9627,7 +9681,6 @@ packages:
   /lru-cache@10.2.0:
     resolution: {integrity: sha512-2bIM8x+VAf6JT4bKAljS1qUWgMsqZRPGJS6FSahIMPVvctcNhyVp7AJu7quxOW9jwkryBReKZY5tY5JYv2n/7Q==}
     engines: {node: 14 || >=16.14}
-    dev: true
 
   /lru-cache@4.1.5:
     resolution: {integrity: sha512-sWZlbEP2OsHNkXrMl5GYk/jKk70MBng6UU4YI/qGDYbgf6YbP4EvmqISbXCoJiRKs+1bSpFHVgQxvJ17F2li5g==}
@@ -9786,7 +9839,6 @@ packages:
   /merge2@1.4.1:
     resolution: {integrity: sha512-8q7VEgMJW4J8tcfVPy8g09NcQwZdbwFEqhe/WZkoIzjn/3TGDwtOCYtXGxA3O8tPzpczCCDgv+P2P5y00ZJOOg==}
     engines: {node: '>= 8'}
-    dev: true
 
   /methods@1.1.2:
     resolution: {integrity: sha512-iclAHeNqNm68zFtnZ0e+1L2yUIdvzNoauKU4WBA3VvH/vPFieF7qfRlwUZU+DA9P9bPXIS90ulxoUoCH23sV2w==}
@@ -9799,7 +9851,6 @@ packages:
     dependencies:
       braces: 3.0.2
       picomatch: 2.3.1
-    dev: true
 
   /mime-db@1.52.0:
     resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
@@ -9868,7 +9919,6 @@ packages:
     engines: {node: '>=16 || 14 >=14.17'}
     dependencies:
       brace-expansion: 2.0.1
-    dev: true
 
   /minimist@1.2.8:
     resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
@@ -9889,7 +9939,6 @@ packages:
   /minipass@7.0.4:
     resolution: {integrity: sha512-jYofLM5Dam9279rdkWzqHozUo4ybjdZmCsDHePy5V/PbBcVMiSZR97gmAy45aqi8CK1lG2ECd356FU86avfwUQ==}
     engines: {node: '>=16 || 14 >=14.17'}
-    dev: true
 
   /minizlib@2.1.2:
     resolution: {integrity: sha512-bAxsR8BVfj60DWXHE3u30oHzfl4G7khkSuPW+qvpd7jFRHm7dLxOjUk1EHACJ/hxLY8phGJ0YhYHZo7jil7Qdg==}
@@ -9941,6 +9990,14 @@ packages:
     resolution: {integrity: sha512-6FlzubTLZG3J2a/NVCAleEhjzq5oxgHyaCU9yYXvcLsvoVaHJq/s5xXI6/XXP6tz7R9xAOtHnSO/tXtF3WRTlA==}
     dev: true
 
+  /mz@2.7.0:
+    resolution: {integrity: sha512-z81GNO7nnYMEhrGh9LeymoE4+Yr0Wn5McHIZMK5cfQCl+NDX08sCZgUc9/6MHni9IWuFLm1Z3HTCXu2z9fN62Q==}
+    dependencies:
+      any-promise: 1.3.0
+      object-assign: 4.1.1
+      thenify-all: 1.6.0
+    dev: false
+
   /nanoid@3.3.7:
     resolution: {integrity: sha512-eSRppjcPIatRIMC1U6UngP8XFcz8MQWGQdt1MTBQ7NaAmvXDfvNxbvWV3x2y6CdEUciCSsDHDQZbhYaB8QEo2g==}
     engines: {node: ^10 || ^12 || ^13.7 || ^14 || >=15.0.1}
@@ -10064,7 +10121,11 @@ packages:
   /object-assign@4.1.1:
     resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
     engines: {node: '>=0.10.0'}
-    dev: true
+
+  /object-hash@3.0.0:
+    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
+    engines: {node: '>= 6'}
+    dev: false
 
   /object-inspect@1.12.3:
     resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
@@ -10392,7 +10453,6 @@ packages:
   /path-key@3.1.1:
     resolution: {integrity: sha512-ojmeN0qd+y0jszEtoY48r0Peq5dwMEkIlCOu6Q5f41lfkswXuKtYrhgoTpLnyIcHm24Uhqx+5Tqm2InSwLhE6Q==}
     engines: {node: '>=8'}
-    dev: true
 
   /path-key@4.0.0:
     resolution: {integrity: sha512-haREypq7xkM7ErfgIyA0z+Bj4AGKlMSdlQE2jvJo6huWD1EdkKYV+G/T4nq0YEF2vgTT8kqMFKo1uHn950r4SQ==}
@@ -10401,7 +10461,6 @@ packages:
 
   /path-parse@1.0.7:
     resolution: {integrity: sha512-LDJzPVEEEPR+y48z93A0Ed0yXb8pAByGWo/k5YYdYgpY2/2EsOsksJrq7lOHxryrVOn1ejG6oAp8ahvOIQD8sw==}
-    dev: true
 
   /path-scurry@1.10.1:
     resolution: {integrity: sha512-MkhCqzzBEpPvxxQ71Md0b1Kk51W01lrYvlMzSUaIzNsODdd7mqhiimSZlr+VegAz5Z6Vzt9Xg2ttE//XBhH3EQ==}
@@ -10409,7 +10468,6 @@ packages:
     dependencies:
       lru-cache: 10.2.0
       minipass: 7.0.4
-    dev: true
 
   /path-to-regexp@0.1.7:
     resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
@@ -10458,6 +10516,11 @@ packages:
     resolution: {integrity: sha512-JU3teHTNjmE2VCGFzuY8EXzCDVwEqB2a8fsIvwaStHhAWJEeVd1o1QD80CU6+ZdEXXSLbSsuLwJjkCBWqRQUVA==}
     engines: {node: '>=8.6'}
 
+  /pify@2.3.0:
+    resolution: {integrity: sha512-udgsAY+fTnvv7kI7aaxbqwWNb0AHiB0qBO89PZKPkoTmGOgdbrHDKD+0B2X4uTfJ/FT1R09r9gTsjUjNJotuog==}
+    engines: {node: '>=0.10.0'}
+    dev: false
+
   /pify@3.0.0:
     resolution: {integrity: sha512-C3FsVNH1udSEX48gGX1xfvwTWfsYWj5U+8/uK15BGzIGrKoUpghX8hWZwa/OFnakBiiVNmBvemTJR5mcy7iPcg==}
     engines: {node: '>=4'}
@@ -10471,7 +10534,6 @@ packages:
   /pirates@4.0.6:
     resolution: {integrity: sha512-saLsH7WeYYPiD25LDuLRRY/i+6HaPYr6G1OUlN39otzkSTxKnubR9RTxS3/Kk50s1g2JTgFwWQDQyplC5/SHZg==}
     engines: {node: '>= 6'}
-    dev: true
 
   /pkg-dir@3.0.0:
     resolution: {integrity: sha512-/E57AYkoeQ25qkxMj5PBOVgF8Kiu/h7cYS30Z5+R7WaiCCBfLq58ZI/dSeaEKb9WVJV5n/03QwrN3IeWIFllvw==}
@@ -10597,6 +10659,45 @@ packages:
       postcss-selector-parser: 6.0.15
     dev: true
 
+  /postcss-import@15.1.0(postcss@8.4.35):
+    resolution: {integrity: sha512-hpr+J05B2FVYUAXHeK1YyI267J/dDDhMU6B6civm8hSY1jYJnBXxzKDKDswzJmtLHryrjhnDjqqp/49t8FALew==}
+    engines: {node: '>=14.0.0'}
+    peerDependencies:
+      postcss: ^8.0.0
+    dependencies:
+      postcss: 8.4.35
+      postcss-value-parser: 4.2.0
+      read-cache: 1.0.0
+      resolve: 1.22.8
+    dev: false
+
+  /postcss-js@4.0.1(postcss@8.4.35):
+    resolution: {integrity: sha512-dDLF8pEO191hJMtlHFPRa8xsizHaM82MLfNkUHdUtVEV3tgTp5oj+8qbEqYM57SLfc74KSbw//4SeJma2LRVIw==}
+    engines: {node: ^12 || ^14 || >= 16}
+    peerDependencies:
+      postcss: ^8.4.21
+    dependencies:
+      camelcase-css: 2.0.1
+      postcss: 8.4.35
+    dev: false
+
+  /postcss-load-config@4.0.2(postcss@8.4.35):
+    resolution: {integrity: sha512-bSVhyJGL00wMVoPUzAVAnbEoWyqRxkjv64tUl427SKnPrENtq6hJwUojroMz2VB+Q1edmi4IfrAPpami5VVgMQ==}
+    engines: {node: '>= 14'}
+    peerDependencies:
+      postcss: '>=8.0.9'
+      ts-node: '>=9.0.0'
+    peerDependenciesMeta:
+      postcss:
+        optional: true
+      ts-node:
+        optional: true
+    dependencies:
+      lilconfig: 3.0.0
+      postcss: 8.4.35
+      yaml: 2.3.4
+    dev: false
+
   /postcss-merge-idents@6.0.1(postcss@8.4.35):
     resolution: {integrity: sha512-ApqNUkzl3MJP+43DIIvoer98t7tcDVAcnLeAKjuTIM7HkMk8NXB6eqscMIjwQISwoSeE0WrEyIqVy+HoHAVcZw==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -10676,6 +10777,16 @@ packages:
       postcss-selector-parser: 6.0.15
     dev: true
 
+  /postcss-nested@6.0.1(postcss@8.4.35):
+    resolution: {integrity: sha512-mEp4xPMi5bSWiMbsgoPfcP74lsWLHkQbZc3sY+jWYd65CUwXrUaTp0fmNpa01ZcETKlIgUdFN/MpS2xZtqL9dQ==}
+    engines: {node: '>=12.0'}
+    peerDependencies:
+      postcss: ^8.2.14
+    dependencies:
+      postcss: 8.4.35
+      postcss-selector-parser: 6.0.15
+    dev: false
+
   /postcss-normalize-charset@6.0.1(postcss@8.4.35):
     resolution: {integrity: sha512-aW5LbMNRZ+oDV57PF9K+WI1Z8MPnF+A8qbajg/T8PP126YrGX1f9IQx21GI2OlGz7XFJi/fNi0GTbY948XJtXg==}
     engines: {node: ^14 || ^16 || >=18.0}
@@ -10822,7 +10933,6 @@ packages:
     dependencies:
       cssesc: 3.0.0
       util-deprecate: 1.0.2
-    dev: true
 
   /postcss-svgo@6.0.2(postcss@8.4.35):
     resolution: {integrity: sha512-IH5R9SjkTkh0kfFOQDImyy1+mTCb+E830+9SV1O+AaDcoHTvfsvt6WwJeo7KwcHbFnevZVCsXhDmjFiGVuwqFQ==}
@@ -11040,7 +11150,6 @@ packages:
 
   /queue-microtask@1.2.3:
     resolution: {integrity: sha512-NuaNSa6flKT5JaSYQzJok04JzTL1CA6aGhv5rfLW3PgqA+M2ChpZQnAC8h8i4ZFkBS8X5RqkDBHA7r4hej3K9A==}
-    dev: true
 
   /quick-lru@5.1.1:
     resolution: {integrity: sha512-WuyALRjWPDGtt/wzJiadO5AXY+8hZ80hVpe6MyivgraREW751X3SbhRvG3eLKOYN+8VEvqLcf3wdnt44Z4S4SA==}
@@ -11215,6 +11324,14 @@ packages:
     resolution: {integrity: sha512-/6UZ2qgEyH2aqzYZgQPxEnz33NJ2gNsnHA2o5+o4wW9bLM/JYQitNP9xPhsXwC08hMMovfGe/8retsdDsczPRg==}
     dev: true
 
+  /react-icons@5.0.1(react@18.2.0):
+    resolution: {integrity: sha512-WqLZJ4bLzlhmsvme6iFdgO8gfZP17rfjYEJ2m9RsZjZ+cc4k1hTzknEz63YS1MeT50kVzoa1Nz36f4BEx+Wigw==}
+    peerDependencies:
+      react: '*'
+    dependencies:
+      react: 18.2.0
+    dev: false
+
   /react-is@16.13.1:
     resolution: {integrity: sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==}
 
@@ -11343,6 +11460,12 @@ packages:
     dependencies:
       loose-envify: 1.4.0
 
+  /read-cache@1.0.0:
+    resolution: {integrity: sha512-Owdv/Ft7IjOgm/i0xvNDZ1LrRANRfew4b2prF3OWMQLxLfu3bS8FVhCsrSCMK4lR56Y9ya+AThoTpDCTxCmpRA==}
+    dependencies:
+      pify: 2.3.0
+    dev: false
+
   /read-pkg-up@7.0.1:
     resolution: {integrity: sha512-zK0TB7Xd6JpCLmlLmufqykGE+/TlOePD6qKClNW7hHDKFh/J7/7gCWGR7joEQEW1bKq3a3yUZSObOoWLFQ4ohg==}
     engines: {node: '>=8'}
@@ -11552,7 +11675,6 @@ packages:
       is-core-module: 2.13.1
       path-parse: 1.0.7
       supports-preserve-symlinks-flag: 1.0.0
-    dev: true
 
   /resolve@2.0.0-next.5:
     resolution: {integrity: sha512-U7WjGVG9sH8tvjW5SmGbQuui75FiyjAX72HX15DwBBwF9dNiQZRQAg9nnPhYy+TUnE0+VcrttuvNI8oSxZcocA==}
@@ -11580,7 +11702,6 @@ packages:
   /reusify@1.0.4:
     resolution: {integrity: sha512-U9nH88a3fc/ekCF1l0/UP1IosiuIjyTh7hBvXVMHYgVcfGvt897Xguj2UOLDeI5BG2m7/uwyaLVT6fbtCwTyzw==}
     engines: {iojs: '>=1.0.0', node: '>=0.10.0'}
-    dev: true
 
   /rimraf@2.6.3:
     resolution: {integrity: sha512-mwqeW5XsA2qAejG46gYdENaxXjx9onRNCfn7L0duuP4hCuTIi/QO7PDK07KJfp1d+izWPrzEJDcSqBa0OZQriA==}
@@ -11661,7 +11782,6 @@ packages:
     resolution: {integrity: sha512-5l4VyZR86LZ/lDxZTR6jqL8AFE2S0IFLMP26AbjsLVADxHdhB/c0GUsH+y39UfCi3dzz8OlQuPmnaJOMoDHQBA==}
     dependencies:
       queue-microtask: 1.2.3
-    dev: true
 
   /rxjs@7.5.7:
     resolution: {integrity: sha512-z9MzKh/UcOqB3i20H6rtrlaE/CgjLOvheWK/9ILrbhROGTweAi1BaFsTT9FbwZi5Trr1qNRs+MXkhmR06awzQA==}
@@ -11871,7 +11991,6 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       shebang-regex: 3.0.0
-    dev: true
 
   /shebang-regex@1.0.0:
     resolution: {integrity: sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==}
@@ -11881,7 +12000,6 @@ packages:
   /shebang-regex@3.0.0:
     resolution: {integrity: sha512-7++dFhtcx3353uBaq8DDR4NuxBetBzC7ZQOhmTQInHEd6bSrXdiEyzCvG07Z44UYdLShWUyXt5M/yhz8ekcb1A==}
     engines: {node: '>=8'}
-    dev: true
 
   /shell-quote@1.8.1:
     resolution: {integrity: sha512-6j1W9l1iAs/4xYBI1SYOVZyFcCis9b4KCLQ8fgAGG07QvzaRLVVRQvAy85yNmmZSjYjg4MWh4gNvlPujU/5LpA==}
@@ -11901,7 +12019,6 @@ packages:
   /signal-exit@4.1.0:
     resolution: {integrity: sha512-bzyZ1e88w9O1iNJbKnOlvYTrWPDl46O1bG0D3XInv+9tkPrxrN8jUUTiFlDkkmKWgn1M6CfIA13SuGqOa9Korw==}
     engines: {node: '>=14'}
-    dev: true
 
   /sirv@2.0.4:
     resolution: {integrity: sha512-94Bdh3cC2PKrbgSOUqTiGPWVZeSiXfKOVZNJniWoqrWrRkB1CJzBU3NEbiTsPcYy1lDsANA/THzS+9WBiy5nfQ==}
@@ -12048,7 +12165,6 @@ packages:
       emoji-regex: 8.0.0
       is-fullwidth-code-point: 3.0.0
       strip-ansi: 6.0.1
-    dev: true
 
   /string-width@5.1.2:
     resolution: {integrity: sha512-HnLOCR3vjcY8beoNLtcjZ5/nxn2afmME6lhrDrebokqMap+XbeW8n9TXpPDOqdGK5qcI3oT0GKTW6wC7EMiVqA==}
@@ -12057,7 +12173,6 @@ packages:
       eastasianwidth: 0.2.0
       emoji-regex: 9.2.2
       strip-ansi: 7.1.0
-    dev: true
 
   /string.prototype.matchall@4.0.10:
     resolution: {integrity: sha512-rGXbGmOEosIQi6Qva94HUjgPs9vKW+dkG7Y8Q5O2OYkWL6wFaTRZO8zM4mhP94uX55wgyrXzfS2aGtGzUL7EJQ==}
@@ -12147,14 +12262,12 @@ packages:
     engines: {node: '>=8'}
     dependencies:
       ansi-regex: 5.0.1
-    dev: true
 
   /strip-ansi@7.1.0:
     resolution: {integrity: sha512-iq6eVVI64nQQTRYq2KtEg2d2uU7LElhTJwsH4YzIHZshxlgZms/wIc4VoDQTlG/IvVIrBKG06CrZnp0qv7hkcQ==}
     engines: {node: '>=12'}
     dependencies:
       ansi-regex: 6.0.1
-    dev: true
 
   /strip-bom@3.0.0:
     resolution: {integrity: sha512-vavAMRXOgBVNF6nyEEmL3DBK19iRpDcoIwW+swQ+CbGiu7lju6t+JklA1MHweoWtadgt4ISVUsXLyDq34ddcwA==}
@@ -12235,6 +12348,20 @@ packages:
     resolution: {integrity: sha512-EQepAV+wMsIaGVGX1RECzgrcqRRU/0sYOHkeLsZ3fzHaHXZy4DaOOX0vOlGQdlsjkh3mFHAIlVimpwAs4dslyQ==}
     dev: false
 
+  /sucrase@3.35.0:
+    resolution: {integrity: sha512-8EbVDiu9iN/nESwxeSxDKe0dunta1GOlHufmSSXxMD2z2/tMZpDMpvXQGsc+ajGo8y2uYUmixaSRUc/QPoQ0GA==}
+    engines: {node: '>=16 || 14 >=14.17'}
+    hasBin: true
+    dependencies:
+      '@jridgewell/gen-mapping': 0.3.3
+      commander: 4.1.1
+      glob: 10.3.10
+      lines-and-columns: 1.2.4
+      mz: 2.7.0
+      pirates: 4.0.6
+      ts-interface-checker: 0.1.13
+    dev: false
+
   /sumchecker@3.0.1:
     resolution: {integrity: sha512-MvjXzkz/BOfyVDkG0oFOtBxHX2u3gKbMHIF/dXblZsgD3BWOFLmHovIpZY7BykJdAjcqRCBi1WYBNdEC9yI7vg==}
     engines: {node: '>= 8.0'}
@@ -12267,7 +12394,6 @@ packages:
   /supports-preserve-symlinks-flag@1.0.0:
     resolution: {integrity: sha512-ot0WnXS9fgdkgIcePe6RHNk1WA8+muPa6cSjeR3V8K27q9BB1rTE3R1p7Hv0z1ZyAc8s6Vvv8DIyWf681MAt0w==}
     engines: {node: '>= 0.4'}
-    dev: true
 
   /svg-parser@2.0.4:
     resolution: {integrity: sha512-e4hG1hRwoOdRb37cIMSgzNsxyzKfayW6VOflrwvR+/bzrkyxY/31WkbgnQpgtrNp1SdpJvpUAGTa/ZoiPNDuRQ==}
@@ -12307,6 +12433,37 @@ packages:
       tslib: 2.6.2
     dev: true
 
+  /tailwindcss@3.4.1:
+    resolution: {integrity: sha512-qAYmXRfk3ENzuPBakNK0SRrUDipP8NQnEY6772uDhflcQz5EhRdD7JNZxyrFHVQNCwULPBn6FNPp9brpO7ctcA==}
+    engines: {node: '>=14.0.0'}
+    hasBin: true
+    dependencies:
+      '@alloc/quick-lru': 5.2.0
+      arg: 5.0.2
+      chokidar: 3.5.3
+      didyoumean: 1.2.2
+      dlv: 1.1.3
+      fast-glob: 3.3.2
+      glob-parent: 6.0.2
+      is-glob: 4.0.3
+      jiti: 1.21.0
+      lilconfig: 2.1.0
+      micromatch: 4.0.5
+      normalize-path: 3.0.0
+      object-hash: 3.0.0
+      picocolors: 1.0.0
+      postcss: 8.4.35
+      postcss-import: 15.1.0(postcss@8.4.35)
+      postcss-js: 4.0.1(postcss@8.4.35)
+      postcss-load-config: 4.0.2(postcss@8.4.35)
+      postcss-nested: 6.0.1(postcss@8.4.35)
+      postcss-selector-parser: 6.0.15
+      resolve: 1.22.8
+      sucrase: 3.35.0
+    transitivePeerDependencies:
+      - ts-node
+    dev: false
+
   /tapable@1.1.3:
     resolution: {integrity: sha512-4WK/bYZmj8xLr+HUCODHGF1ZFzsYffasLUgEiMBY4fgtltdO6B4WJtlSbPaDTLpYTcGVwM2qLnFTICEcNxs3kA==}
     engines: {node: '>=6'}
@@ -12440,6 +12597,19 @@ packages:
     resolution: {integrity: sha512-N+8UisAXDGk8PFXP4HAzVR9nbfmVJ3zYLAWiTIoqC5v5isinhr+r5uaO8+7r3BMfuNIufIsA7RdpVgacC2cSpw==}
     dev: true
 
+  /thenify-all@1.6.0:
+    resolution: {integrity: sha512-RNxQH/qI8/t3thXJDwcstUO4zeqo64+Uy/+sNVRBx4Xn2OX+OZ9oP+iJnNFqplFra2ZUVeKCSa2oVWi3T4uVmA==}
+    engines: {node: '>=0.8'}
+    dependencies:
+      thenify: 3.3.1
+    dev: false
+
+  /thenify@3.3.1:
+    resolution: {integrity: sha512-RVZSIV5IG10Hk3enotrhvz0T9em6cyHBLkH/YAZuKqd8hRkKhSfCGIcP2KUY0EPxndzANBmNllzWPwak+bheSw==}
+    dependencies:
+      any-promise: 1.3.0
+    dev: false
+
   /through2@2.0.5:
     resolution: {integrity: sha512-/mrRod8xqpA+IHSLyGCQ2s8SPHiCDEeQJSep1jqLYeEUClOFG2Qsh+4FU6G9VeqpZnGW/Su8LQGc4YKni5rYSQ==}
     dependencies:
@@ -12511,6 +12681,10 @@ packages:
     engines: {node: '>=6.10'}
     dev: true
 
+  /ts-interface-checker@0.1.13:
+    resolution: {integrity: sha512-Y/arvbn+rrz3JCKl9C4kVNfTfSm2/mEp5FSz5EsZSANGPSlQrpRI5M4PKF+mJnE52jOO90PnPSc3Ur3bTQw0gA==}
+    dev: false
+
   /tsconfig-paths@3.15.0:
     resolution: {integrity: sha512-2Ac2RgzDe/cn48GvOe3M+o82pEFewD3UPbyoUHHdKasHwJKjds4fLXWf/Ux5kATBKN20oaFGu+jbElp1pos0mg==}
     dependencies:
@@ -12955,7 +13129,6 @@ packages:
 
   /util-deprecate@1.0.2:
     resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
-    dev: true
 
   /util@0.10.4:
     resolution: {integrity: sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==}
@@ -13214,7 +13387,6 @@ packages:
     hasBin: true
     dependencies:
       isexe: 2.0.0
-    dev: true
 
   /widest-line@2.0.1:
     resolution: {integrity: sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==}
@@ -13234,7 +13406,6 @@ packages:
       ansi-styles: 4.3.0
       string-width: 4.2.3
       strip-ansi: 6.0.1
-    dev: true
 
   /wrap-ansi@8.1.0:
     resolution: {integrity: sha512-si7QWI6zUMq56bESFvagtmzMdGOtoxfR+Sez11Mobfc7tm+VkUckk9bW2UeffTGVUbOksxmSw0AA2gs8g71NCQ==}
@@ -13243,7 +13414,6 @@ packages:
       ansi-styles: 6.2.1
       string-width: 5.1.2
       strip-ansi: 7.1.0
-    dev: true
 
   /wrappy@1.0.2:
     resolution: {integrity: sha512-l4Sp/DRseor9wL6EvV2+TuQn63dMkPjZ/sp9XkghTEbV9KlPS1xUsZ3u7/IQO4wxtcFB4bgpQPRcR3QCvezPcQ==}
@@ -13330,6 +13500,11 @@ packages:
     engines: {node: '>= 6'}
     dev: true
 
+  /yaml@2.3.4:
+    resolution: {integrity: sha512-8aAvwVUSHpfEqTQ4w/KMlf3HcRdt50E5ODIQJBw1fQ5RL34xabzxtUlzTXVqc4rkZsPbvrXKWnABCD7kWSmocA==}
+    engines: {node: '>= 14'}
+    dev: false
+
   /yauzl@2.10.0:
     resolution: {integrity: sha512-p4a9I6X6nu6IhoGmBqAcbJy1mlC4j27vEPZX9F4L4/vZT3Lyq1VkFHw/V/PUcB9Buo+DG3iHkT0x3Qya58zc3g==}
     dependencies:

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/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/UserSchedule.ts

@@ -7,10 +7,15 @@ 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 {

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/CalendarCourseCell.stories.tsx

@@ -13,11 +13,10 @@ const meta = {
     },
     tags: ['autodocs'],
     argTypes: {
-        department: { control: { type: 'text' } },
-        courseNumber: { control: { type: 'text' } },
-        instructorLastName: { control: { type: 'text' } },
+        courseDeptAndInstr: { control: { type: 'text' } },
+        className: { control: { type: 'text' } },
         status: { control: { type: 'select', options: Object.values(Status) } },
-        meetingTime: { control: { type: 'text' } },
+        timeAndLocation: { control: { type: 'text' } },
         colors: { control: { type: 'object' } },
     },
     render: (args: any) => (
@@ -26,11 +25,10 @@ const meta = {
         </div>
     ),
     args: {
-        department: exampleCourse.department,
-        courseNumber: exampleCourse.number,
-        instructorLastName: exampleCourse.instructors[0].lastName,
+        courseDeptAndInstr: exampleCourse.department,
+        className: exampleCourse.number,
         status: exampleCourse.status,
-        meetingTime: exampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),
+        timeAndLocation: exampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),
 
         colors: getCourseColors('emerald', 500),
     },
@@ -46,22 +44,69 @@ export const Variants: Story = {
         <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({ ...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 })}
+                // course={new Course({ ...exampleCourse, status: Status.CLOSED })}
                 colors={getCourseColors('teal', 400)}
             />
             <CalendarCourseCell
                 {...props}
-                course={new Course({ ...exampleCourse, status: Status.WAITLISTED })}
+                // course={new Course({ ...exampleCourse, status: Status.WAITLISTED })}
                 colors={getCourseColors('indigo', 400)}
             />
             <CalendarCourseCell
                 {...props}
-                course={new Course({ ...exampleCourse, status: Status.CANCELLED })}
+                // course={new Course({ ...exampleCourse, status: Status.CANCELLED })}
                 colors={getCourseColors('red', 500)}
             />
         </div>

src/stories/components/CalendarHeader.stories.tsx

@@ -3,7 +3,7 @@ import { Meta, StoryObj } from '@storybook/react';
 import CalendarHeader from '@views/components/common/CalendarHeader/CalenderHeader';
 
 const meta = {
-    title: 'Components/CalendarHeader',
+    title: 'Components/Common/CalendarHeader',
     component: CalendarHeader,
     parameters: {
         layout: 'centered',

src/stories/components/CalendarSchedules.stories.tsx

@@ -17,6 +17,7 @@ const meta = {
     argTypes: {
         dummySchedules: { control: 'object' },
         dummyActiveIndex: { control: 'number' },
+        
     },
     render: (args: any) => (
         <div>
@@ -64,6 +65,7 @@ const schedules = [
             }),
         ],
         name: 'Main Schedule',
+        hours: 0, // Add the missing 'hours' property
     }),
     new UserSchedule({
         courses: [
@@ -131,6 +133,7 @@ const schedules = [
             }),
         ],
         name: 'Backup #3',
+        hours: 0, // Add the missing 'hours' property
     }),
 ];
 
@@ -138,5 +141,6 @@ export const Default: Story = {
     args: {
         dummySchedules: schedules,
         dummyActiveIndex: 0,
+
     },
 };

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/List.stories.tsx

@@ -9,7 +9,7 @@ import { test_colors } from './PopupCourseBlock.stories';
 
 const numberOfCourses = 5;
 
-const generateCourses = count => {
+export const generateCourses = count => {
     const courses = [];
 
     for (let i = 0; i < count; i++) {
@@ -64,7 +64,7 @@ const generateCourses = count => {
 const exampleCourses = generateCourses(numberOfCourses);
 const generateCourseBlocks = (exampleCourses, colors) =>
     exampleCourses.map((course, i) => <PopupCourseBlock key={course.uniqueId} course={course} colors={colors[i]} />);
-const exampleCourseBlocks = generateCourseBlocks(exampleCourses, test_colors);
+export const exampleCourseBlocks = generateCourseBlocks(exampleCourses, test_colors);
 
 const meta = {
     title: 'Components/Common/List',

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/injected/CoursePopup.stories.ts

@@ -57,6 +57,7 @@ const exampleCourse: Course = new Course({
 const exampleSchedule: UserSchedule = new UserSchedule({
     courses: [exampleCourse],
     name: 'Example Schedule',
+    hours: 0,
 });
 
 const meta = {
@@ -96,6 +97,7 @@ export const Open: Story = {
         activeSchedule: new UserSchedule({
             courses: [],
             name: 'Example Schedule',
+            hours: 0,
         }),
     },
 };

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); 
+
+
+   // 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]}
+    />
+));
 
-    // 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>
+        <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/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/CalendarCourseCell/CalendarCourseCell.tsx

@@ -12,6 +12,7 @@ export interface CalendarCourseCellProps {
     timeAndLocation?: string;
     status: Status;
     colors: CourseColors;
+    className?: string;
 }
 
 const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
@@ -19,6 +20,7 @@ const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
     timeAndLocation,
     status,
     colors,
+    className,
 }: CalendarCourseCellProps) => {
     let rightIcon: React.ReactNode | null = null;
     if (status === Status.WAITLISTED) {
@@ -34,7 +36,7 @@ const CalendarCourseCell: React.FC<CalendarCourseCellProps> = ({
 
     return (
         <div
-            className={`w-full flex justify-center rounded p-2 ${fontColor}`}
+            className={clsx('w-full flex justify-center rounded p-2', fontColor, className)}
             style={{
                 backgroundColor: colors.primaryColor,
             }}

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

@@ -2,11 +2,11 @@ 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';
-import calIcon from 'src/assets/icons/cal.svg';
-import pngIcon from 'src/assets/icons/png.svg';
 
 const daysOfWeek = Object.keys(DAY_MAP).filter(key => !['S', 'SU'].includes(key));
 const hoursOfDay = Array.from({ length: 14 }, (_, index) => index + 8);
@@ -39,7 +39,7 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
 
     const saveAsPNG = () => {
         if (calendarRef.current) {
-            html2canvas(calendarRef.current).then((canvas) => {
+            html2canvas(calendarRef.current).then(canvas => {
                 // Create an a element to trigger download
                 const a = document.createElement('a');
                 a.href = canvas.toDataURL('image/png');
@@ -85,19 +85,22 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
                         gridRow: `${block.calendarGridPoint.startIndex} / ${block.calendarGridPoint.endIndex}`,
                     }}
                 >
-                    <CalendarCourseCell courseDeptAndInstr={block.componentProps.courseDeptAndInstr} 
-                                        status={block.componentProps.status} colors={block.componentProps.colors}/>
+                    <CalendarCourseCell
+                        courseDeptAndInstr={block.componentProps.courseDeptAndInstr}
+                        status={block.componentProps.status}
+                        colors={block.componentProps.colors}
+                    />
                 </div>
             ))}
             <div className={styles.buttonContainer}>
-                <div className={styles.divider}></div> {/* First divider */}
+                <div className={styles.divider} /> {/* First divider */}
                 <button className={styles.calendarButton}>
-                    <img src={calIcon} className={styles.buttonIcon} alt="CAL" />
+                    <img src={calIcon} className={styles.buttonIcon} alt='CAL' />
                     Save as .CAL
                 </button>
-                <div className={styles.divider}></div> {/* Second divider */}
+                <div className={styles.divider} /> {/* Second divider */}
                 <button onClick={saveAsPNG} className={styles.calendarButton}>
-                    <img src={pngIcon} className={styles.buttonIcon} alt="PNG" />
+                    <img src={pngIcon} className={styles.buttonIcon} alt='PNG' />
                     Save as .PNG
                 </button>
             </div>

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

@@ -12,40 +12,41 @@ import ScheduleTotalHoursAndCourses from '../ScheduleTotalHoursAndCourses/Schedu
 import CourseStatus from '../CourseStatus/CourseStatus';
 
 const CalendarHeader = () => (
-    <div
-        style={{
-            display: 'flex',
-            minWidth: '672px',
-            minHeight: '79px',
-            padding: '15px 0px',
-            justifyContent: 'space-between',
-            alignItems: 'center',
-            alignContent: 'center',
-            rowGap: '10px',
-            alignSelf: 'stretch',
-            flexWrap: 'wrap',
-        }}
-    >
+    <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 style={{ display: 'flex', alignItems: 'center' }}>
+                    <div className='flex items-center'>
                         <LogoIcon style={{ marginRight: '5px' }} />
-            <Text>Your Logo Text</Text>
+                        <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 style={{ display: 'flex' }}>
-            <Button variant='outline' icon={UndoIcon} color='ut-black' />
-            <Button variant='outline' icon={RedoIcon} color='ut-black' />
                 </div>
-
-        <Button variant='outline' icon={SettingsIcon} color='ut-black' />
-
+                <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>
 );

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

@@ -1,5 +1,5 @@
 import { UserSchedule } from '@shared/types/UserSchedule';
-import React, { useEffect, useState } from 'react';
+import React, { useState } from 'react';
 import AddSchedule from '~icons/material-symbols/add';
 import List from '../List/List';
 import ScheduleListItem from '../ScheduleListItem/ScheduleListItem';
@@ -15,13 +15,8 @@ export function CalendarSchedules(props: Props) {
     const [activeScheduleIndex, setActiveScheduleIndex] = useState(props.dummyActiveIndex || 0);
     const [schedules, setSchedules] = useState(props.dummySchedules || []);
 
-    let scheduleComponents = schedules.map((schedule, index) => (
-        <div onClick={() => setActiveScheduleIndex(index)}>
-            <ScheduleListItem
-                active={index === activeScheduleIndex}
-                name={schedule.name}
-            />
-        </div>
+    const scheduleComponents = schedules.map((schedule, index) => (
+            <ScheduleListItem active={index === activeScheduleIndex} name={schedule.name} />
     ));
 
     return (
@@ -35,7 +30,7 @@ export function CalendarSchedules(props: Props) {
                 </div>
             </div>
 
-            <List gap={10} draggableElements={scheduleComponents} itemHeight={30} listHeight={0} listWidth={240} />
+            <List gap={10} draggableElements={scheduleComponents} itemHeight={30} listHeight={30} listWidth={240} />
         </div>
     );
 }

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/ScheduleListItem/ScheduleListItem.tsx

@@ -1,36 +1,38 @@
 import clsx from 'clsx';
 import React from 'react';
-import DropdownDrag from '~icons/material-symbols/drag-indicator';
+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'
-            >
+            <li className='text-ut-burntorange w-100% flex cursor-pointer items-center self-stretch justify-left'>
                 <div className='group flex justify-center'>
-                    <DropdownDrag className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
+                    <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
+                                        'scale-0! opacity-0 ease-in-out! duration-200!': !props.active,
                                     }
                                 )}
                             />

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

@@ -21,7 +21,7 @@ export default function ScheduleTotalHoursAndCourses({
     totalCourses,
 }: ScheduleTotalHoursAndCoursesProps): JSX.Element {
     return (
-        <div className='min-w-64 flex flex-wrap content-center items-baseline gap-2 uppercase'>
+        <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>

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,48 +83,43 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
             <Button
                 onClick={openRateMyProfessorURL}
                 disabled={!course.instructors.length}
-                variant='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}
-                variant='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}
-                variant='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'}
-                variant={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/TableRow/TableRow.tsx

@@ -84,7 +84,7 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
 
     return ReactDOM.createPortal(
         <>
-            <Button className={styles.rowButton} onClick={onClick} variant='secondary'>
+            <Button className={styles.rowButton} onClick={onClick} variant='filled' color='ut-black'>
                 <Icon name='bar_chart' color='white' size='medium' />
             </Button>
             {conflicts.length > 0 && (

src/views/hooks/useFlattenedCourseSchedule.ts

@@ -19,7 +19,7 @@ interface CalendarGridPoint {
  * Return type of useFlattenedCourseSchedule
  */
 export interface CalendarGridCourse {
-    calendarGridPoint?: CalendarGridPoint;
+    calendarGridPoint: CalendarGridPoint;
     componentProps: CalendarCourseCellProps;
 }
 
@@ -33,7 +33,8 @@ export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
     const [activeSchedule] = useSchedules();
     const { courses } = activeSchedule;
 
-    return courses.flatMap(course => {
+    return courses
+        .flatMap(course => {
             const {
                 status,
                 department,
@@ -46,6 +47,11 @@ export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
                 // asynch, online course
                 return [
                     {
+                        calendarGridPoint: {
+                            dayIndex: 0,
+                            startIndex: 0,
+                            endIndex: 0,
+                        },
                         componentProps: {
                             courseDeptAndInstr,
                             status,
@@ -83,5 +89,14 @@ export function useFlattenedCourseSchedule(): CalendarGridCourse[] {
                     },
                 }));
             });
+        })
+        .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;
         });
 }