Pretty navbar buttons

Reviewed By: elboman

Differential Revision: D47399039

fbshipit-source-id: c4cc9612a5a9299ebb07e34933b2fa6698f073e7

desktop/flipper-ui-core/src/sandy-chrome/Navbar.tsx

@@ -14,7 +14,19 @@ import config from '../fb-stubs/config';
 import {isConnected, currentUser, logoutUser} from '../fb-stubs/user';
 import {showLoginDialog} from '../chrome/fb-stubs/SignInSheet';
 import {Avatar, Badge, Button, Popover, Tooltip} from 'antd';
-import {LoginOutlined, WarningOutlined} from '@ant-design/icons';
+import {
+  AppstoreAddOutlined,
+  BellOutlined,
+  CameraOutlined,
+  EllipsisOutlined,
+  FileExclamationOutlined,
+  LayoutOutlined,
+  LoginOutlined,
+  MedicineBoxOutlined,
+  QuestionCircleOutlined,
+  VideoCameraOutlined,
+  WarningOutlined,
+} from '@ant-design/icons';
 
 export function Navbar() {
   return (
@@ -28,24 +40,58 @@ export function Navbar() {
         background: theme.backgroundDefault,
         borderBottom: `solid 1px ${theme.dividerColor}`,
       }}>
-      <Layout.Horizontal style={{gap: 16}}>
+      <Layout.Horizontal style={{gap: 4}}>
-        <button>show/hide sidebar</button>
+        <NavbarButton label="Toggle Sidebar" icon={LayoutOutlined} />
         <button>device picker</button>
-        <button>screenshot</button>
+        <NavbarButton label="Screenshot" icon={CameraOutlined} />
-        <button>record video</button>
+        <NavbarButton label="Record" icon={VideoCameraOutlined} />
       </Layout.Horizontal>
-      <Layout.Horizontal style={{gap: 16}}>
+      <Layout.Horizontal style={{gap: 4, alignItems: 'center'}}>
-        <button>add plugins</button>
+        <NavbarButton label="Add Plugins" icon={AppstoreAddOutlined} />
-        <button>Alerts</button>
+        <NavbarButton label="Logs" icon={FileExclamationOutlined} />
-        <button>Doctor</button>
+        <NavbarButton label="Alerts" icon={BellOutlined} />
-        <button>Help</button>
+        <NavbarButton label="Doctor" icon={MedicineBoxOutlined} />
-        <button>More</button>
+        <NavbarButton label="Help" icon={QuestionCircleOutlined} />
+        <NavbarButton label="More" icon={EllipsisOutlined} />
         {config.showLogin && <LoginConnectivityButton />}
       </Layout.Horizontal>
     </Layout.Horizontal>
   );
 }
 
+function NavbarButton({
+  icon: Icon,
+  label,
+  selected,
+}: {
+  icon: typeof LoginOutlined;
+  label: string;
+  selected?: boolean;
+}) {
+  return (
+    <Button
+      ghost={!selected}
+      style={{
+        color: theme.textColorPrimary,
+        boxShadow: 'none',
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        height: 'auto',
+      }}>
+      <Icon style={{color: theme.textColorPrimary, fontSize: 24}} />
+      <span
+        style={{
+          margin: 0,
+          fontSize: theme.fontSize.small,
+          color: theme.textColorSecondary,
+        }}>
+        {label}
+      </span>
+    </Button>
+  );
+}
+
 function LoginConnectivityButton() {
   const loggedIn = useValue(currentUser());
   const user = useStore((state) => state.user);