From df1eb8c8de0ea786341854c5016f10b16285d5d3 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <muhammed@freecodecamp.org>
Date: Sat, 18 Feb 2023 07:55:47 +0200
Subject: [PATCH] fix(client): misaligned buttons in the RWD certification
 (#49404)

* fix(client): misalignedbuttons in the RWD certification

* Clean the css file
---
 .../Challenges/codeally/codeally.css          | 10 +-----
 .../templates/Challenges/codeally/show.tsx    | 36 +++++++------------
 2 files changed, 14 insertions(+), 32 deletions(-)

diff --git a/client/src/templates/Challenges/codeally/codeally.css b/client/src/templates/Challenges/codeally/codeally.css
index 87db2551216..37cebb6822b 100644
--- a/client/src/templates/Challenges/codeally/codeally.css
+++ b/client/src/templates/Challenges/codeally/codeally.css
@@ -2,14 +2,6 @@
   font-family: 'Lato', sans-serif;
 }
 
-.ca-btn-padding {
-  padding: 0 15px;
-}
-
-.ca-btn-padding button {
+button[aria-described-by='codeally-cookie-warning'] {
   font-size: 1.1rem;
 }
-
-.ca-btn-margin {
-  margin-bottom: 5px;
-}
diff --git a/client/src/templates/Challenges/codeally/show.tsx b/client/src/templates/Challenges/codeally/show.tsx
index 996045847d9..ffc594f310e 100644
--- a/client/src/templates/Challenges/codeally/show.tsx
+++ b/client/src/templates/Challenges/codeally/show.tsx
@@ -237,7 +237,6 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
           className='codeally-frame'
           data-cy='codeally-frame'
           name={`codeAlly${Date.now()}`}
-          // eslint-disable-next-line @typescript-eslint/restrict-template-expressions
           sandbox='allow-modals allow-forms allow-popups allow-scripts allow-same-origin'
           src={`https://codeally.io/embed/?repoUrl=${url}&${goBackTo}&${envVariables}&${tempToken}&${date}`}
           title='Editor'
@@ -304,29 +303,20 @@ class ShowCodeAlly extends Component<ShowCodeAllyProps> {
                       <Spacer />
                     </>
                   )}
-                <div
-                  className={`ca-btn-padding ${
-                    !isSignedIn ||
-                    challengeType === challengeTypes.codeAllyPractice
-                      ? 'ca-btn-margin'
-                      : ''
-                  }`}
+                <Alert id='codeally-cookie-warning' bsStyle='info'>
+                  <p>{t(`intro:misc-text.enable-cookies`)}</p>
+                </Alert>
+                <Button
+                  aria-describedby='codeally-cookie-warning'
+                  block={true}
+                  bsStyle='primary'
+                  data-cy='start-codeally'
+                  onClick={tryToShowCodeAlly}
                 >
-                  <Alert id='codeally-cookie-warning' bsStyle='info'>
-                    <p>{t(`intro:misc-text.enable-cookies`)}</p>
-                  </Alert>
-                  <Button
-                    aria-describedby='codeally-cookie-warning'
-                    block={true}
-                    bsStyle='primary'
-                    data-cy='start-codeally'
-                    onClick={tryToShowCodeAlly}
-                  >
-                    {challengeType === challengeTypes.codeAllyCert
-                      ? t('buttons.click-start-project')
-                      : t('buttons.click-start-course')}
-                  </Button>
-                </div>
+                  {challengeType === challengeTypes.codeAllyCert
+                    ? t('buttons.click-start-project')
+                    : t('buttons.click-start-course')}
+                </Button>
                 {isSignedIn &&
                   challengeType === challengeTypes.codeAllyCert && (
                     <>