refactor: gitify logo icon (#1275)

Co-authored-by: Afonso Jorge Ramos <[email protected]>

Author: setchy

src/components/Logo.test.tsx

@@ -8,7 +8,6 @@ import {
 } from '@primer/octicons-react';
 import { type FC, useContext, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
-import { Logo } from '../components/Logo';
 import { AppContext } from '../context/App';
 import { quitApp } from '../utils/comms';
 import {
@@ -19,6 +18,7 @@ import {
 } from '../utils/links';
 import { getNotificationCount } from '../utils/notifications';
 import { SidebarButton } from './buttons/SidebarButton';
+import { LogoIcon } from './icons/LogoIcon';
 
 export const Sidebar: FC = () => {
   const navigate = useNavigate();
@@ -49,12 +49,12 @@ export const Sidebar: FC = () => {
       <div className="flex flex-1 flex-col items-center py-4">
         <button
           type="button"
-          className="mx-auto my-3 w-5 cursor-pointer outline-none"
+          className="mx-auto my-3 cursor-pointer outline-none"
           title="Open Gitify on GitHub"
           onClick={() => openGitifyRepository()}
           data-testid="gitify-logo"
         >
-          <Logo aria-label="Open Gitify" />
+          <LogoIcon size="small" aria-label="Open Gitify" />
         </button>
 
         <SidebarButton

src/components/Sidebar.tsx

@@ -0,0 +1,31 @@
+import { fireEvent, render, screen } from '@testing-library/react';
+import { LogoIcon } from './LogoIcon';
+
+describe('components/icons/LogoIcon.tsx', () => {
+  it('renders correctly (light)', () => {
+    const tree = render(<LogoIcon />);
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('renders correctly (dark)', () => {
+    const tree = render(<LogoIcon isDark />);
+
+    expect(tree).toMatchSnapshot();
+  });
+
+  it('should click on the logo', () => {
+    const onClick = jest.fn();
+    render(<LogoIcon onClick={onClick} size="small" />);
+
+    fireEvent.click(screen.getByLabelText('Gitify Logo'));
+
+    expect(onClick).toHaveBeenCalledTimes(1);
+  });
+
+  it('should render a different size', () => {
+    const tree = render(<LogoIcon size="large" />);
+
+    expect(tree).toMatchSnapshot();
+  });
+});

src/components/__snapshots__/AccountNotifications.test.tsx.snap

@@ -1,9 +1,10 @@
 import type { FC } from 'react';
+import { cn } from '../../utils/cn';
 
-interface ILogo {
+interface ILogoIcon {
   isDark?: boolean;
   onClick?: () => void;
-  className?: string;
+  size?: 'small' | 'medium' | 'large';
 }
 
 const LIGHT_GRADIENT_START = '#CCCCCC';
@@ -12,14 +13,16 @@ const LIGHT_GRADIENT_END = '#FFFFFF';
 const DARK_GRADIENT_START = '#22283B';
 const DARK_GRADIENT_END = '#555B6E';
 
-export const Logo: FC<ILogo> = ({
+export const LogoIcon: FC<ILogoIcon> = ({
   isDark,
   onClick,
-  className = '',
+  size = 'medium',
   ...props
-}: ILogo) => (
+}: ILogoIcon) => (
   <svg
-    className={className}
+    className={cn(
+      size === 'small' ? 'size-5' : size === 'medium' ? 'size-10' : 'size-16',
+    )}
     onClick={() => onClick?.()}
     xmlns="http://www.w3.org/2000/svg"
     xmlnsXlink="http://www.w3.org/1999/xlink"