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)({
-  flexWrap: 'wrap',
-  padding: theme.space.small,
-  boxShadow: `inset 0px -1px 0px ${theme.dividerColor}`,
-});
+const SandyToolbarContainer = styled(Layout.Horizontal)<{wash?: boolean}>(
+  ({wash}) => ({
+    flexWrap: 'wrap',
+    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>
   );