Changes a variety of visual styles in sidebar

- Cleaner alignment
- Additional spacing in subnav with new interaction styles

Author: mrmrs

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

@@ -216,12 +216,12 @@ export const Editor = ({
       hideResponsiveControls={hideResponsiveControls}
     >
       {showRegenerate && (
-        <div sx={{ display: 'flex' }}>
+        <div sx={{ ml: 'auto', display: 'flex' }}>
           <IconButton
             onClick={() => onChange(regenerateAll())}
-            sx={{ ml: 'auto', display: 'flex', gap: 2 }}
+            sx={{ ml: 'auto', }}
           >
-            Regenerate <RefreshCw size={14} />
+            <RefreshCw size={15} />
           </IconButton>
         </div>
       )}

packages/gui/src/components/FieldArray.tsx

@@ -44,9 +44,6 @@ export default function FieldArray<T>(props: FieldArrayProps<T>) {
             <div
               key={i}
               sx={{
-                display: 'grid',
-                gridTemplateColumns: '1fr max-content',
-                gap: 1,
                 my: 1,
                 backgroundColor:
                   i === dragIndex ? 'backgroundOffset' : 'transparent',
@@ -91,7 +88,7 @@ export default function FieldArray<T>(props: FieldArrayProps<T>) {
           m: 0,
           border: '1px solid',
           borderColor: 'border',
-          borderRadius: '0.5rem',
+          borderRadius: '6px',
           background: 'none',
           cursor: 'pointer',
           color: 'text',

packages/gui/src/components/Layers.tsx

@@ -54,7 +54,7 @@ export default function Layers<T>(props: LayersProps<T>) {
         sx={{
           border: '1px solid',
           borderColor: 'border',
-          borderRadius: 8,
+          borderRadius: '6px',
         }}
       >
         <Accordion.Root

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

@@ -14,14 +14,24 @@ const TABS_TRIGGER_STYLES: any = {
   cursor: 'pointer',
   fontSize: 0,
   fontWeight: 500,
-  px: 2,
+  px: 3,
   py: 1,
+  my: 2,
+  borderRadius: '6px',
   color: 'muted',
   display: 'inline-flex',
   gap: '.5em',
   alignItems: 'center',
+  filter: 'grayscale(100%)',
+  transition: 'all .2s ease-in-out',
   '&[data-state="active"]': {
     color: 'text',
+    filter: 'grayscale(0%)',
+    bg: 'backgroundOffset',
+  },
+  ':hover': {
+    color: 'text',
+    filter: 'grayscale(0%)',
   },
 }
 const TABS_CONTENT_STYLES: any = {
@@ -79,12 +89,13 @@ export function HtmlEditor() {
             borderColor: 'border',
             display: 'flex',
             alignItems: 'center',
+            justifyContent: 'space-between',
             flexWrap: 'nowrap',
             overflowX: 'auto',
           }}
         >
           <Tabs.Trigger sx={TABS_TRIGGER_STYLES} value="node">
-            🎨 Styles
+            <span>🎨</span> Styles
           </Tabs.Trigger>
           <Tabs.Trigger sx={TABS_TRIGGER_STYLES} value="tree">
             <Layers size={12} /> Layers

packages/gui/src/components/inputs/Dimension/Input.tsx

@@ -4,6 +4,7 @@ import { EditorPropsWithLabel } from '../../../types/editor'
 import { UnitConversions } from '../../../lib/convert'
 import { convertUnits } from '../../../lib/convert'
 import { X } from 'react-feather'
+import IconButton from '../../ui/IconButton'
 
 // Mapping of units to [min, max] tuple
 type UnitRanges = Record<string, [min: number, max: number]>
@@ -85,25 +86,10 @@ interface DeleteProps {
 }
 export const DeletePropButton = ({ onRemove }: DeleteProps) => {
   return (
-    <button
-      sx={{
-        cursor: 'pointer',
-        appearance: 'none',
-        display: 'flex',
-        alignItems: 'center',
-        justifyContent: 'right',
-        p: 0,
-        bg: 'rgba(0,0,0,0)',
-        border: 0,
-        color: 'muted',
-        transition: '.2s color ease-in-out',
-        ':hover': {
-          color: 'text',
-        },
-      }}
+    <IconButton
       onClick={() => onRemove()}
     >
-      <X size={14} strokeWidth={3} color="currentColor" />
-    </button>
+      <X size={16} strokeWidth={3} color="currentColor" />
+    </IconButton>
   )
 }

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

@@ -56,6 +56,7 @@ export function SchemaInput<T>({
           <Collapsible.Trigger asChild>
             <IconButton
               sx={{
+                mr: 2,
                 transform: 'rotate(0deg)',
                 transition: 'transform 250ms',
                 '&[data-state=closed]': {
@@ -69,7 +70,7 @@ export function SchemaInput<T>({
         )}
         {InlineInput && (
           <InlineInput
-            label=""
+            label=''
             value={value}
             onChange={onChange}
             ruleset={ruleset}

packages/gui/src/components/schemas/object.tsx

@@ -59,9 +59,10 @@ export function objectSchema<T extends object>({
           sx={{
             display: 'grid',
             gap: 2,
-            borderLeft: '4px solid',
+            borderLeft: '1px solid',
             borderColor: 'border',
             pl: 2,
+            my: 2,
           }}
         >
           {keyOrder.map((key) => {

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

@@ -251,7 +251,7 @@ export function keyword<T extends string>(
 function literal<T extends string>(value: T): DataTypeSchema<T> {
   return {
     type: value,
-    inlineInput: () => <div sx={{ fontSize: 1 }}>{value}</div>,
+    inlineInput: () => <pre sx={{ fontSize: 0 }}>{value}</pre>,
     stringify: (value) => value,
     defaultValue: value,
     regenerate: () => value,

packages/gui/src/components/schemas/responsive.tsx

@@ -10,9 +10,9 @@ export function responsive<T>(
     type: 'responsive',
     inlineInput({ value }) {
       return (
-        <div sx={{ fontSize: 1 }}>
+        <pre sx={{ fontSize: 0 }}>
           {value.values.map((item) => itemSchema.stringify(item)).join(', ')}
-        </div>
+        </pre>
       )
     },
     input({ value, onChange }) {

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

@@ -6,12 +6,13 @@ export default function IconButton(props: Props) {
   return (
     <button
       sx={{
-        p: 0,
+        p: 1,
         m: 0,
         appearance: 'none',
         WebkitAppearance: 'none',
-        background: 'none',
+        background: 'backgroundOffset',
         border: 'none',
+        borderRadius: '6px',
         cursor: 'pointer',
         color: 'muted',
         display: 'flex',