Small Inspector Tweaks (#6006)

- Modified layout of solid background layer row to fit the inspector
better.
- Changed alpha label to the Greek character and removed the increment
controls.
- Use the 12x12 minus icon and fix the column size for it to 12px so
that it aligns better.

editor/src/components/inspector/sections/style-section/background-subsection/solid-background-layer.tsx

@@ -137,7 +137,7 @@ export const SolidBackgroundLayer = React.memo<SolidBackgroundLayerProps>((props
           tall
           alignItems='start'
           padded={false}
-          variant='<--------auto-------->|--45px--|'
+          variant='<-------1fr------>|----80px----|'
         >
           <StringBackgroundColorControl
             id={`background-layer-gradient-${props.index}`}
@@ -162,12 +162,13 @@ export const SolidBackgroundLayer = React.memo<SolidBackgroundLayerProps>((props
             onTransientSubmitValue={onAlphaTransientSubmitValue}
             onForcedSubmitValue={onAlphaSubmitValue}
             controlStatus={props.controlStatus}
-            DEPRECATED_labelBelow='alpha'
+            DEPRECATED_labelBelow={<span style={{ fontSize: 12 }}>α</span>}
             minimum={0}
             maximum={1}
             stepSize={0.01}
             inputProps={{ onMouseDown: stopPropagation }}
             defaultUnitToHide={null}
+            incrementControls={false}
           />
         </UIGridRow>
       </UIGridRow>

editor/src/components/inspector/sections/style-section/text-subsection/text-shadow-subsection.tsx

@@ -175,7 +175,7 @@ const TextShadowItem = React.memo<TextShadowItemProps>((props) => {
     <PropertyRow
       key={props.index}
       style={{
-        gridTemplateColumns: '12px 28px repeat(3, 1fr) 20px',
+        gridTemplateColumns: '12px 28px repeat(3, 1fr) 12px',
         gridColumnGap: 8,
       }}
     >
@@ -244,8 +244,8 @@ const TextShadowItem = React.memo<TextShadowItemProps>((props) => {
         numberType='Length'
         defaultUnitToHide={'px'}
       />
-      <SquareButton highlight onMouseDown={removeShadow} style={{ marginTop: 1 }}>
-        <Icons.Minus />
+      <SquareButton highlight onMouseDown={removeShadow} style={{ marginTop: 1, width: 12 }}>
+        <Icons.Minus width={12} height={12} />
       </SquareButton>
     </PropertyRow>
   )

editor/src/components/inspector/sections/style-section/transform-subsection/transform-subsection.tsx

@@ -315,7 +315,7 @@ const SingleLengthItem = React.memo<SingleLengthItemProps>((props) => {
     <PropertyRow
       key={props.index}
       style={{
-        gridTemplateColumns: '12px 1fr 46px 20px',
+        gridTemplateColumns: '12px 1fr 46px 12px',
         gridColumnGap: 8,
       }}
     >
@@ -360,8 +360,8 @@ const SingleLengthItem = React.memo<SingleLengthItemProps>((props) => {
         controlStatus={props.controlStatus}
         defaultUnitToHide={controlMetadata.defaultUnitToHide}
       />
-      <SquareButton highlight onMouseDown={removeTransformItem} style={{ marginTop: 1 }}>
-        <Icn category='semantic' type='minus' color='secondary' width={16} height={16} />
+      <SquareButton highlight onMouseDown={removeTransformItem} style={{ marginTop: 1, width: 12 }}>
+        <Icons.Minus width={12} height={12} />
       </SquareButton>
     </PropertyRow>
   )
@@ -443,7 +443,7 @@ const DoubleLengthItem = React.memo<DoubleLengthItemProps>((props) => {
     <PropertyRow
       key={props.index}
       style={{
-        gridTemplateColumns: '12px 1fr 46px 46px 20px',
+        gridTemplateColumns: '12px 1fr 46px 46px 12px',
         gridColumnGap: 8,
       }}
     >
@@ -510,8 +510,8 @@ const DoubleLengthItem = React.memo<DoubleLengthItemProps>((props) => {
         controlStatus={props.controlStatus}
         defaultUnitToHide={controlMetadata.defaultUnitToHide}
       />
-      <SquareButton highlight onMouseDown={removeTransformItem} style={{ marginTop: 1 }}>
-        <Icn category='semantic' type='minus' color='secondary' width={16} height={16} />
+      <SquareButton highlight onMouseDown={removeTransformItem} style={{ marginTop: 1, width: 12 }}>
+        <Icons.Minus width={12} height={12} />
       </SquareButton>
     </PropertyRow>
   )