From 43b8ac1d1f25555b9341485566c24c091692999b Mon Sep 17 00:00:00 2001
From: Farah <farah-bayat@hotmail.com>
Date: Tue, 1 Nov 2022 10:13:44 +0000
Subject: [PATCH 1/2] New fonts + alignment box correction

---
 app/templates/component.html | 53 ++++++++++++++++++++++++------------
 1 file changed, 36 insertions(+), 17 deletions(-)

diff --git a/app/templates/component.html b/app/templates/component.html
index 0129e24..95b8aed 100644
--- a/app/templates/component.html
+++ b/app/templates/component.html
@@ -29,7 +29,7 @@
     />
     <style>
       @import url("https://fonts.googleapis.com/css2?family=Oleo+Script:wght@700&display=swap");
-      @import url("https://fonts.googleapis.com/css2?family=Engagement&family=Lato:ital@1&family=Roboto+Condensed:wght@300&display=swap");
+      @import url('https://fonts.googleapis.com/css2?family=Engagement&family=PT+Sans+Caption&family=Roboto+Condensed:wght@300&display=swap');
     </style>
 
     <!-- local CSS -->
@@ -823,10 +823,9 @@
                           autocomplete="off"
                         >
                           <option
-                            value="Segoe UI, sans-serif, Helvetica, Arial"
+                            value="Segoe UI, sans-serif"
                             style="
-                              font-family: 'Segoe UI', sans-serif, Helvetica,
-                                Arial;
+                              font-family: 'Segoe UI', sans-serif;
                             "
                           >
                             Segoe UI
@@ -841,23 +840,43 @@
                           </option>
                           <option
                             value="Engagement, cursive"
-                            style="font-family: 'Engagement', cursive"
+                            style="font-family: 'Engagement', cursive;"
                           >
                             Engagement
                           </option>
                           <option
-                            value="Lato, sans-serif"
-                            style="font-family: 'Lato', sans-serif"
+                            value="Verdana, sans-serif"
+                            style="font-family: 'Verdana', sans-serif;"
                           >
-                            Lato
+                            Verdana
                           </option>
+                           <option
+                            value="Courier New, monospace"
+                            style="font-family: 'Courier New', monospace;"
+                          >
+                            Courier New
+                          </option>
+                           <option
+                            value="'Trebuchet MS, sans-serif"
+                            style="font-family: 'Trebuchet MS', sans-serif;"
+                          >
+                            Trebuchet MS
+                          </option> 
                           <option
-                            value="Times New Roman, Times, serif"
+                            value="Tahoma, sans-serif"
                             style="
-                              font-family: 'Times New Roman', Times, serif;
+                              font-family: 'Tahoma', sans-serif;
                             "
                           >
-                            Times New Roman
+                            Tahoma
+                          </option>
+                          <option
+                          value="PT Sans Caption, sans-serif"
+                          style="
+                            font-family: 'PT Sans Caption', sans-serif;
+                          "
+                          >
+                            PT Sans Caption
                           </option>
                           <option
                             value="Arial, Helvetica, sans-serif"
@@ -868,10 +887,9 @@
                             Arial
                           </option>
                           <option
-                            value="Lucida Console, 'Courier New', monospace"
+                            value="Lucida Console, monospace"
                             style="
-                              font-family: 'Lucida Console', 'Courier New',
-                                monospace;
+                              font-family: 'Lucida Console', monospace;
                             "
                           >
                             Lucida
@@ -929,14 +947,15 @@
                           <option
                             selected
                             value="left"
-                            style="text-align: left"
                           >
                             Left
                           </option>
-                          <option value="center" style="text-align: center">
+                          <option value="center"
+                          >
                             Center
                           </option>
-                          <option value="right" style="text-align: right">
+                          <option value="right"
+                          >
                             Right
                           </option>
                         </select>

From 4ff369b11d4f3189221f664e8282fd6c50f60f23 Mon Sep 17 00:00:00 2001
From: Farah <farah-bayat@hotmail.com>
Date: Tue, 1 Nov 2022 11:42:02 +0000
Subject: [PATCH 2/2] Padding on drop-down boxes within Themes & Styles

---
 app/static/css/application.css        | 13 +++++++++----
 app/static/js/adyen-implementation.js |  2 ++
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/app/static/css/application.css b/app/static/css/application.css
index 17d1a5d..72cb000 100644
--- a/app/static/css/application.css
+++ b/app/static/css/application.css
@@ -393,9 +393,10 @@ a:hover {
   margin: 0;
   outline: none;
   padding: 0 0 0 12px;
-  position: relative;
+  position: absolute;
   font-size: var(--small-text);
   width: 10px;
+  bottom:0px;
 }
 
 @media (min-width: 768px) {
@@ -411,6 +412,7 @@ a:hover {
 }
 
 .country-selector__select {
+  position: relative;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
@@ -449,8 +451,9 @@ a:hover {
   margin: auto 0 auto auto;
   outline: none;
   padding: 0 0 0 12px;
-  position: relative;
+  position: absolute;
   width: 100%;
+  bottom: 0px;
 }
 
 @media (min-width: 768px) {
@@ -467,7 +470,7 @@ a:hover {
   border: 0;
   cursor: pointer;
   flex: 1;
-
+  position: relative;
   height: 100%;
   margin: 0 -12px 0 -42px;
   outline: none;
@@ -501,8 +504,9 @@ a:hover {
   margin: auto 0 auto auto;
   outline: none;
   padding: 0 0 0 12px;
-  position: relative;
+  position: absolute;
   width: 100%;
+  bottom: 0px;
 }
 
 /* .left {
@@ -524,6 +528,7 @@ a:hover {
 }
 
 .textalign-selector__select {
+  position: relative;
   -webkit-appearance: none;
   -moz-appearance: none;
   appearance: none;
diff --git a/app/static/js/adyen-implementation.js b/app/static/js/adyen-implementation.js
index c0fa680..a90fb24 100644
--- a/app/static/js/adyen-implementation.js
+++ b/app/static/js/adyen-implementation.js
@@ -936,6 +936,8 @@ function resetDynamicCSS() {
     r.style.setProperty("--payments-spacing", null)
     r.style.setProperty("--paymentselected-margin", null)
     r.style.setProperty("--font-options", null)
+    r.style.setProperty("--bold-selected", null)
+    r.style.setProperty("--italic-selected", null)
   }
 
 // logging configuration object to UI