fix: improved ui of the installment configurator to align config page

Adyen · Nov 22, 2023 · e16e6cc · e16e6cc
1 parent 19d2765
commit e16e6cc
Show file tree

Hide file tree

Showing 2 changed files with 23 additions and 21 deletions.
diff --git a/src/cartridges/bm_adyen/cartridge/static/default/css/configurationSettings.css b/src/cartridges/bm_adyen/cartridge/static/default/css/configurationSettings.css
@@ -498,12 +498,18 @@ ul{
 
 #addRuleButton{
     position: absolute;
-    bottom: 15px;
-    left: 60px;
+    bottom: 35px;
+    left:70px;
 }
 
 #removeRuleButton {
     border: none;
     background-color: transparent;
     outline: none;
-}
+}
+
+#adyen_installments_div{
+    font-family: 'Fakt';
+    font-style: normal;
+    font-size: 14px;
+}
diff --git a/...tridges/bm_adyen/cartridge/templates/default/adyenSettings/settingCards/cardSettings.isml b/...tridges/bm_adyen/cartridge/templates/default/adyenSettings/settingCards/cardSettings.isml
@@ -27,30 +27,26 @@
             </div>
          </div>
          <div class="form-group">
-            <div class="row">
-               <div class="form-group">
-                  <label class="form-title mb-0" for="installments">Enable Credit card installments <small class="text-secondary">(optional)</small></label>
-                  <small id="installmentsHelp" class="form-text mb-1">
-                     If you’re offering an installments option to your shoppers, please configure them below.
-                  </small>
-                  <div class="input-fields">
-                     <input type="hidden" class="form-control" name="AdyenCreditCardInstallments" id="installments" aria-describedby="installmentsHelp" value="${AdyenConfigs.getCreditCardInstallments() || ''}">    
-                  </div>
-                  <div class="adyen-installments-settings collapse ${AdyenConfigs.getAdyenInstallmentsEnabled() ? 'show': ''}">
-                     <div class="input-fields" id="adyen_installments_div">
-                           <div class="d-grid gap-2 d-md-flex justify-content-md-end form-buttons">
-                              <button type="button" id="addRuleButton" class="btn btn-primary border formButton">Add Rule</button>
-                           </div>
-                     </div>
-                  </div>
-               </div>
+            <div class='row'>
                <div class="switch-button">
                   <div class="form-check form-switch">
                      <input class="form-check-input" type="checkbox" name="AdyenInstallments_enabled" id="flexSwitchCheckChecked" data-bs-toggle="collapse" data-bs-target=".adyen-installments-settings" ${AdyenConfigs.getAdyenInstallmentsEnabled() ? 'checked': 'unchecked'}>
                   </div>
                </div>
             </div>
-         </div>   
+            <label class="form-title mb-0" for="installments">Enable credit card installments <small class="text-secondary">(optional)</small></label>
+            <small class="form-text mb-1" id="installmentsHelp">If you’re offering an installments option to your shoppers, please configure them below.</small>
+         </div>
+         <div class="input-fields">
+            <input type="hidden" class="form-control" name="AdyenCreditCardInstallments" id="installments" value="${AdyenConfigs.getCreditCardInstallments() || ''}">    
+         </div>
+         <div class="adyen-installments-settings collapse ${AdyenConfigs.getAdyenInstallmentsEnabled() ? 'show': ''}">
+            <div class="input-fields" id="adyen_installments_div">
+               <div class="d-grid gap-2 d-md-flex justify-content-md-end form-buttons">
+                  <button type="button" id="addRuleButton" class="btn btn-primary border formButton">Add Rule</button>
+               </div>
+            </div>
+         </div>
       </div>
    </div>
 </div>