Redesign Split Tree and visualiser into panels

Summary: This looks a lot neater and allows us to have separate dedicated visualiser header

Reviewed By: mweststrate

Differential Revision: D47626867

fbshipit-source-id: 843721853e0ff88837afbb9bf3f510a908160d12

desktop/plugins/public/ui-debugger/components/Controls.tsx

@@ -44,7 +44,7 @@ export const Controls: React.FC = () => {
     useState(false);
 
   return (
-    <Layout.Horizontal pad="small" gap="small">
+    <Layout.Horizontal gap="medium" pad="medium">
       <Input
         value={searchTerm}
         onChange={(e) => {

desktop/plugins/public/ui-debugger/components/Visualization2D.tsx

@@ -135,6 +135,8 @@ export const Visualization2D: React.FC<
         //this div is to ensure that the size of the visualiser doesnt change when focusings on a subtree
         style={
           {
+            backgroundColor: theme.backgroundWash,
+            borderRadius: theme.borderRadius,
             overflowY: 'auto',
             overflowX: 'hidden',
             position: 'relative', //this is for the absolutely positioned overlays

desktop/plugins/public/ui-debugger/components/main.tsx

@@ -106,12 +106,21 @@ export function Component() {
 
   return (
     <QueryClientProvider client={queryClient}>
-      <Layout.Container grow padh="small" padv="medium">
+      <Layout.Horizontal
-        <Layout.Top>
+        grow
-          <>
+        style={{
+          borderRadius: theme.borderRadius,
+          backgroundColor: theme.backgroundWash,
+        }}>
+        <Layout.Container
+          grow
+          style={{
+            borderRadius: theme.borderRadius,
+            backgroundColor: theme.backgroundDefault,
+          }}>
           <Controls />
-            <Layout.Horizontal grow pad="small">
           <Tree2 nodes={nodes} rootId={rootId} />
+        </Layout.Container>
 
         <ResizablePanel
           position="right"
@@ -136,13 +145,10 @@ export function Component() {
             showExtra={openBottomPanelWithContent}
           />
         </DetailSidebar>
-            </Layout.Horizontal>
-          </>
         <BottomPanel dismiss={dismissBottomPanel}>
           {bottomPanelComponent}
         </BottomPanel>
-        </Layout.Top>
+      </Layout.Horizontal>
-      </Layout.Container>
     </QueryClientProvider>
   );
 }

desktop/plugins/public/ui-debugger/components/tree/Tree.tsx

@@ -213,6 +213,7 @@ export function Tree2({
           //We use this normal divs flexbox sizing to measure how much vertical space we need for the child div
           ref={grandParentRef}
           style={{
+            paddingLeft: theme.space.medium,
             height: '100%',
             width: '100%',
           }}>