From be1b5713faf9f13742a5b27c0121b2d0cc3c3896 Mon Sep 17 00:00:00 2001
From: David Sevilla Martin <6401250+datitisev@users.noreply.github.com>
Date: Wed, 9 Mar 2022 19:56:25 -0500
Subject: [PATCH] Replace ColorPreviewInput preview box with 'color' input
 (#3271)

---
 js/src/common/components/ColorPreviewInput.tsx |  9 +++------
 less/common/ColorInput.less                    | 18 ++++++++++++++++--
 2 files changed, 19 insertions(+), 8 deletions(-)

diff --git a/js/src/common/components/ColorPreviewInput.tsx b/js/src/common/components/ColorPreviewInput.tsx
index c626205ac..a33944244 100644
--- a/js/src/common/components/ColorPreviewInput.tsx
+++ b/js/src/common/components/ColorPreviewInput.tsx
@@ -5,23 +5,20 @@ import classList from '../utils/classList';
 import icon from '../helpers/icon';
 
 export default class ColorPreviewInput extends Component {
-  value?: string;
-
   view(vnode: Mithril.Vnode<ComponentAttrs, this>) {
-    const { className, ...attrs } = this.attrs;
-    const value = attrs.bidi?.() || attrs.value;
+    const { className, id, ...attrs } = this.attrs;
 
     attrs.type ||= 'text';
 
     return (
       <div className="ColorInput">
-        <input className={classList('FormControl', className)} {...attrs} />
+        <input className={classList('FormControl', className)} id={id} {...attrs} />
 
         <span className="ColorInput-icon" role="presentation">
           {icon('fas fa-exclamation-circle')}
         </span>
 
-        <div className="ColorInput-preview" style={{ '--input-value': value }} role="presentation" />
+        <input className="ColorInput-preview" {...attrs} type="color" />
       </div>
     );
   }
diff --git a/less/common/ColorInput.less b/less/common/ColorInput.less
index ec93ee6ef..baf9591b8 100644
--- a/less/common/ColorInput.less
+++ b/less/common/ColorInput.less
@@ -7,12 +7,26 @@
     bottom: 8px;
     width: 20px;
     height: 20px;
-    pointer-events: none;
   }
 
   &-preview {
-    background-color: var(--input-value);
+    display: inline-block;
     border-radius: 15%;
+    padding: 0;
+    cursor: pointer;
+    overflow: hidden;
+
+    // Match both the wrapper div and the div with the background color
+    &, &::-webkit-color-swatch-wrapper, &::-webkit-color-swatch {
+      border: none;
+      padding: 0;
+    }
+
+    // This has to be a separate entry so other browsers
+    // don't ignore the entire CSS rule. Thanks Firefox.
+    &::-moz-color-swatch {
+      border: none;
+    }
   }
 
   &-icon {