fix(authenticator): fixing visual inconsistencies (#5389)

aws-amplify · Jul 17, 2024 · a024885 · a024885
1 parent 4fed60c
commit a024885
Show file tree

Hide file tree

Showing 9 changed files with 26 additions and 42 deletions.
diff --git a/.changeset/silver-dolls-report.md b/.changeset/silver-dolls-report.md
@@ -0,0 +1,11 @@
+---
+"@aws-amplify/ui-react": patch
+---
+
+fix(authenticator): fixing visual inconsistencies
+
+- Removing any style props from buttons on authenticator to fix font weight inconsistencies
+- Moved the in the Authenticator to be in the same location in the DOM in each view
+- Made the link buttons consistent across Authenticator views
+
+Fixes #5156
diff --git a/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx b/packages/react/src/components/Authenticator/ConfirmSignUp/ConfirmSignUp.tsx
@@ -70,12 +70,11 @@ export function ConfirmSignUp({
               type="submit"
               loadingText={getConfirmingText()}
               isLoading={isPending}
-              fontWeight="normal"
             >
               {getConfirmText()}
             </Button>
 
-            <Button onClick={resendCode} type="button" fontWeight="normal">
+            <Button onClick={resendCode} type="button">
               {getResendCodeText()}
             </Button>
           </Flex>

diff --git a/...components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.tsx b/...components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.tsx
@@ -120,7 +120,6 @@ export const FederatedSignInButton = (
     <Button
       onClick={handleClick}
       className="federated-sign-in-button"
-      fontWeight="normal"
       gap="1rem"
     >
       {iconComponent}

diff --git a/...SignIn/FederatedSignInButtons/__tests__/__snapshots__/FederatedSignInButton.test.tsx.snap b/...SignIn/FederatedSignInButtons/__tests__/__snapshots__/FederatedSignInButton.test.tsx.snap
@@ -4,7 +4,7 @@ exports[`FederatedSignInButton renders as expected with { provider: 'Amazon', te
 <div>
   <button
     class="amplify-button amplify-field-group__control federated-sign-in-button"
-    style="font-weight: var(--amplify-font-weights-normal); gap: 1rem;"
+    style="gap: 1rem;"
     type="button"
   >
     <span
@@ -20,7 +20,7 @@ exports[`FederatedSignInButton renders as expected with { provider: 'Apple', tex
 <div>
   <button
     class="amplify-button amplify-field-group__control federated-sign-in-button"
-    style="font-weight: var(--amplify-font-weights-normal); gap: 1rem;"
+    style="gap: 1rem;"
     type="button"
   >
     <span
@@ -36,7 +36,7 @@ exports[`FederatedSignInButton renders as expected with { provider: 'Facebook',
 <div>
   <button
     class="amplify-button amplify-field-group__control federated-sign-in-button"
-    style="font-weight: var(--amplify-font-weights-normal); gap: 1rem;"
+    style="gap: 1rem;"
     type="button"
   >
     <span
@@ -52,7 +52,7 @@ exports[`FederatedSignInButton renders as expected with { provider: 'Google', te
 <div>
   <button
     class="amplify-button amplify-field-group__control federated-sign-in-button"
-    style="font-weight: var(--amplify-font-weights-normal); gap: 1rem;"
+    style="gap: 1rem;"
     type="button"
   >
     <span

diff --git a/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx b/packages/react/src/components/Authenticator/ForceNewPassword/ForceNewPassword.tsx
@@ -57,14 +57,12 @@ export const ForceNewPassword = ({
             variation="primary"
             isLoading={isPending}
             loadingText={getChangingText()}
-            fontWeight="normal"
           >
             {getChangePasswordText()}
           </Button>
           <Button
             onClick={toSignIn}
             type="button"
-            fontWeight="normal"
             variation="link"
             size="small"
           >

diff --git a/packages/react/src/components/Authenticator/SignIn/SignIn.tsx b/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
@@ -50,17 +50,16 @@ export function SignIn(): JSX.Element {
 
           <Button
             isDisabled={isPending}
-            isFullWidth
             type="submit"
             variation="primary"
             isLoading={isPending}
             loadingText={getSigningInText()}
           >
             {getSignInText()}
           </Button>
+          <Footer />
         </Flex>
       </form>
-      <Footer />
     </View>
   );
 }
@@ -72,12 +71,7 @@ const DefaultFooter = () => {
 
   return (
     <View data-amplify-footer="">
-      <Button
-        fontWeight="normal"
-        onClick={toForgotPassword}
-        size="small"
-        variation="link"
-      >
+      <Button onClick={toForgotPassword} size="small" variation="link">
         {getForgotPasswordText()}
       </Button>
     </View>

diff --git a/packages/react/src/components/Authenticator/SignUp/SignUp.tsx b/packages/react/src/components/Authenticator/SignUp/SignUp.tsx
@@ -61,10 +61,9 @@ export function SignUp(): JSX.Element {
           >
             {getCreateAccountText()}
           </Button>
+          <Footer />
         </Flex>
       </form>
-
-      <Footer />
     </View>
   );
 }

diff --git a/packages/react/src/components/Authenticator/shared/ConfirmSignInFooter.tsx b/packages/react/src/components/Authenticator/shared/ConfirmSignInFooter.tsx
@@ -20,20 +20,13 @@ export const ConfirmSignInFooter = (): JSX.Element => {
         isDisabled={isPending}
         type="submit"
         variation="primary"
-        fontWeight="normal"
         isLoading={isPending}
         loadingText={getConfirmingText()}
       >
         {getConfirmText()}
       </Button>
 
-      <Button
-        onClick={toSignIn}
-        type="button"
-        variation="link"
-        fontWeight="normal"
-        size="small"
-      >
+      <Button onClick={toSignIn} type="button" variation="link" size="small">
         {getBackToSignInText()}
       </Button>
     </Flex>

diff --git a/packages/react/src/components/Authenticator/shared/TwoButtonSubmitFooter.tsx b/packages/react/src/components/Authenticator/shared/TwoButtonSubmitFooter.tsx
@@ -46,24 +46,15 @@ export const TwoButtonSubmitFooter = (
 
   return (
     <Flex direction="column">
-      <Button
-        fontWeight="normal"
-        variation="primary"
-        isDisabled={isPending}
-        type="submit"
-      >
+      <Button variation="primary" isDisabled={isPending} type="submit">
         {submitText}
       </Button>
 
-      <Button
-        onClick={onClick}
-        type="button"
-        variation="link"
-        fontWeight="normal"
-        size="small"
-      >
-        {cancelButtonText}
-      </Button>
+      <Flex direction="column" alignItems="center">
+        <Button onClick={onClick} type="button" variation="link" size="small">
+          {cancelButtonText}
+        </Button>
+      </Flex>
     </Flex>
   );
 };