Shrink input size (final )

Summary:
Allows more content on screen. Final diff of stack

Changelog: UIDebugger, new sidebar design

Reviewed By: lblasa

Differential Revision: D50595987

fbshipit-source-id: 436af4191dba37f7a0f41dca23ab6349856358cd

desktop/plugins/public/ui-debugger/components/sidebarV2/AttributesInspector.tsx

@@ -271,11 +271,12 @@ function NamedAttribute({
     <Layout.Horizontal key={key} gap="small">
       <Typography.Text
         style={{
-          marginTop: 3, //to center with top input when multiline
+          marginTop: 4, //to center with top input when multiline
           flex: '0 0 30%', //take 30% of the width
           color: theme.textColorSecondary,
           opacity: 0.7,
           fontWeight: 50,
+          fontSize: 'small',
         }}>
         {name}
       </Typography.Text>
@@ -297,6 +298,7 @@ function NamedAttribute({
  * disables hover and focsued states
  */
 const readOnlyInput = css`
+  font-size: small;
   :hover {
     border-color: ${theme.disabledColor} !important;
   }
@@ -501,16 +503,27 @@ function AttributeValue({
     case 'object':
       return (
         <Button
+          size="small"
           onClick={() => {
             onDisplayModal({
               title: name,
               data: transformAny(metadataMap, inspectable),
             });
           }}
-          style={{height: 28}}
+          style={{
+            height: 26,
+            boxSizing: 'border-box',
+            alignItems: 'center',
+            justifyContent: 'center',
+          }}
           type="ghost">
           <span
-            style={{fontFamily: 'monospace', color: theme.textColorSecondary}}>
+            style={{
+              marginTop: 2,
+              fontFamily: 'monospace',
+              color: theme.textColorSecondary,
+              fontSize: 'small',
+            }}>
             {inspectable.type === 'array' ? '[...]' : '{...}'}
           </span>
         </Button>
@@ -519,6 +532,8 @@ function AttributeValue({
   return null;
 }
 
+const rowHeight = 26;
+
 function ColorInspector({inspectable}: {inspectable: InspectableColor}) {
   return (
     <Layout.Container gap="small">
@@ -545,8 +560,8 @@ function ColorInspector({inspectable}: {inspectable: InspectableColor}) {
 }
 
 const ColorPreview = styled.div(({background}: {background: string}) => ({
-  width: '28px',
-  height: '28px',
+  width: rowHeight,
+  height: rowHeight,
   borderRadius: '8px',
   borderColor: theme.disabledColor,
   borderStyle: 'solid',