Style adjustments to align with Figma

Author: jonkafton

src/login/Template.tsx

@@ -16,6 +16,7 @@ const Container = styled.div(({ theme }) => ({
   alignItems: "center",
   paddingBlockStart: "24px",
   paddingBlockEnd: "24px",
+  backgroundColor: theme.custom.colors.lightGray1,
   [theme.breakpoints.down("sm")]: {
     alignItems: "flex-start"
   }
@@ -39,9 +40,9 @@ const Header = styled.header(({ theme }) => ({
   }
 }))
 
-const Title = styled(Typography)({
-  fontWeight: "normal"
-})
+const Title = styled(Typography)(({ theme }) => ({
+  fontWeight: theme.typography.fontWeightBold
+}))
 
 const Content = styled.div({
   paddingInlineStart: "32px",
@@ -90,7 +91,7 @@ export default function Template(props: TemplateProps<KcContext, I18n>) {
     <Container>
       <Card>
         <Header>
-          <Logos homeUrl={olSettings?.homeUrl} />
+          <Logos />
           {/* App-initiated actions should not see warning messages about the need to complete the action during login. */}
           {displayMessage && message !== undefined && (message.type !== "warning" || !isAppInitiatedAction) && (
             <div className={`alert-${message.type} pf-m-${message?.type === "error" ? "danger" : message.type}`}>

src/login/UserProfileFormFields.tsx

@@ -34,8 +34,6 @@ export default function UserProfileFormFields(props: Omit<UserProfileFormFieldsP
 
   const groupNameRef = { current: "" }
 
-  console.log("formFieldStates", formFieldStates)
-
   return (
     <>
       {formFieldStates.map(({ attribute, displayableErrors, valueOrValues }) => {
@@ -236,6 +234,7 @@ function InputTag(props: InputFieldByTypeProps & { fieldIndex: number | undefine
   return (
     <>
       <TextField
+        size="medium"
         id={attribute.name}
         name={attribute.name}
         label={label}

src/login/components/Elements.tsx

@@ -41,16 +41,15 @@ export const SocialProviderButtonLink = styled(SmootButtonLink)(({ theme }) => (
   width: "100%",
   color: theme.custom.colors.black,
   ...theme.typography.subtitle1,
-  fontWeight: theme.typography.fontWeightBold,
+  fontWeight: theme.typography.fontWeightMedium,
+  fontSize: theme.typography.pxToRem(14),
   display: "inline-flex",
   justifyContent: "center",
   alignItems: "center",
   gap: "8px",
   "&:hover, &:hover:not(:disabled)": {
     backgroundColor: "inherit",
-    borderColor: theme.custom.colors.black,
-    borderWidth: "2px",
-    padding: "11px 23px"
+    borderColor: theme.custom.colors.black
   }
 }))
 
@@ -77,7 +76,7 @@ export const ValidationMessage = styled.span(({ theme }) => ({
 export const Info = styled.div(({ theme }) => ({
   ...theme.typography.body2,
   color: theme.custom.colors.darkGray1,
-  marginTop: "8px",
+  marginTop: "24px",
   a: {
     ...theme.typography.body2
   }
@@ -99,7 +98,7 @@ const Separator = styled.div(({ theme }) => ({
   display: "flex",
   alignItems: "center",
   textAlign: "center",
-  padding: "16px 0",
+  padding: "24px 0",
   "&::before, &::after": {
     content: '""',
     flex: 1,
@@ -110,8 +109,10 @@ const Separator = styled.div(({ theme }) => ({
   span: {
     textAlign: "center",
     margin: "0 20px",
-    fontSize: "16px",
-    color: theme.custom.colors.darkGray2
+    fontSize: theme.typography.pxToRem(14),
+    color: theme.custom.colors.silverGrayDark,
+    height: "32px",
+    lineHeight: "32px"
   }
 }))
 

src/login/components/Logos.tsx

@@ -11,7 +11,7 @@ const Container = styled.div({
   }
 })
 
-export default function Logos({ homeUrl }: { homeUrl: string }) {
+export default function Logos() {
   return (
     <Container>
       <img src={mitLearnLogo} alt="" height={24} />

src/login/components/mit-learn-logo.svg

@@ -73,7 +73,7 @@ const { useI18n, ofTypeI18n } = i18nBuilder
       federatedIdentityExistsMessage:
         "User with {0} {1} already exists. Please sign in to account management to link the account.",
       emailSentMessage:
-        "We've emailed your instructions for setting your password.  You should receive them shortly.",
+        "We emailed you instructions for setting your password. You should receive them shortly.",
       delegationCompleteHeader: "Sign In Successful",
       delegationFailedHeader: "Sign In Failed",
       delegationFailedMessage:

src/login/components/mit-logo.svg

@@ -44,7 +44,7 @@ export default function Login(props: PageProps<Extract<KcContext, { pageId: "log
               {social.providers.map(p => (
                 <SocialProviderButtonLink key={p.alias} id={`social-${p.alias}`} type="button" href={p.loginUrl} variant="bordered" size="large">
                   {p.iconClasses && <i aria-hidden="true"></i>}
-                  {p.alias === "touchstone-idp" ? <img src={mitLogo} alt="MIT Logo" width={29} /> : null}
+                  {p.alias === "touchstone-idp" ? <img src={mitLogo} alt="MIT Logo" width={40} /> : null}
                   <span>{p.displayName}</span>
                 </SocialProviderButtonLink>
               ))}

src/login/i18n.ts

@@ -43,7 +43,7 @@ export default function LoginUsername(props: PageProps<Extract<KcContext, { page
               {social.providers.map(p => (
                 <SocialProviderButtonLink key={p.alias} id={`social-${p.alias}`} type="button" href={p.loginUrl} variant="bordered" size="large">
                   {p.iconClasses && <i className={clsx(p.iconClasses)} aria-hidden="true"></i>}
-                  {p.alias === "touchstone-idp" ? <img src={mitLogo} width={29} /> : null}
+                  {p.alias === "touchstone-idp" ? <img src={mitLogo} width={40} /> : null}
                   <span className={clsx(p.iconClasses && "kc-social-icon-text")}>{p.displayName}</span>
                 </SocialProviderButtonLink>
               ))}