style: update InputCTASection CSS

acid-info · Nov 12, 2024 · 470bdfa · 470bdfa
1 parent ca1d892
commit 470bdfa
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 17 deletions.
diff --git a/packages/docusaurus-playground/src/pages/index.mdx b/packages/docusaurus-playground/src/pages/index.mdx
@@ -675,16 +675,9 @@ import * as challengesData from '/generated/challenges.json'
         description={'Subscribe\nto our newsletter'}
         label="Subscribe"
         formInput={[
-          {
-            label: 'Name',
-            placeholder: 'Name',
-            type: 'text',
-            name: 'name',
-            required: true,
-          },
           {
             label: 'Email',
-            placeholder: 'Enter your email',
+            placeholder: 'Enter address',
             type: 'email',
             name: 'email',
             required: true,

diff --git a/...ges/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.scss b/...ges/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.scss
@@ -27,17 +27,27 @@
 
 .mdx-input-cta-section__form {
   display: flex;
-  flex-direction: column;
-  gap: 40px;
+
+  gap: 16px;
 }
 
 .mdx-input-cta-section__input-fields {
   display: flex;
   gap: 16px;
+  width: 100%;
+
+  & > div {
+    width: 100%;
+  }
 }
 
 .mdx-input-cta-section__message {
-  margin-left: 12px;
+  display: block;
+  margin-top: 12px;
+}
+
+form .mdx-input-cta-section__cta {
+  width: 146px !important;
 }
 
 @include utils.responsive('sm', 'down') {
@@ -56,6 +66,8 @@
   .mdx-input-cta-section__container {
     .mdx-input-cta-section__form {
       margin-bottom: -24px;
+      flex-direction: column;
+      gap: 40px;
     }
 
     .input-cta-section__description--no-form {

diff --git a/...ages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.tsx b/...ages/logos-docusaurus-theme/src/client/components/mdx/InputCTASection/InputCTASection.tsx
@@ -105,12 +105,6 @@ export const InputCTASection: React.FC<InputCTASectionProps & Props> = ({
             <Button type="submit" className="mdx-input-cta-section__cta">
               <Typography variant="body1">{label}</Typography>
             </Button>
-            <Typography
-              className="mdx-input-cta-section__message"
-              variant="body2"
-            >
-              {message}
-            </Typography>
           </div>
         </form>
       ) : (
@@ -120,6 +114,11 @@ export const InputCTASection: React.FC<InputCTASectionProps & Props> = ({
           </Button>
         </Link>
       )}
+      {message && (
+        <Typography className="mdx-input-cta-section__message" variant="body2">
+          {message}
+        </Typography>
+      )}
     </div>
   )
 }