Grid cell resize handles color tweak (#6057)

**Problem:** The grid resize handles should look more similar to the other resize handles. **Fix:** 1. Make the handles white with a shadow 2. Make the translucent shadow appear during the resize, and transparent otherwise. | Before | After | |-------|---------| | ![Kapture 2024-07-10 at 12 31 53](https://github.com/concrete-utopia/utopia/assets/1081051/ca3380a1-e5d3-43c8-a341-ebcd2386be26) | ![Kapture 2024-07-10 at 12 31 09](https://github.com/concrete-utopia/utopia/assets/1081051/8297e36d-736d-4e98-91a2-3cec28454bff) |
concrete-utopia · Jul 10, 2024 · 9ee92d4 · 9ee92d4
1 parent b17a40e
commit 9ee92d4
Showing 1 changed file with 10 additions and 3 deletions.
diff --git a/editor/src/components/canvas/controls/grid-controls.tsx b/editor/src/components/canvas/controls/grid-controls.tsx
@@ -910,6 +910,8 @@ interface GridResizeControlProps {
 
 export const GridResizeControls = controlForStrategyMemoized<GridResizeControlProps>(
   ({ target }) => {
+    const colorTheme = useColorTheme()
+
     const element = useEditorState(
       Substores.metadata,
       (store) => MetadataUtils.findElementByElementPath(store.editor.jsxMetadata, target),
@@ -958,6 +960,8 @@ export const GridResizeControls = controlForStrategyMemoized<GridResizeControlPr
       )
     }, [dragRef, resizeControlRef, startingBounds])
 
+    const isResizing = bounds != null
+
     const onMouseUp = React.useCallback(() => {
       setBounds(null)
       setStartingBounds(null)
@@ -1021,7 +1025,7 @@ export const GridResizeControls = controlForStrategyMemoized<GridResizeControlPr
             gridTemplateRows: '10px 1fr 10px',
             gridTemplateColumns: '10px 1fr 10px',
             gridTemplateAreas: "'empty1 rs empty2' 'cs empty3 ce' 'empty4 re empty5'",
-            backgroundColor: '#ffffff66',
+            backgroundColor: isResizing ? colorTheme.whiteOpacity30.value : 'transparent',
           }}
         >
           {GridResizeEdges.map((edge) => (
@@ -1045,8 +1049,11 @@ export const GridResizeControls = controlForStrategyMemoized<GridResizeControlPr
                 style={{
                   pointerEvents: 'initial',
                   ...gridEdgeToWidthHeight(edge, scale),
-                  backgroundColor: 'black',
-                  opacity: 0.5,
+                  backgroundColor: colorTheme.white.value,
+                  boxShadow: `${colorTheme.canvasControlsSizeBoxShadowColor50.value} 0px 0px
+					${1 / scale}px, ${colorTheme.canvasControlsSizeBoxShadowColor20.value} 0px ${1 / scale}px ${
+                    2 / scale
+                  }px ${1 / scale}px`,
                 }}
               />
             </div>