refactor: introduce size enum to control all icon/buttons consistently

src/components/AccountNotifications.tsx

@@ -5,7 +5,7 @@ import {
 } from '@primer/octicons-react';
 import { type FC, useContext, useState } from 'react';
 import { AppContext } from '../context/App';
-import type { Account } from '../types';
+import { type Account, Size } from '../types';
 import type { Notification } from '../typesGitHub';
 import { openAccountProfile } from '../utils/links';
 import { NotificationRow } from './NotificationRow';
@@ -68,7 +68,7 @@ export const AccountNotifications: FC<IAccountNotifications> = (
           onClick={toggleAccountNotifications}
         >
           <div className="flex gap-3">
-            <PlatformIcon type={account.platform} size={16} />
+            <PlatformIcon type={account.platform} size={Size.MEDIUM} />
             <button
               type="button"
               title="Open Profile"
@@ -85,7 +85,7 @@ export const AccountNotifications: FC<IAccountNotifications> = (
               title={toggleAccountNotificationsLabel}
               onClick={toggleAccountNotifications}
             >
-              <ChevronIcon size={14} />
+              <ChevronIcon size={Size.SMALL} />
             </button>
           </div>
         </div>

src/components/Header.tsx

@@ -1,6 +1,7 @@
 import { ArrowLeftIcon } from '@primer/octicons-react';
 import type { FC, ReactNode } from 'react';
 import { useNavigate } from 'react-router-dom';
+import { Size } from '../types';
 
 interface IHeader {
   children: ReactNode;
@@ -17,7 +18,7 @@ export const Header: FC<IHeader> = ({ children }: IHeader) => {
         onClick={() => navigate(-1)}
       >
         <ArrowLeftIcon
-          size={20}
+          size={Size.XLARGE}
           className="hover:text-gray-400"
           aria-label="Go Back"
         />

src/components/NotificationRow.tsx

@@ -17,7 +17,7 @@ import {
   useState,
 } from 'react';
 import { AppContext } from '../context/App';
-import { IconColor } from '../types';
+import { IconColor, Size } from '../types';
 import type { Notification } from '../typesGitHub';
 import { cn } from '../utils/cn';
 import {
@@ -126,7 +126,7 @@ export const NotificationRow: FC<INotificationRow> = ({
         title={notificationTitle}
       >
         <NotificationIcon
-          size={groupByDate ? 20 : 16}
+          size={groupByDate ? Size.XLARGE : Size.MEDIUM}
           aria-label={notification.subject.type}
         />
       </div>
@@ -144,7 +144,7 @@ export const NotificationRow: FC<INotificationRow> = ({
               <AvatarIcon
                 title={repoSlug}
                 url={repoAvatarUrl}
-                size="medium"
+                size={Size.SMALL}
                 defaultIcon={MarkGithubIcon}
               />
             </span>
@@ -180,13 +180,13 @@ export const NotificationRow: FC<INotificationRow> = ({
               <AvatarIcon
                 title={notification.subject.user.login}
                 url={notification.subject.user.avatar_url}
-                size="small"
+                size={Size.XSMALL}
                 defaultIcon={FeedPersonIcon}
               />
             </button>
           ) : (
             <div>
-              <FeedPersonIcon size={16} className={IconColor.GRAY} />
+              <FeedPersonIcon size={Size.MEDIUM} className={IconColor.GRAY} />
             </div>
           )}
           <div title={reason.description}>{reason.title}</div>
@@ -261,7 +261,7 @@ export const NotificationRow: FC<INotificationRow> = ({
             markNotificationDone(notification);
           }}
         >
-          <CheckIcon size={16} aria-label="Mark as Done" />
+          <CheckIcon size={Size.MEDIUM} aria-label="Mark as Done" />
         </button>
 
         <button
@@ -274,7 +274,7 @@ export const NotificationRow: FC<INotificationRow> = ({
             markNotificationRead(notification);
           }}
         >
-          <ReadIcon size={14} aria-label="Mark as Read" />
+          <ReadIcon size={Size.SMALL} aria-label="Mark as Read" />
         </button>
 
         <button
@@ -283,7 +283,10 @@ export const NotificationRow: FC<INotificationRow> = ({
           title="Unsubscribe from Thread"
           onClick={unsubscribeFromThread}
         >
-          <BellSlashIcon size={14} aria-label="Unsubscribe from Thread" />
+          <BellSlashIcon
+            size={Size.SMALL}
+            aria-label="Unsubscribe from Thread"
+          />
         </button>
       </div>
     </div>

src/components/RepositoryNotifications.tsx

@@ -7,6 +7,7 @@ import {
 } from '@primer/octicons-react';
 import { type FC, useCallback, useContext, useState } from 'react';
 import { AppContext } from '../context/App';
+import { Size } from '../types';
 import type { Notification } from '../typesGitHub';
 import { openRepository } from '../utils/links';
 import { NotificationRow } from './NotificationRow';
@@ -59,7 +60,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
           <AvatarIcon
             title={repoName}
             url={avatarUrl}
-            size="medium"
+            size={Size.LARGE}
             defaultIcon={MarkGithubIcon}
           />
           <span
@@ -77,7 +78,10 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
             title="Mark Repository as Done"
             onClick={markRepoAsDone}
           >
-            <CheckIcon size={16} aria-label="Mark Repository as Done" />
+            <CheckIcon
+              size={Size.MEDIUM}
+              aria-label="Mark Repository as Done"
+            />
           </button>
 
           <button
@@ -86,7 +90,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
             title="Mark Repository as Read"
             onClick={markRepoAsRead}
           >
-            <ReadIcon size={14} aria-label="Mark Repository as Read" />
+            <ReadIcon size={Size.SMALL} aria-label="Mark Repository as Read" />
           </button>
 
           <button
@@ -95,7 +99,7 @@ export const RepositoryNotifications: FC<IRepositoryNotifications> = ({
             title={toggleRepositoryNotificationsLabel}
             onClick={toggleRepositoryNotifications}
           >
-            <ChevronIcon size={14} />
+            <ChevronIcon size={Size.SMALL} />
           </button>
         </div>
       </div>

src/components/Sidebar.tsx

@@ -9,6 +9,7 @@ import {
 import { type FC, useContext, useMemo } from 'react';
 import { useLocation, useNavigate } from 'react-router-dom';
 import { AppContext } from '../context/App';
+import { Size } from '../types';
 import { quitApp } from '../utils/comms';
 import {
   openGitHubIssues,
@@ -54,7 +55,7 @@ export const Sidebar: FC = () => {
           onClick={() => openGitifyRepository()}
           data-testid="gitify-logo"
         >
-          <LogoIcon size="small" aria-label="Open Gitify" />
+          <LogoIcon size={Size.SMALL} aria-label="Open Gitify" />
         </button>
 
         <SidebarButton
@@ -83,7 +84,7 @@ export const Sidebar: FC = () => {
             <SidebarButton
               title="Refresh Notifications"
               icon={SyncIcon}
-              size={16}
+              size={Size.MEDIUM}
               loading={status === 'loading'}
               disabled={status === 'loading'}
               onClick={() => refreshNotifications()}
@@ -92,7 +93,7 @@ export const Sidebar: FC = () => {
             <SidebarButton
               title="Settings"
               icon={GearIcon}
-              size={16}
+              size={Size.MEDIUM}
               onClick={() => toggleSettings()}
             />
           </>
@@ -102,7 +103,7 @@ export const Sidebar: FC = () => {
           <SidebarButton
             title="Quit Gitify"
             icon={XCircleIcon}
-            size={16}
+            size={Size.MEDIUM}
             onClick={() => quitApp()}
           />
         )}

src/components/buttons/Button.test.tsx

@@ -1,7 +1,7 @@
 import { MarkGithubIcon } from '@primer/octicons-react';
 import { fireEvent, render, screen } from '@testing-library/react';
 import { shell } from 'electron';
-import type { Link } from '../../types';
+import { type Link, Size } from '../../types';
 import { Button, type IButton } from './Button';
 
 describe('components/buttons/Button.tsx', () => {
@@ -10,7 +10,7 @@ describe('components/buttons/Button.tsx', () => {
   const props: IButton = {
     name: 'Button',
     label: 'button',
-    size: 16,
+    size: Size.MEDIUM,
   };
 
   beforeEach(() => {

src/components/buttons/Button.tsx

@@ -1,6 +1,6 @@
 import type { Icon } from '@primer/octicons-react';
 import type { FC } from 'react';
-import type { Link } from '../../types';
+import { type Link, Size } from '../../types';
 import { cn } from '../../utils/cn';
 import { openExternalLink } from '../../utils/comms';
 
@@ -9,7 +9,7 @@ export interface IButton {
   label: string;
   className?: string;
   icon?: Icon;
-  size?: number;
+  size?: Size;
   url?: Link;
   onClick?: () => void;
   disabled?: boolean;
@@ -36,7 +36,9 @@ export const Button: FC<IButton> = (props: IButton) => {
         }
       }}
     >
-      {props.icon && <props.icon className="mr-1" size={props.size ?? 14} />}
+      {props.icon && (
+        <props.icon className="mr-1" size={props.size ?? Size.MEDIUM} />
+      )}
       {props.name}
     </button>
   );

src/components/buttons/PillButton.tsx

@@ -1,6 +1,6 @@
 import type { Icon } from '@primer/octicons-react';
 import type { FC } from 'react';
-import type { IconColor } from '../../types';
+import { type IconColor, Size } from '../../types';
 
 export interface IPillButton {
   key?: string;
@@ -17,7 +17,11 @@ export const PillButton: FC<IPillButton> = (props: IPillButton) => {
       type="button"
       className="flex gap-1 items-center m-0.5 rounded-full bg-gray-100 px-1 text-xxs hover:bg-gray-200 dark:bg-gray-800 dark:hover:bg-gray-700"
     >
-      <props.icon size={12} className={props.color} aria-label={props.title} />
+      <props.icon
+        size={Size.XSMALL}
+        className={props.color}
+        aria-label={props.title}
+      />
       {props.metric}
     </button>
   );

src/components/buttons/SidebarButton.test.tsx

@@ -1,5 +1,6 @@
 import { MarkGithubIcon } from '@primer/octicons-react';
 import { render } from '@testing-library/react';
+import { Size } from '../../types';
 import { type ISidebarButton, SidebarButton } from './SidebarButton';
 
 describe('components/buttons/SidebarButton.tsx', () => {
@@ -22,4 +23,15 @@ describe('components/buttons/SidebarButton.tsx', () => {
     const tree = render(<SidebarButton {...props} />);
     expect(tree).toMatchSnapshot();
   });
+
+  it('should render - medium', () => {
+    const props: ISidebarButton = {
+      title: 'Mock Sidebar Button',
+      metric: 0,
+      icon: MarkGithubIcon,
+      size: Size.MEDIUM,
+    };
+    const tree = render(<SidebarButton {...props} />);
+    expect(tree).toMatchSnapshot();
+  });
 });

src/components/buttons/SidebarButton.tsx

@@ -1,14 +1,14 @@
 import type { Icon } from '@primer/octicons-react';
 import type { FC } from 'react';
-import { IconColor } from '../../types';
+import { IconColor, Size } from '../../types';
 import { cn } from '../../utils/cn';
 
 export interface ISidebarButton {
   title: string;
   metric?: number;
   icon: Icon;
   onClick?: () => void;
-  size?: number;
+  size?: Size;
   loading?: boolean;
   disabled?: boolean;
 }
@@ -31,7 +31,7 @@ export const SidebarButton: FC<ISidebarButton> = (props: ISidebarButton) => {
       title={props.title}
       disabled={props.disabled}
     >
-      <props.icon size={props.size ?? 12} aria-label={props.title} />
+      <props.icon size={props.size ?? Size.XSMALL} aria-label={props.title} />
       {hasMetric && props.metric}
     </button>
   );