Style updates to align with Figma

Author: jonkafton

src/login/Template.tsx

@@ -55,8 +55,9 @@ const Footer = styled.footer(({ theme }) => ({
   color: theme.custom.colors.silverGrayDark,
   display: "flex",
   flexDirection: "column",
-  gap: "10px",
-  paddingInline: "32px"
+  gap: "16px",
+  paddingInline: "32px",
+  margin: "12px 0"
 }))
 
 export default function Template(props: TemplateProps<KcContext, I18n>) {

src/login/UserProfileFormFields.tsx

@@ -12,7 +12,7 @@ import type { Attribute } from "keycloakify/login/KcContext"
 import type { KcContext } from "./KcContext"
 import type { I18n } from "./i18n"
 import { Label, ValidationMessage, RevealPasswordButton, HelperText } from "./components/Elements"
-import { TextField } from "@mitodl/smoot-design"
+import { StyledTextField } from "./components/Elements"
 
 export default function UserProfileFormFields(props: Omit<UserProfileFormFieldsProps<KcContext, I18n>, "kcClsx">) {
   const { kcContext, i18n, onIsFormSubmittableValueChange, doMakeUserConfirmPassword, BeforeField, AfterField } = props
@@ -233,7 +233,7 @@ function InputTag(props: InputFieldByTypeProps & { fieldIndex: number | undefine
 
   return (
     <>
-      <TextField
+      <StyledTextField
         size="medium"
         id={attribute.name}
         name={attribute.name}

src/login/components/Elements.tsx

@@ -4,7 +4,8 @@ import {
   Button as SmootButton,
   ButtonLink as SmootButtonLink,
   Alert as SmootAlert,
-  AdornmentButton as SmootAdornmentButton
+  AdornmentButton as SmootAdornmentButton,
+  TextField
 } from "@mitodl/smoot-design"
 import { useIsPasswordRevealed } from "keycloakify/tools/useIsPasswordRevealed"
 import { RiEyeLine, RiEyeOffLine } from "@remixicon/react"
@@ -22,7 +23,8 @@ export const Link = styled.a(({ theme }) => ({
 export const Label = styled.label(({ theme }) => ({
   ...theme.typography.body1,
   display: "block",
-  marginBottom: theme.typography.pxToRem(12)
+  marginBottom: theme.typography.pxToRem(12),
+  color: theme.custom.colors.darkGray1
 }))
 
 export const Input = styled(SmootInput)({
@@ -177,6 +179,12 @@ const AdornmentButton = styled(SmootAdornmentButton)(({ theme }) => ({
   }
 }))
 
+export const StyledTextField = styled(TextField)(({ theme }) => ({
+  label: {
+    color: theme.custom.colors.darkGray1
+  }
+}))
+
 export const RevealPasswordButton = ({
   i18n,
   passwordInputId

src/login/pages/Login.tsx

@@ -2,9 +2,8 @@ import { useState } from "react"
 import type { PageProps } from "keycloakify/login/pages/PageProps"
 import type { KcContext } from "../KcContext"
 import type { I18n } from "../i18n"
-import { Link, Button, Form, Info, ButtonLink, SocialProviderButtonLink, OrBar, RevealPasswordButton } from "../components/Elements"
+import { Link, Button, Form, Info, ButtonLink, SocialProviderButtonLink, OrBar, RevealPasswordButton, StyledTextField } from "../components/Elements"
 import mitLogo from "../components/mit-logo.svg"
-import { TextField } from "@mitodl/smoot-design"
 
 export default function Login(props: PageProps<Extract<KcContext, { pageId: "login.ftl" }>, I18n>) {
   const { kcContext, i18n, doUseDefaultCss, Template, classes } = props
@@ -68,7 +67,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                 method="post"
               >
                 {!usernameHidden && (
-                  <TextField
+                  <StyledTextField
                     id="username"
                     label={
                       !realm.loginWithEmailAllowed ? msg("username") : !realm.registrationEmailAsUsername ? msg("usernameOrEmail") : msg("email")
@@ -87,7 +86,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
                   />
                 )}
 
-                <TextField
+                <StyledTextField
                   id="password"
                   label={msg("password")}
                   name="password"

src/login/pages/LoginPassword.tsx

@@ -2,8 +2,7 @@ import { useState } from "react"
 import type { PageProps } from "keycloakify/login/pages/PageProps"
 import type { KcContext } from "../KcContext"
 import type { I18n } from "../i18n"
-import { Link, Form, Button, RevealPasswordButton } from "../components/Elements"
-import { TextField } from "@mitodl/smoot-design"
+import { Link, Form, Button, RevealPasswordButton, StyledTextField } from "../components/Elements"
 
 export default function LoginPassword(props: PageProps<Extract<KcContext, { pageId: "login-password.ftl" }>, I18n>) {
   const { kcContext, i18n, doUseDefaultCss, Template, classes } = props
@@ -34,7 +33,7 @@ export default function LoginPassword(props: PageProps<Extract<KcContext, { page
             action={url.loginAction}
             method="post"
           >
-            <TextField
+            <StyledTextField
               id="password"
               label={msg("password")}
               name="password"

src/login/pages/LoginResetPassword.tsx

@@ -1,8 +1,7 @@
 import type { PageProps } from "keycloakify/login/pages/PageProps"
 import type { KcContext } from "../KcContext"
 import type { I18n } from "../i18n"
-import { Button, Form, Subtitle } from "../components/Elements"
-import { TextField } from "@mitodl/smoot-design"
+import { Button, Form, Subtitle, StyledTextField } from "../components/Elements"
 
 export default function LoginResetPassword(props: PageProps<Extract<KcContext, { pageId: "login-reset-password.ftl" }>, I18n>) {
   const { kcContext, i18n, doUseDefaultCss, Template, classes } = props
@@ -23,7 +22,7 @@ export default function LoginResetPassword(props: PageProps<Extract<KcContext, {
     >
       <Subtitle>{realm.duplicateEmailsAllowed ? msg("emailInstructionUsername") : msg("emailInstruction")}</Subtitle>
       <Form id="kc-reset-password-form" action={url.loginAction} method="post">
-        <TextField
+        <StyledTextField
           id="username"
           label={!realm.loginWithEmailAllowed ? msg("username") : !realm.registrationEmailAsUsername ? msg("usernameOrEmail") : msg("email")}
           name="username"

src/login/pages/LoginUpdatePassword.tsx

@@ -1,8 +1,7 @@
 import type { PageProps } from "keycloakify/login/pages/PageProps"
 import type { KcContext } from "../KcContext"
 import type { I18n } from "../i18n"
-import { Button, Form, RevealPasswordButton } from "../components/Elements"
-import { TextField } from "@mitodl/smoot-design"
+import { Button, Form, RevealPasswordButton, StyledTextField } from "../components/Elements"
 
 export default function LoginUpdatePassword(props: PageProps<Extract<KcContext, { pageId: "login-update-password.ftl" }>, I18n>) {
   const { kcContext, i18n, doUseDefaultCss, Template, classes } = props
@@ -21,7 +20,7 @@ export default function LoginUpdatePassword(props: PageProps<Extract<KcContext,
       headerNode={msg("updatePasswordTitle")}
     >
       <Form id="kc-passwd-update-form" action={url.loginAction} method="post">
-        <TextField
+        <StyledTextField
           id="password-new"
           label={msg("passwordNew")}
           name="password-new"
@@ -36,7 +35,7 @@ export default function LoginUpdatePassword(props: PageProps<Extract<KcContext,
           error={messagesPerField.existsError("password")}
           endAdornment={<RevealPasswordButton i18n={i18n} passwordInputId="password-new" />}
         />
-        <TextField
+        <StyledTextField
           id="password-confirm"
           label={msg("passwordConfirm")}
           name="password-confirm"

src/login/pages/LoginUsername.tsx

@@ -3,9 +3,8 @@ import { clsx } from "keycloakify/tools/clsx"
 import type { PageProps } from "keycloakify/login/pages/PageProps"
 import type { KcContext } from "../KcContext"
 import type { I18n } from "../i18n"
-import { Link, Button, Form, Info, SocialProviderButtonLink, OrBar } from "../components/Elements"
+import { Link, Button, Form, Info, SocialProviderButtonLink, OrBar, StyledTextField } from "../components/Elements"
 import mitLogo from "../components/mit-logo.svg"
-import { TextField } from "@mitodl/smoot-design"
 
 export default function LoginUsername(props: PageProps<Extract<KcContext, { pageId: "login-username.ftl" }>, I18n>) {
   const { kcContext, i18n, doUseDefaultCss, Template, classes } = props
@@ -65,7 +64,7 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
               method="post"
             >
               {!usernameHidden && (
-                <TextField
+                <StyledTextField
                   id="username"
                   label={!realm.loginWithEmailAllowed ? msg("username") : !realm.registrationEmailAsUsername ? msg("usernameOrEmail") : msg("email")}
                   name="username"