Merge c12a5421d6 into 6e655cdb24

packages/excalidraw/components/ColorPicker/ColorInput.tsx

@@ -69,7 +69,13 @@ export const ColorInput = ({
 
   return (
     <div className="color-picker__input-label">
-      <div className="color-picker__input-hash">#</div>
+      <input
+        type="color"
+        onChange={(event) => {
+          changeColor(event.target.value);
+        }}
+        className="color-picker__input"
+      />
       <input
         ref={activeSection === "hex" ? inputRef : undefined}
         style={{ border: 0, padding: 0 }}

packages/excalidraw/components/ColorPicker/ColorPicker.scss

@@ -379,7 +379,26 @@
       box-shadow: none;
     }
   }
-
+  input[type="color"] {
+    -webkit-appearance: none;
+    appearance: none;
+    border: none;        
+    width: 20px;          
+    height: 20px;
+    border-radius: 50%;   
+    padding: 0;
+    outline: none;
+    cursor: pointer;
+  
+    &::-webkit-color-swatch-wrapper {
+      padding: 0;
+    }
+  
+    &::-webkit-color-swatch {
+      border: none;       
+      border-radius: 50%; 
+    }
+  }
   .color-picker-label-swatch-container {
     border: 1px solid var(--default-border-color);
     border-radius: var(--border-radius-lg);