add button to the rows, use new ConflictsWithWarning component

fix ConflictsWithWarning
Merge remote-tracking branch 'origin/hackathon' into feat-conflict-row
2024-02-19 11:29:24 -06:00 · 2024-02-19 11:28:33 -06:00 · 2024-02-19 11:11:37 -06:00 · 2024-02-18 12:46:35 -06:00 · 2024-02-17 19:09:41 -06:00 · 2024-02-17 18:21:39 -06:00
22 changed files with 288 additions and 816 deletions
--- a/package-lock.json
+++ b/package-lock.json
@@ -19,7 +19,6 @@
                "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",
@@ -20113,14 +20112,6 @@
            "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,8 +17,6 @@
        "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",
@@ -26,11 +24,10 @@
        "clsx": "^2.1.0",
        "highcharts": "^11.3.0",
        "highcharts-react-official": "^3.2.1",
-        "html2canvas": "^1.4.1",
+        "html-to-image": "^1.11.11",
        "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,12 +13,6 @@ 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)
@@ -40,9 +34,9 @@ dependencies:
  highcharts-react-official:
    specifier: ^3.2.1
    version: 3.2.1(highcharts@11.3.0)(react@18.2.0)
-  html2canvas:
-    specifier: ^1.4.1
-    version: 1.4.1
+  html-to-image:
+    specifier: ^1.11.11
+    version: 1.11.11
  react:
    specifier: ^18.2.0
    version: 18.2.0
@@ -52,9 +46,6 @@ 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)
@@ -258,11 +249,6 @@ 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'}
@@ -2242,28 +2228,6 @@ 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:
@@ -2339,6 +2303,7 @@ 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==}
@@ -2498,10 +2463,12 @@ 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==}
@@ -2509,11 +2476,13 @@ 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:
@@ -4337,21 +4306,6 @@ 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'}
@@ -5605,10 +5559,12 @@ 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==}
@@ -5621,6 +5577,7 @@ packages:
    engines: {node: '>=8'}
    dependencies:
      color-convert: 2.0.1
+    dev: true

  /ansi-styles@5.2.0:
    resolution: {integrity: sha512-Cxwpt2SfTzTtXcfOlzGEee8O+c+MmUgGrNiBcXnuWxuFJHe6a5Hz7qwhwe5OgaSYI0IJvkLqWX1ASG+cJOkEiA==}
@@ -5630,10 +5587,7 @@ packages:
  /ansi-styles@6.2.1:
    resolution: {integrity: sha512-bN798gFfQX+viw3R7yrGWRqnrN2oRkEkUjjl4JNn4E8GxxbjtG3FbrEIIY3l8/hrwUwIeCZvi4QuOTP4MErVug==}
    engines: {node: '>=12'}
-
-  /any-promise@1.3.0:
-    resolution: {integrity: sha512-7UvmKalWRt1wgjL1RrGxoSJW/0QZFIegpeGvZG9kjp8vrRu55XTHbwnqq2GpXm9uLbcuhxm3IqX9OB4MZR1b2A==}
-    dev: false
+    dev: true

  /anymatch@3.1.3:
    resolution: {integrity: sha512-KMReFUr0B4t+D+OBkjR3KYqvocp2XaSzO55UcB6mgQMd3KbcE+mWTyvVV7D/zsdEbNnV6acZUutkiHQXvTr1Rw==}
@@ -5651,10 +5605,6 @@ 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:
@@ -5904,11 +5854,7 @@ packages:

  /balanced-match@1.0.2:
    resolution: {integrity: sha512-3oSeUO0TMV67hN1AmbXsK4yaqU7tjiHlbxRDZOpH0KW9+CeX4bRAaX0Anxt0tx2MrpRpWwQaPwIlISEJhYU5Pw==}
