Add clear diff button, style recording button

Summary:
* Added a button to clear Diff selection
* Added icons and color to the recording button
* Made App input field readonly

Reviewed By: priteshrnandgaonkar

Differential Revision: D18748538

fbshipit-source-id: 00ffb5d5c36f8f5394a353602f182aabd8237ee7

src/chrome/VideoRecordingButton.tsx

@@ -9,7 +9,7 @@
 
 import React, {Component} from 'react';
 import BaseDevice from '../devices/BaseDevice';
-import {Button} from 'flipper';
+import {Button, Glyph, colors} from 'flipper';
 import path from 'path';
 import os from 'os';
 
@@ -82,7 +82,13 @@ export default class VideoRecordingButton extends Component<Props, State> {
         selected={this.state.recording}
         title="Make Screen Recording"
         disabled={!selectedDevice || !recordingEnabled}
-        type="primary">
+        type={this.state.recording ? 'danger' : 'primary'}>
+        <Glyph
+          name={this.state.recording ? 'stop-playback' : 'camcorder'}
+          color={this.state.recording ? colors.red : colors.white}
+          variant="filled"
+          style={{marginRight: 8}}
+        />
         {this.state.recording ? 'Recording...' : 'Start Recording'}
       </Button>
     );

src/ui/components/HBox.tsx

@@ -42,9 +42,8 @@ const HBox: React.FC<{
     shrink: 0,
   };
   const growStyle = {
-    width: '100%',
+    flexShrink: 1,
-    shrink: 1,
+    flexGrow: 1,
-    grow: 1,
     display: 'flex',
     flexDirection: 'column',
   } as const;

src/ui/components/Input.tsx

@@ -10,13 +10,14 @@
 import styled from 'react-emotion';
 import {colors} from './colors';
 
-export const inputStyle = (compact: boolean) => ({
+export const inputStyle = (compact: boolean, readOnly: boolean) => ({
   border: `1px solid ${colors.light15}`,
   borderRadius: 4,
   font: 'inherit',
   fontSize: '1em',
   height: compact ? '17px' : '28px',
   lineHeight: compact ? '17px' : '28px',
+  backgroundColor: readOnly ? colors.light02 : undefined,
   '&:disabled': {
     backgroundColor: '#ddd',
     borderColor: '#ccc',
@@ -24,10 +25,12 @@ export const inputStyle = (compact: boolean) => ({
   },
 });
 
-const Input = styled('input')(({compact}: {compact?: boolean}) => ({
+const Input = styled('input')(
-  ...inputStyle(compact || false),
+  ({compact, readOnly}: {compact?: boolean; readOnly?: boolean}) => ({
-  padding: compact ? '0 5px' : '0 10px',
+    ...inputStyle(compact || false, readOnly || false),
-}));
+    padding: compact ? '0 5px' : '0 10px',
+  }),
+);
 
 Input.displayName = 'Input';
 

src/ui/components/Labeled.tsx

@@ -15,7 +15,10 @@ import FlexColumn from './FlexColumn';
 /**
  * Vertically arranged section that starts with a label and includes standard margins
  */
-const Labeled: React.FC<{title: string}> = ({title, children}) => (
+const Labeled: React.FC<{title: string | React.ReactNode}> = ({
+  title,
+  children,
+}) => (
   <VBox>
     <Label style={{marginBottom: 6}}>{title}</Label>
     <FlexColumn>{children}</FlexColumn>

src/ui/components/Textarea.tsx

@@ -10,12 +10,14 @@
 import styled from 'react-emotion';
 import {inputStyle} from './Input';
 
-const Textarea = styled('textarea')(({compact}: {compact?: boolean}) => ({
+const Textarea = styled('textarea')(
-  ...inputStyle(compact || false),
+  ({compact, readOnly}: {compact?: boolean; readOnly?: boolean}) => ({
-  lineHeight: 'normal',
+    ...inputStyle(compact || false, readOnly || false),
-  padding: compact ? '5px' : '8px',
+    lineHeight: 'normal',
-  resize: 'none',
+    padding: compact ? '5px' : '8px',
-}));
+    resize: 'none',
+  }),
+);
 Textarea.displayName = 'Textarea';
 
 export default Textarea;

src/utils/icons.js

@@ -30,6 +30,7 @@ const ICONS = {
   'chevron-down-outline': [10],
   'chevron-down': [8, 12],
   'chevron-up': [8, 12],
+  'chevron-left': [12],
   'chevron-right': [8, 12, 16],
   compose: [12],
   'cross-circle': [12, 16, 24],
@@ -55,8 +56,8 @@ const ICONS = {
   borders: [16],
   box: [12],
   bug: [12],
-  camcorder: [12],
+  camcorder: [12, 16],
-  camera: [12],
+  camera: [12, 16],
   caution: [16],
   cross: [16],
   checkmark: [16],
@@ -75,6 +76,7 @@ const ICONS = {
   settings: [12],
   share: [16],
   star: [12, 16, 24],
+  'stop-playback': [16],
   tree: [12],
   translate: [12],
   trash: [12, 16],