Fix fog color and improve colorInput (#10463)

EtherealEngine · Jun 26, 2024 · 1b9ee3d · 1b9ee3d
1 parent 90353d0
commit 1b9ee3d
Show file tree

Hide file tree

Showing 2 changed files with 3 additions and 2 deletions.
diff --git a/packages/ui/src/components/editor/properties/fog/index.tsx b/packages/ui/src/components/editor/properties/fog/index.tsx
@@ -90,6 +90,7 @@ export const FogSettingsEditor: EditorComponentType = (props) => {
             <ColorInput
               value={new Color(fogState.color.value)}
               onChange={(val) => updateProperty(FogSettingsComponent, 'color')('#' + val.getHexString())}
+              onRelease={(val) => commitProperty(FogSettingsComponent, 'color')('#' + val.getHexString())}
             />
           </InputGroup>
           {fogState.type.value === FogType.Linear ? (

diff --git a/packages/ui/src/primitives/tailwind/Color/index.tsx b/packages/ui/src/primitives/tailwind/Color/index.tsx
@@ -66,12 +66,12 @@ export function ColorInput({
     >
       <div
         tabIndex={0}
-        className={`group h-5 w-5 rounded border border-black focus:border-theme-primary`}
+        className={`group h-5 w-5 cursor-pointer rounded border border-black focus:border-theme-primary`}
         style={{ backgroundColor: hexColor }}
       >
         <SketchPicker
           className={twMerge(
-            'absolute z-10 mt-5 scale-0 bg-theme-surface-main group-hover:scale-100 group-focus:scale-100',
+            'absolute z-10 mt-5 scale-0 bg-theme-surface-main focus-within:scale-100 group-focus:scale-100',
             sketchPickerClassName
           )}
           color={hexColor}