From 92ac6988d521a6615c60e27019a81ab4c772cde2 Mon Sep 17 00:00:00 2001
From: Lorenzo Blasa <lblasa@meta.com>
Date: Thu, 19 Jan 2023 05:05:49 -0800
Subject: [PATCH] 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
---
 .../components/sidebar/inspector/AttributesInspector.tsx    | 6 +++---
 .../ui-debugger/components/sidebar/inspector/Styles.tsx     | 2 +-
 2 files changed, 4 insertions(+), 4 deletions(-)

diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx
index 3554f9d72..875036db0 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/AttributesInspector.tsx
+++ b/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>
         );
       })}
diff --git a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/Styles.tsx b/desktop/plugins/public/ui-debugger/components/sidebar/inspector/Styles.tsx
index 849650cf8..1061ce4a4 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebar/inspector/Styles.tsx
+++ b/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;