-
-  /base64-arraybuffer@1.0.2:
-    resolution: {integrity: sha512-I3yl4r9QB5ZRY3XuJVEPfc2XhZO6YweFPI+UovAzn+8/hb3oJ6lnysaFcjVpkCPfVWFUDvoZ8kmVDP7WyRtYtQ==}
-    engines: {node: '>= 0.6.0'}
-    dev: false
+    dev: true

  /base64-js@1.5.1:
    resolution: {integrity: sha512-AKpaYlHn8t4SVbOHCy+b5+KKgvR4vrsD8vbvrbiQJps7fKDTkjkDry6ji0rUJjC0kzbNePLwzxq8iypo41qeWA==}
@@ -5999,6 +5945,7 @@ 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==}
@@ -6130,11 +6077,6 @@ 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'}
@@ -6336,10 +6278,6 @@ 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'}
@@ -6375,12 +6313,14 @@ 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==}
@@ -6401,11 +6341,6 @@ 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'}
@@ -6581,6 +6516,7 @@ 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==}
@@ -6612,12 +6548,6 @@ 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:
@@ -6665,6 +6595,7 @@ 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==}
@@ -7005,10 +6936,6 @@ 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}
@@ -7021,10 +6948,6 @@ 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'}
@@ -7117,6 +7040,7 @@ 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==}
@@ -7152,9 +7076,11 @@ 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==}
@@ -8032,6 +7958,7 @@ 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==}
@@ -8045,6 +7972,7 @@ 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==}
@@ -8179,6 +8107,7 @@ 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==}
@@ -8313,6 +8242,7 @@ 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==}
@@ -8449,6 +8379,7 @@ 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==}
@@ -8474,6 +8405,7 @@ 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==}
@@ -8689,6 +8621,7 @@ 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==}
@@ -8719,12 +8652,8 @@ packages:
    engines: {node: '>=8'}
    dev: true

-  /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
+  /html-to-image@1.11.11:
+    resolution: {integrity: sha512-9gux8QhvjRO/erSnDPv28noDZcPZmYE7e1vFsBLKLlRlKDSqNJYebj6Qz1TGd5lsRV+X+xYyjCKjuZdABinWjA==}
    dev: false

  /htmlparser2@8.0.2:
@@ -8966,6 +8895,7 @@ 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==}
@@ -9008,6 +8938,7 @@ 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==}
@@ -9241,6 +9172,7 @@ packages:

  /isexe@2.0.0:
    resolution: {integrity: sha512-RHxMLp9lnKHGHRng9QFhRCMbYAcVpn69smSGcq3f36xjgVVWThj4qqLbTLlq7Ssj8B+fIQ1EuCEGI2lKsyQeIw==}
+    dev: true

  /isobject@3.0.1:
    resolution: {integrity: sha512-WhB9zCku7EGTj/HQQRz5aUQEUeoQZH2bWcltRErOpymJ4boYE6wL9Tbr23krRPSZ+C5zqNSrSw+Cc7sZZ4b7vg==}
@@ -9282,6 +9214,7 @@ 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==}
@@ -9352,6 +9285,7 @@ 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==}
@@ -9548,17 +9482,14 @@ 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==}
@@ -9681,6 +9612,7 @@ 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==}
@@ -9839,6 +9771,7 @@ 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==}
@@ -9851,6 +9784,7 @@ packages:
    dependencies:
      braces: 3.0.2
      picomatch: 2.3.1
+    dev: true

  /mime-db@1.52.0:
    resolution: {integrity: sha512-sPU4uV7dYlvtWJxwwxHD0PuihVNiE7TyAbQ5SWxDCB9mUYvOgroQOwYQQOKPJ8CIbE+1ETVlOoK1UC2nU3gYvg==}
@@ -9919,6 +9853,7 @@ packages:
    engines: {node: '>=16 || 14 >=14.17'}
    dependencies:
      brace-expansion: 2.0.1
+    dev: true

  /minimist@1.2.8:
    resolution: {integrity: sha512-2yyAR8qBkN3YuheJanUpWC5U3bb5osDywNB8RzDVlDwDHbocAJveqqj1u8+SVD7jkWT4yvsHCpWqqWqAxb0zCA==}
