Repository: gitify-app/gitify
Pull request #1275 (2024-06-19 12:17:47)

refactor: gitify logo icon


Patch:
diff --git a/src/components/Sidebar.tsx b/src/components/Sidebar.tsx
index 6e64fea0..7548f79f 100644
--- a/src/components/Sidebar.tsx
+++ b/src/components/Sidebar.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
diff --git a/src/components/Logo.tsx b/src/components/icons/LogoIcon.tsx
similarity index 89%
rename from src/components/Logo.tsx
rename to src/components/icons/LogoIcon.tsx
index e76a777b..c5d0bb7c 100644
--- a/src/components/Logo.tsx
+++ b/src/components/icons/LogoIcon.tsx
@@ -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"
diff --git a/src/routes/Login.tsx b/src/routes/Login.tsx
index 9cdbe957..41e29528 100644
--- a/src/routes/Login.tsx
+++ b/src/routes/Login.tsx
@@ -1,8 +1,8 @@
 import { KeyIcon, PersonIcon } from '@primer/octicons-react';
 import { type FC, useContext, useEffect } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { Logo } from '../components/Logo';
 import { Button } from '../components/buttons/Button';
+import { LogoIcon } from '../components/icons/LogoIcon';
 import { AppContext } from '../context/App';
 import { showWindow } from '../utils/comms';
 
