Changes visual styles for larger tap targets and more consistency

Author: mrmrs

packages/gui/src/components/Editor/Controls.tsx

@@ -338,11 +338,13 @@ const FieldsetControl = ({ field }: FieldsetControlProps) => {
           display: 'flex',
           alignItems: 'center',
           justifyContent: 'space-between',
+          mt: 3,
           mb: 2,
         }}
       >
         <h3
           sx={{
+            mt: 0,
             fontSize: 1,
             lineHeight: 1,
             mb: 0,
@@ -353,7 +355,7 @@ const FieldsetControl = ({ field }: FieldsetControlProps) => {
         <FieldsetDropdown onRemove={() => removeField(field)} />
       </div>
       <GenericFieldset field={field}>
-        <div sx={{ pb: 3 }}>
+        <div sx={{ mb: 3, p: 3, borderWidth: '1px', borderStyle: 'solid', borderColor: 'border', borderRadius: '6px', }}>
           <AddPropertyControl
             field={field}
             styles={styles}

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

@@ -7,6 +7,7 @@ import { ComponentData, Slot } from '../types'
 import { useHtmlEditor } from '../Provider'
 import { getSlots, isSlot } from '../../../lib/codegen/util'
 import { mergeComponentAttributes } from './util'
+import IconButton from '../../ui/IconButton'
 
 interface ComponentEditorProps {
   value: ComponentData
@@ -109,11 +110,13 @@ export const ComponentEditor = ({ value, onChange }: ComponentEditorProps) => {
             items={componentIds}
           />
           {value.swappableComponentIds?.length ? (
-            <RefreshCw
-              size={12}
-              onClick={handleSwap}
-              sx={{ color: 'muted', ml: 2 }}
-            />
+            <IconButton onClick={handleSwap}>
+              <RefreshCw
+                size={15}
+                strokeWidth={2}
+                sx={{ color: 'muted', ml: 2 }}
+              />
+            </IconButton>
           ) : null}
         </span>
       </div>

packages/gui/src/components/html/Editors/NodeEditor.tsx

@@ -43,7 +43,8 @@ export function NodeEditor({
     <div
       sx={{
         bg: 'background',
-        height: '240px',
+        minHeight: '4px',
+        height: 'auto',
         resize: 'vertical',
         position: 'sticky',
         top: 0,

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

@@ -10,16 +10,29 @@ export const FieldsetDropdown = ({ onRemove }: FieldsetDropdownProps) => {
     <DropdownMenu.Root>
       <DropdownMenu.Trigger
         sx={{
-          all: 'unset',
+          p: 1,
+          mr: 0,
+          appearance: 'none',
+          WebkitAppearance: 'none',
+          background: 'backgroundOffset',
+          border: 'none',
+          borderRadius: '6px',
           cursor: 'pointer',
-          px: 3,
-          lineHeight: 1,
-          position: 'relative',
-          top: '1px',
           color: 'muted',
+          display: 'flex',
+          alignItems: 'center',
+          justifyContent: 'center',
+          transition: 'color .2s ease-in-out',
+          ':hover': {
+            color: 'text',
+          },
+          ':disabled': {
+            opacity: '50%',
+            cursor: 'initial',
+          },
         }}
       >
-        <MoreVertical size={12} />
+        <MoreVertical size={15} strokeWidth={2}  />
       </DropdownMenu.Trigger>
       <DropdownMenu.Content sx={DROPDOWN_STYLES}>
         <DropdownMenu.Item sx={DROPDOWN_ITEM_STYLES} onClick={onRemove}>

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

@@ -1,6 +1,7 @@
 import * as DropdownMenu from '@radix-ui/react-dropdown-menu'
 import { Copy, Plus, MoreVertical, Trash } from 'react-feather'
 import { DROPDOWN_ITEM_STYLES, DROPDOWN_STYLES } from './styles'
+import IconButton from '../IconButton'
 
 type NodeEditorDropdownProps = {
   onRemove(): void
@@ -15,16 +16,30 @@ export const NodeEditorDropdown = ({
   return (
     <DropdownMenu.Root>
       <DropdownMenu.Trigger
-        sx={{
-          all: 'unset',
-          px: 3,
-          lineHeight: 1,
-          position: 'relative',
-          top: '1px',
-          color: 'muted',
-        }}
+      sx={{
+        p: 1,
+        mr: 2,
+        appearance: 'none',
+        WebkitAppearance: 'none',
+        background: 'backgroundOffset',
+        border: 'none',
+        borderRadius: '6px',
+        cursor: 'pointer',
+        color: 'muted',
+        display: 'flex',
+        alignItems: 'center',
+        justifyContent: 'center',
+        transition: 'color .2s ease-in-out',
+        ':hover': {
+          color: 'text',
+        },
+        ':disabled': {
+          opacity: '50%',
+          cursor: 'initial',
+        },
+      }}
       >
-        <MoreVertical size={12} />
+        <MoreVertical size={15} />
       </DropdownMenu.Trigger>
       <DropdownMenu.Content sx={DROPDOWN_STYLES}>
         <DropdownMenu.Item sx={DROPDOWN_ITEM_STYLES} onClick={onDuplicate}>