refactor: remove tailwind gray styles and update zoom controls

Signed-off-by: Adam Setch <[email protected]>

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>

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,

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,61 +63,64 @@ 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);
           }}
           aria-labelledby="theme-label"
         />
       </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>
   );
 };

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">

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",

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">

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">