diff --git a/src/chrome/PluginDebugger.js b/src/chrome/PluginDebugger.js index db22f64c0..3b85209e0 100644 --- a/src/chrome/PluginDebugger.js +++ b/src/chrome/PluginDebugger.js @@ -21,6 +21,7 @@ import { colors, Link, } from 'flipper'; +import StatusIndicator from '../ui/components/StatusIndicator'; const Container = styled(FlexColumn)({ padding: 10, @@ -59,15 +60,9 @@ const TableContainer = styled('div')({ display: 'flex', }); -const Lamp = styled('div')(props => ({ - width: 10, - height: 10, - borderRadius: 5, - backgroundColor: props.on ? colors.lime : colors.red, - border: `1px solid ${colors.blackAlpha30}`, - marginTop: 6, - flexShrink: 0, -})); +const Lamp = props => ( + +); type Props = {| devicePlugins: Array>, diff --git a/src/ui/components/StatusIndicator.js b/src/ui/components/StatusIndicator.js new file mode 100644 index 000000000..8008ca0bb --- /dev/null +++ b/src/ui/components/StatusIndicator.js @@ -0,0 +1,30 @@ +/** + * Copyright 2019-present Facebook. + * This source code is licensed under the MIT license found in the + * LICENSE file in the root directory of this source tree. + * @format + */ + +import {colors, styled} from 'flipper'; +import type {Element} from 'react'; + +type Props = { + statusColor: string, + diameter?: number | string, + title?: string, +}; + +const StatusIndicator: Props => Element<'div'> = styled('div')( + ({statusColor, diameter = 10, title}) => ({ + alignSelf: 'center', + backgroundColor: statusColor, + border: `1px solid ${colors.blackAlpha30}`, + borderRadius: '50%', + flexShrink: 0, + height: diameter, + title, + width: diameter, + }), +); + +export default StatusIndicator; diff --git a/src/ui/index.js b/src/ui/index.js index 9750809d0..0aec53693 100644 --- a/src/ui/index.js +++ b/src/ui/index.js @@ -124,6 +124,7 @@ export {default as ModalOverlay} from './components/ModalOverlay.js'; export {default as Tooltip} from './components/Tooltip.js'; export {default as TooltipProvider} from './components/TooltipProvider.js'; export {default as ResizeSensor} from './components/ResizeSensor.js'; +export {default as StatusIndicator} from './components/StatusIndicator.js'; // typography export {default as HorizontalRule} from './components/HorizontalRule.js';