Merge branch 'test' into ana

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;
 }

app/static/js/adyen-implementation.js

@@ -886,13 +886,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() {

app/templates/component.html

@@ -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>