From d0e81149629d7c17af30dbedfb7a40c0f6885682 Mon Sep 17 00:00:00 2001
From: Luke De Feo <lukedefeo@meta.com>
Date: Tue, 25 Jul 2023 07:28:03 -0700
Subject: [PATCH] Improve sidebar buttons

Summary:
1. improved the disabled state, no longer shows persistant border
2. made the right sidebar button always visible again since the disabled state is less distracting
3. Made the toggle state be on when the side bar is open
4. Fixed issue where where it would say toggled when sidebar not visible
5. Shortened the names to be less verbose

Reviewed By: mweststrate

Differential Revision: D47720739

fbshipit-source-id: df27e688c7a66e8dee07c4db675851c4355b41db
---
 .../src/sandy-chrome/Navbar.tsx               | 25 +++++++++++++------
 1 file changed, 17 insertions(+), 8 deletions(-)

diff --git a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
index c0ac53ed9..988f98d44 100644
--- a/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
+++ b/desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx
@@ -255,9 +255,9 @@ function LeftSidebarToggleButton() {
   if (hasMainMenu) {
     return (
       <NavbarButton
-        label="Toggle Sidebar"
+        label="Sidebar"
         icon={LayoutOutlined}
-        toggled={!mainMenuVisible}
+        toggled={mainMenuVisible}
         onClick={() => {
           dispatch(toggleLeftSidebarVisible());
         }}
@@ -277,16 +277,13 @@ function RightSidebarToggleButton() {
     (state) => state.application.rightSidebarVisible,
   );
 
-  if (!rightSidebarAvailable) {
-    return null;
-  }
-
   return (
     <NavbarButton
       icon={LayoutOutlined}
       flipIcon
-      label="Toggle R.Sidebar"
-      toggled={!rightSidebarVisible}
+      disabled={!rightSidebarAvailable}
+      label="Sidebar"
+      toggled={rightSidebarAvailable && rightSidebarVisible}
       onClick={() => {
         dispatch(toggleRightSidebarVisible());
       }}
@@ -320,6 +317,16 @@ const badgeCountClassname = css`
     margin-top: 8px;
   }
 `;
+
+const hideBorderWhenDisabled = css`
+  :disabled {
+    border-color: transparent !important;
+  }
+  :disabled:hover {
+    border-color: ${theme.disabledColor} !important;
+  }
+`;
+
 export function NavbarButton({
   icon: Icon,
   label,
@@ -343,10 +350,12 @@ export function NavbarButton({
   const color = toggled ? theme.primaryColor : theme.textColorActive;
   const button = (
     <Button
+      className={hideBorderWhenDisabled}
       aria-pressed={toggled}
       ghost
       onClick={onClick}
       style={{
+        boxSizing: 'border-box',
         color,
         boxShadow: 'none',
         display: 'flex',