style video recording section

Summary: style video recording section

Reviewed By: jknoxville

Differential Revision: D18658103

fbshipit-source-id: 450ed1e3a1ee4330183f14b2c00486649087c3bb

src/chrome/PluginDebugger.tsx

@@ -20,6 +20,7 @@ import {
   Link,
   FlipperPlugin,
   FlipperDevicePlugin,
+  Bordered,
 } from 'flipper';
 import StatusIndicator from '../ui/components/StatusIndicator';
 import {State as Store} from '../reducers';
@@ -35,14 +36,9 @@ const Ellipsis = styled(Text)({
   whiteSpace: 'nowrap',
 });
 
-const TableContainer = styled('div')({
+const TableContainer = styled(Bordered)({
-  borderRadius: 4,
-  overflow: 'hidden',
-  border: `1px solid ${colors.macOSTitleBarButtonBorder}`,
   marginTop: 10,
-  backgroundColor: colors.white,
   height: 400,
-  display: 'flex',
 });
 
 const Lamp = (props: {on: boolean}) => (

src/ui/components/Bordered.tsx

@@ -0,0 +1,25 @@
+/**
+ * Copyright (c) Facebook, Inc. and its affiliates.
+ *
+ * This source code is licensed under the MIT license found in the
+ * LICENSE file in the root directory of this source tree.
+ *
+ * @format
+ */
+
+import styled from 'react-emotion';
+import {colors} from './colors';
+
+/**
+ * Puts a gray border around something
+ */
+const Bordered = styled('div')({
+  borderRadius: 4,
+  overflow: 'hidden',
+  border: `1px solid ${colors.macOSTitleBarButtonBorder}`,
+  backgroundColor: colors.white,
+  display: 'flex',
+});
+Bordered.displayName = 'bordered';
+
+export default Bordered;

src/ui/components/Labeled.tsx

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

src/ui/components/table/ManagedTable.tsx

@@ -626,7 +626,9 @@ export class ManagedTable extends React.Component<
         highlighted={highlightedRows.has(rows[index].key)}
         row={rows[index]}
         index={index}
-        style={style}
+        style={
+          rows[index].height ? {...style, height: rows[index].height} : style
+        }
         onAddFilter={onAddFilter}
         zebra={zebra}
       />

src/ui/index.tsx

@@ -168,3 +168,4 @@ export {default as Labeled} from './components/Labeled';
 export {default as RoundedSection} from './components/RoundedSection';
 export {default as CenteredView} from './components/CenteredView';
 export {default as Info} from './components/Info';
+export {default as Bordered} from './components/Bordered';

src/utils/icons.js

@@ -34,6 +34,7 @@ const ICONS = {
   compose: [12],
   'cross-circle': [12, 16, 24],
   'dots-3-circle-outline': [16],
+  'first-aid': [12],
   'flash-default': [12],
   'info-circle': [12, 16, 24],
   'magic-wand': [12, 20],
@@ -76,6 +77,7 @@ const ICONS = {
   star: [12, 16, 24],
   tree: [12],
   translate: [12],
+  trash: [12, 16],
   'star-slash': [16],
   'life-event-major': [16],
   target: [12, 16],