Cleanup the UI of color picker element of inspector

Author: Navaneeth-pk

frontend/src/Editor/Inspector/Elements/Color.jsx

@@ -33,14 +33,13 @@ export const Color = ({
         </div>
       )}
 
-      <input
-        onFocus={() => setShowPicker(true)}
-        type="text"
-        onChange={(e) => onChange(param, 'value', e.target.value, paramType)}
-        className="form-control text-field"
-        name=""
-        value={definition.value}
-      />
+      <div className="row mx-1 color-picker-input" onClick={() => setShowPicker(true)}>
+        <div className="col-auto" style={{width: '40px', height: '30px'}}  style={{backgroundColor: definition.value}}>
+        </div>
+        <div className="col">
+          {definition.value}
+        </div>
+      </div>
     </div>
   );
 };

frontend/src/_styles/theme.scss

@@ -1571,3 +1571,13 @@ input:focus-visible {
   scrollbar-width: none;
   -ms-overflow-style: none;
 }
+
+.sketch-picker { 
+  position: absolute;
+}
+
+
+.color-picker-input {
+  border: solid 1px rgb(223, 223, 223);
+  cursor: pointer;
+}