Repository: gitify-app/gitify
Pull request #930 (2024-03-27 10:30:51)

refactor(settings): adjust margins
Adjust top and bottom padding/margins in preparation for #929 

**Before**
![Screenshot 2024-03-27 at 6 10 58 AM](https://github.com/gitify-app/gitify/assets/386277/967701d7-452a-46b4-afcd-667cdbfd0da7)


**After**
![Screenshot 2024-03-27 at 6 29 49 AM](https://github.com/gitify-app/gitify/assets/386277/2828f60b-3187-4261-98f9-ebcc5a667b8b)



Patch:
diff --git a/.nvmrc b/.nvmrc
index 726a201e..c369ba60 100644
--- a/.nvmrc
+++ b/.nvmrc
@@ -1,1 +1,1 @@
-20.11.1
\ No newline at end of file
+20.12.0
\ No newline at end of file
diff --git a/package.json b/package.json
index 38744998..f069c5cb 100644
--- a/package.json
+++ b/package.json
@@ -124,7 +124,7 @@
     "@types/jest": "29.5.12",
     "@types/node": "20.11.30",
     "@types/nprogress": "0.2.3",
-    "@types/react": "18.2.67",
+    "@types/react": "18.2.72",
     "@types/react-router-dom": "5.3.3",
     "@types/react-test-renderer": "18.0.7",
     "@types/react-transition-group": "4.4.10",
diff --git a/pnpm-lock.yaml b/pnpm-lock.yaml
index 1fc377ce..fdb8c649 100644
--- a/pnpm-lock.yaml
+++ b/pnpm-lock.yaml
@@ -71,8 +71,8 @@ devDependencies:
     specifier: 0.2.3
     version: 0.2.3
   '@types/react':
-    specifier: 18.2.67
-    version: 18.2.67
+    specifier: 18.2.72
+    version: 18.2.72
   '@types/react-router-dom':
     specifier: 5.3.3
     version: 5.3.3
@@ -1217,14 +1217,14 @@ packages:
   /@types/react-dom@18.2.8:
     resolution: {integrity: sha512-bAIvO5lN/U8sPGvs1Xm61rlRHHaq5rp5N3kp9C+NJ/Q41P8iqjkXSu0+/qu8POsjH9pNWb0OYabFez7taP7omw==}
     dependencies:
-      '@types/react': 18.2.67
+      '@types/react': 18.2.72
     dev: true
 
   /@types/react-router-dom@5.3.3:
     resolution: {integrity: sha512-kpqnYK4wcdm5UaWI3fLcELopqLrHgLqNsdpHauzlQktfkHL3npOSwtj1Uz9oKBAzs7lFtVkV8j83voAz2D8fhw==}
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.2.67
+      '@types/react': 18.2.72
       '@types/react-router': 5.1.20
     dev: true
 
@@ -1232,26 +1232,25 @@ packages:
     resolution: {integrity: sha512-jGjmu/ZqS7FjSH6owMcD5qpq19+1RS9DeVRqfl1FeBMxTDQAGwlMWOcs52NDoXaNKyG3d1cYQFMs9rCrb88o9Q==}
     dependencies:
       '@types/history': 4.7.11
-      '@types/react': 18.2.67
+      '@types/react': 18.2.72
     dev: true
 
   /@types/react-test-renderer@18.0.7:
     resolution: {integrity: sha512-1+ANPOWc6rB3IkSnElhjv6VLlKg2dSv/OWClUyZimbLsQyBn8Js9Vtdsi3UICJ2rIQ3k2la06dkB+C92QfhKmg==}
     dependencies:
-      '@types/react': 18.2.67
+      '@types/react': 18.2.72
     dev: true
 
   /@types/react-transition-group@4.4.10:
     resolution: {integrity: sha512-hT/+s0VQs2ojCX823m60m5f0sL5idt9SO6Tj6Dg+rdphGPIeJbJ6CxvBYkgkGKrYeDjvIpKTR38UzmtHJOGW3Q==}
     dependencies:
-      '@types/react': 18.2.67
+      '@types/react': 18.2.72
     dev: true
 
-  /@types/react@18.2.67:
-    resolution: {integrity: sha512-vkIE2vTIMHQ/xL0rgmuoECBCkZFZeHr49HeWSc24AptMbNRo7pwSBvj73rlJJs9fGKj0koS+V7kQB1jHS0uCgw==}
+  /@types/react@18.2.72:
+    resolution: {integrity: sha512-/e7GWxGzXQF7OJAua7UAYqYi/4VpXEfbGtmYQcAQwP3SjjjAXfybTf/JK5S+SaetB/ChXl8Y2g1hCsj7jDXxcg==}
     dependencies:
       '@types/prop-types': 15.7.5
-      '@types/scheduler': 0.16.4
       csstype: 3.1.2
     dev: true
 
@@ -1260,10 +1259,6 @@ packages:
     dependencies:
       '@types/node': 20.11.30
 
-  /@types/scheduler@0.16.4:
-    resolution: {integrity: sha512-2L9ifAGl7wmXwP4v3pN4p2FLhD0O1qsJpvKmNin5VA8+UvNVb447UDaAEV6UdrkA+m/Xs58U1RFps44x6TFsVQ==}
-    dev: true
-
   /@types/stack-utils@2.0.1:
     resolution: {integrity: sha512-Hl219/BT5fLAaz6NDkSuhzasy49dwQS/DSdu4MdggFB8zcXv7vflBI3xp7FEmkmdDkBUI2bPUNeMttp2knYdxw==}
     dev: true
diff --git a/src/components/NotificationRow.tsx b/src/components/NotificationRow.tsx
index 54a42474..9cf2664a 100644
--- a/src/components/NotificationRow.tsx
+++ b/src/components/NotificationRow.tsx
@@ -80,7 +80,7 @@ export const NotificationRow: React.FC<IProps> = ({
       </div>
 
       <div
-        className="flex-1 overflow-hidden"
+        className="flex-1 overflow-hidden cursor-pointer"
         onClick={() => pressTitle()}
         role="main"
       >
diff --git a/src/components/Repository.tsx b/src/components/Repository.tsx
index 6c7a4ce5..933ce6a4 100644
--- a/src/components/Repository.tsx
+++ b/src/components/Repository.tsx
@@ -47,7 +47,9 @@ export const RepositoryNotifications: React.FC<IProps> = ({
           ) : (
             <MarkGithubIcon size={18} />
           )}
-          <span onClick={openBrowser}>{repoName}</span>
+          <span className="cursor-pointer" onClick={openBrowser}>
+            {repoName}
+          </span>
         </div>
 
         <div className="flex justify-center items-center gap-2 opacity-0 group-hover:opacity-80 transition-opacity">
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index eaff01b8..91e5eef6 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -89,7 +89,7 @@ export const SettingsRoute: React.FC = () => {
       className="flex flex-1 flex-col dark:bg-gray-dark dark:text-white"
       data-testid="settings"
     >
-      <div className="flex justify-between items-center mt-4 py-2 mx-8">
+      <div className="flex justify-between items-center mt-2 py-2 mx-8">
         <button
           className="focus:outline-none"
           title="Go Back"
@@ -172,7 +172,7 @@ export const SettingsRoute: React.FC = () => {
         )}
       </div>
 
-      <div className="flex justify-between items-center bg-gray-200 dark:bg-gray-darker py-4 px-8">
+      <div className="flex justify-between items-center bg-gray-200 dark:bg-gray-darker py-1 px-8">
         <small
           className="font-semibold cursor-pointer"
           title="View release notes"


Test patch:
diff --git a/src/components/NotificationRow.test.tsx b/src/components/NotificationRow.test.tsx
index 035a7722..9605e5d8 100644
--- a/src/components/NotificationRow.test.tsx
+++ b/src/components/NotificationRow.test.tsx
@@ -138,14 +138,14 @@ describe('components/NotificationRow.tsx', () => {
       hostname: 'github.com',
     };
 
-    const { getByLabelText } = render(
+    const { getByTitle } = render(
       <AppContext.Provider value={{}}>
         <AppContext.Provider value={{ unsubscribeNotification }}>
           <NotificationRow {...props} />
         </AppContext.Provider>
       </AppContext.Provider>,
     );
-    fireEvent.click(getByLabelText('Unsubscribe'));
+    fireEvent.click(getByTitle('Unsubscribe'));
     expect(unsubscribeNotification).toHaveBeenCalledTimes(1);
   });
 });
diff --git a/src/components/__snapshots__/NotificationRow.test.tsx.snap b/src/components/__snapshots__/NotificationRow.test.tsx.snap
index b671daa4..52d225d9 100644
--- a/src/components/__snapshots__/NotificationRow.test.tsx.snap
+++ b/src/components/__snapshots__/NotificationRow.test.tsx.snap
@@ -35,7 +35,7 @@ exports[`components/NotificationRow.tsx should render itself & its children 1`]
     </svg>
   </div>
   <div
-    className="flex-1 overflow-hidden"
+    className="flex-1 overflow-hidden cursor-pointer"
     onClick={[Function]}
     role="main"
   >
diff --git a/src/components/__snapshots__/Repository.test.tsx.snap b/src/components/__snapshots__/Repository.test.tsx.snap
index a47cf4cb..934a3a31 100644
--- a/src/components/__snapshots__/Repository.test.tsx.snap
+++ b/src/components/__snapshots__/Repository.test.tsx.snap
@@ -13,6 +13,7 @@ exports[`components/Repository.tsx should render itself & its children 1`] = `
         src="https://avatars0.githubusercontent.com/u/6333409?v=3"
       />
       <span
+        className="cursor-pointer"
         onClick={[Function]}
       >
         manosim/gitify
@@ -123,6 +124,7 @@ exports[`components/Repository.tsx should use default repository icon when avata
         />
       </svg>
       <span
+        className="cursor-pointer"
         onClick={[Function]}
       >
         manosim/gitify
diff --git a/src/hooks/useNotifications.test.ts b/src/hooks/useNotifications.test.ts
index 2c9ef002..bfa23ffe 100644
--- a/src/hooks/useNotifications.test.ts
+++ b/src/hooks/useNotifications.test.ts
@@ -223,6 +223,9 @@ describe('hooks/useNotifications.ts', () => {
               url: 'https://api.github.com/3',
               latest_comment_url: 'https://api.github.com/3/comments',
             },
+            repository: {
+              full_name: 'some/repo',
+            },
           },
           {
             id: 4,
@@ -232,6 +235,9 @@ describe('hooks/useNotifications.ts', () => {
               url: 'https://api.github.com/4',
               latest_comment_url: 'https://api.github.com/4/comments',
             },
+            repository: {
+              full_name: 'some/repo',
+            },
           },
           {
             id: 5,
@@ -241,6 +247,9 @@ describe('hooks/useNotifications.ts', () => {
               url: null,
               latest_comment_url: null,
             },
+            repository: {
+              full_name: 'some/repo',
+            },
           },
           {
             id: 6,
@@ -250,6 +259,9 @@ describe('hooks/useNotifications.ts', () => {
               url: null,
               latest_comment_url: null,
             },
+            repository: {
+              full_name: 'some/repo',
+            },
           },
         ];
 
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index 272f9be4..c30c3ce6 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -34,7 +34,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
   data-testid="settings"
 >
   <div
-    class="flex justify-between items-center mt-4 py-2 mx-8"
+    class="flex justify-between items-center mt-2 py-2 mx-8"
   >
     <button
       class="focus:outline-none"
@@ -278,7 +278,7 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
     </div>
   </div>
   <div
-    class="flex justify-between items-center bg-gray-200 dark:bg-gray-darker py-4 px-8"
+    class="flex justify-between items-center bg-gray-200 dark:bg-gray-darker py-1 px-8"
   >
     <small
       class="font-semibold cursor-pointer"