PopupMain UI integrated

Merge remote-tracking branch 'origin/PopupMain' into Popup
Merge remote-tracking branch 'origin/derek-vinson/build-errors' into Popup
2024-02-19 11:51:51 -06:00 · 2024-02-19 11:45:14 -06:00 · 2024-02-19 00:37:07 -06:00 · 2024-02-17 21:58:23 -06:00 · 2024-02-17 18:35:17 -06:00 · 2024-02-17 18:00:06 -06:00
22 changed files with 816 additions and 288 deletions
--- a/package-lock.json
+++ b/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",
--- a/package.json
+++ b/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",
@@ -24,10 +26,11 @@
        "clsx": "^2.1.0",
        "highcharts": "^11.3.0",
        "highcharts-react-official": "^3.2.1",
-        "html-to-image": "^1.11.11",
+        "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",
--- a/pnpm-lock.yaml
+++ b/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)
@@ -34,9 +40,9 @@ dependencies:
  highcharts-react-official:
    specifier: ^3.2.1
    version: 3.2.1(highcharts@11.3.0)(react@18.2.0)
-  html-to-image:
-    specifier: ^1.11.11
-    version: 1.11.11
+  html2canvas:
+    specifier: ^1.4.1
+    version: 1.4.1
  react:
    specifier: ^18.2.0
    version: 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,11 @@ 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==}
+    engines: {node: '>= 0.6.0'}
+    dev: false

  /base64-js@1.5.1:
    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
@@ -5945,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==}
@@ -6077,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'}
@@ -6278,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'}
@@ -6313,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==}
@@ -6341,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'}
@@ -6516,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==}
@@ -6548,6 +6612,12 @@ packages:
      postcss: 8.4.35
    dev: true

+  /css-line-break@2.1.0:
+    resolution: {integrity: sha512-FHcKFCZcAha3LwfVBhCQbW2nCNbkZXn7KVUJcsT5/P8YmfsVja0FMPJr0B903j/E69HUphKiV9iQArX8SDYA4w==}
+    dependencies:
+      utrie: 1.0.2
+    dev: false
+
  /css-select@5.1.0:
    resolution: {integrity: sha512-nwoRF1rvRRnnCqqY7updORDsuqKzqYJ28+oSMaJMMgOauh3fvwHqMS7EZpIPqK8GL+g9mKxF1vP/ZjSeNjEVHg==}
    dependencies:
@@ -6595,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==}
@@ -6936,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}
@@ -6948,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'}
@@ -7040,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==}
@@ -7076,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==}
@@ -7958,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==}
@@ -7972,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==}
@@ -8107,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==}
@@ -8242,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==}
@@ -8379,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==}
@@ -8405,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==}
@@ -8621,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==}
@@ -8652,8 +8719,12 @@ packages:
    engines: {node: '>=8'}
    dev: true

-  /html-to-image@1.11.11:
-    resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==}
+  /html2canvas@1.4.1:
+    resolution: {integrity: sha512-fPU6BHNpsyIhr8yyMpTLLxAbkaK8ArIBcmZIRiBLiDhjeqvXolaEmDGmELFuX9I4xDcaKKcJl+TKZLqruBbmWA==}
+    engines: {node: '>=8.0.0'}
+    dependencies:
+      css-line-break: 2.1.0
+      text-segmentation: 1.0.3
    dev: false

  /htmlparser2@8.0.2:
@@ -8895,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==}
@@ -8938,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==}
@@ -9172,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==}
@@ -9214,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==}
@@ -9285,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==}
@@ -9482,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==}
@@ -9612,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==}
@@ -9771,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==}
@@ -9784,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==}
@@ -9853,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==}
@@ -9874,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==}
@@ -9926,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}
@@ -10049,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==}
@@ -10377,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==}
@@ -10386,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==}
@@ -10394,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==}
@@ -10443,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'}
@@ -10456,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==}
@@ -10582,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}
@@ -10661,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}
@@ -10807,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==}
@@ -11025,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==}
@@ -11200,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==}

