Network Plugin - Update UI for routes (#1831)

Summary:
The current UI for managing mock network request definitions (routes) has some issues
- too small for the amount of information it displays
- no formatting for JSON response bodies
- uses the older design system (not ant)
- no separation between commands for creating routes and the list of routes

The following screen images show these problems.

![image](https://user-images.githubusercontent.com/337874/104691438-deb9cb00-56cb-11eb-92df-9e2d122f65c2.png)

![image](https://user-images.githubusercontent.com/337874/104691471-eda07d80-56cb-11eb-8f82-444d591ff966.png)

## Changelog

Enhance UI for Mocks dialog in Network Plugin

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

Test Plan:
Ran multiple manual tests using the Android sample app.  Here is a screen image (at 1280 x 720) for the enhanced UI.

![image](https://user-images.githubusercontent.com/337874/104691649-37896380-56cc-11eb-849f-4e470bb7fbc4.png)

Reviewed By: mweststrate

Differential Revision: D25922798

Pulled By: priteshrnandgaonkar

fbshipit-source-id: d27ba30a7eb51105a8d381097ecaafd82624cad5

desktop/plugins/network/MockResponseDialog.tsx

@@ -7,7 +7,7 @@
  * @format
  */
 
-import {FlexColumn, Button, styled} from 'flipper';
+import {FlexColumn, Button, styled, Layout} from 'flipper';
 
 import {ManageMockResponsePanel} from './ManageMockResponsePanel';
 import {Route, Request, Response} from './types';
@@ -40,19 +40,21 @@ const Row = styled(FlexColumn)({
 
 export function MockResponseDialog(props: Props) {
   return (
-    <Container>
+    <Layout.Container pad width={1200}>
       <Title>Mock Network Responses</Title>
-      <ManageMockResponsePanel
-        routes={props.routes}
-        highlightedRows={props.highlightedRows}
-        requests={props.requests}
-        responses={props.responses}
-      />
-      <Row>
+      <Layout.Horizontal>
+        <ManageMockResponsePanel
+          routes={props.routes}
+          highlightedRows={props.highlightedRows}
+          requests={props.requests}
+          responses={props.responses}
+        />
+      </Layout.Horizontal>
+      <Layout.Horizontal>
         <Button compact padded onClick={props.onHide}>
           Close
         </Button>
-      </Row>
-    </Container>
+      </Layout.Horizontal>
+    </Layout.Container>
   );
 }