Began to add global toolbar

client/components/states_indicator/live/live.css

@@ -0,0 +1,20 @@
+.live{
+    width: 40px;
+    height: 30px;
+    /* For text alignement */
+    text-align: center;
+    vertical-align: middle;
+    line-height: 30px;
+
+    cursor: default;
+    font-weight: bold;
+    margin-right: 10px;
+}
+
+.enabled{
+    color: lime;
+}
+
+.disabled{
+    color: red;
+}

client/components/states_indicator/live/live.js

@@ -0,0 +1,32 @@
+class LiveStateIndicator extends HTMLElement{
+    constructor(){
+        super();
+    }
+
+    changeToDisable(){
+        let liveElm = this.getElementsByClassName("live")[0];
+        liveElm.classList.remove("enabled");
+        liveElm.classList.add("disabled");
+    }
+
+    changeToEnable(){
+        let liveElm = this.getElementsByClassName("live")[0];
+        liveElm.classList.remove("disabled");
+        liveElm.classList.add("enabled");
+    }
+
+    connectedCallback(){
+        this.render();
+    }
+
+    render(){
+        this.innerHTML = `
+            <link rel="stylesheet" href="components/states_indicator/live/live.css">
+            <div class="live">
+                LIVE
+            </div>
+        `
+    }
+}
+
+customElements.define("sea-live-state-indicator", LiveStateIndicator)