Fixes for two design bugs

Changes active color style in theme to remove changing height of the row
by adding a border

Adds gap between refresh icon and combobox for components

Author: mrmrs

packages/gui/src/components/html/Component/Editor.tsx

@@ -98,7 +98,7 @@ export const ComponentEditor = ({ value, onChange }: ComponentEditorProps) => {
         }}
       >
         <Label>Component</Label>
-        <span sx={{ display: 'flex', alignItems: 'center' }}>
+        <span sx={{ display: 'flex', alignItems: 'center', gap: '8px' }}>
           <Combobox
             key={value.tagName}
             value={value.tagName}
@@ -114,7 +114,7 @@ export const ComponentEditor = ({ value, onChange }: ComponentEditorProps) => {
               <RefreshCw
                 size={15}
                 strokeWidth={2}
-                sx={{ color: 'muted', ml: 2 }}
+                sx={{ color: 'muted' }}
               />
             </IconButton>
           ) : null}

packages/gui/src/components/primitives/ColorPicker/PreviewPalettePicker.tsx

@@ -53,15 +53,14 @@ export function PreviewPalettePicker({
                       appearance: 'none',
                       WebkitAppearance: 'none',
                       cursor: 'pointer',
-                      borderWidth: selected ? '2px' : '1px',
-                      borderColor: selected ? '#ff0000' : 'border',
-                      borderStyle: 'solid',
+                      boxShadow: selected ? 'inset 0 0 0 2px white, 0 0 0 2px '+color.value : 'inset 0 0 0 2px rgba(0,0,0,.15)',
                       borderRadius: '9999px',
                       padding: 0,
                       margin: 0,
                       width: '100%',
                       aspectRatio: '1 / 1',
                       backgroundColor: color.value,
+                      border: 0,
                     }}
                     onClick={() =>
                       onChange({