@@ -9939,6 +9874,7 @@ 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==}
@@ -9990,14 +9926,6 @@ 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}
@@ -10121,11 +10049,7 @@ packages:
  /object-assign@4.1.1:
    resolution: {integrity: sha512-rJgTQnkUnH1sFw8yT6VSU3zD3sWmu6sZhIseY8VX+GRu3P6F7Fu+JNDoXfklElbLJSnc3FUQHVe4cU5hj+BcUg==}
    engines: {node: '>=0.10.0'}
-
-  /object-hash@3.0.0:
-    resolution: {integrity: sha512-RSn9F68PjH9HqtltsSnqYC1XXoWe9Bju5+213R98cNGttag9q9yAOTzdbsqvIa7aNm5WffBZFpWYr2aWrklWAw==}
-    engines: {node: '>= 6'}
-    dev: false
+    dev: true

  /object-inspect@1.12.3:
    resolution: {integrity: sha512-geUvdk7c+eizMNUDkRpW1wJwgfOiOeHbxBR/hLXK1aT6zmVSO0jsQcs7fj6MGw89jC/cjGfLcNOrtMYtGqm81g==}
@@ -10453,6 +10377,7 @@ 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==}
@@ -10461,6 +10386,7 @@ 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==}
@@ -10468,6 +10394,7 @@ packages:
    dependencies:
      lru-cache: 10.2.0
      minipass: 7.0.4
+    dev: true

  /path-to-regexp@0.1.7:
    resolution: {integrity: sha512-5DFkuoqlv1uYQKxy8omFBeJPQcdoE07Kv2sferDCrAq1ohOU+MSDswDIbnx3YAM60qIOnYa53wBhXW0EbMonrQ==}
@@ -10516,11 +10443,6 @@ 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'}
@@ -10534,6 +10456,7 @@ 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==}
@@ -10659,45 +10582,6 @@ 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}
@@ -10777,16 +10661,6 @@ 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}
@@ -10933,6 +10807,7 @@ 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==}
@@ -11150,6 +11025,7 @@ 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==}
@@ -11324,14 +11200,6 @@ 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==}

@@ -11460,12 +11328,6 @@ 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'}
@@ -11675,6 +11537,7 @@ 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==}
@@ -11702,6 +11565,7 @@ 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==}
@@ -11782,6 +11646,7 @@ 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==}
@@ -11991,6 +11856,7 @@ packages:
    engines: {node: '>=8'}
    dependencies:
      shebang-regex: 3.0.0
+    dev: true

  /shebang-regex@1.0.0:
    resolution: {integrity: sha512-wpoSFAxys6b2a2wHZ1XpDSgD7N9iVjg29Ph9uV/uaP9Ex/KXlkTZTeddxDPSYQpgvzKLGJke2UU0AzoGCjNIvQ==}
