styled reconnect green dot

Author: garrettlchow

src/app/components/Buttons/StatusDot.tsx

@@ -1,26 +1,7 @@
 import React from 'react';
-import styled from 'styled-components';
-
-const Dot = styled('div')({
-  borderRadius: '50%',
-  width: '12px',
-  height: '12px',
-  display: 'inline-block',
-});
 
 const StatusDot = ({ status }) => {
-  let color: 'green' | 'red';
-  switch (status) {
-    case 'active':
-      color = 'green';
-      break;
-    case 'inactive':
-      color = 'red';
-      break;
-    default:
-      color = 'green';
-  }
-  return <Dot style={{ backgroundColor: color }} />;
+  return <span className={`status-dot ${status}`} />;
 };
 
 export default StatusDot;

src/app/styles/components/_buttons.scss

@@ -178,7 +178,6 @@
 }
 
 .svg-inline--fa {
-  //color: $blue-brand;
   margin-right: 0.75em;
   display: inline-block;
   font-size: inherit;

src/app/styles/layout/_buttonsContainer.scss

@@ -20,15 +20,6 @@
   padding-left: 2px;
 }
 
-.tools-container {
-  display: flex;
-  justify-content: space-between;
-  border: 0.5px solid grey;
-  background-color: #35383e;
-  padding: 3px;
-  margin-bottom: 1rem;
-}
-
 #seriesname {
   background-color: #333;
   color: white;
@@ -119,3 +110,34 @@
 .buttons-container button:hover {
   background-color: #f3f4f6;
 }
+
+.status-dot {
+  display: inline-block;
+  width: 10px;
+  height: 10px;
+  border-radius: 50%;
+}
+
+.status-dot.active {
+  background-color: #14b8a6;
+  animation: pulse 2s infinite;
+}
+
+.status-dot.inactive {
+  background-color: #9ca3af;
+}
+
+@keyframes pulse {
+  0% {
+    opacity: 1;
+    transform: scale(1);
+  }
+  50% {
+    opacity: 0.7;
+    transform: scale(1.1);
+  }
+  100% {
+    opacity: 1;
+    transform: scale(1);
+  }
+}