feat: enable theme selection

Signed-off-by: Adam Setch <adam.setch@outlook.com>
setchy · Oct 22, 2024 · 08555b8 · 08555b8
1 parent 5c10ab0
commit 08555b8
Show file tree

Hide file tree

Showing 3 changed files with 45 additions and 56 deletions.
diff --git a/src/renderer/components/Sidebar.tsx b/src/renderer/components/Sidebar.tsx
@@ -12,17 +12,14 @@ import { AtlasIcon } from '@atlaskit/logo';
 import { Box, Stack } from '@atlaskit/primitives';
 import Spinner from '@atlaskit/spinner';
 import Toggle from '@atlaskit/toggle';
-import { token } from '@atlaskit/tokens';
 import Tooltip from '@atlaskit/tooltip';
 
 import { colors } from '../../../tailwind.config';
 import { AppContext } from '../context/App';
-import { Theme } from '../types';
 import { quitApp } from '../utils/comms';
 import { hasFiltersSet } from '../utils/filters';
 import { openMyNotifications } from '../utils/links';
 import { getNotificationCount } from '../utils/notifications/notifications';
-import { getTheme } from '../utils/theme';
 
 export const Sidebar: FC = () => {
   const navigate = useNavigate();
@@ -76,16 +73,9 @@ export const Sidebar: FC = () => {
   }, [settings]);
 
   return (
-    <div className="fixed left-12 -ml-12 flex h-full w-12 flex-col overflow-y-auto ">
+    <div className="fixed left-12 -ml-12 flex h-full w-12 flex-col overflow-y-auto bg-sidebar dark:bg-dark-sidebar">
       <div className="flex flex-1 flex-col items-center">
-        <Box
-          paddingBlockStart="space.200"
-          backgroundColor={
-            getTheme() === Theme.DARK
-              ? 'color.background.accent.blue.subtlest'
-              : 'color.background.accent.blue.subtlest.hovered'
-          }
-        >
+        <Box paddingBlockStart="space.200">
           <Stack alignInline="center" space="space.100">
             <Tooltip content="Home" position="right">
               <IconButton
@@ -114,7 +104,7 @@ export const Sidebar: FC = () => {
                   <NotificationIcon
                     {...iconProps}
                     size="small"
-                    primaryColor={token('color.icon.inverse')}
+                    primaryColor="white"
                   />
                 )}
                 appearance={notificationsCount > 0 ? 'primary' : 'subtle'}
@@ -156,7 +146,7 @@ export const Sidebar: FC = () => {
                       <ListIcon
                         label="groupByProduct"
                         size="small"
-                        primaryColor={token('color.icon.inverse')}
+                        primaryColor="white"
                       />
                     )}
                     onClick={() => {
@@ -183,7 +173,7 @@ export const Sidebar: FC = () => {
                       <FilterIcon
                         {...iconProps}
                         size="small"
-                        primaryColor={token('color.icon.inverse')}
+                        primaryColor="white"
                       />
                     )}
                     appearance={hasFilters ? 'discovery' : 'subtle'}
@@ -199,14 +189,7 @@ export const Sidebar: FC = () => {
         </Box>
       </div>
 
-      <Box
-        paddingBlockEnd="space.200"
-        backgroundColor={
-          getTheme() === Theme.DARK
-            ? 'color.background.accent.gray.subtlest'
-            : 'color.background.accent.blue.subtle'
-        }
-      >
+      <Box paddingBlockEnd="space.200">
         <Stack alignInline="center" space="space.150">
           {isLoggedIn ? (
             <Fragment>
@@ -224,7 +207,7 @@ export const Sidebar: FC = () => {
                       <RefreshIcon
                         {...iconProps}
                         size="medium"
-                        primaryColor={token('color.icon.inverse')}
+                        primaryColor="white"
                       />
                     )
                   }
@@ -240,7 +223,11 @@ export const Sidebar: FC = () => {
                 <IconButton
                   label="Settings"
                   icon={(iconProps) => (
-                    <SettingsIcon {...iconProps} size="medium" />
+                    <SettingsIcon
+                      {...iconProps}
+                      size="medium"
+                      primaryColor="white"
+                    />
                   )}
                   appearance="subtle"
                   shape="circle"
@@ -257,7 +244,7 @@ export const Sidebar: FC = () => {
                   <CrossCircleIcon
                     {...iconProps}
                     size="medium"
-                    primaryColor={token('color.icon.inverse')}
+                    primaryColor="white"
                     secondaryColor={colors.sidebar}
                   />
                 )}

diff --git a/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap b/src/renderer/components/__snapshots__/Sidebar.test.tsx.snap
diff --git a/tailwind.config.ts b/tailwind.config.ts
@@ -1,8 +1,10 @@
-import { B200 } from '@atlaskit/theme/colors';
+import { B200, N800 } from '@atlaskit/theme/colors';
+
 import type { Config } from 'tailwindcss';
 
 export const colors = {
   sidebar: B200,
+  'dark-sidebar': N800,
 };
 
 const config: Config = {