@@ -12000,6 +11866,7 @@ 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==}
@@ -12019,6 +11886,7 @@ 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==}
@@ -12165,6 +12033,7 @@ 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==}
@@ -12173,6 +12042,7 @@ 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==}
@@ -12262,12 +12132,14 @@ 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==}
@@ -12348,20 +12220,6 @@ 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'}
@@ -12394,6 +12252,7 @@ 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==}
@@ -12433,37 +12292,6 @@ 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'}
@@ -12587,29 +12415,10 @@ 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:
@@ -12681,10 +12490,6 @@ 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:
@@ -13129,6 +12934,7 @@ packages:

  /util-deprecate@1.0.2:
    resolution: {integrity: sha512-EPD5q1uXyFxJpCrLnCc1nHnq3gOa6DZBocAIiI2TaSCA7VCJ1UJDMagCzIkXNsUYfD1daK//LTEQ8xiIbrHtcw==}
+    dev: true

  /util@0.10.4:
    resolution: {integrity: sha512-0Pm9hTQ3se5ll1XihRic3FDIku70C+iHUdT/W926rSgHV5QgXsYbKZN8MSC3tJtSkhuROzvsQjAaFENRXr+19A==}
@@ -13151,12 +12957,6 @@ 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
@@ -13387,6 +13187,7 @@ packages:
    hasBin: true
    dependencies:
      isexe: 2.0.0
+    dev: true

  /widest-line@2.0.1:
    resolution: {integrity: sha512-Ba5m9/Fa4Xt9eb2ELXt77JxVDV8w7qQrH0zS/TWSJdLyAwQjWoOzpzj5lwVftDz6n/EOu3tNACS84v509qwnJA==}
@@ -13406,6 +13207,7 @@ 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==}
@@ -13414,6 +13216,7 @@ 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==}
@@ -13500,11 +13303,6 @@ 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,7 +14,6 @@ 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,7 +14,6 @@ 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,15 +7,10 @@ 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 {
--- a/src/stories/components/CalendarCourseCell.stories.tsx
+++ b/src/stories/components/CalendarCourseCell.stories.tsx
@@ -13,10 +13,11 @@ const meta = {
    },
    tags: ['autodocs'],
    argTypes: {
-        courseDeptAndInstr: { control: { type: 'text' } },
-        className: { control: { type: 'text' } },
+        department: { control: { type: 'text' } },
+        courseNumber: { control: { type: 'text' } },
+        instructorLastName: { control: { type: 'text' } },
        status: { control: { type: 'select', options: Object.values(Status) } },
-        timeAndLocation: { control: { type: 'text' } },
+        meetingTime: { control: { type: 'text' } },
        colors: { control: { type: 'object' } },
    },
    render: (args: any) => (
@@ -25,10 +26,11 @@ const meta = {
        </div>
    ),
    args: {
-        courseDeptAndInstr: exampleCourse.department,
-        className: exampleCourse.number,
+        department: exampleCourse.department,
+        courseNumber: exampleCourse.number,
+        instructorLastName: exampleCourse.instructors[0].lastName,
        status: exampleCourse.status,
-        timeAndLocation: exampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),
+        meetingTime: exampleCourse.schedule.meetings[0].getTimeString({ separator: '-' }),

        colors: getCourseColors('emerald', 500),
    },
@@ -44,69 +46,22 @@ 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({
-                //     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/',
-                // });
-                
+                course={new Course({ ...exampleCourse, status: Status.OPEN })}
                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,7 +17,6 @@ const meta = {
    argTypes: {
        dummySchedules: { control: 'object' },
        dummyActiveIndex: { control: 'number' },
-        
    },
    render: (args: any) => (
        <div>
@@ -65,7 +64,6 @@ const schedules = [
            }),
        ],
        name: 'Main Schedule',
-        hours: 0, // Add the missing 'hours' property
    }),
    new UserSchedule({
        courses: [
@@ -133,7 +131,6 @@ const schedules = [
            }),
        ],
        name: 'Backup #3',
-        hours: 0, // Add the missing 'hours' property
    }),
 ];

@@ -141,6 +138,5 @@ export const Default: Story = {
    args: {
        dummySchedules: schedules,
        dummyActiveIndex: 0,
-
    },
 };
--- a/src/stories/components/ConflictsWithWarning.stories.tsx
+++ b/src/stories/components/ConflictsWithWarning.stories.tsx
@@ -1,5 +1,96 @@
 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',
@@ -9,8 +100,10 @@ const meta = {
    },
    tags: ['autodocs'],
    argTypes: {
-        ConflictingCourse: { control: 'string' },
-        SectionNumber: { control: 'string' },
+        conflicts: { control: 'object' },
+    },
+    args: {
+        conflicts: [ExampleCourse, ExampleCourse2],
    },
 } satisfies Meta<typeof ConflictsWithWarning>;
 export default meta;
@@ -19,7 +112,6 @@ type Story = StoryObj<typeof meta>;

 export const Default: Story = {
    args: {
-        ConflictingCourse: 'BVO 311C',
-        SectionNumber: '47280',
+        conflicts: [ExampleCourse, ExampleCourse2],
    },
 };
--- a/src/stories/components/Dropdown.stories.tsx
+++ b/src/stories/components/Dropdown.stories.tsx
@@ -1,157 +0,0 @@
-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;

