From b8618d45b4ff3d506aac72fcd3eaa86773f965e2 Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Sun, 14 Apr 2024 06:45:01 -0400
Subject: [PATCH] refactor: improve PAT login experience

---
 src/components/fields/FieldInput.tsx          |  2 +-
 .../__snapshots__/FieldInput.test.tsx.snap    |  2 +-
 src/routes/LoginWithToken.tsx                 | 14 ++++++-------
 .../LoginEnterprise.test.tsx.snap             |  6 +++---
 .../LoginWithToken.test.tsx.snap              | 20 ++++++++++---------
 5 files changed, 23 insertions(+), 21 deletions(-)

diff --git a/src/components/fields/FieldInput.tsx b/src/components/fields/FieldInput.tsx
index 47fcd83fa..c70ae2e2f 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/components/fields/__snapshots__/FieldInput.test.tsx.snap b/src/components/fields/__snapshots__/FieldInput.test.tsx.snap
index b7ba3d9cb..59a421197 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/LoginWithToken.tsx b/src/routes/LoginWithToken.tsx
index 2f05eaded..d249190ad 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/__snapshots__/LoginEnterprise.test.tsx.snap b/src/routes/__snapshots__/LoginEnterprise.test.tsx.snap
index 109d0a93e..0efd39df5 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 369691186..58b6d25cb 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>