Redo the control page components

launcher/src/components/UI/the-control/ControlDashboard.vue

@@ -2,9 +2,9 @@
   <div class="ctrlParent">
     <div class="machineName_cell"><machine-name></machine-name></div>
     <div class="node-serve">
-      <node-server-response></node-server-response>
+      <EpochSlot />
     </div>
-    <div class="sandFull_cell"><time-gas></time-gas></div>
+    <div class="sandFull_cell"><TheBalance /></div>
     <dashboard-card class="hard-disk">
       <the-hard></the-hard>
     </dashboard-card>
@@ -34,12 +34,11 @@
     <div class="half-card3"><data-api></data-api></div>
   </div>
 </template>
-
 <script>
 import TheStorage from "./TheStorage.vue";
 import DataApi from "./DataApi.vue";
 import SyncStatus from "./SyncStatus.vue";
-import NodeServerResponse from "./NodeServerResponse.vue";
+import EpochSlot from "./EpochSlot.vue";
 import TheCpu from "./TheCpu.vue";
 import TheHard from "./TheHard.vue";
 import MachineName from "./MachineName.vue";
@@ -48,7 +47,7 @@ import AmsterdamComponent from "./AmsterdamComponent.vue";
 import TheRam from "./TheRam.vue";
 import PeerToPeer from "./PeerToPeer.vue";
 import TheNetwork from "./TheNetwork.vue";
-import TimeGas from "./TimeGas.vue";
+import TheBalance from "./TheBalance";
 import RpcEndpoint from "./RpcEndpoint.vue";
 import WsEndpoint from "./WsEndpoint.vue";
 import DiskSpeed from "./DiskSpeed.vue";
@@ -68,8 +67,8 @@ export default {
     PeerToPeer,
     TheCpu,
     TheNetwork,
-    TimeGas,
-    NodeServerResponse,
+    TheBalance,
+    EpochSlot,
     RpcEndpoint,
     WsEndpoint,
     DiskSpeed,

launcher/src/components/UI/the-control/EpochSlot.vue

@@ -0,0 +1,53 @@
+<template>
+  <div class="epockSlot_parent">
+    <commingSoon />
+    <div class="epoch-box">{{ epoch }}</div>
+    <div class="slot-box">{{ slot }}</div>
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      //this is dummy and these two data has to be number
+      epoch: "{CURRENT EPOCH}",
+      slot: "{CURRENT SLOT}",
+    };
+  },
+};
+</script>
+<style scoped>
+.epockSlot_parent {
+  display: flex;
+  width: 99%;
+  justify-content: center;
+  align-items: center;
+  box-sizing: border-box;
+  height: 100%;
+  color: #c1c1c1;
+  position: relative;
+  border: 1px solid #343434;
+  box-shadow: 1px 1px 10px 1px #171717;
+  border-radius: 10px;
+  background: #2a2a2a;
+}
+.epockSlot_parent:hover {
+  background: #313131;
+}
+.epoch-box,
+.slot-box {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  width: 50%;
+  height: 90%;
+  font-size: 70%;
+  font-weight: 600;
+}
+.epoch-box {
+  border-right: 2px solid #eee;
+}
+.slot-box {
+  border-left: 2px solid #eee;
+}
+</style>