From 2d8e9230190e3c2687aff0bb0575cc175f19cc7c Mon Sep 17 00:00:00 2001
From: Adam Setch <adam.setch@outlook.com>
Date: Fri, 9 Aug 2024 06:55:23 -0400
Subject: [PATCH] refactor: login pages

Signed-off-by: Adam Setch <adam.setch@outlook.com>
---
 src/routes/LoginWithOAuthApp.tsx              |  10 +-
 src/routes/LoginWithPersonalAccessToken.tsx   |  31 ++--
 .../LoginWithOAuthApp.test.tsx.snap           |  12 +-
 ...LoginWithPersonalAccessToken.test.tsx.snap | 138 ++++++++++--------
 4 files changed, 107 insertions(+), 84 deletions(-)

diff --git a/src/routes/LoginWithOAuthApp.tsx b/src/routes/LoginWithOAuthApp.tsx
index 9d0e7df3e..34ce5179b 100644
--- a/src/routes/LoginWithOAuthApp.tsx
+++ b/src/routes/LoginWithOAuthApp.tsx
@@ -76,6 +76,7 @@ export const LoginWithOAuthApp: FC = () => {
                 disabled={!values.hostname}
                 icon={{ icon: PersonIcon, size: Size.XSMALL }}
                 url={getNewOAuthAppURL(values.hostname)}
+                size="xs"
               >
                 Create new OAuth App
               </Button>
@@ -100,7 +101,10 @@ export const LoginWithOAuthApp: FC = () => {
             className="mt-2"
             icon={{ icon: BookIcon, size: Size.XSMALL }}
             url={Constants.GITHUB_DOCS.OAUTH_URL}
-          />
+            size="xs"
+          >
+            Docs
+          </Button>
 
           <Button
             name="Login"
@@ -109,7 +113,9 @@ export const LoginWithOAuthApp: FC = () => {
             icon={{ icon: SignInIcon, size: Size.MEDIUM }}
             disabled={submitting || pristine}
             type="submit"
-          />
+          >
+            Login
+          </Button>
         </div>
       </form>
     );
diff --git a/src/routes/LoginWithPersonalAccessToken.tsx b/src/routes/LoginWithPersonalAccessToken.tsx
index e792ef12b..d70a8d9a3 100644
--- a/src/routes/LoginWithPersonalAccessToken.tsx
+++ b/src/routes/LoginWithPersonalAccessToken.tsx
@@ -57,37 +57,39 @@ export const LoginWithPersonalAccessToken: FC = () => {
           name="hostname"
           label="Hostname"
           placeholder="github.company.com"
-          helpText={
-            <div className="mt-1 italic">
-              Change only if you are using GitHub Enterprise Server.
-            </div>
-          }
-        />
-
-        <FieldInput
-          name="token"
-          label="Token"
-          placeholder="The 40 characters token generated on GitHub"
           helpText={
             <div>
-              <div>
+              <div className="mt-1 italic">
+                Change only if you are using GitHub Enterprise Server.
+              </div>
+              <div className="mt-3">
                 <Button
                   label="Generate a PAT"
                   disabled={!values.hostname}
                   icon={{ icon: KeyIcon, size: Size.XSMALL }}
                   url={getNewTokenURL(values.hostname)}
+                  size="xs"
                 >
                   Generate a PAT
                 </Button>
-                <span className="mx-1">on GitHub and paste above.</span>
+                <span className="mx-1">
+                  on GitHub then paste your{' '}
+                  <span className="italic">token</span> below.
+                </span>
               </div>
               <div className="mt-1 italic">
-                The required scopes will be selected for you.
+                The required scopes will be automatically selected for you.
               </div>
             </div>
           }
         />
 
+        <FieldInput
+          name="token"
+          label="Token"
+          placeholder="The 40 characters token generated on GitHub"
+        />
+
         {!isValidToken && (
           <div className="mt-4 text-sm font-medium text-red-500">
             This token could not be validated with {values.hostname}.
@@ -99,6 +101,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
             label="GitHub Docs"
             icon={{ icon: BookIcon, size: Size.XSMALL }}
             url={Constants.GITHUB_DOCS.PAT_URL}
+            size="xs"
           >
             Docs
           </Button>
diff --git a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
index 5d4c7ad11..c2e298b38 100644
--- a/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithOAuthApp.test.tsx.snap
@@ -84,7 +84,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                 >
                   <button
                     aria-label="Create new OAuth App"
-                    class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
+                    class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 h-7 rounded-md px-2 py-1"
                     disabled=""
                     icon="[object Object]"
                   >
@@ -159,7 +159,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
             >
               <button
                 aria-label="GitHub Docs"
-                class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1 mt-2"
+                class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 h-7 rounded-md px-2 py-1 mt-2"
                 icon="[object Object]"
                 name="Docs"
               >
@@ -177,6 +177,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                     d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
                   />
                 </svg>
+                Docs
               </button>
               <button
                 aria-label="Login"
@@ -200,6 +201,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                     d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
                   />
                 </svg>
+                Login
               </button>
             </div>
           </form>
@@ -287,7 +289,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
               >
                 <button
                   aria-label="Create new OAuth App"
-                  class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
+                  class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 h-7 rounded-md px-2 py-1"
                   disabled=""
                   icon="[object Object]"
                 >
@@ -362,7 +364,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
           >
             <button
               aria-label="GitHub Docs"
-              class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1 mt-2"
+              class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 h-7 rounded-md px-2 py-1 mt-2"
               icon="[object Object]"
               name="Docs"
             >
@@ -380,6 +382,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                   d="M0 1.75A.75.75 0 0 1 .75 1h4.253c1.227 0 2.317.59 3 1.501A3.743 3.743 0 0 1 11.006 1h4.245a.75.75 0 0 1 .75.75v10.5a.75.75 0 0 1-.75.75h-4.507a2.25 2.25 0 0 0-1.591.659l-.622.621a.75.75 0 0 1-1.06 0l-.622-.621A2.25 2.25 0 0 0 5.258 13H.75a.75.75 0 0 1-.75-.75Zm7.251 10.324.004-5.073-.002-2.253A2.25 2.25 0 0 0 5.003 2.5H1.5v9h3.757a3.75 3.75 0 0 1 1.994.574ZM8.755 4.75l-.004 7.322a3.752 3.752 0 0 1 1.992-.572H14.5v-9h-3.495a2.25 2.25 0 0 0-2.25 2.25Z"
                 />
               </svg>
+              Docs
             </button>
             <button
               aria-label="Login"
@@ -403,6 +406,7 @@ exports[`routes/LoginWithOAuthApp.tsx renders correctly 1`] = `
                   d="M2 2.75C2 1.784 2.784 1 3.75 1h2.5a.75.75 0 0 1 0 1.5h-2.5a.25.25 0 0 0-.25.25v10.5c0 .138.112.25.25.25h2.5a.75.75 0 0 1 0 1.5h-2.5A1.75 1.75 0 0 1 2 13.25Zm6.56 4.5h5.69a.75.75 0 0 1 0 1.5H8.56l1.97 1.97a.749.749 0 0 1-.326 1.275.749.749 0 0 1-.734-.215L6.22 8.53a.75.75 0 0 1 0-1.06l3.25-3.25a.749.749 0 0 1 1.275.326.749.749 0 0 1-.215.734Z"
                 />
               </svg>
+              Login
             </button>
           </div>
         </form>
diff --git a/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
index dd3492692..9f0f8f807 100644
--- a/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
+++ b/src/routes/__snapshots__/LoginWithPersonalAccessToken.test.tsx.snap
@@ -75,41 +75,21 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
               type="text"
               value="github.com"
             />
-            <div
-              class="mt-3 text-xs text-gray-700 dark:text-gray-200"
-            >
-              <div
-                class="mt-1 italic"
-              >
-                Change only if you are using GitHub Enterprise Server.
-              </div>
-            </div>
-          </div>
-          <div
-            class="mb-4"
-          >
-            <label
-              class="mb-2 block text-sm font-semibold tracking-wide"
-              for="token"
-            >
-              Token
-            </label>
-            <input
-              class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
-              id="token"
-              name="token"
-              placeholder="The 40 characters token generated on GitHub"
-              type="text"
-              value=""
-            />
             <div
               class="mt-3 text-xs text-gray-700 dark:text-gray-200"
             >
               <div>
-                <div>
+                <div
+                  class="mt-1 italic"
+                >
+                  Change only if you are using GitHub Enterprise Server.
+                </div>
+                <div
+                  class="mt-3"
+                >
                   <button
                     aria-label="Generate a PAT"
-                    class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
+                    class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 h-7 rounded-md px-2 py-1"
                     icon="[object Object]"
                   >
                     <svg
@@ -131,23 +111,48 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
                   <span
                     class="mx-1"
                   >
-                    on GitHub and paste above.
+                    on GitHub then paste your
+                     
+                    <span
+                      class="italic"
+                    >
+                      token
+                    </span>
+                     below.
                   </span>
                 </div>
                 <div
                   class="mt-1 italic"
                 >
-                  The required scopes will be selected for you.
+                  The required scopes will be automatically selected for you.
                 </div>
               </div>
             </div>
           </div>
+          <div
+            class="mb-4"
+          >
+            <label
+              class="mb-2 block text-sm font-semibold tracking-wide"
+              for="token"
+            >
+              Token
+            </label>
+            <input
+              class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
+              id="token"
+              name="token"
+              placeholder="The 40 characters token generated on GitHub"
+              type="text"
+              value=""
+            />
+          </div>
           <div
             class="flex items-end justify-between mt-2"
           >
             <button
               aria-label="GitHub Docs"
-              class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
+              class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 h-7 rounded-md px-2 py-1"
               icon="[object Object]"
             >
               <svg
@@ -265,41 +270,21 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
             type="text"
             value="github.com"
           />
-          <div
-            class="mt-3 text-xs text-gray-700 dark:text-gray-200"
-          >
-            <div
-              class="mt-1 italic"
-            >
-              Change only if you are using GitHub Enterprise Server.
-            </div>
-          </div>
-        </div>
-        <div
-          class="mb-4"
-        >
-          <label
-            class="mb-2 block text-sm font-semibold tracking-wide"
-            for="token"
-          >
-            Token
-          </label>
-          <input
-            class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
-            id="token"
-            name="token"
-            placeholder="The 40 characters token generated on GitHub"
-            type="text"
-            value=""
-          />
           <div
             class="mt-3 text-xs text-gray-700 dark:text-gray-200"
           >
             <div>
-              <div>
+              <div
+                class="mt-1 italic"
+              >
+                Change only if you are using GitHub Enterprise Server.
+              </div>
+              <div
+                class="mt-3"
+              >
                 <button
                   aria-label="Generate a PAT"
-                  class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
+                  class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 h-7 rounded-md px-2 py-1"
                   icon="[object Object]"
                 >
                   <svg
@@ -321,23 +306,48 @@ exports[`routes/LoginWithPersonalAccessToken.tsx renders correctly 1`] = `
                 <span
                   class="mx-1"
                 >
-                  on GitHub and paste above.
+                  on GitHub then paste your
+                   
+                  <span
+                    class="italic"
+                  >
+                    token
+                  </span>
+                   below.
                 </span>
               </div>
               <div
                 class="mt-1 italic"
               >
-                The required scopes will be selected for you.
+                The required scopes will be automatically selected for you.
               </div>
             </div>
           </div>
         </div>
+        <div
+          class="mb-4"
+        >
+          <label
+            class="mb-2 block text-sm font-semibold tracking-wide"
+            for="token"
+          >
+            Token
+          </label>
+          <input
+            class="mb-2 block w-full appearance-none rounded border border-red-500 bg-gray-100 px-4 py-1.5 text-sm focus:bg-gray-200 focus:outline-none dark:text-gray-800"
+            id="token"
+            name="token"
+            placeholder="The 40 characters token generated on GitHub"
+            type="text"
+            value=""
+          />
+        </div>
         <div
           class="flex items-end justify-between mt-2"
         >
           <button
             aria-label="GitHub Docs"
-            class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap rounded text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 min-w-20 h-10 px-4 py-1"
+            class="ring-offset-background focus-visible:ring-ring inline-flex w-fit items-center justify-center whitespace-nowrap text-xs font-medium transition-colors focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 bg-gray-300 dark:text-black hover:opacity-90 h-7 rounded-md px-2 py-1"
             icon="[object Object]"
           >
             <svg