updated protocols

src/render/components/connectionStatus.vue

@@ -1,20 +1,34 @@
 <template>
-    <div class="statusContainer">
-        <div>{{status}}</div>
+  <div id="container">
+    <img id="logo" src="@/render/assets/connectLogo.svg">
+    <div id="connect">
+      <div class="dot"></div>
     </div>
-
+  </div>
 </template>
 
 
 <script lang="ts">
 
-import { defineComponent } from 'vue'
-import { status } from "@/render/shared/connectionStatus";
+import { defineComponent, onMounted, watch } from 'vue'
+import { hiddenState, useAnim, status, show, hide } from "@/render/shared/connectionStatus";
 
 export default defineComponent({
     name: "ConnectionStatus",
 
     setup() {
+
+        watch(status, (val, _oldval) => {
+          if (val === "Connected" || val === "Nominal") {
+            if (!hiddenState) hide();
+          } else {
+            if (hiddenState)
+            show();
+          }
+        });
+
+        onMounted(useAnim);
+
         return {
             status
         }
@@ -25,13 +39,65 @@ export default defineComponent({
 </script>
 
 
-<style lang="scss">
-.statusContainer {
-    width: 100vw;
-    display: flex;
-    justify-content: center;
-    :first-child {
-        margin-right: 2px;
-    }
+<style lang="scss" scoped>
+
+#container {
+  position: fixed;
+  width: 100vw;
+  height: 54px;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  z-index: 1;
 }
+
+#connect {
+  opacity: 0;
+}
+
+shape {
+  width: 6px;
+  height: 6px;
+  border-radius: 50%;
+  background-color: #48E065;
+}
+
+.dot {
+  @extend shape;
+  position: relative;
+  transform: translateX(-15px);
+  animation: flashing 1s infinite linear alternate;
+  animation-delay: .25s;
+}
+
+.dot::before, .dot::after {
+  content: '';
+  display: inline-block;
+  position: absolute;
+}
+
+.dot::before {
+  @extend shape;
+  left: -9px;
+  animation: flashing 1s infinite alternate;
+  animation-delay: 0s;
+}
+
+.dot::after {
+  @extend shape;
+  left: 9px;
+  animation: flashing 1s infinite alternate;
+  animation-delay: 0.5s;
+}
+
+@keyframes flashing {
+  0% {
+    background-color: #48E065;
+  }
+  50%,
+  100% {
+    background-color: #9B9B9B;
+  }
+}
+
 </style>