refactor(site): Adjust icon sizes and show password btn in login page (#5992)

site/src/components/SignInForm/OAuthSignInForm.tsx

@@ -14,10 +14,10 @@ type OAuthSignInFormProps = {
   authMethods?: AuthMethods
 }
 
-const useStyles = makeStyles(() => ({
+const useStyles = makeStyles((theme) => ({
   buttonIcon: {
-    width: 14,
-    height: 14,
+    width: theme.spacing(2),
+    height: theme.spacing(2),
   },
 }))
 
@@ -62,8 +62,7 @@ export const OAuthSignInForm: FC<OAuthSignInFormProps> = ({
                 <img
                   alt="Open ID Connect icon"
                   src={authMethods.oidc.iconUrl}
-                  width="24"
-                  height="24"
+                  className={styles.buttonIcon}
                 />
               ) : (
                 <KeyIcon className={styles.buttonIcon} />

site/src/components/SignInForm/SignInForm.tsx

@@ -1,5 +1,4 @@
 import { makeStyles } from "@material-ui/core/styles"
-import Typography from "@material-ui/core/Typography"
 import { FormikTouched } from "formik"
 import { FC, useState } from "react"
 import { AuthMethods } from "../../api/typesGenerated"
@@ -8,6 +7,8 @@ import { Maybe } from "../Conditionals/Maybe"
 import { PasswordSignInForm } from "./PasswordSignInForm"
 import { OAuthSignInForm } from "./OAuthSignInForm"
 import { BuiltInAuthFormValues } from "./SignInForm.types"
+import Button from "@material-ui/core/Button"
+import EmailIcon from "@material-ui/icons/EmailOutlined"
 
 export enum LoginErrors {
   AUTH_ERROR = "authError",
@@ -66,11 +67,9 @@ const useStyles = makeStyles((theme) => ({
     fontSize: 12,
     letterSpacing: 1,
   },
-  showPasswordLink: {
-    cursor: "pointer",
-    fontSize: 12,
-    color: theme.palette.text.secondary,
-    marginTop: 12,
+  icon: {
+    width: theme.spacing(2),
+    height: theme.spacing(2),
   },
 }))
 
@@ -131,13 +130,22 @@ export const SignInForm: FC<React.PropsWithChildren<SignInFormProps>> = ({
           authMethods={authMethods}
         />
       </Maybe>
+
       <Maybe condition={!showPasswordAuth}>
-        <Typography
-          className={styles.showPasswordLink}
+        <div className={styles.divider}>
+          <div className={styles.dividerLine} />
+          <div className={styles.dividerLabel}>Or</div>
+          <div className={styles.dividerLine} />
+        </div>
+
+        <Button
+          fullWidth
           onClick={() => setShowPasswordAuth(true)}
+          variant="contained"
+          startIcon={<EmailIcon className={styles.icon} />}
         >
           {loginPageTranslation.t("showPassword")}
-        </Typography>
+        </Button>
       </Maybe>
     </div>
   )

site/src/i18n/en/loginPage.json

@@ -1,4 +1,4 @@
 {
   "signInTo": "Sign in to",
-  "showPassword": "Show password login"
+  "showPassword": "Email and password"
 }

site/src/pages/LoginPage/LoginPage.test.tsx

@@ -11,6 +11,9 @@ import {
 import { server } from "../../testHelpers/server"
 import { LoginPage } from "./LoginPage"
 import * as TypesGen from "api/typesGenerated"
+import { i18n } from "i18n"
+
+const { t } = i18n
 
 describe("LoginPage", () => {
   beforeEach(() => {
@@ -143,7 +146,8 @@ describe("LoginPage", () => {
     expect(screen.queryByText(Language.passwordSignIn)).not.toBeInTheDocument()
     await screen.findByText(Language.githubSignIn)
 
-    const showPasswordAuthLink = screen.getByText("Show password login")
+    const showPasswordLabel = t("showPassword", { ns: "loginPage" })
+    const showPasswordAuthLink = screen.getByText(showPasswordLabel)
     await userEvent.click(showPasswordAuthLink)
 
     await screen.findByText(Language.passwordSignIn)