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 => ({
-  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 => (
+  <StatusIndicator statusColor={props.on ? colors.lime : colors.red} />
+);
 
 type Props = {|
   devicePlugins: Array<FlipperDevicePlugin<>>,