refactor: login pages ui (#1454)

Author: setchy

src/routes/LoginWithOAuthApp.tsx

@@ -77,6 +77,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>
@@ -101,7 +102,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"
@@ -110,7 +114,9 @@ export const LoginWithOAuthApp: FC = () => {
             icon={{ icon: SignInIcon, size: Size.MEDIUM }}
             disabled={submitting || pristine}
             type="submit"
-          />
+          >
+            Login
+          </Button>
         </div>
       </form>
     );

src/routes/LoginWithPersonalAccessToken.tsx

@@ -58,37 +58,39 @@ export const LoginWithPersonalAccessToken: FC = () => {
           name="hostname"
           label="Hostname"
           placeholder="github.202132.xyzpany.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}.
@@ -100,6 +102,7 @@ export const LoginWithPersonalAccessToken: FC = () => {
             label="GitHub Docs"
             icon={{ icon: BookIcon, size: Size.XSMALL }}
             url={Constants.GITHUB_DOCS.PAT_URL}
+            size="xs"
           >
             Docs
           </Button>