From f3449a564189661bf1cba55f826945dddb3463fb Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Thu, 26 Oct 2023 05:24:30 -0700
Subject: [PATCH] Make panel adhere to Figma design

Summary: css to change the header styling

Reviewed By: lblasa

Differential Revision: D50595982

fbshipit-source-id: 836ea7881426e95abb449c085fca39606cd8cfdd
---
 desktop/flipper-plugin/src/ui/Panel.tsx       |  2 ++
 .../sidebarV2/AttributesInspector.tsx         | 19 +++++++++++++++----
 2 files changed, 17 insertions(+), 4 deletions(-)

diff --git a/desktop/flipper-plugin/src/ui/Panel.tsx b/desktop/flipper-plugin/src/ui/Panel.tsx
index d8a4b55f7..efd3f9127 100644
--- a/desktop/flipper-plugin/src/ui/Panel.tsx
+++ b/desktop/flipper-plugin/src/ui/Panel.tsx
@@ -29,6 +29,7 @@ export const Panel: React.FC<{
   pad?: Spacing;
   gap?: Spacing;
   extraActions?: React.ReactElement | null;
+  className?: string;
 }> = (props) => {
   const [collapsed, setCollapsed] = useLocalStorageState(
     `panel:${props.title}:collapsed`,
@@ -45,6 +46,7 @@ export const Panel: React.FC<{
   return (
     <TrackingScope scope={props.title}>
       <StyledCollapse
+        className={props.className}
         bordered={false}
         activeKey={collapsed ? undefined : props.title}
         onChange={toggle}>
diff --git a/desktop/plugins/public/ui-debugger/components/sidebarV2/AttributesInspector.tsx b/desktop/plugins/public/ui-debugger/components/sidebarV2/AttributesInspector.tsx
index 12d246bf5..9e6e2cf0d 100644
--- a/desktop/plugins/public/ui-debugger/components/sidebarV2/AttributesInspector.tsx
+++ b/desktop/plugins/public/ui-debugger/components/sidebarV2/AttributesInspector.tsx
@@ -39,6 +39,17 @@ type ModalData = {
   title: string;
 };
 
+const panelCss = css`
+  & > .ant-collapse-item .ant-collapse-header {
+    background-color: ${theme.backgroundDefault};
+    padding-left: 0px;
+  }
+
+  & > .ant-collapse-item .ant-collapse-header .ant-collapse-expand-icon {
+    width: 18px;
+  }
+`;
+
 export function AttributesInspector({
   node,
   metadata,
@@ -116,7 +127,7 @@ export function AttributesInspector({
           <NoData message="No attributes match filter " />
         ) : (
           sections.concat([
-            <Panel key="Raw" title="Raw Data" collapsed>
+            <Panel key="Raw" title="Raw Data" className={panelCss} collapsed>
               <DataInspector data={omit(node, ['attributes'])} />
             </Panel>,
           ])
@@ -202,8 +213,8 @@ function AttributeSection(
 
   if (children.length > 0) {
     return (
-      <Panel key={name} title={name}>
-        <Layout.Container gap="small" padv="small">
+      <Panel className={panelCss} key={name} title={name}>
+        <Layout.Container gap="small" padv="small" style={{paddingLeft: 18}}>
           {...children}
         </Layout.Container>
       </Panel>
@@ -278,7 +289,7 @@ function NamedAttribute({
       <Typography.Text
         style={{
           marginTop: 4, //to center with top input when multiline
-          flex: '0 0 30%', //take 30% of the width
+          flex: '0 0 40%', //take 40% of the width
           color: theme.textColorSecondary,
           opacity: 0.7,
           fontWeight: 50,