refactor: replace some sx uses

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

Author: setchy

src/renderer/components/Sidebar.tsx

@@ -68,11 +68,13 @@ export const Sidebar: FC = () => {
     return getNotificationCount(notifications);
   }, [notifications]);
 
+  const sidebarButtonStyle = { color: 'white' };
+
   return (
     <Stack
       direction="vertical"
       justify="space-between"
-      className="fixed left-12 -ml-12 w-12 h-full bg-gitify-sidebar"
+      className="fixed left-12 -ml-12 w-12 h-full bg-gitify-sidebar text-white"
     >
       <Stack
         direction="vertical"
@@ -102,10 +104,9 @@ export const Sidebar: FC = () => {
           tooltipDirection="e"
           onClick={() => openGitHubNotifications(primaryAccountHostname)}
           data-testid="sidebar-notifications"
-          sx={{ color: 'white' }}
+          sx={sidebarButtonStyle}
         />
 
-        {/* TODO - explore https://primer.style/components/selectpanel/react/alpha/ for a better UI for filters */}
         {isLoggedIn && (
           <IconButton
             icon={FilterIcon}
@@ -117,7 +118,7 @@ export const Sidebar: FC = () => {
             tooltipDirection="e"
             onClick={() => toggleFilters()}
             data-testid="sidebar-filter-notifications"
-            sx={{ color: 'white' }}
+            sx={sidebarButtonStyle}
           />
         )}
 
@@ -130,7 +131,7 @@ export const Sidebar: FC = () => {
           tooltipDirection="e"
           onClick={() => openGitHubIssues(primaryAccountHostname)}
           data-testid="sidebar-my-issues"
-          sx={{ color: 'white' }}
+          sx={sidebarButtonStyle}
         />
 
         <IconButton
@@ -142,7 +143,7 @@ export const Sidebar: FC = () => {
           tooltipDirection="e"
           onClick={() => openGitHubPulls(primaryAccountHostname)}
           data-testid="sidebar-my-pull-requests"
-          sx={{ color: 'white' }}
+          sx={sidebarButtonStyle}
         />
       </Stack>
 
@@ -166,7 +167,7 @@ export const Sidebar: FC = () => {
               disabled={status === 'loading'}
               onClick={() => refreshNotifications()}
               data-testid="sidebar-refresh"
-              sx={{ color: 'white' }}
+              sx={sidebarButtonStyle}
             />
 
             <IconButton
@@ -178,7 +179,7 @@ export const Sidebar: FC = () => {
               tooltipDirection="e"
               onClick={() => toggleSettings()}
               data-testid="sidebar-settings"
-              sx={{ color: 'white' }}
+              sx={sidebarButtonStyle}
             />
           </>
         )}
@@ -193,7 +194,7 @@ export const Sidebar: FC = () => {
             tooltipDirection="e"
             onClick={() => quitApp()}
             data-testid="sidebar-quit"
-            sx={{ color: 'white' }}
+            sx={sidebarButtonStyle}
           />
         )}
       </Stack>

src/renderer/components/__snapshots__/Sidebar.test.tsx.snap

@@ -175,11 +175,9 @@ export const AccountsRoute: FC = () => {
                       onClick={() => openDeveloperSettings(account)}
                       size="small"
                       data-testid="account-missing-scopes"
-                      sx={{
-                        visibility: account.hasRequiredScopes
-                          ? 'hidden'
-                          : 'visible',
-                      }}
+                      className={
+                        account.hasRequiredScopes ? 'invisible' : 'visible'
+                      }
                     />
 
                     <IconButton

src/renderer/routes/Accounts.tsx

@@ -40,7 +40,7 @@ export const SettingsRoute: FC = () => {
             variant="danger"
             onClick={() => setIsOpen(!isOpen)}
             data-testid="settings-reset"
-            sx={{ width: '200px' }} // Set the width of the button
+            sx={{ width: '200px' }}
           >
             Reset Settings
           </Button>