From 273ad6ea0820ba7e5a9afed61f8dc82776f0a1e7 Mon Sep 17 00:00:00 2001
From: Farah <farah-bayat@hotmail.com>
Date: Mon, 31 Oct 2022 13:07:39 +0000
Subject: [PATCH] styling changes

- bold + italic active and not active states
- reset button styling
- drop down menu backgrounds
- slider colours
- radio button styling
---
 app/static/css/application.css        | 64 +++++++++++++++++++++------
 app/static/js/adyen-implementation.js | 26 +++++++++--
 app/templates/component.html          |  4 +-
 3 files changed, 75 insertions(+), 19 deletions(-)

diff --git a/app/static/css/application.css b/app/static/css/application.css
index 8476c37..17d1a5d 100644
--- a/app/static/css/application.css
+++ b/app/static/css/application.css
@@ -367,9 +367,25 @@ a:hover {
   margin-right: 24px;
 }
 
+/* resest button start */
+.resetStyle {
+  color: #fff;
+  justify-content: center;
+  background: #00112c !important;
+  border-radius: 6px !important;
+  border: none;
+  width: 110px;
+  height: 30px;
+}
+
+.resetStyle:focus {
+  outline-color: #36bf52;
+}
+/* reset button end */
+
 .country-selector {
   align-items: center;
-  background: #e5eaef;
+  background: #fff;
   border: 1px solid #b9c4c9;
   border-radius: 6px;
   display: flex;
@@ -425,7 +441,7 @@ a:hover {
 /* font selector styling */
 .font-selector {
   align-items: center;
-  background: #e5eaef;
+  background: #fff;
   border: 1px solid #b9c4c9;
   border-radius: 6px;
   display: flex;
@@ -477,7 +493,7 @@ a:hover {
 /* text align selector styling */
 .text-alignment {
   align-items: center;
-  background: #e5eaef;
+  background: #fff;
   border: 1px solid #b9c4c9;
   border-radius: 6px;
   display: flex;
@@ -489,6 +505,18 @@ a:hover {
   width: 100%;
 }
 
+/* .left {
+  text-align: left;
+}
+
+.center {
+  text-align: center;
+}
+
+.right {
+  text-align: right;
+} */
+
 @media (min-width: 768px) {
   .text-alignment {
     width: 200px;
@@ -523,8 +551,8 @@ a:hover {
 }
 
 .italicImage img {
-  width: 20px;
-  height: 20px;
+  width: 15px;
+  height: 15px;
 }
 
 .italicImage .btn {
@@ -533,15 +561,19 @@ a:hover {
   left: 50%;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
-  padding: 0.4cm 0.6cm;
-  border: none;
+  border: var(--italic-selected);
   cursor: pointer;
-  border-radius: 0px;
+  border-radius: 50%;
+  width: 25px;
+  height:25px;
+  box-shadow: none;
+  top: 12.5px;
+
 }
 
 .boldImage img {
-  width: 20px;
-  height: 20px;
+  width: 15px;
+  height: 15px;
 }
 
 .boldImage .btn {
@@ -550,10 +582,13 @@ a:hover {
   left: 50%;
   transform: translate(-50%, -50%);
   -ms-transform: translate(-50%, -50%);
-  padding: 0.4cm 0.6cm;
-  border: none;
+  border: var(--bold-selected);
   cursor: pointer;
-  border-radius: 0px;
+  border-radius: 50%;
+  width: 25px;
+  height:25px;
+  box-shadow: none;
+  top: 12.5px;
 }
 
 /* Test card selector*/
@@ -1079,7 +1114,8 @@ a:hover {
   border-radius: 20px;
   height: 25px;
   width: 25px;
-  border: 2px solid #36bf52;
+  border: 1px solid #36bf52;
+  background-color: #36bf52;
   outline: none;
   -webkit-appearance: none;
 }
diff --git a/app/static/js/adyen-implementation.js b/app/static/js/adyen-implementation.js
index 767cacc..6356633 100644
--- a/app/static/js/adyen-implementation.js
+++ b/app/static/js/adyen-implementation.js
@@ -19,7 +19,7 @@ let payArray = Object.values(payMethods);
  */ 
 let openFirst = true
 let billAdd = false
-let onlyStored = true
+let onlyStored = false
 let holderName = false
 let showPayMethod = true
 let hideCVC = false
@@ -194,9 +194,9 @@ document
     const oldDiv = document.getElementById("dropin-container")
     const newDiv = document.createElement("div")
     if (this.querySelector("input").checked) {
-      onlyStored = false
-    } else {
       onlyStored = true
+    } else {
+      onlyStored = false
     }
     oldDiv.replaceWith(newDiv)
     newDiv.setAttribute("id", "dropin-container")
@@ -873,13 +873,33 @@ function makeItalic() {
     ) {
       document.getElementById("makeItalic").classList.remove("italic-active")
       r.style.setProperty("--text-italic", null)
+      r.style.setProperty("--italic-selected", null)
       updateStyleCode()
     } else {
       document.getElementById("makeItalic").classList.add("italic-active")
       r.style.setProperty("--text-italic", "italic")
+      r.style.setProperty("--italic-selected", "1px solid #36bf52")
       updateStyleCode()
     }
   }
+
+
+// make text bold
+function makeBold() {
+  if (
+    document.getElementById("makeBold").classList.contains("bold-active")
+  ) {
+    document.getElementById("makeBold").classList.remove("bold-active")
+    r.style.setProperty("--text-bold", null)
+    r.style.setProperty("--bold-selected", null)
+    updateStyleCode()
+  } else {
+    document.getElementById("makeBold").classList.add("bold-active")
+    r.style.setProperty("--text-bold", "bold")
+    r.style.setProperty("--bold-selected", "1px solid #36bf52")
+    updateStyleCode()
+  }
+}
   
   //drop down selector for the different font styles
   function changeFont() {
diff --git a/app/templates/component.html b/app/templates/component.html
index c96306e..0129e24 100644
--- a/app/templates/component.html
+++ b/app/templates/component.html
@@ -650,7 +650,7 @@
                     <!-- title -->
                     <div class="col-3">
                       <p class="textFonts text-left ml-3">
-                        Hide stored payment methods
+                        Show stored payment methods
                       </p>
                     </div>
                     <!-- toggle -->
@@ -1255,7 +1255,7 @@
                   <hr class="mt-4 mb-4" />
 
                   <div>
-                    <button type="button" onclick="resetDynamicCSS()">
+                    <button type="button" class="resetStyle" onclick="resetDynamicCSS()">
                       Reset Style
                     </button>
                   </div>