From f854e9f3f3211b3cd8497bb1d1174b644a414c70 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Wed, 26 Jul 2023 03:22:38 -0700
Subject: [PATCH] rename controls to tree controls and consistent button style

Reviewed By: mweststrate

Differential Revision: D47672437

fbshipit-source-id: 5ce237cfd300a481450411a0242410e01bcc5411
---
 desktop/plugins/public/ui-debugger/components/main.tsx      | 4 ++--
 .../components/{Controls.tsx => tree/TreeControls.tsx}      | 6 +++---
 .../components/visualizer/VisualizerControls.tsx            | 2 ++
 3 files changed, 7 insertions(+), 5 deletions(-)
 rename desktop/plugins/public/ui-debugger/components/{Controls.tsx => tree/TreeControls.tsx} (98%)

diff --git a/desktop/plugins/public/ui-debugger/components/main.tsx b/desktop/plugins/public/ui-debugger/components/main.tsx
index af74dbadfc2..82728bc8480 100644
--- a/desktop/plugins/public/ui-debugger/components/main.tsx
+++ b/desktop/plugins/public/ui-debugger/components/main.tsx
@@ -22,7 +22,7 @@ import {Id, Metadata, MetadataId, ClientNode} from '../ClientTypes';
 import {PerfStats} from './PerfStats';
 import {Visualization2D} from './visualizer/Visualization2D';
 import {Inspector} from './sidebar/Inspector';
-import {Controls} from './Controls';
+import {TreeControls} from './tree/TreeControls';
 import {Button, Spin} from 'antd';
 import {QueryClientProvider} from 'react-query';
 import {Tree2} from './tree/Tree';
@@ -118,7 +118,7 @@ export function Component() {
             borderRadius: theme.borderRadius,
             backgroundColor: theme.backgroundDefault,
           }}>
-          <Controls />
+          <TreeControls />
           <Tree2 nodes={nodes} rootId={rootId} />
         </Layout.Container>
 
diff --git a/desktop/plugins/public/ui-debugger/components/Controls.tsx b/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx
similarity index 98%
rename from desktop/plugins/public/ui-debugger/components/Controls.tsx
rename to desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx
index a34f1773280..d19e647438c 100644
--- a/desktop/plugins/public/ui-debugger/components/Controls.tsx
+++ b/desktop/plugins/public/ui-debugger/components/tree/TreeControls.tsx
@@ -8,7 +8,7 @@
  */
 
 import React, {useState} from 'react';
-import {plugin} from '../index';
+import {plugin} from '../../index';
 import {
   Button,
   Input,
@@ -26,9 +26,9 @@ import {
   SearchOutlined,
 } from '@ant-design/icons';
 import {usePlugin, useValue, Layout} from 'flipper-plugin';
-import {FrameworkEventType} from '../ClientTypes';
+import {FrameworkEventType} from '../../ClientTypes';
 
-export const Controls: React.FC = () => {
+export const TreeControls: React.FC = () => {
   const instance = usePlugin(plugin);
   const searchTerm = useValue(instance.uiState.searchTerm);
   const isPaused = useValue(instance.uiState.isPaused);
diff --git a/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx b/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx
index a2aaba802c8..559fa3a6cc7 100644
--- a/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx
+++ b/desktop/plugins/public/ui-debugger/components/visualizer/VisualizerControls.tsx
@@ -87,6 +87,7 @@ export function VisualiserControls({
       <Layout.Horizontal gap="medium">
         <Tooltip title={targetToolTip}>
           <Button
+            shape="circle"
             onClick={() => {
               if (targetMode.state === 'disabled') {
                 setTargetMode({state: 'active'});
@@ -108,6 +109,7 @@ export function VisualiserControls({
         </Tooltip>
         <Tooltip title={focusToolTip}>
           <Button
+            shape="circle"
             disabled={focusDisabled}
             onClick={() => {
               if (focusedNode == null) {