Pull out colored disc indicator

Summary:
Pulls out the local `Lamp` component from `PluginDebugge` into `StatusIndicator`.

This will allow to reuse the component in different context, to guarantee a consistent appearance of Flipper throughout.

For good measure, we make diameter and title configurable. Vertical alignment is changed from `margin-top` to `align-self`.

Reviewed By: danielbuechele

Differential Revision: D15692275

fbshipit-source-id: 438b2f5300175565dbf07d07a5d757936b4f7cfe

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 => ({
+const Lamp = props => (
-  width: 10,
+  <StatusIndicator statusColor={props.on ? colors.lime : colors.red} />
-  height: 10,
+);
-  borderRadius: 5,
-  backgroundColor: props.on ? colors.lime : colors.red,
-  border: `1px solid ${colors.blackAlpha30}`,
-  marginTop: 6,
-  flexShrink: 0,
-}));
 
 type Props = {|
   devicePlugins: Array<FlipperDevicePlugin<>>,

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;

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';