colour pickers update

app/static/css/application.css

@@ -672,6 +672,7 @@ a:hover {
 #payment-page .checkout {
   margin-top: 100px;
   background: var(--bg-color) !important;
+  margin-bottom: 100px;
 }
 
 #payment-page .settings {
@@ -702,6 +703,7 @@ a:hover {
   height: 100vh;
 }
 
+
 /* Adyen Components */
 .payment {
   width: 100%;
@@ -971,16 +973,15 @@ a:hover {
 :root {
   --background-color: #00112c;
   --font-options: "Segoe UI", sans-serif, Helvetica, Arial;
-  --background-color: #00112c;
   --dropin-width: 500px;
   --dropin-font: 17px;
   --button-edges: 10px;
   --body-edges: 0px;
   --border-off: 1px solid #e6e9eb;
   --active-background: #f7f8f9;
-  --bg-color: white;
+  --bg-color: #ffffff;
   --dropin-color: #f7f8f9;
-  --dropin-tab-color: white;
+  --dropin-tab-color: #ffffff;
   --main-green: #0abf53;
   --main-grey: #f3f5f9;
   --main-text: #00112c;
@@ -998,6 +999,7 @@ a:hover {
   --topedges-right: 12px;
   --bottomedges-left: 12px;
   --bottomedges-right: 12px;
+  /* --text-color: #00112c; */
 }
 
 .card-visited .card__back {

app/static/js/adyen-implementation.js

@@ -16,8 +16,8 @@ const storedCountry = document.getElementById("country-code")
  * @param {Array} payMethods - Payment methods included in the array will be "blocked"
  * @param {Array} payArray - Payment methods values to include in the blockedPaymentMethods array
  * @param {string} countrySettings - Value of the currently selected shopper's country
- * 
- */ 
+ *
+ */
 let r = document.querySelector(":root")
 let openFirst = true
 let billAdd = false
@@ -31,12 +31,10 @@ let payMethods =[];
 let payArray = Object.values(payMethods);
 let countrySettings = "NL"
 
-console.log(r.constructor)
-
 /**
  * Hiding toggles of local payment methods not supported for NL (initial page load)
- * 
- */ 
+ *
+ */
 document.getElementById('trustlyCol').style.display = "none"
 document.getElementById('trustlyBox').style.display = "none"
 document.getElementById('trustlyToggle').style.display = "none"
@@ -99,7 +97,7 @@ const countryVariables = [
 /**
  * Country dropdown changes the flag image and reloads the dropin with new country values
  * Calls /paymentMethods to retrieve available txvariants for that country
- * @param {*} el 
+ * @param {*} el
  */
 async function changeSelect(el) {
   // let countryPM = getConfiguration();
@@ -792,6 +790,38 @@ function dropinColor() {
   r.style.setProperty("--dropin-color", dropinColor)
   updateStyleCode()
 }
+/**
+ * @function updateColorPickers - Gets current colour value to show on colour pickers
+ */
+function updateColorPickers() {
+  // font color
+  let fontColorInput = document.getElementById("textColorPick")
+  let fontColor = getComputedStyle(r).getPropertyValue("--text-color")
+  let fontColorNoSpace = fontColor.replace(/\s/g, '');
+  fontColorInput.value = fontColorNoSpace
+  // website background
+  let bgColorInput = document.getElementById("bgColorPick")
+  let bgColor = getComputedStyle(r).getPropertyValue("--bg-color")
+  let bgColorNoSpace = bgColor.replace(/\s/g, '');
+  bgColorInput.value = bgColorNoSpace
+  // active payment method background
+  let activeColorInput = document.getElementById("dropinColorPick")
+  let activeColor = getComputedStyle(r).getPropertyValue("--dropin-color")
+  let activeColorNoSpace = activeColor.replace(/\s/g, '');
+  activeColorInput.value = activeColorNoSpace
+  // collapsed payment methods
+  let tabColorInput = document.getElementById("dropinTabColorPick")
+  let tabColor = getComputedStyle(r).getPropertyValue("--dropin-tab-color")
+  let tabColorNoSpace = tabColor.replace(/\s/g, '');
+  tabColorInput.value = tabColorNoSpace
+  // pay button
+  let buttonColorInput = document.getElementById("buttonColorPick")
+  let buttonColor = getComputedStyle(r).getPropertyValue("--background-color")
+  let buttonColorNoSpace = buttonColor.replace(/\s/g, '');
+  buttonColorInput.value = buttonColorNoSpace
+  //
+}
+// console.log(tabColorNoSpace.constructor)
 /** @function dropinTabColor - Changes collapsed payment methods' colours */
 function dropinTabColor() {
   let dropinTabColor = document.getElementById("dropinTabColorPick").value
@@ -903,7 +933,7 @@ function makeBold() {
     updateStyleCode()
   }
 }
-  
+
   //drop down selector for the different font styles
   function changeFont() {
     r.style.setProperty("--font-options", null)
@@ -915,7 +945,7 @@ function makeBold() {
 
 // Reset CSS values to default Drop-in
 function resetDynamicCSS() {
-    r.style.setProperty("--background-color", null)
+    r.style.setProperty("--background-color", '#00112c')
     r.style.setProperty("--dropin-width", null)
     r.style.setProperty("--body-edges", null)
     r.style.setProperty("--selectedBody-edges", null)
@@ -924,11 +954,11 @@ function resetDynamicCSS() {
     r.style.setProperty("--bottomedges-left", null)
     r.style.setProperty("--bottomedges-right", null)
     r.style.setProperty("--button-edges", null)
-    r.style.setProperty("--bg-color", null)
-    r.style.setProperty("--dropin-color", null)
-    r.style.setProperty("--dropin-tab-color", null)
+    r.style.setProperty("--bg-color", '#ffffff')
+    r.style.setProperty("--dropin-color", '#f7f8f9')
+    r.style.setProperty("--dropin-tab-color", '#ffffff')
     r.style.setProperty("--dropin-font", null)
-    r.style.setProperty("--text-color", null)
+    r.style.setProperty("--text-color", '#00112c')
     r.style.setProperty("--text-bold", null)
     r.style.setProperty("--text-italic", null)
     r.style.setProperty("--text-align", null)
@@ -938,6 +968,7 @@ function resetDynamicCSS() {
     r.style.setProperty("--font-options", null)
     r.style.setProperty("--bold-selected", null)
     r.style.setProperty("--italic-selected", null)
+    updateColorPickers()
   }
 
 // logging configuration object to UI
@@ -1066,4 +1097,6 @@ function restartDropin() {
   successDiv.style.display = "none"
 }
 
+updateColorPickers()
+
 initCheckout()