From 4eda16f74da0072b10e25c336ddf465ed7762f75 Mon Sep 17 00:00:00 2001
From: Farah <farah-bayat@hotmail.com>
Date: Sat, 8 Oct 2022 23:27:47 +0100
Subject: [PATCH] Function + fixes

- Added text color functionality
- Fixed the brand images from being off centered
---
 app/static/css/application.css        | 27 ++++++++++++++++++++++++---
 app/static/js/adyen-implementation.js | 10 ++++++++++
 app/templates/component.html          | 18 ++++++++++++++++--
 3 files changed, 50 insertions(+), 5 deletions(-)

diff --git a/app/static/css/application.css b/app/static/css/application.css
index 07caa27..0f26ada 100644
--- a/app/static/css/application.css
+++ b/app/static/css/application.css
@@ -472,7 +472,7 @@ a:hover {
 	outline:none;
 	padding:0 0 0 12px;
 	position:relative;
-	width:100%
+	width:100%;
 }
 
 @media (min-width:768px){
@@ -494,7 +494,7 @@ a:hover {
 	margin:0 -12px 0 -42px;
 	outline:none;
 	padding-left:42px;
-	width:180px
+	width:180px;
 }
 
 .text-alignment:focus{
@@ -994,15 +994,36 @@ a:hover {
 .adyen-checkout__payment-method__name {
 	font-weight: var(--text-bold) !important;
 	font-style: var(--text-italic) !important;
+	color: var(--text-color) !important;
 }
 
 .adyen-checkout__label__text {
 	font-weight: var(--text-bold) !important;
 	font-style: var(--text-italic) !important;
+	color: var(--text-color) !important;
 }
 
 .adyen-checkout__checkbox__label {
 	font-weight: var(--text-bold) !important;
 	font-style: var(--text-italic) !important;
+	color: var(--text-color) !important;
+}
+
+.adyen-checkout__button__text {
+	font-weight: var(--text-bold) !important;
+	font-style: var(--text-italic) !important;
+	color: var(--text-color) !important;
+}
+
+.adyen-checkout__card__brands img {
+    border-radius: 3px;
+    height: 16px;
+    width: 24px;
+    left: 0;
+    position: absolute;
+    top: 0;
+}
+
+
+
 
-}
\ No newline at end of file
diff --git a/app/static/js/adyen-implementation.js b/app/static/js/adyen-implementation.js
index 38d53b4..64a7f9f 100644
--- a/app/static/js/adyen-implementation.js
+++ b/app/static/js/adyen-implementation.js
@@ -545,6 +545,12 @@ function dropinTabColor() {
 	r.style.setProperty('--dropin-tab-color', dropinTabColor);
 }
 
+function textColor() {
+	let textColor = document.getElementById("textColorPick").value;
+	r.style.setProperty('--text-color', textColor);
+}
+
+
 function buttonEdges () {
 	let edgeValue = document.getElementById('buttonEdges').value
 	let pixelVal = edgeValue + 'px'
@@ -578,6 +584,10 @@ function resetDynamicCSS () {
 	r.style.setProperty('--dropin-color', null);
 	r.style.setProperty('--dropin-tab-color', null);
 	r.style.setProperty('--dropin-font', null)
+	r.style.setProperty('--text-color', null);
+	r.style.setProperty('--text-bold', null);
+	r.style.setProperty('--text-italic', null);
+	r.style.setProperty('--text-align', null);
 }
 
 function dropinWidth () {
diff --git a/app/templates/component.html b/app/templates/component.html
index e1bbd4d..a9cf56e 100644
--- a/app/templates/component.html
+++ b/app/templates/component.html
@@ -365,7 +365,7 @@
                     <!-- toggle -->
                     <div class="col-2 text-right">
                       <div class="text-alignment">
-                        <select onchange="positionText(this)" id="positionText"  class="textalign-selector__select" autocomplete="off">
+                        <select onchange="positionText(this)" id="positionText" class="textalign-selector__select" autocomplete="off">
                         <option selected value="left" style="text-align: left">Left</option>  
                         <option value="center" style="text-align: center">Center</option>
                         <option value="right" style="text-align: right">Right</option>
@@ -376,6 +376,20 @@
                       </div>
                     </div>
                   </div>
+                  <div class="row container">
+                    <!-- text -->
+                    <div class="col-6"></div>
+                    <!-- title -->
+                    <div class="col-4">
+                      <p class="textFonts text-left ml-3">Colour</p>
+                    </div>
+                    <!-- toggle -->
+                    <div class="col-2 text-right">
+                      <div>
+                        <input type="color" name="" id="textColorPick" onchange="textColor()">
+                      </div>
+                    </div>
+                  </div>
                   <div class="row container">
                     <!-- text -->
                     <div class="col-6"></div>
@@ -419,7 +433,7 @@
                     <!-- text -->
                     <div class="col-6">
                       <p class="textFonts">
-                        Select the colour of your checkout
+                        Select the colour & style of your checkout
                       </p>
                     </div>
                     <!-- title -->