status badge

src/components/Dashboard/Status.jsx

@@ -1,4 +1,5 @@
 import React from "react";
+import { Badge } from "react-bootstrap";
 import { wsLocation } from "../../config";
 
 const Status = (props: {
@@ -7,17 +8,18 @@ const Status = (props: {
   toggleShowStatus: () => void,
 }) => {
   const { toggleShowStatus, connected, fetching } = props;
-  if (!connected)
-    return (
-      <div className="connecting" onClick={toggleShowStatus}>
-        Connecting to {wsLocation}
-      </div>
-    );
-  if (!fetching.length) return <div />;
+  const text = connected
+    ? fetching.length
+      ? `Fetching ${fetching}`
+      : `Connected to ${wsLocation}`
+    : `Connecting to ${wsLocation}`;
   return (
-    <div className="connecting" onClick={toggleShowStatus}>
-      Fetching {fetching}
-    </div>
+    <Badge
+      className={connected ? "connected" : "connecting"}
+      onClick={toggleShowStatus}
+    >
+      {text}
+    </Badge>
   );
 };
 

src/index.css

@@ -267,8 +267,16 @@ table td {
 .connecting {
     background: orange;
     position: fixed;
-    left: 0px;
-    bottom: 0px;
+    right: 0px;
+    top: 0px;
+    padding: 5px;
+}
+
+.connected {
+    background: green;
+    position: fixed;
+    right: 0px;
+    top: 0px;
     padding: 5px;
 }
 
@@ -294,4 +302,4 @@ table td {
     position: fixed;
     right: 0px;
     bottom: 0px;
-}
+}