Some UI / docs fine-tuning

Summary: Added wash color option to Toolbar, made codeblocks transparent rather than gray & bordered, which looks cleaner

Reviewed By: passy

Differential Revision: D28119720

fbshipit-source-id: 9d1f4db5b39a91d9d117046bd5482726ac2f555d

desktop/flipper-plugin/src/ui/CodeBlock.tsx

@@ -28,5 +28,7 @@ const StyledParagrah = styled(Typography.Paragraph)({
   },
   '& pre': {
     margin: 0,
+    border: 'none',
+    background: 'none',
   },
 });

desktop/flipper-plugin/src/ui/Toolbar.tsx

@@ -12,23 +12,32 @@ import styled from '@emotion/styled';
 import {Layout} from './Layout';
 import {theme} from './theme';
 
-const SandyToolbarContainer = styled(Layout.Horizontal)({
+const SandyToolbarContainer = styled(Layout.Horizontal)<{wash?: boolean}>(
-  flexWrap: 'wrap',
+  ({wash}) => ({
-  padding: theme.space.small,
+    flexWrap: 'wrap',
-  boxShadow: `inset 0px -1px 0px ${theme.dividerColor}`,
+    padding: theme.space.small,
-});
+    boxShadow: `inset 0px -1px 0px ${theme.dividerColor}`,
+    background: wash ? theme.backgroundWash : undefined,
+  }),
+);
 
 export function Toolbar({
   children,
   style,
+  wash,
 }: {
   children?: React.ReactNode;
   position?: 'bottom' | 'top';
   compact?: boolean;
+  wash?: boolean;
   style?: React.CSSProperties;
 }) {
   return (
-    <SandyToolbarContainer style={style} gap={theme.space.small} center>
+    <SandyToolbarContainer
+      style={style}
+      gap={theme.space.small}
+      center
+      wash={wash}>
       {children}
     </SandyToolbarContainer>
   );

desktop/themes/typography.less

@@ -99,3 +99,7 @@
   // Prevents ANT breaking global styles implicitly used by old Flipper design
   line-height: 1;
 }
+
+.ant-btn {
+  font-weight: normal;
+}

docs/extending/sandy-migration.mdx

@@ -164,6 +164,8 @@ Since Sandy plugins are expected to support dark mode, (use the settings pane to
 
 Ideally there should be no hard-coded colors anymore either, and little need to use `width: 100%` / `height: 100%` anywhere, as needing those typically signals a layout issue.
 
+Tip: it is recommended to keep components as much as possible outside the entry file, as components defined outside the index.tsx file will benefit from fast refresh.
+
 ### Wrapping up
 
 This step of the process is completed as soon as there are no imports from the `flipper` package anymore. 

docs/tutorial/js-custom.mdx

@@ -260,6 +260,8 @@ Using `useValue` as deep in the component tree as possible will benefit performa
 Finally (`(4)`) we render the data we have. The details have been left out here, as from here it is just idiomatic React code.
 The source of the other `MammalCard` component can be found [here](https://github.com/facebook/flipper/blob/master/desktop/plugins/public/seamammals/src/index.tsx#L113-L165).
 
+Tip: it is recommended to keep components as much as possible outside the entry file, as components defined outside the index.tsx file will benefit from fast refresh.
+
 ### Unit testing the User Interface
 
 At this moment the plugin is ready to be used in Flipper, and opening it should lead to sane results.