Sync to Sprint Deploy 23: PM-652 Cart UI Overlap Issues (#278)

* PM-652: form ui updates * PM-652: form ui updates * Fix lint issue * PM-652: form ui updates * PM-652: form ui updates
hlxsites · Nov 12, 2024 · 7259400 · 7259400
1 parent 4e5f04f
commit 7259400
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 10 deletions.
diff --git a/blocks/plans-quote/form.js b/blocks/plans-quote/form.js
@@ -102,10 +102,11 @@ export default function formDecoration(block) {
   const promocodeFieldHTML = jsx`
     <div class="wrapper promocode-wrapper">
       <input type="text" id="promocode" name="promocode" placeholder="Enter Code">
-      <label for="promocode" class="float-label">Promo/Coupon Code (optional)<div>*Only one promotional/coupon code can be used per transaction</div></label>
+      <label for="promocode" class="float-label">Promo/Coupon Code</label>
       <span class="checkmark"></span>
       <button type="button" id="apply-promo-code" class="secondary" disabled>Apply</button>
       <div class="error-message"></div>
+      <div class="promo-code-details">*Only one promotional/coupon code can be used per transaction</div>
     </div>
   `;
 

diff --git a/blocks/plans-quote/plans-quote.css b/blocks/plans-quote/plans-quote.css
@@ -68,8 +68,8 @@ main .plans-quote form .checkbox-text-wrapper > div {
   box-sizing: border-box;
 }
 
-main .plans-quote form .promocode-wrapper label {
-  top: -30px;
+main .plans-quote form .wrapper > label {
+  padding-left: 0;
 }
 
 main .plans-quote form input:not(:placeholder-shown)~label {
@@ -80,7 +80,7 @@ main .plans-quote form .wrapper:not(.flex-wrapper) label {
   padding-bottom: 0;
 }
 
-main .plans-quote form .promocode-wrapper label > div {
+.plans-quote .promo-code-details {
   display: block;
   font-size: 0.8rem;
   color: #333f48;
@@ -123,6 +123,12 @@ main .plans-quote form .promocode-wrapper {
   margin-bottom: 3.25rem;
 }
 
+main .plans-quote form input[type="text"],
+main .plans-quote form input[type="email"] {
+  padding-left: 0;
+  padding-right: 0;
+}
+
 main .plans-quote.first-step > div > div:nth-child(1) > p:first-of-type {
   background-color: #007680;
   color: #fff;
@@ -370,14 +376,19 @@ main .plans-quote form {
 }
 
 main .plans-quote form button#apply-promo-code {
-  position: absolute;
   font-size: 1rem;
-  right: .5rem;
-  bottom: 1rem;
-  margin: 0;
+  margin: 1rem 0 0;
   padding: 0 2rem;
   height: 1.7rem;
-  width: 7rem;
+  width: 100%;
+
+  @media (min-width: 1024px) {
+    position: absolute;
+    right: 0;
+    top: 1.2rem;
+    margin: 0;
+    width: 7rem;
+  }
 }
 
 main .plans-quote form button#apply-promo-code:hover {
@@ -393,7 +404,11 @@ main .plans-quote form .promocode-wrapper.error button#apply-promo-code {
 }
 
 main .plans-quote form .promocode-wrapper span.checkmark {
-  right: 8rem;
+  top: 1.4rem;
+
+  @media (min-width: 1024px) {
+    right: 7.25rem;
+  }
 }
 
 main .plans-quote form .checkbox-text-wrapper {