From 4770dd88cded2d8f196fb184c15009ed5764946f Mon Sep 17 00:00:00 2001
From: abhitrueprogrammer <abhiaruvs3@gmail.com>
Date: Mon, 23 Dec 2024 12:41:48 +0530
Subject: [PATCH 1/2] added a color wheel in colorInput component

---
 packages/excalidraw/components/ColorPicker/ColorInput.tsx | 8 +++++++-
 .../excalidraw/components/ColorPicker/ColorPicker.scss    | 1 +
 2 files changed, 8 insertions(+), 1 deletion(-)

diff --git a/packages/excalidraw/components/ColorPicker/ColorInput.tsx b/packages/excalidraw/components/ColorPicker/ColorInput.tsx
index 7e77e06ff..2cb5ca0d2 100644
--- a/packages/excalidraw/components/ColorPicker/ColorInput.tsx
+++ b/packages/excalidraw/components/ColorPicker/ColorInput.tsx
@@ -70,7 +70,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 }}
diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.scss b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
index 39e1845c3..7e4ce570f 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.scss
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
@@ -368,6 +368,7 @@
     }
   }
 
+  
   .color-picker-label-swatch-container {
     border: 1px solid var(--default-border-color);
     border-radius: var(--border-radius-lg);

From c12a5421d622aed7a0f89cd44fa549d7c2f58568 Mon Sep 17 00:00:00 2001
From: abhitrueprogrammer <abhiaruvs3@gmail.com>
Date: Mon, 23 Dec 2024 13:00:31 +0530
Subject: [PATCH 2/2] made the input look consistant with excalidraw look

---
 .../components/ColorPicker/ColorPicker.scss   | 20 ++++++++++++++++++-
 1 file changed, 19 insertions(+), 1 deletion(-)

diff --git a/packages/excalidraw/components/ColorPicker/ColorPicker.scss b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
index 7e4ce570f..1c9d3d057 100644
--- a/packages/excalidraw/components/ColorPicker/ColorPicker.scss
+++ b/packages/excalidraw/components/ColorPicker/ColorPicker.scss
@@ -367,8 +367,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);