From 8b7f17d93272e10f1d593556d9a997f73e983360 Mon Sep 17 00:00:00 2001
From: David Aurelio <davidaurelio@fb.com>
Date: Thu, 6 Jun 2019 04:07:05 -0700
Subject: [PATCH] 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         | 13 ++++--------
 src/ui/components/StatusIndicator.js | 30 ++++++++++++++++++++++++++++
 src/ui/index.js                      |  1 +
 3 files changed, 35 insertions(+), 9 deletions(-)
 create mode 100644 src/ui/components/StatusIndicator.js

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