From bfb0ae7a89d228f70699d5bcf0d141e42b78f8ca Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Fri, 20 Sep 2024 08:28:52 -0400
Subject: [PATCH] refactor: remove tailwind gray styles and update zoom
 controls

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/components/AllRead.tsx                    |   2 +-
 src/components/NotificationRow.tsx            |   2 +-
 .../AccountNotifications.test.tsx.snap        |  20 +-
 .../__snapshots__/AllRead.test.tsx.snap       |   4 +-
 .../NotificationRow.test.tsx.snap             |   8 +-
 .../settings/AppearanceSettings.tsx           | 100 ++++----
 src/components/settings/SettingsFooter.tsx    |   2 +-
 src/electron/index.html                       |  20 +-
 src/routes/Accounts.tsx                       |   2 +-
 src/routes/Filters.tsx                        |   2 +-
 .../__snapshots__/Accounts.test.tsx.snap      |   2 +-
 .../__snapshots__/Filters.test.tsx.snap       |   4 +-
 .../__snapshots__/Settings.test.tsx.snap      | 234 +++++++++---------
 tailwind.config.js                            |   7 -
 14 files changed, 195 insertions(+), 214 deletions(-)

diff --git a/src/components/AllRead.tsx b/src/components/AllRead.tsx
index 206c31c..5d785cc 100644
--- a/src/components/AllRead.tsx
+++ b/src/components/AllRead.tsx
@@ -12,7 +12,7 @@ export const AllRead: FC = () => {
   );
 
   return (
-    <div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white">
+    <div className="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black">
       <div className="mt-2 mb-5 text-5xl">
         <EmojiText text={emoji} />
       </div>
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index e1802a9..ddbf864 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -55,7 +55,7 @@ export const NotificationRow: FC<INotificationRow> = ({
     <div
       id={notification.id}
       className={cn(
-        'group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker',
+        'group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100',
         (isAnimated || animateExit) &&
           'translate-x-full opacity-0 transition duration-[350ms] ease-in-out',
         (isRead || showAsRead) && Opacity.READ,
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index dc516f8..3ceb442 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -1170,7 +1170,7 @@ exports[`components/AccountNotifications.tsx account view types should render it
           </div>
         </div>
         <div
-          class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
+          class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black"
         >
           <div
             class="mt-2 mb-5 text-5xl"
@@ -1389,7 +1389,7 @@ exports[`components/AccountNotifications.tsx account view types should render it
         </div>
       </div>
       <div
-        class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
+        class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black"
       >
         <div
           class="mt-2 mb-5 text-5xl"
@@ -1665,7 +1665,7 @@ exports[`components/AccountNotifications.tsx account view types should render it
           </div>
         </div>
         <div
-          class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+          class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100"
           id="138661096"
         >
           <div
@@ -1852,7 +1852,7 @@ exports[`components/AccountNotifications.tsx account view types should render it
           </div>
         </div>
         <div
-          class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+          class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100"
           id="148827438"
         >
           <div
@@ -2237,7 +2237,7 @@ exports[`components/AccountNotifications.tsx account view types should render it
         </div>
       </div>
       <div
-        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100"
         id="138661096"
       >
         <div
@@ -2424,7 +2424,7 @@ exports[`components/AccountNotifications.tsx account view types should render it
         </div>
       </div>
       <div
-        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100"
         id="148827438"
       >
         <div
@@ -3063,7 +3063,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
           </div>
         </div>
         <div
-          class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+          class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100"
           id="138661096"
         >
           <div
@@ -3250,7 +3250,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
           </div>
         </div>
         <div
-          class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+          class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100"
           id="148827438"
         >
           <div
@@ -3635,7 +3635,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
         </div>
       </div>
       <div
-        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100"
         id="138661096"
       >
         <div
@@ -3822,7 +3822,7 @@ exports[`components/AccountNotifications.tsx should toggle account notifications
         </div>
       </div>
       <div
-        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100"
         id="148827438"
       >
         <div
diff --git a/src/components/__snapshots__/AllRead.test.tsx.snap b/src/components/__snapshots__/AllRead.test.tsx.snap
index f2b294a..bf98182 100644
--- a/src/components/__snapshots__/AllRead.test.tsx.snap
+++ b/src/components/__snapshots__/AllRead.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/AllRead.tsx should render itself & its children 1`] = `
   "baseElement": <body>
     <div>
       <div
-        class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
+        class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black"
       >
         <div
           class="mt-2 mb-5 text-5xl"
@@ -30,7 +30,7 @@ exports[`components/AllRead.tsx should render itself & its children 1`] = `
   </body>,
   "container": <div>
     <div
-      class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black dark:bg-gray-dark dark:text-white"
+      class="flex flex-1 flex-col items-center justify-center bg-white p-4 text-black"
     >
       <div
         class="mt-2 mb-5 text-5xl"
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index 74eafed..22b938d 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -6,7 +6,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
   "baseElement": <body>
     <div>
       <div
-        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100"
         id="138661096"
       >
         <div
@@ -196,7 +196,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
   </body>,
   "container": <div>
     <div
-      class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+      class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100"
       id="138661096"
     >
       <div
@@ -443,7 +443,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
   "baseElement": <body>
     <div>
       <div
-        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+        class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100"
         id="138661096"
       >
         <div
@@ -633,7 +633,7 @@ exports[`components/NotificationRow.tsx should render itself & its children - gr
   </body>,
   "container": <div>
     <div
-      class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100 dark:border-gray-darker dark:bg-gray-dark dark:text-white dark:hover:bg-gray-darker"
+      class="group flex border-b border-gray-100 bg-white px-3 py-2 hover:bg-gray-100"
       id="138661096"
     >
       <div
diff --git a/src/components/settings/AppearanceSettings.tsx b/src/components/settings/AppearanceSettings.tsx
index 173e7c4..a61462b 100644
--- a/src/components/settings/AppearanceSettings.tsx
+++ b/src/components/settings/AppearanceSettings.tsx
@@ -1,7 +1,9 @@
 import { ipcRenderer, webFrame } from 'electron';
 import { type FC, useContext, useEffect, useState } from 'react';
 
+import Badge from '@atlaskit/badge';
 import { IconButton } from '@atlaskit/button/new';
+import Heading from '@atlaskit/heading';
 import MediaServicesZoomInIcon from '@atlaskit/icon/glyph/media-services/zoom-in';
 import MediaServicesZoomOutIcon from '@atlaskit/icon/glyph/media-services/zoom-out';
 import SelectClearIcon from '@atlaskit/icon/glyph/select-clear';
@@ -10,7 +12,6 @@ import { RadioGroup } from '@atlaskit/radio';
 import type { OptionsPropType } from '@atlaskit/radio/types';
 import Tooltip from '@atlaskit/tooltip';
 
-import Heading from '@atlaskit/heading';
 import { AppContext } from '../../context/App';
 import { Theme } from '../../types';
 import { setTheme } from '../../utils/theme';
@@ -62,7 +63,7 @@ export const AppearanceSettings: FC = () => {
           options={themeOptions}
           defaultValue={settings.theme}
           value={settings.theme}
-          isDisabled={true}
+          // isDisabled={true}
           onChange={(evt) => {
             updateSetting('theme', evt.target.value as Theme);
           }}
@@ -70,53 +71,56 @@ export const AppearanceSettings: FC = () => {
         />
       </Inline>
 
-      <div className="flex items-center mt-3 mb-2 text-sm">
-        <label
-          htmlFor="Zoom"
-          className="mr-3 content-center font-medium text-gray-700 dark:text-gray-200"
-        >
+      <Inline space="space.100">
+        <Text id="theme-label" weight="medium">
           Zoom:
-        </label>
-        <Tooltip content="Zoom Out" position="bottom">
-          <IconButton
-            label="Zoom Out"
-            icon={MediaServicesZoomOutIcon}
-            shape="circle"
-            spacing="compact"
-            onClick={() =>
-              zoomPercentage > 0 &&
-              webFrame.setZoomLevel(zoomPercentageToLevel(zoomPercentage - 10))
-            }
-            testId="settings-zoom-out"
-          />
-        </Tooltip>
-        <span className="flex w-16 h-5 items-center justify-center rounded-none border border-gray-300 bg-transparent text-xs text-gray-700 dark:text-gray-200">
-          {zoomPercentage.toFixed(0)}%
-        </span>
-        <Tooltip content="Zoom In" position="bottom">
-          <IconButton
-            label="Zoom In"
-            icon={MediaServicesZoomInIcon}
-            shape="circle"
-            spacing="compact"
-            onClick={() =>
-              zoomPercentage < 120 &&
-              webFrame.setZoomLevel(zoomPercentageToLevel(zoomPercentage + 10))
-            }
-            testId="settings-zoom-in"
-          />
-        </Tooltip>
-        <Tooltip content="Reset Zoom" position="bottom">
-          <IconButton
-            label="Reset Zoom"
-            icon={SelectClearIcon}
-            shape="circle"
-            spacing="compact"
-            onClick={() => webFrame.setZoomLevel(0)}
-            testId="settings-zoom-reset"
-          />
-        </Tooltip>
-      </div>
+        </Text>
+        <Inline alignBlock="center">
+          <Tooltip content="Zoom Out" position="bottom">
+            <IconButton
+              label="Zoom Out"
+              icon={MediaServicesZoomOutIcon}
+              shape="circle"
+              spacing="compact"
+              onClick={() =>
+                zoomPercentage > 0 &&
+                webFrame.setZoomLevel(
+                  zoomPercentageToLevel(zoomPercentage - 10),
+                )
+              }
+              testId="settings-zoom-out"
+            />
+          </Tooltip>
+          <Badge max={false}>{zoomPercentage.toFixed(0)}%</Badge>
+          <Tooltip content="Zoom In" position="bottom">
+            <IconButton
+              label="Zoom In"
+              icon={MediaServicesZoomInIcon}
+              shape="circle"
+              spacing="compact"
+              onClick={() =>
+                zoomPercentage < 120 &&
+                webFrame.setZoomLevel(
+                  zoomPercentageToLevel(zoomPercentage + 10),
+                )
+              }
+              testId="settings-zoom-in"
+            />
+          </Tooltip>
+          <Tooltip content="Reset Zoom" position="bottom">
+            <IconButton
+              label="Reset Zoom"
+              icon={(iconProps) => (
+                <SelectClearIcon {...iconProps} primaryColor="red" />
+              )}
+              shape="circle"
+              spacing="compact"
+              onClick={() => webFrame.setZoomLevel(0)}
+              testId="settings-zoom-reset"
+            />
+          </Tooltip>
+        </Inline>
+      </Inline>
     </Stack>
   );
 };
diff --git a/src/components/settings/SettingsFooter.tsx b/src/components/settings/SettingsFooter.tsx
index f2b6a9a..4c52edc 100644
--- a/src/components/settings/SettingsFooter.tsx
+++ b/src/components/settings/SettingsFooter.tsx
@@ -26,7 +26,7 @@ export const SettingsFooter: FC = () => {
   }, []);
 
   return (
-    <div className="text-sm  px-2 bg-gray-200 dark:bg-gray-darker">
+    <div className="text-sm  px-2 bg-gray-200">
       <Box padding="space.050">
         <Stack>
           <Inline grow="fill" spread="space-between">
diff --git a/src/electron/index.html b/src/electron/index.html
index 7126ab1..57c1c91 100644
--- a/src/electron/index.html
+++ b/src/electron/index.html
@@ -9,10 +9,7 @@
   </head>
 
   <body>
-    <div
-      id="atlassify"
-      class="bg-white text-black dark:bg-gray-dark dark:text-white"
-    ></div>
+    <div id="atlassify"></div>
   </body>
 
   <script src="./../../build/js/app.js"></script>
@@ -42,21 +39,6 @@
       border-radius: 10px;
     }
 
-    html.dark::-webkit-scrollbar-track,
-    html.dark div.flex-grow::-webkit-scrollbar-track {
-      background-color: #090e15;
-    }
-
-    html.dark::-webkit-scrollbar-thumb,
-    html.dark div.flex-grow::-webkit-scrollbar-thumb {
-      background-color: #24292e;
-    }
-
-    html.dark::-webkit-scrollbar-thumb:hover,
-    html.dark div.flex-grow::-webkit-scrollbar-thumb:hover {
-      background-color: #3a3f44;
-    }
-
     body {
       font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", "Roboto",
         "Oxygen", "Ubuntu", "Cantarell", "Fira Sans", "Droid Sans",
diff --git a/src/routes/Accounts.tsx b/src/routes/Accounts.tsx
index 41a120c..f4099ee 100644
--- a/src/routes/Accounts.tsx
+++ b/src/routes/Accounts.tsx
@@ -129,7 +129,7 @@ export const AccountsRoute: FC = () => {
         </div>
       </div>
 
-      <div className="text-sm px-8 bg-gray-200 dark:bg-gray-darker">
+      <div className="text-sm px-8 bg-gray-200">
         <Box padding="space.050">
           <Flex justifyContent="end">
             <Tooltip content="Add new account" position="left">
diff --git a/src/routes/Filters.tsx b/src/routes/Filters.tsx
index adfc463..b841c7f 100644
--- a/src/routes/Filters.tsx
+++ b/src/routes/Filters.tsx
@@ -182,7 +182,7 @@ export const FiltersRoute: FC = () => {
         </Stack>
       </div>
 
-      <div className="text-sm bg-gray-200 dark:bg-gray-darker">
+      <div className="text-sm bg-gray-200">
         <Box padding="space.100">
           <Flex justifyContent="end">
             <Tooltip content="Clear all filters" position="left">
diff --git a/src/routes/__snapshots__/Accounts.test.tsx.snap b/src/routes/__snapshots__/Accounts.test.tsx.snap
index 6566866..aefa818 100644
--- a/src/routes/__snapshots__/Accounts.test.tsx.snap
+++ b/src/routes/__snapshots__/Accounts.test.tsx.snap
@@ -262,7 +262,7 @@ exports[`routes/Accounts.tsx General should render itself & its children 1`] = `
     </div>
   </div>
   <div
-    class="text-sm px-8 bg-gray-200 dark:bg-gray-darker"
+    class="text-sm px-8 bg-gray-200"
   >
     <div
       class="css-1s54rt6"
diff --git a/src/routes/__snapshots__/Filters.test.tsx.snap b/src/routes/__snapshots__/Filters.test.tsx.snap
index 8a9a4ee..e0d5e83 100644
--- a/src/routes/__snapshots__/Filters.test.tsx.snap
+++ b/src/routes/__snapshots__/Filters.test.tsx.snap
@@ -1029,7 +1029,7 @@ exports[`routes/Filters.tsx General should render itself & its children 1`] = `
     </div>
   </div>
   <div
-    class="text-sm bg-gray-200 dark:bg-gray-darker"
+    class="text-sm bg-gray-200"
   >
     <div
       class="css-am7nxq"
@@ -2103,7 +2103,7 @@ exports[`routes/Filters.tsx filters product filters should filter by product - e
     </div>
   </div>
   <div
-    class="text-sm bg-gray-200 dark:bg-gray-darker"
+    class="text-sm bg-gray-200"
   >
     <div
       class="css-am7nxq"
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index f0c27bd..98a3f8b 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -86,11 +86,9 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
           >
             <label
               class="css-exvs2c"
-              data-disabled="true"
             >
               <input
                 class="css-t4vzni"
-                disabled=""
                 name="theme"
                 tabindex="0"
                 type="radio"
@@ -104,12 +102,10 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
             </label>
             <label
               class="css-exvs2c"
-              data-disabled="true"
             >
               <input
                 checked=""
                 class="css-t4vzni"
-                disabled=""
                 name="theme"
                 tabindex="0"
                 type="radio"
@@ -123,11 +119,9 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
             </label>
             <label
               class="css-exvs2c"
-              data-disabled="true"
             >
               <input
                 class="css-t4vzni"
-                disabled=""
                 name="theme"
                 tabindex="0"
                 type="radio"
@@ -142,142 +136,150 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
           </div>
         </div>
         <div
-          class="flex items-center mt-3 mb-2 text-sm"
+          class="css-gokkc4"
         >
-          <label
-            class="mr-3 content-center font-medium text-gray-700 dark:text-gray-200"
-            for="Zoom"
+          <span
+            class="css-19g3t4k"
+            id="theme-label"
           >
             Zoom:
-          </label>
+          </span>
           <div
-            role="presentation"
+            class="css-mrgpd6"
           >
-            <button
-              class=" css-1h9zni"
-              data-testid="settings-zoom-out"
-              type="button"
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-1h9zni"
+                data-testid="settings-zoom-out"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-snhnyn"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-snhnyn"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <path
-                      d="m16.436 15.085 3.94 4.01a1 1 0 0 1-1.425 1.402l-3.938-4.006a7.5 7.5 0 1 1 1.423-1.406M13.5 11.5h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2"
-                      fill="currentcolor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Zoom Out
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
+                    >
+                      <path
+                        d="m16.436 15.085 3.94 4.01a1 1 0 0 1-1.425 1.402l-3.938-4.006a7.5 7.5 0 1 1 1.423-1.406M13.5 11.5h-6a1 1 0 0 1 0-2h6a1 1 0 0 1 0 2"
+                        fill="currentcolor"
+                        fill-rule="evenodd"
+                      />
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Zoom Out
+                  </span>
                 </span>
-              </span>
-            </button>
-          </div>
-          <span
-            class="flex w-16 h-5 items-center justify-center rounded-none border border-gray-300 bg-transparent text-xs text-gray-700 dark:text-gray-200"
-          >
-            100
-            %
-          </span>
-          <div
-            role="presentation"
-          >
-            <button
-              class=" css-1h9zni"
-              data-testid="settings-zoom-in"
-              type="button"
+              </button>
+            </div>
+            <span
+              class="css-1wkl091"
             >
               <span
-                class=" css-1spmf3f"
+                class="css-f9etm4"
               >
-                <span
-                  aria-hidden="true"
-                  class="css-snhnyn"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
-                >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
-                  >
-                    <path
-                      d="m16.436 15.085 3.94 4.01a1 1 0 0 1-1.425 1.402l-3.938-4.006a7.5 7.5 0 1 1 1.423-1.406M13.5 11.5a1 1 0 0 0 0-2h-2v-2a1 1 0 0 0-2 0v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2z"
-                      fill="currentcolor"
-                      fill-rule="evenodd"
-                    />
-                  </svg>
-                </span>
-                <span
-                  class="css-b5o75w"
-                >
-                  Zoom In
-                </span>
+                100
+                %
               </span>
-            </button>
-          </div>
-          <div
-            role="presentation"
-          >
-            <button
-              class=" css-1h9zni"
-              data-testid="settings-zoom-reset"
-              type="button"
+            </span>
+            <div
+              role="presentation"
             >
-              <span
-                class=" css-1spmf3f"
+              <button
+                class=" css-1h9zni"
+                data-testid="settings-zoom-in"
+                type="button"
               >
                 <span
-                  aria-hidden="true"
-                  class="css-snhnyn"
-                  data-vc="icon-undefined"
-                  style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  class=" css-1spmf3f"
                 >
-                  <svg
-                    height="24"
-                    role="presentation"
-                    viewBox="0 0 24 24"
-                    width="24"
+                  <span
+                    aria-hidden="true"
+                    class="css-snhnyn"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: currentColor; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
                   >
-                    <g
-                      fill-rule="evenodd"
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
                     >
-                      <circle
-                        cx="12"
-                        cy="12"
-                        fill="currentcolor"
-                        r="9"
-                      />
                       <path
-                        d="M16.155 14.493a1.174 1.174 0 1 1-1.662 1.663L12 13.662l-2.494 2.494a1.17 1.17 0 0 1-1.662 0 1.176 1.176 0 0 1 0-1.663L10.337 12 7.844 9.507a1.176 1.176 0 0 1 1.662-1.662L12 10.338l2.493-2.493a1.174 1.174 0 1 1 1.662 1.662L13.662 12z"
-                        fill="inherit"
+                        d="m16.436 15.085 3.94 4.01a1 1 0 0 1-1.425 1.402l-3.938-4.006a7.5 7.5 0 1 1 1.423-1.406M13.5 11.5a1 1 0 0 0 0-2h-2v-2a1 1 0 0 0-2 0v2h-2a1 1 0 0 0 0 2h2v2a1 1 0 0 0 2 0v-2z"
+                        fill="currentcolor"
+                        fill-rule="evenodd"
                       />
-                    </g>
-                  </svg>
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Zoom In
+                  </span>
                 </span>
+              </button>
+            </div>
+            <div
+              role="presentation"
+            >
+              <button
+                class=" css-1h9zni"
+                data-testid="settings-zoom-reset"
+                type="button"
+              >
                 <span
-                  class="css-b5o75w"
+                  class=" css-1spmf3f"
                 >
-                  Reset Zoom
+                  <span
+                    aria-hidden="true"
+                    class="css-snhnyn"
+                    data-vc="icon-undefined"
+                    style="--icon-primary-color: red; --icon-secondary-color: var(--ds-surface, #FFFFFF);"
+                  >
+                    <svg
+                      height="24"
+                      role="presentation"
+                      viewBox="0 0 24 24"
+                      width="24"
+                    >
+                      <g
+                        fill-rule="evenodd"
+                      >
+                        <circle
+                          cx="12"
+                          cy="12"
+                          fill="currentcolor"
+                          r="9"
+                        />
+                        <path
+                          d="M16.155 14.493a1.174 1.174 0 1 1-1.662 1.663L12 13.662l-2.494 2.494a1.17 1.17 0 0 1-1.662 0 1.176 1.176 0 0 1 0-1.663L10.337 12 7.844 9.507a1.176 1.176 0 0 1 1.662-1.662L12 10.338l2.493-2.493a1.174 1.174 0 1 1 1.662 1.662L13.662 12z"
+                          fill="inherit"
+                        />
+                      </g>
+                    </svg>
+                  </span>
+                  <span
+                    class="css-b5o75w"
+                  >
+                    Reset Zoom
+                  </span>
                 </span>
-              </span>
-            </button>
+              </button>
+            </div>
           </div>
         </div>
       </div>
@@ -891,7 +893,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
     </div>
   </div>
   <div
-    class="text-sm  px-2 bg-gray-200 dark:bg-gray-darker"
+    class="text-sm  px-2 bg-gray-200"
   >
     <div
       class="css-1s54rt6"
diff --git a/tailwind.config.js b/tailwind.config.js
index 78b5587..1be00f8 100644
--- a/tailwind.config.js
+++ b/tailwind.config.js
@@ -9,13 +9,6 @@ export default {
       },
       colors: {
         sidebar: '#388BFF',
-
-        // TODO - Update to use color palette - https://atlassian.design/foundations/color-new/color-palette-new/
-        gray: {
-          dark: '#161b22',
-          darker: '#090E15',
-          darkest: '#000209',
-        },
       },
     },
   },