From 0ad8c635ad565149b077bbd2c23f235ddd22febf Mon Sep 17 00:00:00 2001
From: designtesbrot <designtesbrot@users.noreply.github.com>
Date: Mon, 9 Sep 2024 19:58:04 +0200
Subject: [PATCH] fix(stamp): radius styles of color input (#1862)

Closes 1830
---
 .../static/css/theme/componentes.css          | 19 ++++++++++++++++++-
 src/main/resources/templates/misc/stamp.html  | 17 ++++++++++++++++-
 2 files changed, 34 insertions(+), 2 deletions(-)

diff --git a/src/main/resources/static/css/theme/componentes.css b/src/main/resources/static/css/theme/componentes.css
index 7e3f744e..eebccb62 100644
--- a/src/main/resources/static/css/theme/componentes.css
+++ b/src/main/resources/static/css/theme/componentes.css
@@ -792,6 +792,23 @@ textarea.form-control {
   box-shadow: 0 0 0 0.25rem var(--md-sys-color-outline-variant);
 }
 
+.form-control-color {
+  padding: 0;
+  height: 2.4rem;
+  width: 2.4rem;
+}
+
+.form-control input[type="color"] {
+  opacity: 0;
+  height: 2.4rem;
+  width: 2.4rem;
+  box-sizing: border-box;
+ }
+
+ .form-control input[type="color"]:hover{
+   cursor: pointer;
+ }
+
 /* Navbar Components */
 .navbar-brand {
   color: var(--md-sys-color-on-surface) !important;
@@ -916,4 +933,4 @@ textarea.form-control {
   color: var(--md-sys-color-on-error-container);
   background-color: var(--md-sys-color-error-container);
   border-color: transparent;
-}
\ No newline at end of file
+}
diff --git a/src/main/resources/templates/misc/stamp.html b/src/main/resources/templates/misc/stamp.html
index fef75b64..90ce8601 100644
--- a/src/main/resources/templates/misc/stamp.html
+++ b/src/main/resources/templates/misc/stamp.html
@@ -119,7 +119,22 @@
 
                 <div class="mb-3">
                   <label for="customColor" class="form-label" th:text="#{AddStampRequest.customColor}">Custom Color</label>
-                  <input type="color" class="form-control form-control-color" id="customColor" name="customColor" value="#d3d3d3">
+                  <div class="form-control form-control-color" style="background-color: #d3d3d3;">
+                    <input type="color" id="customColor" name="customColor" value="#d3d3d3">
+                  </div>
+                  <script>
+                    let colorInput = document.getElementById("customColor");
+                    if (colorInput) {
+                      let colorInputContainer = colorInput.parentElement;
+                      if (colorInputContainer) {
+                        colorInput.onchange = function() {
+                          colorInputContainer.style.backgroundColor = colorInput.value;
+                        }
+                        colorInputContainer.style.backgroundColor = colorInput.value;
+                      }
+                    }
+
+                  </script>
                 </div>
 
                 <button type="submit" id="submitBtn" class="btn btn-primary" th:text="#{AddStampRequest.submit}"></button>