@@ -28,7 +28,7 @@ export const LoginRoute: FC = () => {
 
   return (
     <div className="flex flex-1 flex-col items-center justify-center p-4">
-      <Logo className="h-16 w-16" isDark />
+      <LogoIcon size="large" isDark />
 
       <div className="my-4 px-2.5 py-1.5 text-center font-semibold">
         GitHub Notifications <br /> on your menu bar.


Test patch:
diff --git a/src/components/Logo.test.tsx b/src/components/Logo.test.tsx
deleted file mode 100644
index e19b8c5e..00000000
--- a/src/components/Logo.test.tsx
+++ /dev/null
@@ -1,25 +0,0 @@
-import { fireEvent, render, screen } from '@testing-library/react';
-import { Logo } from './Logo';
-
-describe('components/Logo.tsx', () => {
-  it('renders correctly (light)', () => {
-    const tree = render(<Logo />);
-
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('renders correctly(dark)', () => {
-    const tree = render(<Logo isDark />);
-
-    expect(tree).toMatchSnapshot();
-  });
-
-  it('should click on the logo', () => {
-    const onClick = jest.fn();
-    render(<Logo onClick={onClick} />);
-
-    fireEvent.click(screen.getByLabelText('Gitify Logo'));
-
-    expect(onClick).toHaveBeenCalledTimes(1);
-  });
-});
diff --git a/src/components/__snapshots__/AccountNotifications.test.tsx.snap b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
index a90715e6..21644ba4 100644
--- a/src/components/__snapshots__/AccountNotifications.test.tsx.snap
+++ b/src/components/__snapshots__/AccountNotifications.test.tsx.snap
@@ -241,11 +241,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
               focusable="false"
               height="14"
               style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-              viewBox="0 0 12 12"
+              viewBox="0 0 16 16"
               width="14"
             >
               <path
-                d="M3.587 6.025c0 .2.1.4.2.5l3.3 3.3c.3.3.8.3 1.1 0 .3-.3.3-.8 0-1.1l-2.7-2.7 2.7-2.7c.3-.3.3-.8 0-1.1-.3-.3-.8-.3-1.1 0l-3.2 3.2c-.2.2-.3.4-.3.6Z"
+                d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
               />
             </svg>
           </button>
@@ -303,11 +303,11 @@ exports[`components/AccountNotifications.tsx should render itself (github.com wi
             focusable="false"
             height="14"
             style="display: inline-block; user-select: none; vertical-align: text-bottom; overflow: visible;"
-            viewBox="0 0 12 12"
+            viewBox="0 0 16 16"
             width="14"
           >
             <path
-              d="M3.587 6.025c0 .2.1.4.2.5l3.3 3.3c.3.3.8.3 1.1 0 .3-.3.3-.8 0-1.1l-2.7-2.7 2.7-2.7c.3-.3.3-.8 0-1.1-.3-.3-.8-.3-1.1 0l-3.2 3.2c-.2.2-.3.4-.3.6Z"
+              d="M9.78 12.78a.75.75 0 0 1-1.06 0L4.47 8.53a.75.75 0 0 1 0-1.06l4.25-4.25a.751.751 0 0 1 1.042.018.751.751 0 0 1 .018 1.042L6.06 8l3.72 3.72a.75.75 0 0 1 0 1.06Z"
             />
           </svg>
         </button>
diff --git a/src/components/__snapshots__/Sidebar.test.tsx.snap b/src/components/__snapshots__/Sidebar.test.tsx.snap
index a4e4df9b..e16d9465 100644
--- a/src/components/__snapshots__/Sidebar.test.tsx.snap
+++ b/src/components/__snapshots__/Sidebar.test.tsx.snap
@@ -12,14 +12,14 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
           class="flex flex-1 flex-col items-center py-4"
         >
           <button
-            class="mx-auto my-3 w-5 cursor-pointer outline-none"
+            class="mx-auto my-3 cursor-pointer outline-none"
             data-testid="gitify-logo"
             title="Open Gitify on GitHub"
             type="button"
           >
             <svg
               aria-label="Open Gitify"
-              class=""
+              class="size-5"
               role="img"
               viewBox="0 0 500 500"
               xmlns="http://www.w3.org/2000/svg"
@@ -166,14 +166,14 @@ exports[`components/Sidebar.tsx should render itself & its children (logged in)
         class="flex flex-1 flex-col items-center py-4"
       >
         <button
-          class="mx-auto my-3 w-5 cursor-pointer outline-none"
+          class="mx-auto my-3 cursor-pointer outline-none"
           data-testid="gitify-logo"
           title="Open Gitify on GitHub"
           type="button"
         >
           <svg
             aria-label="Open Gitify"
-            class=""
+            class="size-5"
             role="img"
             viewBox="0 0 500 500"
             xmlns="http://www.w3.org/2000/svg"
@@ -377,14 +377,14 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
           class="flex flex-1 flex-col items-center py-4"
         >
           <button
-            class="mx-auto my-3 w-5 cursor-pointer outline-none"
+            class="mx-auto my-3 cursor-pointer outline-none"
             data-testid="gitify-logo"
             title="Open Gitify on GitHub"
             type="button"
           >
             <svg
               aria-label="Open Gitify"
-              class=""
+              class="size-5"
               role="img"
               viewBox="0 0 500 500"
               xmlns="http://www.w3.org/2000/svg"
@@ -531,14 +531,14 @@ exports[`components/Sidebar.tsx should render itself & its children (logged out)
         class="flex flex-1 flex-col items-center py-4"
       >
         <button
-          class="mx-auto my-3 w-5 cursor-pointer outline-none"
+          class="mx-auto my-3 cursor-pointer outline-none"
           data-testid="gitify-logo"
           title="Open Gitify on GitHub"
           type="button"
         >
           <svg
             aria-label="Open Gitify"
-            class=""
+            class="size-5"
             role="img"
             viewBox="0 0 500 500"
             xmlns="http://www.w3.org/2000/svg"
diff --git a/src/components/icons/LogoIcon.test.tsx b/src/components/icons/LogoIcon.test.tsx
new file mode 100644
index 00000000..aadec63e
--- /dev/null
+++ b/src/components/icons/LogoIcon.test.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();
+  });
+});
diff --git a/src/components/__snapshots__/Logo.test.tsx.snap b/src/components/icons/__snapshots__/LogoIcon.test.tsx.snap
similarity index 65%
rename from src/components/__snapshots__/Logo.test.tsx.snap
rename to src/components/icons/__snapshots__/LogoIcon.test.tsx.snap
index 7fef5f92..7fd7cef0 100644
--- a/src/components/__snapshots__/Logo.test.tsx.snap
+++ b/src/components/icons/__snapshots__/LogoIcon.test.tsx.snap
@@ -1,13 +1,164 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
-exports[`components/Logo.tsx renders correctly (light) 1`] = `
+exports[`components/icons/LogoIcon.tsx renders correctly (dark) 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <svg
         aria-label="Gitify Logo"
-        class=""
+        class="size-10"
+        role="img"
+        viewBox="0 0 500 500"
+        xmlns="http://www.w3.org/2000/svg"
+        xmlns:xlink="http://www.w3.org/1999/xlink"
+      >
+        <defs>
+          <lineargradient
+            id="linearGradient-dark"
+            x1="90.8779989%"
+            x2="-1.30249747%"
+            y1="80.0676288%"
+            y2="32.7108237%"
+          >
+            <stop
+              offset="0%"
+              stop-color="#22283B"
+            />
+            <stop
+              offset="100%"
+              stop-color="#555B6E"
+            />
+          </lineargradient>
+        </defs>
+        <g
+          fill="none"
+          fill-rule="evenodd"
+          stroke="none"
+          stroke-width="1"
+        >
+          <g
+            fill="url(#linearGradient-dark)"
+            fill-rule="nonzero"
+            id="Logo"
+            transform="translate(6.000000, 6.000000)"
+          >
+            <path
+              d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z"
+            />
+          </g>
+        </g>
+      </svg>
+    </div>
+  </body>,
+  "container": <div>
+    <svg
+      aria-label="Gitify Logo"
+      class="size-10"
+      role="img"
+      viewBox="0 0 500 500"
+      xmlns="http://www.w3.org/2000/svg"
+      xmlns:xlink="http://www.w3.org/1999/xlink"
+    >
+      <defs>
+        <lineargradient
+          id="linearGradient-dark"
+          x1="90.8779989%"
+          x2="-1.30249747%"
+          y1="80.0676288%"
+          y2="32.7108237%"
+        >
+          <stop
+            offset="0%"
+            stop-color="#22283B"
+          />
+          <stop
+            offset="100%"
+            stop-color="#555B6E"
+          />
+        </lineargradient>
+      </defs>
+      <g
+        fill="none"
+        fill-rule="evenodd"
+        stroke="none"
+        stroke-width="1"
+      >
+        <g
+          fill="url(#linearGradient-dark)"
+          fill-rule="nonzero"
+          id="Logo"
+          transform="translate(6.000000, 6.000000)"
+        >
+          <path
+            d="M330.391053,10.2526316 C361.413773,10.2526316 386.562656,35.4015165 386.562656,66.4242368 C386.562656,97.4469571 361.413773,122.595841 330.391053,122.595842 L330.365421,122.570211 L247.319105,122.570211 C180.042515,122.499128 125.399186,176.890222 125.159,244.166421 L125.133789,244.219632 L125.154247,245.84774 C126.219609,301.255958 164.473457,349.116728 218.453292,362.268048 C272.940509,375.542983 329.466993,350.045988 355.583747,300.428701 L272.258632,300.427737 C257.346614,300.427737 243.046846,294.496977 232.512078,283.942976 C221.97731,273.388975 216.072618,259.078414 216.099748,244.166421 C216.099748,213.150778 241.242989,188.007632 272.258632,188.007632 L371.119632,188.007632 C379.28704,188.480415 386.935401,192.166372 392.393842,198.260263 L474.869789,300.324632 L474.978789,300.325211 L474.952789,300.426632 L474.953158,300.427737 L474.951789,300.427632 L474.173714,303.448935 C446.939817,406.220475 353.906452,478.028529 247.319105,478.080211 C118.007789,478.080211 12.8157895,373.144526 12.8157895,244.166421 C12.8157895,115.188316 117.905263,10.2526316 247.319105,10.2526316 L330.391053,10.2526316 Z"
+          />
+        </g>
+      </g>
+    </svg>
+  </div>,
+  "debug": [Function],
+  "findAllByAltText": [Function],
+  "findAllByDisplayValue": [Function],
+  "findAllByLabelText": [Function],
+  "findAllByPlaceholderText": [Function],
+  "findAllByRole": [Function],
+  "findAllByTestId": [Function],
+  "findAllByText": [Function],
+  "findAllByTitle": [Function],
+  "findByAltText": [Function],
+  "findByDisplayValue": [Function],
+  "findByLabelText": [Function],
+  "findByPlaceholderText": [Function],
+  "findByRole": [Function],
+  "findByTestId": [Function],
+  "findByText": [Function],
+  "findByTitle": [Function],
+  "getAllByAltText": [Function],
+  "getAllByDisplayValue": [Function],
+  "getAllByLabelText": [Function],
+  "getAllByPlaceholderText": [Function],
+  "getAllByRole": [Function],
+  "getAllByTestId": [Function],
+  "getAllByText": [Function],
+  "getAllByTitle": [Function],
+  "getByAltText": [Function],
+  "getByDisplayValue": [Function],
+  "getByLabelText": [Function],
+  "getByPlaceholderText": [Function],
+  "getByRole": [Function],
+  "getByTestId": [Function],
+  "getByText": [Function],
+  "getByTitle": [Function],
+  "queryAllByAltText": [Function],
+  "queryAllByDisplayValue": [Function],
+  "queryAllByLabelText": [Function],
+  "queryAllByPlaceholderText": [Function],
+  "queryAllByRole": [Function],
+  "queryAllByTestId": [Function],
+  "queryAllByText": [Function],
+  "queryAllByTitle": [Function],
+  "queryByAltText": [Function],
+  "queryByDisplayValue": [Function],
+  "queryByLabelText": [Function],
+  "queryByPlaceholderText": [Function],
+  "queryByRole": [Function],
+  "queryByTestId": [Function],
+  "queryByText": [Function],
+  "queryByTitle": [Function],
+  "rerender": [Function],
+  "unmount": [Function],
+}
+`;
+
+exports[`components/icons/LogoIcon.tsx renders correctly (light) 1`] = `
+{
+  "asFragment": [Function],
+  "baseElement": <body>
+    <div>
+      <svg
+        aria-label="Gitify Logo"
+        class="size-10"
         role="img"
         viewBox="0 0 500 500"
         xmlns="http://www.w3.org/2000/svg"
@@ -54,7 +205,7 @@ exports[`components/Logo.tsx renders correctly (light) 1`] = `
   "container": <div>
     <svg
       aria-label="Gitify Logo"
-      class=""
+      class="size-10"
       role="img"
       viewBox="0 0 500 500"
       xmlns="http://www.w3.org/2000/svg"
@@ -151,14 +302,14 @@ exports[`components/Logo.tsx renders correctly (light) 1`] = `
 }
 `;
 
-exports[`components/Logo.tsx renders correctly(dark) 1`] = `
+exports[`components/icons/LogoIcon.tsx should render a different size 1`] = `
 {
   "asFragment": [Function],
   "baseElement": <body>
     <div>
       <svg
         aria-label="Gitify Logo"
-        class=""
+        class="size-16"
         role="img"
         viewBox="0 0 500 500"
         xmlns="http://www.w3.org/2000/svg"
@@ -166,7 +317,7 @@ exports[`components/Logo.tsx renders correctly(dark) 1`] = `
       >
         <defs>
           <lineargradient
-            id="linearGradient-dark"
+            id="linearGradient-light"
             x1="90.8779989%"
             x2="-1.30249747%"
             y1="80.0676288%"
@@ -174,11 +325,11 @@ exports[`components/Logo.tsx renders correctly(dark) 1`] = `
           >
             <stop
               offset="0%"
-              stop-color="#22283B"
+              stop-color="#CCCCCC"
             />
             <stop
               offset="100%"
-              stop-color="#555B6E"
+              stop-color="#FFFFFF"
             />
           </lineargradient>
         </defs>
@@ -189,7 +340,7 @@ exports[`components/Logo.tsx renders correctly(dark) 1`] = `
           stroke-width="1"
         >
           <g
-            fill="url(#linearGradient-dark)"
+            fill="url(#linearGradient-light)"
             fill-rule="nonzero"
             id="Logo"
             transform="translate(6.000000, 6.000000)"
@@ -205,7 +356,7 @@ exports[`components/Logo.tsx renders correctly(dark) 1`] = `
   "container": <div>
     <svg
       aria-label="Gitify Logo"
-      class=""
+      class="size-16"
       role="img"
       viewBox="0 0 500 500"
       xmlns="http://www.w3.org/2000/svg"
@@ -213,7 +364,7 @@ exports[`components/Logo.tsx renders correctly(dark) 1`] = `
     >
       <defs>
         <lineargradient
-          id="linearGradient-dark"
+          id="linearGradient-light"
           x1="90.8779989%"
           x2="-1.30249747%"
           y1="80.0676288%"
@@ -221,11 +372,11 @@ exports[`components/Logo.tsx renders correctly(dark) 1`] = `
         >
           <stop
             offset="0%"
-            stop-color="#22283B"
+            stop-color="#CCCCCC"
           />
           <stop
             offset="100%"
-            stop-color="#555B6E"
+            stop-color="#FFFFFF"
           />
         </lineargradient>
       </defs>
@@ -236,7 +387,7 @@ exports[`components/Logo.tsx renders correctly(dark) 1`] = `
         stroke-width="1"
       >
         <g
-          fill="url(#linearGradient-dark)"
+          fill="url(#linearGradient-light)"
           fill-rule="nonzero"
           id="Logo"
           transform="translate(6.000000, 6.000000)"
diff --git a/src/routes/__snapshots__/Login.test.tsx.snap b/src/routes/__snapshots__/Login.test.tsx.snap
index 7938da30..2b82523b 100644
--- a/src/routes/__snapshots__/Login.test.tsx.snap
+++ b/src/routes/__snapshots__/Login.test.tsx.snap
@@ -10,7 +10,7 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
       >
         <svg
           aria-label="Gitify Logo"
-          class="h-16 w-16"
+          class="size-16"
           role="img"
           viewBox="0 0 500 500"
           xmlns="http://www.w3.org/2000/svg"
@@ -117,7 +117,7 @@ exports[`routes/Login.tsx should render itself & its children 1`] = `
     >
       <svg
         aria-label="Gitify Logo"
-        class="h-16 w-16"
+        class="size-16"
         role="img"
         viewBox="0 0 500 500"
         xmlns="http://www.w3.org/2000/svg"