Misc UI fixes (#1873)

Summary:
Continue with cleanup of Network plugin mock screens.  This mostly consists of replacing FlexColumn, FlexRow and FlexBox with equivalent Sandy components.

Here is the new screen:

- replace text buttons with Button
- add NUX info to "Copy Highlighted Calls" button
- add message when no calls have been highlighted
- in routes list remove padding on line items

![image](https://user-images.githubusercontent.com/337874/106415468-d58f6480-6414-11eb-93a8-498fd81b54d9.png)

Here is the prior screen:

![image](https://user-images.githubusercontent.com/337874/106415499-e8099e00-6414-11eb-8e0e-48875a945621.png)

## Changelog

Network Plugin - Additional cleanup of UI on mock screen

Pull Request resolved: https://github.com/facebook/flipper/pull/1873

Test Plan:
Create and modify mocks
Verify that the functionality has not been affected by UI changes

Reviewed By: passy

Differential Revision: D26172915

Pulled By: mweststrate

fbshipit-source-id: f0af143d8509b53585076737832657fb095e75a6

desktop/plugins/network/MockResponseDetails.tsx

@@ -10,8 +10,8 @@
 import {
   FlexRow,
   FlexColumn,
-  FlexBox,
   Layout,
+  Button,
   Input,
   Text,
   Tabs,
@@ -103,17 +103,6 @@ const Warning = styled(FlexRow)({
   marginTop: 8,
 });
 
-const AddHeaderButton = styled(FlexBox)({
-  color: colors.blackAlpha50,
-  marginTop: 8,
-  alignItems: 'center',
-  padding: 10,
-  flexShrink: 0,
-  whiteSpace: 'nowrap',
-  overflow: 'hidden',
-  textOverflow: 'ellipsis',
-});
-
 const HeadersColumnSizes = {
   close: '4%',
   warning: '4%',
@@ -210,7 +199,7 @@ function _buildMockResponseHeaderRows(
         },
         close: {
           value: (
-            <FlexBox
+            <Layout.Container
               onClick={() => {
                 const newHeaders = produce(
                   route.responseHeaders,
@@ -223,7 +212,7 @@ function _buildMockResponseHeaderRows(
                 });
               }}>
               <HeaderGlyph name="cross-circle" color={colors.red} />
-            </FlexBox>
+            </Layout.Container>
           ),
         },
       },
@@ -317,26 +306,25 @@ export function MockResponseDetails({id, route, isDuplicated}: Props) {
         </Tab>
         <Tab key={'headers'} label={'Headers'}>
           <Layout.Container style={{width: '100%'}}>
-            <AddHeaderButton
-              onClick={() => {
-                const newHeaders = {
-                  ...route.responseHeaders,
-                  [nextHeaderId.toString()]: {key: '', value: ''},
-                };
-                setNextHeaderId(nextHeaderId + 1);
-                networkRouteManager.modifyRoute(id, {
-                  responseHeaders: newHeaders,
-                });
-              }}>
-              <Glyph
-                name="plus-circle"
-                size={16}
-                variant="outline"
-                color={colors.blackAlpha30}
-              />
-              &nbsp;Add Header
-            </AddHeaderButton>
-            <Layout.ScrollContainer style={{width: '100%'}}>
+            <Layout.Horizontal>
+              <Button
+                onClick={() => {
+                  const newHeaders = {
+                    ...route.responseHeaders,
+                    [nextHeaderId.toString()]: {key: '', value: ''},
+                  };
+                  setNextHeaderId(nextHeaderId + 1);
+                  networkRouteManager.modifyRoute(id, {
+                    responseHeaders: newHeaders,
+                  });
+                }}
+                compact
+                padded
+                style={{marginBottom: 10}}>
+                Add Header
+              </Button>
+            </Layout.Horizontal>
+            <Layout.ScrollContainer>
               <ManagedTable
                 hideHeader={true}
                 multiline={true}