fix: hover group background color (#1783)

fix: hover group bg

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

Author: setchy

src/renderer/components/notifications/AccountNotifications.tsx

@@ -103,7 +103,7 @@ export const AccountNotifications: FC<IAccountNotifications> = (
               />
             </Button>
 
-            <HoverGroup bgColor="bg-gitify-account-rest">
+            <HoverGroup bgColor="group-hover:bg-gitify-account-rest">
               <HoverButton
                 label="My Issues"
                 icon={IssueOpenedIcon}

src/renderer/components/notifications/NotificationRow.tsx

@@ -153,7 +153,7 @@ export const NotificationRow: FC<INotificationRow> = ({
         </Stack>
 
         {!animateExit && (
-          <HoverGroup bgColor="bg-gitify-notification-hover">
+          <HoverGroup bgColor="group-hover:bg-gitify-notification-hover">
             <HoverButton
               label="Mark as done"
               icon={CheckIcon}

src/renderer/components/notifications/RepositoryNotifications.tsx

@@ -94,7 +94,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
           </Button>
 
           {!animateExit && (
-            <HoverGroup bgColor="bg-gitify-repository">
+            <HoverGroup bgColor="group-hover:bg-gitify-repository">
               <HoverButton
                 label="Mark repository as done"
                 icon={CheckIcon}

src/renderer/components/primitives/HoverGroup.test.tsx

@@ -3,7 +3,11 @@ import { HoverGroup } from './HoverGroup';
 
 describe('renderer/components/primitives/HoverGroup.tsx', () => {
   it('should render', () => {
-    const tree = render(<HoverGroup bgColor="white">Hover Group</HoverGroup>);
+    const tree = render(
+      <HoverGroup bgColor="group-hover:bg-gitify-repository">
+        Hover Group
+      </HoverGroup>,
+    );
     expect(tree).toMatchSnapshot();
   });
 });

src/renderer/components/primitives/HoverGroup.tsx

@@ -4,8 +4,11 @@ import { Stack } from '@primer/react';
 import { cn } from '../../utils/cn';
 
 interface IHoverGroup {
-  bgColor: string;
   children: ReactNode;
+  bgColor:
+    | 'group-hover:bg-gitify-account-rest'
+    | 'group-hover:bg-gitify-repository'
+    | 'group-hover:bg-gitify-notification-hover';
 }
 
 export const HoverGroup: FC<IHoverGroup> = ({
@@ -20,7 +23,7 @@ export const HoverGroup: FC<IHoverGroup> = ({
       className={cn(
         'absolute right-0 h-full',
         'opacity-0 transition-opacity group-hover:opacity-100',
-        `group-hover:${bgColor}`,
+        bgColor,
       )}
     >
       {children}