@@ -11328,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'}
@@ -11537,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==}
@@ -11565,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==}
@@ -11646,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==}
@@ -11856,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==}
@@ -11866,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==}
@@ -11886,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==}
@@ -12033,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==}
@@ -12042,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==}
@@ -12132,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==}
@@ -12220,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'}
@@ -12252,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==}
@@ -12292,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'}
@@ -12415,10 +12587,29 @@ packages:
      minimatch: 3.1.2
    dev: true

+  /text-segmentation@1.0.3:
+    resolution: {integrity: sha512-iOiPUo/BGnZ6+54OsWxZidGCsdU8YbE4PSpdPinp7DeMtUJNJBoJ/ouUSTJjHkh1KntHaltHl/gDs2FC4i5+Nw==}
+    dependencies:
+      utrie: 1.0.2
+    dev: false
+
  /text-table@0.2.0:
    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:
@@ -12490,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:
@@ -12934,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==}
@@ -12957,6 +13151,12 @@ packages:
    engines: {node: '>= 0.4.0'}
    dev: true

+  /utrie@1.0.2:
+    resolution: {integrity: sha512-1MLa5ouZiOmQzUbjbu9VmjLzn1QLXBhwpUa7kdLUQK+KQ5KA9I1vk5U4YHe/X2Ch7PYnJfWuWT+VbuxbGwljhw==}
+    dependencies:
+      base64-arraybuffer: 1.0.2
+    dev: false
+
  /uuid@9.0.1:
    resolution: {integrity: sha512-b+1eJOlsR9K8HJpow9Ok3fiWOWSIcIzXodvv0rQjVoOVNpWMpxf1wZNpt4y9h10odCNrqnYp1OBzRktckBe3sA==}
    hasBin: true
@@ -13187,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==}
@@ -13207,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==}
@@ -13216,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==}
@@ -13303,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:
--- a/src/assets/logo.png
+++ b/src/assets/logo.png
--- a/src/pages/background/lib/createSchedule.ts
+++ b/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);
--- a/src/shared/storage/UserScheduleStore.ts
+++ b/src/shared/storage/UserScheduleStore.ts
@@ -14,6 +14,7 @@ export const UserScheduleStore = createLocalStore<IUserScheduleStore>({
        new UserSchedule({
            courses: [],
            name: 'Schedule 1',
+            hours: 0,
        }),
    ],
    activeIndex: 0,
--- a/src/shared/types/UserSchedule.ts
+++ b/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);
    }
-}
+}
--- a/src/stories/components/CalendarCourseCell.stories.tsx
+++ b/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>
--- a/src/stories/components/CalendarSchedules.stories.tsx
+++ b/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,
+
    },
 };
--- a/src/stories/components/ConflictsWithWarning.stories.tsx
+++ b/src/stories/components/ConflictsWithWarning.stories.tsx
@@ -1,96 +1,5 @@
 import { Meta, StoryObj } from '@storybook/react';
 import ConflictsWithWarning from '@views/components/common/ConflictsWithWarning/ConflictsWithWarning';