-export const generateCourses = count => {
+const generateCourses = count => {
    const courses = [];

    for (let i = 0; i < count; i++) {
@@ -64,7 +64,7 @@ export const generateCourses = count => {
 const exampleCourses = generateCourses(numberOfCourses);
 const generateCourseBlocks = (exampleCourses, colors) =>
    exampleCourses.map((course, i) => <PopupCourseBlock key={course.uniqueId} course={course} colors={colors[i]} />);
-export const exampleCourseBlocks = generateCourseBlocks(exampleCourses, test_colors);
+const 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
@@ -1,23 +0,0 @@
-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,7 +57,6 @@ const exampleCourse: Course = new Course({
 const exampleSchedule: UserSchedule = new UserSchedule({
    courses: [exampleCourse],
    name: 'Example Schedule',
-    hours: 0,
 });

 const meta = {
@@ -97,7 +96,6 @@ 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,99 +1,24 @@
+import { background } from '@shared/messages';
 import React from 'react';
-import { FaCalendarAlt, FaCog, FaRedo } from 'react-icons/fa'; // Added FaRedo for the refresh icon
-import { StatusIcon } from '@shared/util/icons';
+import useSchedules from '../hooks/useSchedules';
+import { Button } from './common/Button/Button';
 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 courses = generateCourses(5); 
+    const [activeSchedule, schedules] = useSchedules();

+    // TODO: Add a button to to switch the active schedule

-   // 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>
-);
+    return (
+        <ExtensionRoot>
+            <Button
+                onClick={() => {
+                    if (!activeSchedule) return;
+                    background.clearCourses({ scheduleName: activeSchedule?.name });
+                }}
+            >
+                Clear Courses
+            </Button>
+        </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 html2canvas from 'html2canvas';
+import * as htmlToImage from 'html-to-image';
 import { DAY_MAP } from 'src/shared/types/CourseMeeting';
 import { CalendarGridCourse } from 'src/views/hooks/useFlattenedCourseSchedule';
 import calIcon from 'src/assets/icons/cal.svg';
@@ -38,15 +38,36 @@ function CalendarGrid({ courseCells, saturdayClass }: React.PropsWithChildren<Pr
    const calendarRef = useRef(null); // Create a ref for the calendar grid

    const saveAsPNG = () => {
-        if (calendarRef.current) {
-            html2canvas(calendarRef.current).then(canvas => {
-                // Create an a element to trigger download
-                const a = document.createElement('a');
-                a.href = canvas.toDataURL('image/png');
-                a.download = 'calendar.png';
-                a.click();
+        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);
            });
-        }
    };

    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, { useState } from 'react';
+import React, { useEffect, useState } from 'react';
 import AddSchedule from '~icons/material-symbols/add';
 import List from '../List/List';
 import ScheduleListItem from '../ScheduleListItem/ScheduleListItem';
@@ -15,8 +15,13 @@ export function CalendarSchedules(props: Props) {
    const [activeScheduleIndex, setActiveScheduleIndex] = useState(props.dummyActiveIndex || 0);
    const [schedules, setSchedules] = useState(props.dummySchedules || []);

-    const scheduleComponents = schedules.map((schedule, index) => (
-            <ScheduleListItem active={index === activeScheduleIndex} name={schedule.name} />
+    let scheduleComponents = schedules.map((schedule, index) => (
+        <div onClick={() => setActiveScheduleIndex(index)}>
+            <ScheduleListItem
+                active={index === activeScheduleIndex}
+                name={schedule.name}
+            />
+        </div>
    ));

    return (
@@ -30,7 +35,7 @@ export function CalendarSchedules(props: Props) {
                </div>
            </div>

-            <List gap={10} draggableElements={scheduleComponents} itemHeight={30} listHeight={30} listWidth={240} />
+            <List gap={10} draggableElements={scheduleComponents} itemHeight={30} listHeight={0} listWidth={240} />
        </div>
    );
 }
--- a/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx
+++ b/src/views/components/common/ConflictsWithWarning/ConflictsWithWarning.tsx
@@ -1,12 +1,14 @@
 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 {
-    ConflictingCourse: string;
-    SectionNumber: string;
+    className?: string;
+    conflicts: Course[];
 }

 /**
@@ -15,29 +17,21 @@ export interface ConflictsWithWarningProps {
 *
 * @param props ConflictsWithWarningProps
 */
-export default function ConflictsWithWarning( { ConflictingCourse, SectionNumber }: ConflictsWithWarningProps): JSX.Element {
-    const UniqueCourseConflictText = `${ConflictingCourse} (${SectionNumber})`;
-
-    return (
-        <div className="min-w-21 w-21 flex flex-col items-start gap-2.5 rounded bg-[#AF2E2D] p-2.5">
-            <ConflictsWithoutWarningText>
-               Conflicts With:
-            </ConflictsWithoutWarningText>
-            <ConflictsWithoutWarningText>
-                {UniqueCourseConflictText}
-            </ConflictsWithoutWarningText>
-        </div>
-    );
-}
-
-function ConflictsWithoutWarningText( {children}: {children: string} ) {
+export default function ConflictsWithWarning({ className, conflicts }: ConflictsWithWarningProps): JSX.Element {
    return (
        <Text
            variant='mini'
-            as='span'
-            className='text-white'
+            className={clsx(
+                className,
+                'min-w-21 w-21 flex flex-col items-start gap-2.5 rounded bg-[#AF2E2D] p-2.5 text-white'
+            )}
        >
-            {children}
+            <div>Conflicts With:</div>
+            {conflicts.map(course => (
+                <div>
+                    {`${course.department} ${course.number} (${course.uniqueId})`}
+                </div>
+            ))}
        </Text>
    );
 }
--- a/src/views/components/common/Dropdown/Dropdown.tsx
+++ b/src/views/components/common/Dropdown/Dropdown.tsx
@@ -1,110 +0,0 @@
-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,38 +1,36 @@
 import clsx from 'clsx';
 import React from 'react';
-import DragIndicatorIcon from '~icons/material-symbols/drag-indicator';
+import DropdownDrag 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'>
-                    <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>
+                    <DropdownDrag className='h-6 w-6 cursor-move text-zinc-300 btn-transition -ml-1.5 hover:text-zinc-400' />
                    <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,43 +83,48 @@ export default function CourseButtons({ course, activeSchedule }: Props) {
            <Button
                onClick={openRateMyProfessorURL}
                disabled={!course.instructors.length}
-                variant='filled'
+                variant='primary'
                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='filled'
+                variant='secondary'
                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='filled'
+                variant='tertiary'
                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='filled'
+                variant={isCourseSaved ? 'danger' : 'success'}
                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, element.classList]);
+    }, [activeSchedule, course, element.classList]);

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

    return ReactDOM.createPortal(
        <>
-            <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>
-            )}
+            <Button
+                icon={AddIcon}
+                className={styles.rowButton}
+                color='ut-burntorange'
+                onClick={onClick}
+                variant='single'
+            />
+            {conflicts.length > 0 && <ConflictsWithWarning className={styles.conflictTooltip} conflicts={conflicts} />}
        </>,
        container
    );
Author	SHA1	Message	Date
DhruvArora-03	70c75ff481	add button to the rows, use new ConflictsWithWarning component	2024-02-19 11:29:24 -06:00
DhruvArora-03	7f76af7ab3	fix ConflictsWithWarning	2024-02-19 11:28:33 -06:00
DhruvArora-03	a538f20aad	Merge remote-tracking branch 'origin/hackathon' into feat-conflict-row	2024-02-19 11:11:37 -06:00
Lukas Zenick	0acd0b722c	html2canvas -> htmlToImage also fixed derick's bugs	2024-02-18 12:46:35 -06:00
Derek Chen	ae32d0b645	feat: Derek/export png (#95 ) * Attempting to use more lightweight version * Did not work. * This is not what I wanted * The image saves correctly. Needs padding * Padding !! * Removed downloadjs * Padding more	2024-02-17 19:09:41 -06:00
DhruvArora-03	f214ed7c01	Merge remote-tracking branch 'origin/hackathon' into feat-conflict-row	2024-02-17 18:21:39 -06:00