From ac8879c503b2ada4b6b483f50cfcf8fc47f5f8f9 Mon Sep 17 00:00:00 2001
From: Michel Weststrate <mweststrate@fb.com>
Date: Fri, 29 Nov 2019 08:25:46 -0800
Subject: [PATCH] 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 | 10 ++++++++--
 src/ui/components/HBox.tsx          |  5 ++---
 src/ui/components/Input.tsx         | 13 ++++++++-----
 src/ui/components/Labeled.tsx       |  5 ++++-
 src/ui/components/Textarea.tsx      | 14 ++++++++------
 src/utils/icons.js                  |  6 ++++--
 6 files changed, 34 insertions(+), 19 deletions(-)

diff --git a/src/chrome/VideoRecordingButton.tsx b/src/chrome/VideoRecordingButton.tsx
index 9537fffd7..0c4946d0e 100644
--- a/src/chrome/VideoRecordingButton.tsx
+++ b/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>
     );
diff --git a/src/ui/components/HBox.tsx b/src/ui/components/HBox.tsx
index 4821a15cd..71bb9b1e3 100644
--- a/src/ui/components/HBox.tsx
+++ b/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;
diff --git a/src/ui/components/Input.tsx b/src/ui/components/Input.tsx
index 00552b95c..386f74355 100644
--- a/src/ui/components/Input.tsx
+++ b/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';
 
diff --git a/src/ui/components/Labeled.tsx b/src/ui/components/Labeled.tsx
index 9da5d55d8..15a8acf5e 100644
--- a/src/ui/components/Labeled.tsx
+++ b/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>
diff --git a/src/ui/components/Textarea.tsx b/src/ui/components/Textarea.tsx
index 117b812dc..4b3a4da6a 100644
--- a/src/ui/components/Textarea.tsx
+++ b/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;
diff --git a/src/utils/icons.js b/src/utils/icons.js
index e5d3116cd..8fe65e072 100644
--- a/src/utils/icons.js
+++ b/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],
-  camera: [12],
+  camcorder: [12, 16],
+  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],