more

src/Components/Modals/PaymentModal.js

@@ -112,7 +112,7 @@ const PaymentModal = ({
                 {names.map((name, i) => (
                   <Col
                     key={`${name}${i + fieldsChunkSize * j}-modal`}
-                    className="mb-3"
+                    className={j === 2 ? "mb3 short-column" : "mb-3"}
                   >
                     <TextInput
                       key={`${name}-modal-input`}
@@ -129,6 +129,13 @@ const PaymentModal = ({
                       type={paymentfields[name].type}
                       values={paymentfields[name].values}
                       disabled={isBusy}
+                      inputClassName={
+                        j === 2
+                          ? "skinny-input"
+                          : j === 1 && i === 1
+                          ? "skinny-input"
+                          : null
+                      }
                     />
                   </Col>
                 ))}

src/Components/SignupPage/SignupPage.js

@@ -217,14 +217,14 @@ const SignupPage = () => {
     if (isBusy) {
       return;
     }
-
+    /*
     const dataValues = validateUserData();
     if (dataValues === null) {
       return;
     }
 
     saveLeadData(dataValues);
-
+*/
     setShowSelectPlan(!showSelectPlan);
   };
 

src/Constants/Fields/PaymentFields.js

@@ -19,19 +19,19 @@ export const paymentfields = {
   },
   cardCvvCode: {
     required: true,
-    label: "Card CVV Number",
+    label: "CVV Number",
     maxLength: 5,
     type: "cardCvvCode",
   },
   cardExpirationMonth: {
     required: true,
-    label: "Card Expiration Month",
+    label: "Month",
     maxLength: 2,
     type: "cardExpirationMonth",
   },
   cardExpirationYear: {
     required: true,
-    label: "Card Expiration Year",
+    label: "Year",
     maxLength: 4,
     type: "cardExpirationYear",
   },

src/pageElements/TextInput.js

@@ -15,9 +15,15 @@ const TextInput = (props) => {
     type,
     disabled,
   } = props;
-
+  console.log("inputClassName", inputClassName);
   return (
-    <div className="pe-input-container form-floating mb-3">
+    <div
+      className={
+        inputClassName
+          ? `pe-input-container form-floating mb-3 ${inputClassName}`
+          : "pe-input-container form-floating mb-3"
+      }
+    >
       {label ? (
         <label htmlFor="signup" className="form-label">
           {label}

src/styles/modals.scss

@@ -84,6 +84,8 @@
   margin-bottom: 12px;
   margin-right: 20px;
   padding-right: 20px;
+  padding-bottom: 8px;
+  margin-bottom: 18px;
 }
 
 .paymentmodal-order-summarybox {
@@ -113,3 +115,9 @@
   border-bottom: 1px solid #cecece;
   margin-bottom: 4px;
 }
+
+.short-column {
+  max-width: 120px !important;
+  margin-right: 1.4rem;
+  margin-bottom: 1rem;
+}

src/styles/text-input.scss

@@ -11,3 +11,11 @@
 .select-option:hover {
   background-color: white;
 }
+
+.skinny-input {
+  width: 120px;
+}
+
+.skinny-column {
+  width: 120px !important;
+}