refactor: extract sidebar button into component

src/components/Sidebar.tsx

@@ -10,7 +10,6 @@ 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 { BUTTON_SIDEBAR_CLASS_NAME } from '../styles/gitify';
 import { quitApp } from '../utils/comms';
 import {
   openGitHubIssues,
@@ -36,6 +35,11 @@ export const Sidebar: FC = () => {
     }
   };
 
+  const refreshNotifications = () => {
+    navigate('/', { replace: true });
+    fetchNotifications();
+  };
+
   const notificationsCount = useMemo(() => {
     return getNotificationCount(notifications);
   }, [notifications]);
@@ -61,13 +65,13 @@ export const Sidebar: FC = () => {
         />
 
         <SidebarButton
-          title={'My Issues'}
+          title="My Issues"
           icon={IssueOpenedIcon}
           onClick={() => openGitHubIssues()}
         />
 
         <SidebarButton
-          title={'My Pull Requests'}
+          title="My Pull Requests"
           icon={GitPullRequestIcon}
           onClick={() => openGitHubPulls()}
         />
@@ -76,43 +80,31 @@ export const Sidebar: FC = () => {
       <div className="px-3 py-4">
         {isLoggedIn && (
           <>
-            <button
-              type="button"
-              className={BUTTON_SIDEBAR_CLASS_NAME}
+            <SidebarButton
               title="Refresh Notifications"
-              onClick={() => {
-                navigate('/', { replace: true });
-                fetchNotifications();
-              }}
+              icon={SyncIcon}
+              size={16}
+              loading={status === 'loading'}
               disabled={status === 'loading'}
-            >
-              <SyncIcon
-                size={16}
-                aria-label="Refresh Notifications"
-                className={status === 'loading' ? 'animate-spin' : undefined}
-              />
-            </button>
-            <button
-              type="button"
-              className={BUTTON_SIDEBAR_CLASS_NAME}
+              onClick={() => refreshNotifications()}
+            />
+
+            <SidebarButton
               title="Settings"
-              onClick={toggleSettings}
-            >
-              <GearIcon size={16} aria-label="Settings" />
-            </button>
+              icon={GearIcon}
+              size={16}
+              onClick={() => toggleSettings()}
+            />
           </>
         )}
 
         {!isLoggedIn && (
-          <button
-            type="button"
-            className={BUTTON_SIDEBAR_CLASS_NAME}
+          <SidebarButton
             title="Quit Gitify"
-            aria-label="Quit Gitify"
-            onClick={quitApp}
-          >
-            <XCircleIcon size={16} aria-label="Quit Gitify" />
-          </button>
+            icon={XCircleIcon}
+            size={16}
+            onClick={() => quitApp()}
+          />
         )}
       </div>
     </div>

src/components/buttons/SidebarButton.tsx

@@ -8,6 +8,9 @@ export interface ISidebarButton {
   metric?: number;
   icon: Icon;
   onClick?: () => void;
+  size?: number;
+  loading?: boolean;
+  disabled?: boolean;
 }
 
 export const SidebarButton: FC<ISidebarButton> = (props: ISidebarButton) => {
@@ -17,13 +20,18 @@ export const SidebarButton: FC<ISidebarButton> = (props: ISidebarButton) => {
     <button
       type="button"
       className={cn(
-        'my-1 flex cursor-pointer items-center justify-around self-stretch px-2 py-1 text-xs font-extrabold',
-        hasMetric ? IconColor.GREEN : IconColor.WHITE,
+        'flex justify-evenly items-center w-full my-1 cursor-pointer text-xs font-extrabold focus:outline-none disabled:text-gray-500  disabled:cursor-default',
+        hasMetric
+          ? `${IconColor.GREEN} hover:text-green-700`
+          : `${IconColor.WHITE} hover:text-gray-500`,
+        props.loading ? 'animate-spin' : undefined,
+        props.size ? 'py-2' : 'py-1',
       )}
       onClick={() => props.onClick()}
       title={props.title}
+      disabled={props.disabled}
     >
-      <props.icon size={12} aria-label={props.title} />
+      <props.icon size={props.size ?? 12} aria-label={props.title} />
       {hasMetric && props.metric}
     </button>
   );