Adds more design changes

Author: mrmrs

packages/gui/src/components/AddProperty.tsx

@@ -52,14 +52,16 @@ export const AddPropertyControl = ({
 
   return (
     <div>
-      <Label>{label}</Label>
-      <Combobox
-        onFilterItems={handleFilterItems}
-        onItemSelected={handleAddProperty}
-        items={allProperties}
-        decorateItemText={(str) => kebabCase(str)}
-        clearOnSelect
-      />
+      <Label>
+        <span sx={{display: 'block', mb: 1,}}>{label}</span>
+        <Combobox
+          onFilterItems={handleFilterItems}
+          onItemSelected={handleAddProperty}
+          items={allProperties}
+          decorateItemText={(str) => kebabCase(str)}
+          clearOnSelect
+        />
+      </Label>
     </div>
   )
 }

packages/gui/src/components/Layers.tsx

@@ -179,7 +179,7 @@ export default function Layers<T>(props: LayersProps<T>) {
             appearance: 'none',
             px: 0,
             py: 2,
-            m: 0,
+            mt: 2,
             border: 'none',
             background: 'none',
             cursor: 'pointer',

packages/gui/src/components/inputs/TextInput.tsx

@@ -6,12 +6,12 @@ type Props = EditorPropsWithLabel<string>
 export function TextInput<T extends string>(props: Props) {
   const { value, onChange } = props
   return (
-    <div sx={{ display: 'flex', flexDirection: 'row' }}>
+    <div sx={{ width: '100%' }}>
       <input
         type="text"
         value={value}
         onChange={(e) => onChange(e.target.value as T)}
-        sx={{ width: '100%', minHeight: '1.6em', mr: 1 }}
+        sx={{ WebkitAppearance: 'none', appearance: 'none', width: '100%', border: '1px solid', boxSizing: 'border-box', display: 'block', p:2, borderRadius: '6px' }}
       />
     </div>
   )

packages/gui/src/components/primitives/Combobox.tsx

@@ -73,7 +73,7 @@ export function Combobox({
             handleFilterItems('')
           }
         }}
-        sx={{ width: '100%' }}
+        sx={{ WebkitAppearance: 'none', appearance: 'none', width: '100%', border: '1px solid', borderRadius: '6px', p: 1 }}
       />
       <div
         sx={{

packages/gui/src/components/ui/IconButton.tsx

@@ -12,7 +12,7 @@ export default function IconButton(props: Props) {
         WebkitAppearance: 'none',
         background: 'backgroundOffset',
         border: 'none',
-        borderRadius: '6px',
+        borderRadius: '6px,
         cursor: 'pointer',
         color: 'muted',
         display: 'flex',

packages/gui/src/components/ui/dropdowns/EditorDropdown.tsx

@@ -1,6 +1,7 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { MoreVertical, Trash } from 'react-feather'
 import { DROPDOWN_ITEM_STYLES, DROPDOWN_STYLES } from './styles'
+import IconButton from '../IconButton'
 
 type EditorDropdownProps = {
   onClearStyles(): void
@@ -11,14 +12,14 @@ export const EditorDropdown = ({ onClearStyles }: EditorDropdownProps) => {
       <DropdownMenu.Trigger
         sx={{
           all: 'unset',
-          px: 3,
           lineHeight: 1,
           position: 'relative',
-          top: '1px',
           color: 'muted',
         }}
       >
-        <MoreVertical size={12} />
+        <IconButton sx={{ ml: 2 }}>
+          <MoreVertical size={16} />
+        </IconButton>
       </DropdownMenu.Trigger>
       <DropdownMenu.Content sx={DROPDOWN_STYLES}>
         <DropdownMenu.Item sx={DROPDOWN_ITEM_STYLES} onClick={onClearStyles}>

packages/gui/src/components/ui/dropdowns/FieldsetDropdown.tsx

@@ -11,6 +11,7 @@ export const FieldsetDropdown = ({ onRemove }: FieldsetDropdownProps) => {
       <DropdownMenu.Trigger
         sx={{
           all: 'unset',
+          cursor: 'pointer',
           px: 3,
           lineHeight: 1,
           position: 'relative',