From 519593609f156d192b8cde73d574d04e4d3ad7f6 Mon Sep 17 00:00:00 2001
From: Federico Ruggi <1081051+ruggi@users.noreply.github.com>
Date: Tue, 22 Oct 2024 14:45:03 +0200
Subject: [PATCH] Fix GridExpressionInput's border radius and highlight color
 conditions (#6576)

**Problem:**

The border highlight of selected `GridExpressionInput` components should
stay active while the dropdown is open. Also, the border radius should
use the theme's value.

**Fix:**

Fix the inset shadow conditions so that the border is shown as blue if
the _text_ input is focused (not the container), or the dropdown is
open, even if the mouse is not over the dropdown trigger.

In addition, update the border radius size with
`UtopiaTheme.inputBorderRadius`.


| Before | After |
|--------|----------|
| ![Kapture 2024-10-22 at 13 30
43](https://github.com/user-attachments/assets/4a56bc21-3fcd-4531-9632-20eb2d3aa6f6)
| ![Kapture 2024-10-22 at 13 29
21](https://github.com/user-attachments/assets/15c397d5-db82-4af9-9fd3-9b53ff3032d9)
|

Fixes #6575
---
 editor/src/uuiui/inputs/grid-expression-input.tsx | 14 ++++++++------
 1 file changed, 8 insertions(+), 6 deletions(-)

diff --git a/editor/src/uuiui/inputs/grid-expression-input.tsx b/editor/src/uuiui/inputs/grid-expression-input.tsx
index f4a82b1d7f4b..93701a9e060f 100644
--- a/editor/src/uuiui/inputs/grid-expression-input.tsx
+++ b/editor/src/uuiui/inputs/grid-expression-input.tsx
@@ -27,7 +27,7 @@ import {
 import { Icons, SmallerIcons } from '../icons'
 import { NO_OP } from '../../core/shared/utils'
 import { unless } from '../../utils/react-conditionals'
-import { useColorTheme } from '../styles/theme'
+import { useColorTheme, UtopiaTheme } from '../styles/theme'
 
 interface GridExpressionInputProps {
   testId: string
@@ -164,23 +164,25 @@ export const GridExpressionInput = React.memo(
       return gridDimensionsAreEqual(value, defaultValue)
     }, [value, defaultValue])
 
+    const highlightBorder = dropdownOpen || inputFocused
+
     return (
       <div
         style={style}
         css={{
-          borderRadius: 2,
+          borderRadius: UtopiaTheme.inputBorderRadius,
           display: 'flex',
           alignItems: 'center',
           flexGrow: 1,
           flexDirection: 'row',
+          boxShadow: `inset 0px 0px 0px 1px ${
+            highlightBorder ? colorTheme.dynamicBlue.value : 'transparent'
+          }`,
           '&:hover': {
             boxShadow: `inset 0px 0px 0px 1px ${
-              dropdownOpen ? colorTheme.dynamicBlue.value : colorTheme.fg7.value
+              highlightBorder ? colorTheme.dynamicBlue.value : colorTheme.fg7.value
             }`,
           },
-          '&:focus-within': {
-            boxShadow: `inset 0px 0px 0px 1px ${colorTheme.dynamicBlue.value}`,
-          },
         }}
         onMouseOver={onMouseOver}
         onMouseOut={onMouseOut}