-import { Course, Status } from 'src/shared/types/Course';
-import { CourseMeeting } from 'src/shared/types/CourseMeeting';
-import Instructor from 'src/shared/types/Instructor';
-
-export const ExampleCourse: Course = new Course({
-    courseName: 'ELEMS OF COMPTRS/PROGRAMMNG-WB',
-    creditHours: 3,
-    department: 'C S',
-    description: [
-        'Problem solving and fundamental algorithms for various applications in science, business, and on the World Wide Web, and introductory programming in a modern object-oriented programming language.',
-        'Only one of the following may be counted: Computer Science 303E, 312, 312H. Credit for Computer Science 303E may not be earned after a student has received credit for Computer Science 314, or 314H. May not be counted toward a degree in computer science.',
-        'May be counted toward the Quantitative Reasoning flag requirement.',
-        'Designed to accommodate 100 or more students.',
-        'Taught as a Web-based course.',
-    ],
-    flags: ['Quantitative Reasoning'],
-    fullName: 'C S 303E ELEMS OF COMPTRS/PROGRAMMNG-WB',
-    instructionMode: 'Online',
-    instructors: [
-        new Instructor({
-            firstName: 'Bevo',
-            lastName: 'Bevo',
-            fullName: 'Bevo Bevo',
-        }),
-    ],
-    isReserved: false,
-    number: '303E',
-    schedule: {
-        meetings: [
-            new CourseMeeting({
-                days: ['Tuesday', 'Thursday'],
-                endTime: 660,
-                startTime: 570,
-            }),
-        ],
-    },
-    semester: {
-        code: '12345',
-        season: 'Spring',
-        year: 2024,
-    },
-    status: Status.WAITLISTED,
-    uniqueId: 12345,
-    url: 'https://utdirect.utexas.edu/apps/registrar/course_schedule/20242/12345/',
-});
-export const ExampleCourse2: 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/',
-});

 const meta = {
    title: 'Components/Common/ConflictsWithWarning',
@@ -100,10 +9,8 @@ const meta = {
    },
    tags: ['autodocs'],
    argTypes: {
-        conflicts: { control: 'object' },
-    },
-    args: {
-        conflicts: [ExampleCourse, ExampleCourse2],
+        ConflictingCourse: { control: 'string' },
+        SectionNumber: { control: 'string' },
    },
 } satisfies Meta<typeof ConflictsWithWarning>;
 export default meta;
@@ -112,6 +19,7 @@ type Story = StoryObj<typeof meta>;

 export const Default: Story = {
    args: {
-        conflicts: [ExampleCourse, ExampleCourse2],
+        ConflictingCourse: 'BVO 311C',
+        SectionNumber: '47280',
    },
-};
+};
--- a/src/stories/components/Dropdown.stories.tsx
+++ b/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} />
+        )),
+    },
+};
--- a/src/stories/components/List.stories.tsx
+++ b/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',
--- a/src/stories/components/PopupMain.stories.tsx
+++ b/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: {
+        
+    },
+};
--- a/src/stories/injected/CoursePopup.stories.ts
+++ b/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,
        }),
    },
 };
--- a/src/views/components/PopupMain.tsx
+++ b/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>
+);
 }
--- a/src/views/components/common/CalendarGrid/CalendarGrid.tsx
+++ b/src/views/components/common/CalendarGrid/CalendarGrid.tsx
@@ -1,5 +1,5 @@
 import React, { useRef } from 'react';
