More style tweaks

theatre/studio/src/panels/ObjectEditorPanel/propEditors/BooleanPropEditor.tsx

@@ -3,6 +3,11 @@ import type SheetObject from '@theatre/core/sheetObjects/SheetObject'
 import React, {useCallback} from 'react'
 import {useEditingToolsForPrimitiveProp} from './utils/useEditingToolsForPrimitiveProp'
 import {SingleRowPropEditor} from './utils/SingleRowPropEditor'
+import styled from 'styled-components'
+
+const Input = styled.input`
+  margin-left: 6px;
+`
 
 const BooleanPropEditor: React.FC<{
   propConfig: PropTypeConfig_Boolean
@@ -20,7 +25,7 @@ const BooleanPropEditor: React.FC<{
 
   return (
     <SingleRowPropEditor {...{stuff, propConfig, pointerToProp}}>
-      <input type="checkbox" checked={stuff.value} onChange={onChange} />
+      <Input type="checkbox" checked={stuff.value} onChange={onChange} />
     </SingleRowPropEditor>
   )
 }

theatre/studio/src/panels/ObjectEditorPanel/propEditors/CompoundPropEditor.tsx

@@ -13,7 +13,7 @@ import {GoChevronRight} from 'react-icons/go'
 import styled from 'styled-components'
 import DeterminePropEditor from './DeterminePropEditor'
 import NextPrevKeyframeCursors from './utils/NextPrevKeyframeCursors'
-import {labelText} from './utils/SingleRowPropEditor'
+import {propNameText} from './utils/SingleRowPropEditor'
 
 const Container = styled.div<{depth: number}>`
   --depth: ${(props) => props.depth};
@@ -37,7 +37,7 @@ const IconContainer = styled.div`
 const PropName = styled.div`
   margin-right: 4px;
   cursor: default;
-  ${labelText}
+  ${propNameText}
 `
 
 const SubProps = styled.div<{depth: number; lastSubIsComposite: boolean}>`

theatre/studio/src/panels/ObjectEditorPanel/propEditors/utils/SingleRowPropEditor.tsx

@@ -9,38 +9,46 @@ import type {useEditingToolsForPrimitiveProp} from '@theatre/studio/panels/Objec
 import {shadeToColor} from '@theatre/studio/panels/ObjectEditorPanel/propEditors/utils/useEditingToolsForPrimitiveProp'
 import styled, {css} from 'styled-components'
 
-export const labelText = css`
+export const propNameText = css`
   font-weight: 300;
   font-size: 11px;
   color: #9a9a9a;
-  text-shadow: 0.5px 0.5px 2px black;
+  text-shadow: 0.5px 0.5px 2px rgba(0, 0, 0, 0.3);
 
   &:hover {
     color: white;
   }
 `
 
-const Container = styled.div`
+const Row = styled.div`
   display: flex;
   height: 30px;
-  justify-content: flex-end;
+  justify-content: flex-start;
   align-items: center;
 `
 
-const Label = styled.label`
+const PropNameContainer = styled.div`
   margin-right: 4px;
   text-align: right;
-  ${labelText};
+  flex: 0 0;
+  flex-basis: 106px;
+
+  ${propNameText};
 `
-const Body = styled.label`
+
+const ControlsContainer = styled.div`
+  flex-basis: 8px;
+  flex: 0 0;
+`
+
+const InputContainer = styled.div`
   display: flex;
   align-items: center;
-  padding-left: 8px;
+  justify-content: stretch;
+  padding: 0 16px 0 2px;
   box-sizing: border-box;
-  width: 140px;
   height: 100%;
-  margin-right: 16px;
+  flex: 1 1;
-  margin-left: 4px;
 `
 
 export const SingleRowPropEditor: React.FC<{
@@ -50,27 +58,28 @@ export const SingleRowPropEditor: React.FC<{
 }> = ({propConfig, pointerToProp, stuff, children}) => {
   const label = propConfig.label ?? last(getPointerParts(pointerToProp).path)
 
-  const [labelRef, labelNode] = useRefAndState<HTMLLabelElement | null>(null)
+  const [propNameContainerRef, propNameContainer] =
+    useRefAndState<HTMLDivElement | null>(null)
 
-  const [contextMenu] = useContextMenu(labelNode, {
+  const [contextMenu] = useContextMenu(propNameContainer, {
     items: stuff.contextMenuItems,
   })
 
   const color = shadeToColor[stuff.shade]
 
   return (
-    <Container>
+    <Row>
       {contextMenu}
-      <Label
+      <PropNameContainer
-        ref={labelRef}
+        ref={propNameContainerRef}
         title={['obj', 'props', ...getPointerParts(pointerToProp).path].join(
           '.',
         )}
       >
         {label}
-      </Label>
+      </PropNameContainer>
-      {stuff.controlIndicators}
+      <ControlsContainer>{stuff.controlIndicators}</ControlsContainer>
-      <Body>{children}</Body>
+      <InputContainer>{children}</InputContainer>
-    </Container>
+    </Row>
   )
 }

theatre/studio/src/uiComponents/form/BasicNumberEditor.tsx

@@ -8,9 +8,8 @@ import DraggableArea from '@theatre/studio/uiComponents/DraggableArea'
 type IMode = IState['mode']
 
 const Container = styled.div<{mode: IMode}>`
-  display: flex;
-  align-items: center;
   height: 100%;
+  width: 100%;
 `
 
 const Input = styled.input`
@@ -65,6 +64,7 @@ const BasicNumberEditor: React.FC<{
   temporarilySetValue: (v: number) => void
   discardTemporaryValue: () => void
   permenantlySetValue: (v: number) => void
+  className?: string
 }> = (propsA) => {
   const [stateA, setState] = useState<IState>({mode: 'noFocus'})
 
@@ -238,7 +238,7 @@ const BasicNumberEditor: React.FC<{
   )
 
   return (
-    <Container mode={refs.current.state.mode}>
+    <Container mode={refs.current.state.mode} className={propsA.className}>
       <DraggableArea
         key="draggableArea"
         onDragStart={callbacks.transitionToDraggingMode}

theatre/studio/src/uiComponents/form/BasicSelectEditor.tsx

@@ -4,7 +4,7 @@ import React, {useCallback} from 'react'
 import styled from 'styled-components'
 
 const Select = styled.select`
-  background: transparent;
+  background-color: transparent;
   box-sizing: border-box;
   border: 1px solid transparent;
   color: rgba(255, 255, 255, 0.9);
@@ -16,9 +16,17 @@ const Select = styled.select`
   height: calc(100% - 4px);
   border-radius: 2px;
 
+  /** Credit: https://github.com/tailwindlabs/tailwindcss-forms/blob/39946dd5d1c4cd980a3e8fd2a0c597f962fe285e/src/index.js#L86 */
+  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3e%3c/svg%3e");
+  background-position: right 4px center;
+  background-repeat: no-repeat;
+  background-size: 1.5em 1.5em;
+  color-adjust: exact;
+  appearance: none;
+
   &:hover,
   &:focus {
-    background: ${darken(0.9, theme.panel.bg)};
+    background-color: ${darken(0.9, theme.panel.bg)};
     border: 1px solid ${lighten(0.1, theme.panel.bg)};
   }
 `
@@ -27,7 +35,8 @@ const BasicSelectEditor: React.FC<{
   value: string
   onChange: (val: string) => void
   options: Record<string, string>
-}> = ({value, onChange, options}) => {
+  className?: string
+}> = ({value, onChange, options, className}) => {
   const _onChange = useCallback(
     (el: React.ChangeEvent<HTMLSelectElement>) => {
       onChange(String(el.target.value))
@@ -35,7 +44,7 @@ const BasicSelectEditor: React.FC<{
     [onChange],
   )
   return (
-    <Select value={value} onChange={_onChange}>
+    <Select className={className} value={value} onChange={_onChange}>
       {Object.keys(options).map((key, i) => (
         <option key={'option-' + i} value={key}>
           {options[key]}