From 35a007bd554d284f05098d2d208389ba935cd4c5 Mon Sep 17 00:00:00 2001
From: Thomas Smith <49042513+tsmitty11@users.noreply.github.com>
Date: Wed, 8 Feb 2023 12:02:33 -0500
Subject: [PATCH] Email form adjustments

---
 src/layouts/index.html                |  4 +++-
 src/layouts/partials/mobile-ctas.html | 32 +++++++++++++++++++--------
 2 files changed, 26 insertions(+), 10 deletions(-)

diff --git a/src/layouts/index.html b/src/layouts/index.html
index b2a3dcc..b6f3ef8 100644
--- a/src/layouts/index.html
+++ b/src/layouts/index.html
@@ -79,7 +79,9 @@
       padding-top: 16vw;
       padding-bottom: 16vw;
     }
-
+    .email{
+      height: 50px !important;
+    }
   }
 
   @media only screen and (min-width: 768px) {
diff --git a/src/layouts/partials/mobile-ctas.html b/src/layouts/partials/mobile-ctas.html
index c767497..35b4dc7 100644
--- a/src/layouts/partials/mobile-ctas.html
+++ b/src/layouts/partials/mobile-ctas.html
@@ -11,11 +11,12 @@
 
 <div class="mb-4 subscribe-collapse">
   <div class="col">
+    <p class="text-center small grid-gray">Enter your email to join our newsletter:</p>
     <form id="subscribeForm">
-      <div class="mb-3">
-        <input class="p-3 text-center" placeholder="Enter your email" type="email" id="email" required>
+      <div class="form-container p-1 flex">
+        <input class="email p-3" placeholder="Enter your email" type="email" id="email" required>
+        <button class="ms-2 email email-send hbtn hb-fill-right" style="width:100%;" id="subscribe-submit-btn" type="submit"><i class="icon-telegram"></i></button>
       </div>
-      <button class="hbtn hb-fill-right" style="width:100%;" id="subscribe-submit-btn" type="submit">Subscribe</button>
     </form>
     <div id="formResponse"></div>
   </div>
@@ -27,18 +28,29 @@
       display:none;
     }
 
+    .form-container{
+      border: 1px solid #949494;
+      border-radius: 5px !important;
+      height: 50px;
+    }
+
     #email{
       width:100%;
-      height: 60px;
+      height: 100% !important;
       background-color: #1a1a1a;
-      border: 1.5px solid #949494;
+      border:none !important;
       color: white;
       font-family: "inter", sans-serif;
-      text-transform: uppercase;
-      border-radius: 0px !important;
+      border-radius: 5px;
     }
     #email-btn{
-      text-transform: uppercase;
+      text-transform: uppercase !important;
+    }
+    .email-send{
+      text-transform: uppercase !important;
+      width:20% !important;
+      border-radius: 3px;
+      height: 100% !important;
     }
   </style>
 
@@ -87,7 +99,9 @@
         })
         .catch(error => {
           formResponse.innerHTML =
-            '<p style="color: red">An error occurred. Please try again later.</p>';
+            `<div class="mt-3 orange-bg p-2 flex" style="border-radius: 3px;">
+              <span class="small" style="color: #fff; display:block; margin-left:auto; margin-right:auto;">An error occurred. Please try again later.</span>
+            </div>`;
         });
     });
   </script>