Update styles of sidebar editor

Author: mrmrs

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

@@ -37,7 +37,7 @@ const TABS_TRIGGER_STYLES: any = {
 }
 const TABS_CONTENT_STYLES: any = {
   width: 400,
-  height: 'calc(100vh - 81px)',
+  height: 'calc(100vh - 97px)',
   maxHeight: '100%',
   overflow: 'hidden',
   resize: 'horizontal',
@@ -50,13 +50,13 @@ const TABS_CONTENT_STYLES: any = {
 
 const TABS_EDITOR_STYLES: any = {
   width: '400px',
-  height: 'calc(100vh - 81px)',
+  height: 'calc(100vh - 97px)',
   maxHeight: '100%',
   overflow: 'hidden',
   resize: 'horizontal',
   borderRightWidth: '1px',
   borderRightStyle: 'solid',
-  borderColor: 'border',
+  borderRightColor: 'border',
   '&::-webkit-scrollbar': { display: 'none' },
   scrollbarWidth: 0,
 }
@@ -140,6 +140,7 @@ export function HtmlEditor() {
               showAddProperties
             />
           </div>
+          <h4 sx={{ bg: 'backgroundOffset', py: 2, my: 0, px: 3, fontSize: 0, display: 'flex', alignItems: 'center', gap: '4px', borderTopWidth: '1px', borderTopStyle: 'solid', borderTopColor: 'border' }}><Layers size={15} /> Layers</h4>
             <div sx={{ height: '50%', position: 'relative', }}>
             <NodeEditor
               value={nodeValue}

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

@@ -1,4 +1,5 @@
 import fuzzysort from 'fuzzysort'
+import { Layers } from 'react-feather'
 import { HtmlNode } from '../types'
 import { Label, Combobox } from '../../primitives'
 import { SelectInput } from '../../inputs/SelectInput'
@@ -54,9 +55,9 @@ export function NodeEditor({
         position: 'sticky',
         top: 0,
         overflowY: 'scroll',
-        borderTopWidth: '4px',
-        borderTopStyle: 'solid',
-        borderTopColor: 'border',
+      //  borderTopWidth: '1px',
+      //  borderTopStyle: 'solid',
+      //  borderTopColor: 'border',
       }}
     >
       <div

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

@@ -103,9 +103,12 @@ export function Combobox({
           WebkitAppearance: 'none',
           appearance: 'none',
           width: '100%',
-          border: '1px solid',
-          borderRadius: '6px',
-          p: 1,
+          borderWidth: '1px',
+          borderStyle: 'solid',
+          borderColor: 'inputBorder',
+          borderRadius: '4px',
+          p: 2,
+          bg: 'background',
         }}
       />
       <div