-import * as htmlToImage from 'html-to-image';
+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';
@@ -38,36 +38,15 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
    const calendarRef = useRef(null); // Create a ref for the calendar grid

    const saveAsPNG = () => {
-        htmlToImage
-            .toPng(calendarRef.current, {
-                backgroundColor: 'white',
-                style: {
-                    background: 'white',
-                    marginTop: '20px',
-                    marginBottom: '20px',
-                    marginRight: '20px',
-                    marginLeft: '20px',
-                },
-            })
-            .then(dataUrl => {
-                let img = new Image();
-                img.src = dataUrl;
-                fetch(dataUrl)
-                    .then(response => response.blob())
-                    .then(blob => {
-                        const href = window.URL.createObjectURL(blob);
-                        const link = document.createElement('a');
-                        link.href = href;
-                        link.download = 'my-schedule.png';
-                        document.body.appendChild(link);
-                        link.click();
-                        document.body.removeChild(link);
-                    })
-                    .catch(error => console.error('Error downloading file:', error));
-            })
-            .catch(error => {
-                console.error('oops, something went wrong!', error);
+        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 (
--- a/src/views/components/common/CalendarSchedules/CalendarSchedules.tsx
+++ b/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>
    );
 }
--- a/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx
+++ b/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx
@@ -1,37 +1,43 @@
 import React from 'react';
-import { Course } from 'src/shared/types/Course';
-import clsx from 'clsx';
 import Text from '../Text/Text';

 /**
 * Props for ConflictWithWarningProps
 */
 export interface ConflictsWithWarningProps {
-    className?: string;
-    conflicts: Course[];
+    ConflictingCourse: string;
+    SectionNumber: string;
 }

 /**
- * The ConflictsWithWarning component is used to display a warning message when a course conflicts
+ * 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({ className, conflicts }: ConflictsWithWarningProps): JSX.Element {
+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'
-            className={clsx(
-                className,
-                'min-w-21 w-21 flex flex-col items-start gap-2.5 rounded bg-[#AF2E2D] p-2.5 text-white'
-            )}
+            as='span'
+            className='text-white'
        >
-            <div>Conflicts With:</div>
-            {conflicts.map(course => (
-                <div>
-                    {`${course.department} ${course.number} (${course.uniqueId})`}
-                </div>
-            ))}
+            {children}
        </Text>
    );
 }
--- a/src/views/components/common/Dropdown/Dropdown.tsx
+++ b/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>
+    );
+}
--- a/src/views/components/common/ScheduleListItem/ScheduleListItem.tsx
+++ b/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,
                                    }
                                )}
                            />
--- a/src/views/components/injected/CoursePopup/CourseHeader/CourseButtons/CourseButtons.tsx
+++ b/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>
--- a/src/views/components/injected/TableRow/TableRow.tsx
+++ b/src/views/components/injected/TableRow/TableRow.tsx
@@ -3,9 +3,9 @@ import { UserSchedule } from '@shared/types/UserSchedule';
 import React, { useEffect, useState } from 'react';
 import ReactDOM from 'react-dom';
 import { Button } from '../../common/Button/Button';
+import Icon from '../../common/Icon/Icon';
+import Text from '../../common/Text/Text';
 import styles from './TableRow.module.scss';
-import ConflictsWithWarning from '../../common/ConflictsWithWarning/ConflictsWithWarning';
-import AddIcon from '~icons/material-symbols/add-circle';

 interface Props {
    isSelected: boolean;
@@ -54,7 +54,7 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P
        return () => {
            element.classList.remove(styles.inActiveSchedule);
        };
-    }, [activeSchedule, course, element.classList]);
+    }, [activeSchedule, element.classList]);

    useEffect(() => {
        if (!activeSchedule || !course) {
@@ -84,14 +84,20 @@ export default function TableRow({ row, isSelected, activeSchedule, onClick }: P

    return ReactDOM.createPortal(
        <>
-            <Button
-                icon={AddIcon}
-                className={styles.rowButton}
-                color='ut-burntorange'
-                onClick={onClick}
-                variant='single'
-            />
-            {conflicts.length > 0 && <ConflictsWithWarning className={styles.conflictTooltip} conflicts={conflicts} />}
+            <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}>
+                                {c.department} {c.number} ({c.uniqueId})
+                            </Text>
+                        ))}
+                    </div>
+                </div>
+            )}
        </>,
        container
    );
Author	SHA1	Message	Date
knownotunknown	1506a19b61	PopupMain UI integrated	2024-02-19 11:51:51 -06:00
knownotunknown	ed039d4206	Merge remote-tracking branch 'origin/PopupMain' into Popup	2024-02-19 11:45:14 -06:00
knownotunknown	009b7c742a	Merge remote-tracking branch 'origin/derek-vinson/build-errors' into Popup	2024-02-19 00:37:07 -06:00
Casey Charleston	357e041f05	Scuffed popup	2024-02-17 21:58:23 -06:00
Casey Charleston	51b6799d73	dropdown and calendar schedules storybook	2024-02-17 18:35:17 -06:00
Casey Charleston	141f5cc70e	merging	2024-02-17 18:00:06 -06:00
Casey Charleston	6883a0bc8d	packages	2024-02-17 17:59:05 -06:00
Derek Chen	697e81b7c2	Safely commenting it out	2024-02-17 17:42:48 -06:00
Derek Chen	f0329f33aa	Idk why this is erroring out	2024-02-17 17:22:39 -06:00
vivek12311	ff4ee494b6	Using React-icons. Probably need to take out later	2024-02-17 16:03:28 -06:00