From 370dc2eed2a006f84d02ad5437cb6fdc9c605190 Mon Sep 17 00:00:00 2001
From: Farah <farah-bayat@hotmail.com>
Date: Sun, 9 Oct 2022 01:21:59 +0100
Subject: [PATCH] fixing - pay button width

- realised the pay button width function didn't actually exist so added it in
---
 app/static/css/application.css        | 9 +++++++++
 app/static/js/adyen-implementation.js | 8 ++++++++
 app/templates/component.html          | 2 +-
 3 files changed, 18 insertions(+), 1 deletion(-)

diff --git a/app/static/css/application.css b/app/static/css/application.css
index ef389c0..a1cad2c 100644
--- a/app/static/css/application.css
+++ b/app/static/css/application.css
@@ -916,6 +916,7 @@ a:hover {
 	--text-align: left;
 	--text-bold: normal;
 	--text-italic: normal;
+	--payButton-width: 100%;
 }
 
 
@@ -945,6 +946,14 @@ a:hover {
 	border-radius: var(--button-edges) !important;
 }
 
+.adyen-checkout__button.adyen-checkout__button--pay {
+	width: var(--payButton-width) !important;
+	margin-right: auto;
+    margin-left: auto;
+	display: flex;
+    justify-content: center;
+}
+
 .form-group {
 	width: 250px;
 	/* Full-width */
diff --git a/app/static/js/adyen-implementation.js b/app/static/js/adyen-implementation.js
index 64a7f9f..fb853cc 100644
--- a/app/static/js/adyen-implementation.js
+++ b/app/static/js/adyen-implementation.js
@@ -588,6 +588,7 @@ function resetDynamicCSS () {
 	r.style.setProperty('--text-bold', null);
 	r.style.setProperty('--text-italic', null);
 	r.style.setProperty('--text-align', null);
+	r.style.setProperty('--payButton-width', null);
 }
 
 function dropinWidth () {
@@ -597,6 +598,13 @@ function dropinWidth () {
 	console.log(widthpx)
 }
 
+function payButtonWidth () {
+	let payWidthValue = document.getElementById("payButtonWidth").value
+	let payWidthpx = payWidthValue + 'px'
+	r.style.setProperty('--payButton-width', payWidthpx);
+	console.log(widthpx)
+}
+
 function fontWidth () {
 	let fontValue = document.getElementById("fontSize").value
 	let fontpx = fontValue + 'px'
diff --git a/app/templates/component.html b/app/templates/component.html
index a9cf56e..10278e8 100644
--- a/app/templates/component.html
+++ b/app/templates/component.html
@@ -566,7 +566,7 @@
                     <!-- toggle -->
                     <div class="col-2 text-right">
                       <div class="form-group">
-                        <input type="range" class="form-control-range" id="changeWidth" min="300" max="700" value="500" onchange="dropinWidth(this.value)">
+                        <input type="range" class="form-control-range" id="payButtonWidth" min="265" max="665" value="100%" onchange="payButtonWidth(this.value)">
                       </div>
                       </div>
                   </div>