Style tweaks to the color picker

(temporary, until Mariusz re-works the color picker)

theatre/studio/src/panels/DetailPanel/propEditors/RgbaPropEditor.tsx

@@ -13,7 +13,7 @@ import {RgbaColorPicker} from '@theatre/studio/uiComponents/colorPicker'
 import styled from 'styled-components'
 import usePopover from '@theatre/studio/uiComponents/Popover/usePopover'
 import BasicStringInput from '@theatre/studio/uiComponents/form/BasicStringInput'
-import BasicPopover from '@theatre/studio/uiComponents/Popover/BasicPopover'
+import {popoverBackgroundColor} from '@theatre/studio/uiComponents/Popover/BasicPopover'
 
 const RowContainer = styled.div`
   display: flex;
@@ -31,7 +31,7 @@ const Puck = styled.div.attrs<PuckProps>((props) => ({
     background: props.background,
   },
 }))<PuckProps>`
-  height: calc(100% - 4px);
+  height: calc(100% - 12px);
   aspect-ratio: 1;
   border-radius: 2px;
 `
@@ -42,6 +42,24 @@ const HexInput = styled(BasicStringInput)`
 
 const noop = () => {}
 
+const Popover = styled.div`
+  position: absolute;
+  background-color: ${popoverBackgroundColor};
+  color: white;
+  padding: 0;
+  margin: 0;
+  cursor: default;
+  border-radius: 3px;
+  z-index: 10000;
+  backdrop-filter: blur(8px);
+
+  padding: 4;
+  pointer-events: all;
+
+  border: none;
+  box-shadow: none;
+`
+
 const RgbaPropEditor: React.FC<{
   propConfig: PropTypeConfig_Rgba
   pointerToProp: SheetObject['propsP']
@@ -65,33 +83,26 @@ const RgbaPropEditor: React.FC<{
 
   const [popoverNode, openPopover] = usePopover({}, () => {
     return (
-      <BasicPopover>
-        <div
-          style={{
-            margin: 8,
-            pointerEvents: 'all',
+      <Popover>
+        <RgbaColorPicker
+          color={{
+            r: stuff.value.r,
+            g: stuff.value.g,
+            b: stuff.value.b,
+            a: stuff.value.a,
           }}
-        >
-          <RgbaColorPicker
-            color={{
-              r: stuff.value.r,
-              g: stuff.value.g,
-              b: stuff.value.b,
-              a: stuff.value.a,
-            }}
-            temporarilySetValue={(color) => {
-              const rgba = decorateRgba(color)
-              stuff.temporarilySetValue(rgba)
-            }}
-            permanentlySetValue={(color) => {
-              // console.log('perm')
-              const rgba = decorateRgba(color)
-              stuff.permenantlySetValue(rgba)
-            }}
-            discardTemporaryValue={stuff.discardTemporaryValue}
-          />
-        </div>
-      </BasicPopover>
+          temporarilySetValue={(color) => {
+            const rgba = decorateRgba(color)
+            stuff.temporarilySetValue(rgba)
+          }}
+          permanentlySetValue={(color) => {
+            // console.log('perm')
+            const rgba = decorateRgba(color)
+            stuff.permenantlySetValue(rgba)
+          }}
+          discardTemporaryValue={stuff.discardTemporaryValue}
+        />
+      </Popover>
     )
   })
 

theatre/studio/src/uiComponents/colorPicker/components/common/Alpha.tsx

@@ -12,8 +12,8 @@ import styled from 'styled-components'
 
 const Container = styled.div`
   position: relative;
-  height: 24px;
-  border-radius: 4px;
+  height: 16px;
+  border-radius: 2px;
   // Checkerboard
   background-color: #fff;
   background-image: url('data:image/svg+xml,<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" fill-opacity=".05"><rect x="8" width="8" height="8"/><rect y="8" width="8" height="8"/></svg>');

theatre/studio/src/uiComponents/colorPicker/components/common/AlphaColorPicker.tsx

@@ -15,7 +15,7 @@ import styled from 'styled-components'
 const Container = styled.div`
   position: relative;
   display: flex;
-  gap: 8px;
+  gap: 4px;
   flex-direction: column;
   width: 200px;
   height: 200px;

theatre/studio/src/uiComponents/colorPicker/components/common/Hue.tsx

@@ -11,8 +11,8 @@ import styled from 'styled-components'
 
 const Container = styled.div`
   position: relative;
-  height: 24px;
-  border-radius: 4px;
+  height: 16px;
+  border-radius: 2px;
 
   background: linear-gradient(
     to right,

theatre/studio/src/uiComponents/colorPicker/components/common/Pointer.tsx

@@ -9,12 +9,12 @@ const Container = styled.div`
   position: absolute;
   z-index: 1;
   box-sizing: border-box;
-  width: 28px;
-  height: 28px;
+  width: 16px;
+  height: 16px;
   transform: translate(-50%, -50%);
   background-color: #fff;
-  border: 2px solid #fff;
-  border-radius: 4px;
+  border: 1px solid #ffffff00;
+  border-radius: 2px;
   box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2);
 
   ${StyledInteractive}:focus & {

theatre/studio/src/uiComponents/colorPicker/components/common/Saturation.tsx

@@ -13,7 +13,7 @@ const Container = styled.div`
   flex-grow: 1;
   border-color: transparent; /* Fixes https://github.com/omgovich/react-colorful/issues/139 */
   border-bottom: 12px solid #000;
-  border-radius: 4px 4px 4px 4px;
+  border-radius: 2px;
   background-image: linear-gradient(to top, #000, rgba(0, 0, 0, 0)),
     linear-gradient(to right, #fff, rgba(255, 255, 255, 0));
 

theatre/studio/src/uiComponents/colorPicker/hooks/useColorManipulation.ts

@@ -54,8 +54,6 @@ export function useColorManipulation<T extends AnyColor>(
         !equalColorObjects(hsva, tempCache.current.hsva) &&
         !colorModel.equal(newColor, tempCache.current.color)
       ) {
-        console.log('hsva', hsva)
-        console.log('hsva cache', tempCache.current.hsva)
         tempCache.current = {hsva, color: newColor}
 
         setEditingValue(newColor)