chore: test reset settings text at the end of settings

src/components/settings/AppearanceSettings.tsx

@@ -25,7 +25,7 @@ export const AppearanceSettings: FC = () => {
   }, [settings.theme]);
 
   return (
-    <fieldset className="mb-3">
+    <fieldset>
       <legend id="appearance" className="mb-1 mt-2 font-semibold">
         Appearance
       </legend>

src/components/settings/NotificationSettings.tsx

@@ -9,7 +9,7 @@ export const NotificationSettings: FC = () => {
   const { settings, updateSetting } = useContext(AppContext);
 
   return (
-    <fieldset className="mb-3">
+    <fieldset>
       <legend id="notifications" className="mb-1 mt-2 font-semibold">
         Notifications
       </legend>

src/components/settings/SettingsFooter.test.tsx

@@ -12,8 +12,6 @@ jest.mock('react-router-dom', () => ({
 }));
 
 describe('routes/components/SettingsFooter.tsx', () => {
-  const resetSettings = jest.fn();
-
   afterEach(() => {
     jest.clearAllMocks();
   });
@@ -106,52 +104,6 @@ describe('routes/components/SettingsFooter.tsx', () => {
     );
   });
 
-  it('should reset default settings when `OK`', async () => {
-    window.confirm = jest.fn(() => true); // always click 'OK'
-
-    await act(async () => {
-      render(
-        <AppContext.Provider
-          value={{
-            auth: mockAuth,
-            settings: mockSettings,
-            resetSettings,
-          }}
-        >
-          <MemoryRouter>
-            <SettingsFooter />
-          </MemoryRouter>
-        </AppContext.Provider>,
-      );
-    });
-
-    fireEvent.click(screen.getByTitle('Reset default settings'));
-    expect(resetSettings).toHaveBeenCalled();
-  });
-
-  it('should skip reset default settings when `cancelled`', async () => {
-    window.confirm = jest.fn(() => false); // always click 'cancel'
-
-    await act(async () => {
-      render(
-        <AppContext.Provider
-          value={{
-            auth: mockAuth,
-            settings: mockSettings,
-            resetSettings,
-          }}
-        >
-          <MemoryRouter>
-            <SettingsFooter />
-          </MemoryRouter>
-        </AppContext.Provider>,
-      );
-    });
-
-    fireEvent.click(screen.getByTitle('Reset default settings'));
-    expect(resetSettings).not.toHaveBeenCalled();
-  });
-
   it('should open account management', async () => {
     await act(async () => {
       render(

src/components/settings/SettingsFooter.tsx

@@ -1,14 +1,12 @@
-import { PersonIcon, UndoIcon, XCircleIcon } from '@primer/octicons-react';
-import { type FC, useContext, useEffect, useState } from 'react';
+import { PersonIcon, XCircleIcon } from '@primer/octicons-react';
+import { type FC, useEffect, useState } from 'react';
 import { useNavigate } from 'react-router-dom';
-import { AppContext } from '../../context/App';
 import { BUTTON_CLASS_NAME } from '../../styles/gitify';
 import { Size } from '../../types';
 import { getAppVersion, quitApp } from '../../utils/comms';
 import { openGitifyReleaseNotes } from '../../utils/links';
 
 export const SettingsFooter: FC = () => {
-  const { resetSettings } = useContext(AppContext);
   const [appVersion, setAppVersion] = useState<string | null>(null);
   const navigate = useNavigate();
 
@@ -34,17 +32,6 @@ export const SettingsFooter: FC = () => {
         <span title="app-version">Gitify {appVersion}</span>
       </button>
       <div>
-        <button
-          type="button"
-          className={BUTTON_CLASS_NAME}
-          title="Reset default settings"
-          onClick={() => {
-            confirm('Are you sure you want to reset all settings?') &&
-              resetSettings();
-          }}
-        >
-          <UndoIcon size={Size.LARGE} aria-label="Reset default settings" />
-        </button>
         <button
           type="button"
           className={BUTTON_CLASS_NAME}

src/components/settings/SystemSettings.tsx

@@ -8,7 +8,7 @@ export const SystemSettings: FC = () => {
   const { settings, updateSetting } = useContext(AppContext);
 
   return (
-    <fieldset className="mb-3">
+    <fieldset>
       <legend id="system" className="mb-1 mt-2 font-semibold">
         System
       </legend>

src/routes/Settings.test.tsx

@@ -14,6 +14,7 @@ jest.mock('react-router-dom', () => ({
 describe('routes/Settings.tsx', () => {
   let originalPlatform: NodeJS.Platform;
   const fetchNotifications = jest.fn();
+  const resetSettings = jest.fn();
 
   beforeAll(() => {
     // Save the original platform value
@@ -72,4 +73,50 @@ describe('routes/Settings.tsx', () => {
     expect(fetchNotifications).toHaveBeenCalledTimes(1);
     expect(mockNavigate).toHaveBeenNthCalledWith(1, -1);
   });
+
+  it('should reset default settings when `OK`', async () => {
+    window.confirm = jest.fn(() => true); // always click 'OK'
+
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            resetSettings,
+          }}
+        >
+          <MemoryRouter>
+            <SettingsRoute />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByText('Restore settings to their defaults'));
+    expect(resetSettings).toHaveBeenCalled();
+  });
+
+  it('should skip reset default settings when `cancelled`', async () => {
+    window.confirm = jest.fn(() => false); // always click 'cancel'
+
+    await act(async () => {
+      render(
+        <AppContext.Provider
+          value={{
+            auth: mockAuth,
+            settings: mockSettings,
+            resetSettings,
+          }}
+        >
+          <MemoryRouter>
+            <SettingsRoute />
+          </MemoryRouter>
+        </AppContext.Provider>,
+      );
+    });
+
+    fireEvent.click(screen.getByText('Restore settings to their defaults'));
+    expect(resetSettings).not.toHaveBeenCalled();
+  });
 });

src/routes/Settings.tsx

@@ -1,19 +1,31 @@
-import type { FC } from 'react';
+import { type FC, useContext } from 'react';
 import { Header } from '../components/Header';
 import { AppearanceSettings } from '../components/settings/AppearanceSettings';
 import { NotificationSettings } from '../components/settings/NotificationSettings';
 import { SettingsFooter } from '../components/settings/SettingsFooter';
 import { SystemSettings } from '../components/settings/SystemSettings';
+import { AppContext } from '../context/App';
 
 export const SettingsRoute: FC = () => {
+  const { resetSettings } = useContext(AppContext);
   return (
     <div className="flex h-screen flex-col" data-testid="settings">
       <Header fetchOnBack={true}>Settings</Header>
 
-      <div className="flex-grow overflow-x-auto px-8">
+      <div className="flex flex-col flex-grow overflow-x-auto px-8 gap-3">
         <AppearanceSettings />
         <NotificationSettings />
         <SystemSettings />
+        <button
+          type="button"
+          onClick={() => {
+            confirm('Are you sure you want to reset all settings?') &&
+              resetSettings();
+          }}
+          className="text-sm hover:underline mb-4 hover:cursor-pointer"
+        >
+          Restore settings to their defaults
+        </button>
       </div>
 
       <SettingsFooter />