Attributes inspector style improvements

Summary:
- Vertically center values
- Add gutter between rows/cols
- Tryout the removal of the indentation border (it could either be removed in the future or brought back)

Reviewed By: antonk52

Differential Revision: D42581663

fbshipit-source-id: cd682adca7f76f80240a0ca6d9023368a33453c3

desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx

@@ -52,7 +52,7 @@ const NamedAttributeInspector: React.FC<NamedAttributeInspectorProps> = ({
   children,
 }) => {
   return (
-    <Row style={RowStyle}>
+    <Row style={RowStyle} justify="center" align="middle" gutter={[16, 0]}>
       <Col span={8} style={AutoMarginStyle}>
         {name}
       </Col>
@@ -82,7 +82,7 @@ const ObjectAttributeInspector: React.FC<{
             style={{
               paddingLeft: level,
             }}>
-            {create(metadata, attributeName, inspectableValue, level + 2)}
+            {create(metadata, attributeName, inspectableValue, level + 5)}
           </ObjectContainer>
         );
       })}
@@ -108,7 +108,7 @@ const ArrayAttributeInspector: React.FC<{
             style={{
               paddingLeft: level,
             }}>
-            {create(metadata, attributeName, inspectableValue, level + 2)}
+            {create(metadata, attributeName, inspectableValue, level + 5)}
           </ObjectContainer>
         );
       })}

desktop/plugins/public/ui-debugger/components/sidebar/inspector/Styles.tsx

@@ -36,7 +36,7 @@ export const RowStyle = {
 
 export const ObjectContainerStyle = {
   borderLeftWidth: 5,
-  borderLeftColor: 'lightgray',
+  borderLeftColor: 'transparent',
   borderLeftStyle: 'solid',
 } as const;