fix: fix bug with InputSection mobile UI

acid-info · Dec 11, 2024 · 20bea9e · 20bea9e
1 parent 8c292b8
commit 20bea9e
Show file tree

Hide file tree

Showing 2 changed files with 10 additions and 3 deletions.
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
@@ -43,7 +43,8 @@
 
 .mdx-input-cta-section__message {
   display: block;
-  margin-top: 12px;
+  position: absolute;
+  bottom: -32px;
 }
 
 form .mdx-input-cta-section__cta {
@@ -64,6 +65,8 @@ form .mdx-input-cta-section__cta {
 
 @include utils.responsive('sm', 'down') {
   .mdx-input-cta-section__container {
+    position: relative;
+
     .mdx-input-cta-section__form {
       margin-bottom: -24px;
       flex-direction: column;

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
@@ -28,12 +28,16 @@ export const InputCTASection: React.FC<InputCTASectionProps & Props> = ({
   const [formState, setFormState] = React.useState({ email: '', name: '' })
   const [message, setMessage] = React.useState('')
 
-  const errorMessage =
-    'There was an error submitting the form. Please try again.'
+  const errorMessage = 'There was an error submitting the form.'
 
   const handleSubmit = async (e: any) => {
     e.preventDefault()
 
+    if (!formState?.email) {
+      setMessage('Please enter an email address')
+      return
+    }
+
     try {
       const res = await fetch(
         `https://odoo.logos.co/website_mass_mailing/subscribe_ghost`,