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

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',