From 6ffbbed52638c29211f25ba1f037142fe9b69880 Mon Sep 17 00:00:00 2001
From: Huyen Nguyen <25715018+huyenltnguyen@users.noreply.github.com>
Date: Fri, 31 May 2024 14:39:00 -0700
Subject: [PATCH] fix(client): login cta in multiple places (#55001)

---
 client/src/components/landing/landing.css                   | 2 +-
 client/src/components/layouts/global.css                    | 1 +
 .../templates/Challenges/components/completion-modal.css    | 6 ++++++
 .../templates/Challenges/components/completion-modal.tsx    | 4 ++--
 4 files changed, 10 insertions(+), 3 deletions(-)

diff --git a/client/src/components/landing/landing.css b/client/src/components/landing/landing.css
index 9b640c3671f..5c376e25307 100644
--- a/client/src/components/landing/landing.css
+++ b/client/src/components/landing/landing.css
@@ -173,7 +173,7 @@ figcaption.caption {
 .as-seen-in,
 .certification-section,
 .testimonials {
-  padding-block: 4vw;
+  padding: 4vw 15px;
 }
 
 .certification-section {
diff --git a/client/src/components/layouts/global.css b/client/src/components/layouts/global.css
index 814a476de67..8fb940bf09d 100644
--- a/client/src/components/layouts/global.css
+++ b/client/src/components/layouts/global.css
@@ -265,6 +265,7 @@ fieldset[disabled] .btn {
   background-image: linear-gradient(#fecc4c, #ffac33);
   border: 3px solid #feac32;
   color: #0a0a23 !important;
+  text-align: center;
 }
 .btn-cta:hover,
 .btn-cta:focus,
diff --git a/client/src/templates/Challenges/components/completion-modal.css b/client/src/templates/Challenges/components/completion-modal.css
index b2a95c9c9f4..2ac6cab1cfd 100644
--- a/client/src/templates/Challenges/components/completion-modal.css
+++ b/client/src/templates/Challenges/components/completion-modal.css
@@ -69,6 +69,12 @@
   transition: width 0ms linear;
 }
 
+/* The maximum width of login button is 500px, which is set in global.css.
+   An override is needed as 500px is not enough to allow the button to span the modal width. */
+.completion-modal-login-btn .signup-btn {
+  max-width: 100%;
+}
+
 @media screen and (max-width: 991px) {
   .progress-bar-wrap,
   .progress-bar-background {
diff --git a/client/src/templates/Challenges/components/completion-modal.tsx b/client/src/templates/Challenges/components/completion-modal.tsx
index ce62eae76ff..61a9b83caef 100644
--- a/client/src/templates/Challenges/components/completion-modal.tsx
+++ b/client/src/templates/Challenges/components/completion-modal.tsx
@@ -206,10 +206,10 @@ class CompletionModal extends Component<
         </Modal.Body>
         <Modal.Footer>
           {isSignedIn ? null : (
-            <>
+            <div className='completion-modal-login-btn'>
               <Login block={true}>{t('learn.sign-in-save')}</Login>
               <Spacer size='xxSmall' />
-            </>
+            </div>
           )}
           <Button
             block={true}