[web] introduce status indicator component

Summary:
This diff introduces the `StatusIndicator` component. We will use this component in several places, so I figured it would be good to factor this logic into its own component.

for context here are the designs:
{F877020}

Depends on D9887

Test Plan:
Please see screenshot below

active:
{F877016}

inactive:
{F877017}

Reviewers: michal, inka, rohan

Reviewed By: rohan

Subscribers: ashoat, tomek

Differential Revision: https://phab.comm.dev/D9888

web/components/status-indicator.css

@@ -0,0 +1,30 @@
+.indicatorOuter {
+  border-radius: 50%;
+  height: 18px;
+  width: 18px;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.indicatorInner {
+  border-radius: 50%;
+  height: 8px;
+  width: 8px;
+}
+
+.outerActive {
+  background-color: var(--statusIndicator-background-outer-active);
+}
+
+.innerActive {
+  background-color: var(--statusIndicator-background-inner-active);
+}
+
+.outerInactive {
+  background-color: var(--statusIndicator-background-outer-inactive);
+}
+
+.innerInactive {
+  background-color: var(--statusIndicator-background-inner-inactive);
+}

web/components/status-indicator.react.js

@@ -0,0 +1,38 @@
+// @flow
+
+import classNames from 'classnames';
+import * as React from 'react';
+
+import type { ConnectionInfo } from 'lib/types/socket-types.js';
+
+import css from './status-indicator.css';
+
+type Props = {
+  +connectionInfo: ConnectionInfo,
+};
+
+function StatusIndicator(props: Props): React.Node {
+  const { connectionInfo } = props;
+
+  const isConnected = connectionInfo.status === 'connected';
+
+  const outerClassName = classNames({
+    [css.indicatorOuter]: true,
+    [css.outerActive]: isConnected,
+    [css.outerInactive]: !isConnected,
+  });
+
+  const innerClassName = classNames({
+    [css.indicatorInner]: true,
+    [css.innerActive]: isConnected,
+    [css.innerInactive]: !isConnected,
+  });
+
+  return (
+    <div className={outerClassName}>
+      <div className={innerClassName} />
+    </div>
+  );
+}
+
+export default StatusIndicator;

web/theme.css

@@ -294,6 +294,12 @@
   --inputField-border-primary-default: var(--shades-black-75);
   --inputField-clearBackground-primary-default: var(--shades-black-60);
   --inputField-clearIcon-primary-default: var(--shades-white-100);
+
+  /* Status Indicator */
+  --statusIndicator-background-outer-active: var(--success-dark-90);
+  --statusIndicator-background-outer-inactive: var(--error-dark-90);
+  --statusIndicator-background-inner-active: var(--success-primary);
+  --statusIndicator-background-inner-inactive: var(--error-primary);
 }
 
 /* Light theme */
@@ -336,4 +342,10 @@
   --inputField-border-primary-default: var(--shades-white-60);
   --inputField-clearBackground-primary-default: var(--shades-black-50);
   --inputField-clearIcon-primary-default: var(--shades-white-100);
+
+  /* Status Indicator */
+  --statusIndicator-background-outer-active: var(--success-dark-50);
+  --statusIndicator-background-outer-inactive: var(--error-dark-50);
+  --statusIndicator-background-inner-active: var(--success-primary);
+  --statusIndicator-background-inner-inactive: var(--error-primary);
 }