replace sx with tailwind or primer components

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

Author: setchy

src/renderer/components/Sidebar.tsx

@@ -69,11 +69,9 @@ export const Sidebar: FC = () => {
     return getNotificationCount(notifications);
   }, [notifications]);
 
-  // const sidebarButtonStyle = { color: 'white' };
-
   return (
     <Stack
-      className="fixed left-sidebar -ml-sidebar w-sidebar h-full bg-gitify-sidebar text-white"
+      className="fixed left-sidebar -ml-sidebar w-sidebar h-full bg-gitify-sidebar [&_svg]:text-white"
       direction="vertical"
       justify="space-between"
     >
@@ -102,7 +100,6 @@ export const Sidebar: FC = () => {
           icon={BellIcon}
           onClick={() => openGitHubNotifications(primaryAccountHostname)}
           size="small"
-          // sx={sidebarButtonStyle}
           tooltipDirection="e"
           unsafeDisableTooltip={false}
           variant={notificationsCount > 0 ? 'primary' : 'invisible'}
@@ -116,7 +113,6 @@ export const Sidebar: FC = () => {
             icon={FilterIcon}
             onClick={() => toggleFilters()}
             size="small"
-            // sx={sidebarButtonStyle}
             tooltipDirection="e"
             unsafeDisableTooltip={false}
             variant={hasActiveFilters(settings) ? 'primary' : 'invisible'}
@@ -129,7 +125,6 @@ export const Sidebar: FC = () => {
           icon={IssueOpenedIcon}
           onClick={() => openGitHubIssues(primaryAccountHostname)}
           size="small"
-          // sx={sidebarButtonStyle}
           tooltipDirection="e"
           unsafeDisableTooltip={false}
           variant="invisible"
@@ -141,7 +136,6 @@ export const Sidebar: FC = () => {
           icon={GitPullRequestIcon}
           onClick={() => openGitHubPulls(primaryAccountHostname)}
           size="small"
-          // sx={sidebarButtonStyle}
           tooltipDirection="e"
           unsafeDisableTooltip={false}
           variant="invisible"
@@ -165,7 +159,6 @@ export const Sidebar: FC = () => {
               loading={status === 'loading'}
               onClick={() => refreshNotifications()}
               size="small"
-              // sx={sidebarButtonStyle}
               tooltipDirection="e"
               unsafeDisableTooltip={false}
               variant="invisible"
@@ -177,7 +170,6 @@ export const Sidebar: FC = () => {
               icon={GearIcon}
               onClick={() => toggleSettings()}
               size="small"
-              // sx={sidebarButtonStyle}
               tooltipDirection="e"
               unsafeDisableTooltip={false}
               variant="invisible"
@@ -192,7 +184,6 @@ export const Sidebar: FC = () => {
             icon={XCircleIcon}
             onClick={() => quitApp()}
             size="small"
-            // sx={sidebarButtonStyle}
             tooltipDirection="e"
             unsafeDisableTooltip={false}
             variant="invisible"

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

@@ -33,7 +33,7 @@ export const Checkbox: FC<ICheckbox> = ({
       >
         <input
           checked={props.checked}
-          className="size-2 rounded-sm cursor-pointer"
+          className="size-4 rounded-sm cursor-pointer"
           data-testid={`checkbox-${props.name}`}
           disabled={props.disabled}
           id={props.name}

src/renderer/components/fields/Checkbox.tsx

@@ -37,7 +37,7 @@ export const RadioGroup: FC<IRadioGroup> = (props: IRadioGroup) => {
           >
             <input
               checked={item.value === props.value}
-              className="size-2 cursor-pointer"
+              className="size-4 cursor-pointer"
               data-testid={name}
               id={name}
               name={props.name}

src/renderer/components/fields/RadioGroup.tsx

@@ -36,10 +36,8 @@ export const SearchFilterSuggestions: FC<SearchFilterSuggestionsProps> = ({
   const beginsWithKnownQualifier = base.some((q) => lower.startsWith(q.prefix));
 
   return (
-    <Popover open>
-      <Popover.Content
-      // sx={{ p: 2, mt: 2, width: '100%' }}
-      >
+    <Popover caret="top-left" open>
+      <Popover.Content className="p-2 mt-2" height="auto" width="auto">
         <Stack direction="vertical" gap="condensed">
           {suggestions.length > 0 &&
             suggestions.map((q) => (