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/ui/components/HBox.tsx

@@ -42,9 +42,8 @@ const HBox: React.FC<{
     shrink: 0,
   };
   const growStyle = {
-    width: '100%',
-    shrink: 1,
-    grow: 1,
+    flexShrink: 1,
+    flexGrow: 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}) => ({
-  ...inputStyle(compact || false),
-  padding: compact ? '0 5px' : '0 10px',
-}));
+const Input = styled('input')(
+  ({compact, readOnly}: {compact?: boolean; readOnly?: boolean}) => ({
+    ...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}) => ({
-  ...inputStyle(compact || false),
-  lineHeight: 'normal',
-  padding: compact ? '5px' : '8px',
-  resize: 'none',
-}));
+const Textarea = styled('textarea')(
+  ({compact, readOnly}: {compact?: boolean; readOnly?: boolean}) => ({
+    ...inputStyle(compact || false, readOnly || false),
+    lineHeight: 'normal',
+    padding: compact ? '5px' : '8px',
+    resize: 'none',
+  }),
+);
 Textarea.displayName = 'Textarea';
 
 export default Textarea;