Repository: gitify-app/gitify
Pull request #1002 (2024-04-14 10:47:07)

refactor: improve PAT login experience
Further simplify PAT login xp

| Current | Proposed |
| - | - |
| ![Screenshot 2024-04-14 at 6 45 33 AM](https://github.com/gitify-app/gitify/assets/386277/51e99249-6107-48ba-a5bc-41a166396187) | ![Screenshot 2024-04-14 at 6 46 41 AM](https://github.com/gitify-app/gitify/assets/386277/b8b4c3bd-36cf-4972-a16c-f3da4a9a87fc) |






Patch:
diff --git a/src/components/fields/FieldInput.tsx b/src/components/fields/FieldInput.tsx
index 47fcd83f..c70ae2e2 100644
--- a/src/components/fields/FieldInput.tsx
+++ b/src/components/fields/FieldInput.tsx
@@ -21,7 +21,7 @@ export const FieldInput: FC<IFieldInput> = ({
   return (
     <Field name={name}>
       {({ input, meta: { touched, error } }) => (
-        <div className="mt-2">
+        <div className="mb-4">
           <label
             className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
             htmlFor={input.name}
diff --git a/src/context/App.tsx b/src/context/App.tsx
index 5023eb20..e5e10424 100644
--- a/src/context/App.tsx
+++ b/src/context/App.tsx
@@ -100,14 +100,17 @@ export const AppProvider = ({ children }: { children: ReactNode }) => {
     setTheme(settings.theme as Theme);
   }, [settings.theme]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want fetchNotifications to be called for a subset of settings changes.
   useEffect(() => {
     fetchNotifications(accounts, settings);
   }, [settings.participating, settings.showBots]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We only want fetchNotifications to be called for certain account changes.
   useEffect(() => {
     fetchNotifications(accounts, settings);
   }, [accounts.token, accounts.enterpriseAccounts.length]);
 
+  // biome-ignore lint/correctness/useExhaustiveDependencies: We need to update tray title when settings or notifications changes.
   useEffect(() => {
     const count = getNotificationCount(notifications);
 
diff --git a/src/routes/LoginWithToken.tsx b/src/routes/LoginWithToken.tsx
index 2f05eade..d249190a 100644
--- a/src/routes/LoginWithToken.tsx
+++ b/src/routes/LoginWithToken.tsx
@@ -67,17 +67,17 @@ export const LoginWithToken: FC = () => {
           helpText={
             <div>
               <div>
-                Create a Personal Access Token on GitHub and paste above.
-              </div>
-              <div>
-                The required scopes will be selected for you.{' '}
                 <button
                   type="button"
-                  className={`px-2 py-1 my-2 text-xs ${buttonClasses}`}
+                  className={`px-2 py-1 text-xs ${buttonClasses}`}
                   onClick={() => openLink(getNewTokenURL())}
                 >
                   Generate a PAT
-                </button>
+                </button>{' '}
+                on GitHub and paste above.
+              </div>
+              <div className="italic mt-1">
+                The required scopes will be selected for you.
               </div>
             </div>
           }
@@ -90,7 +90,7 @@ export const LoginWithToken: FC = () => {
           helpText={
             <div>
               <div>Defaults to github.com.</div>
-              <div className="italic">
+              <div className="italic mt-1">
                 Change only if you are using GitHub Enterprise Server.
               </div>
             </div>
diff --git a/src/routes/Settings.tsx b/src/routes/Settings.tsx
index 5d3afdfa..9b546b8b 100644
--- a/src/routes/Settings.tsx
+++ b/src/routes/Settings.tsx
@@ -191,7 +191,6 @@ export const SettingsRoute: FC = () => {
             onChange={(evt) =>
               updateSetting('showNotificationsCountInTray', evt.target.checked)
             }
-            helpText="Changes will take effect after restarting the app"
           />
           <Checkbox
             name="showNotifications"


Test patch:
diff --git a/src/components/fields/__snapshots__/FieldInput.test.tsx.snap b/src/components/fields/__snapshots__/FieldInput.test.tsx.snap
index b7ba3d9c..59a42119 100644
--- a/src/components/fields/__snapshots__/FieldInput.test.tsx.snap
+++ b/src/components/fields/__snapshots__/FieldInput.test.tsx.snap
@@ -5,7 +5,7 @@ exports[`components/fields/FieldInput.tsx should render 1`] = `
   onSubmit={[Function]}
 >
   <div
-    className="mt-2"
+    className="mb-4"
   >
     <label
       className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
diff --git a/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap b/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
index 109d0a93..0efd39df 100644
--- a/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`routes/LoginEnterprise.tsx renders correctly 1`] = `
       onSubmit={[Function]}
     >
       <div
-        className="mt-2"
+        className="mb-4"
       >
         <label
           className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
@@ -71,7 +71,7 @@ exports[`routes/LoginEnterprise.tsx renders correctly 1`] = `
         />
       </div>
       <div
-        className="mt-2"
+        className="mb-4"
       >
         <label
           className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
@@ -93,7 +93,7 @@ exports[`routes/LoginEnterprise.tsx renders correctly 1`] = `
         />
       </div>
       <div
-        className="mt-2"
+        className="mb-4"
       >
         <label
           className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
diff --git a/src/routes/__snapshots__/LoginWithToken.test.tsx.snap b/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
index 36969118..58b6d25c 100644
--- a/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithToken.test.tsx.snap
@@ -49,7 +49,7 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
       onSubmit={[Function]}
     >
       <div
-        className="mt-2"
+        className="mb-4"
       >
         <label
           className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
@@ -74,24 +74,26 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
         >
           <div>
             <div>
-              Create a Personal Access Token on GitHub and paste above.
-            </div>
-            <div>
-              The required scopes will be selected for you.
-               
               <button
-                className="px-2 py-1 my-2 text-xs rounded bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer"
+                className="px-2 py-1 text-xs rounded bg-gray-300 font-semibold rounded text-sm text-center hover:bg-gray-500 hover:text-white dark:text-black focus:outline-none cursor-pointer"
                 onClick={[Function]}
                 type="button"
               >
                 Generate a PAT
               </button>
+               
+              on GitHub and paste above.
+            </div>
+            <div
+              className="italic mt-1"
+            >
+              The required scopes will be selected for you.
             </div>
           </div>
         </div>
       </div>
       <div
-        className="mt-2"
+        className="mb-4"
       >
         <label
           className="block tracking-wide text-grey-dark text-sm font-semibold mb-2"
@@ -119,7 +121,7 @@ exports[`routes/LoginWithToken.tsx renders correctly 1`] = `
               Defaults to github.com.
             </div>
             <div
-              className="italic"
+              className="italic mt-1"
             >
               Change only if you are using GitHub Enterprise Server.
             </div>
diff --git a/src/routes/__snapshots__/Settings.test.tsx.snap b/src/routes/__snapshots__/Settings.test.tsx.snap
index e9448a0e..f421070e 100644
--- a/src/routes/__snapshots__/Settings.test.tsx.snap
+++ b/src/routes/__snapshots__/Settings.test.tsx.snap
@@ -334,11 +334,6 @@ exports[`routes/Settings.tsx should render itself & its children 1`] = `
             </label>
           </div>
         </div>
-        <div
-          class="text-xs mt-1 italic text-gray-500 dark:text-gray-300"
-        >
-          Changes will take effect after restarting the app
-        </div>
       </div>
       <div
         class="mt-1 mb-3 text-sm"