diff --git a/src/chrome/PluginDebugger.tsx b/src/chrome/PluginDebugger.tsx index b714b573d..de177295e 100644 --- a/src/chrome/PluginDebugger.tsx +++ b/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')({ - borderRadius: 4, - overflow: 'hidden', - border: `1px solid ${colors.macOSTitleBarButtonBorder}`, +const TableContainer = styled(Bordered)({ marginTop: 10, - backgroundColor: colors.white, height: 400, - display: 'flex', }); const Lamp = (props: {on: boolean}) => ( diff --git a/src/ui/components/Bordered.tsx b/src/ui/components/Bordered.tsx new file mode 100644 index 000000000..29d276d21 --- /dev/null +++ b/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; diff --git a/src/ui/components/Labeled.tsx b/src/ui/components/Labeled.tsx index 78ea971f8..9da5d55d8 100644 --- a/src/ui/components/Labeled.tsx +++ b/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}) => ( - {children} + {children} ); diff --git a/src/ui/components/table/ManagedTable.tsx b/src/ui/components/table/ManagedTable.tsx index 17bdfff18..8d869b3c3 100644 --- a/src/ui/components/table/ManagedTable.tsx +++ b/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} /> diff --git a/src/ui/index.tsx b/src/ui/index.tsx index 3e7a62f1e..c0b4a2c26 100644 --- a/src/ui/index.tsx +++ b/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'; diff --git a/src/utils/icons.js b/src/utils/icons.js index e7c0d8d3d..e5d3116cd 100644 --- a/src/utils/icons.js +++ b/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],