From a0248855b85fe4a95d5b941b98b9d34cbc46298f Mon Sep 17 00:00:00 2001
From: Danny Banks <djb@amazon.com>
Date: Wed, 17 Jul 2024 12:02:21 -0700
Subject: [PATCH] fix(authenticator): fixing visual inconsistencies (#5389)

---
 .changeset/silver-dolls-report.md             | 11 ++++++++++
 .../ConfirmSignUp/ConfirmSignUp.tsx           |  3 +--
 .../FederatedSignInButton.tsx                 |  1 -
 .../FederatedSignInButton.test.tsx.snap       |  8 +++----
 .../ForceNewPassword/ForceNewPassword.tsx     |  2 --
 .../Authenticator/SignIn/SignIn.tsx           | 10 ++-------
 .../Authenticator/SignUp/SignUp.tsx           |  3 +--
 .../shared/ConfirmSignInFooter.tsx            |  9 +-------
 .../shared/TwoButtonSubmitFooter.tsx          | 21 ++++++-------------
 9 files changed, 26 insertions(+), 42 deletions(-)
 create mode 100644 .changeset/silver-dolls-report.md

diff --git a/.changeset/silver-dolls-report.md b/.changeset/silver-dolls-report.md
new file mode 100644
index 00000000000..6d0c4ef86e7
--- /dev/null
+++ 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
index 57ee9f446c8..bfd7fca371d 100644
--- 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/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.tsx b/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.tsx
index c4e5695ad2e..4706d577ccb 100644
--- a/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignInButtons/FederatedSignInButton.tsx
+++ b/packages/react/src/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/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignInButtons/__tests__/__snapshots__/FederatedSignInButton.test.tsx.snap b/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignInButtons/__tests__/__snapshots__/FederatedSignInButton.test.tsx.snap
index f01d573a72e..b387c299963 100644
--- a/packages/react/src/components/Authenticator/FederatedSignIn/FederatedSignInButtons/__tests__/__snapshots__/FederatedSignInButton.test.tsx.snap
+++ b/packages/react/src/components/Authenticator/FederatedSignIn/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
index f7d4d793b62..fa8ac3d252d 100644
--- 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
index 7de295440cf..fa9675bff11 100644
--- a/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
+++ b/packages/react/src/components/Authenticator/SignIn/SignIn.tsx
@@ -50,7 +50,6 @@ export function SignIn(): JSX.Element {
 
           <Button
             isDisabled={isPending}
-            isFullWidth
             type="submit"
             variation="primary"
             isLoading={isPending}
@@ -58,9 +57,9 @@ export function SignIn(): JSX.Element {
           >
             {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
index 57cf6270bdb..2088b16dfdc 100644
--- 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
index 864c657a50c..7e4285c921c 100644
--- 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
index 5b513351318..e6dcbf79b30 100644
--- 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>
   );
 };