From b0c82445a666845221603db77c15aa7866a816bc Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Thu, 19 Sep 2024 14:23:24 +0200
Subject: [PATCH] ADD:Staking sidebar added to the control

---
 launcher/public/output.css                    |  9 ++++
 .../UI/control-page/ControlScreen.vue         |  6 ++-
 .../control-page/sections/StakingSidebar.vue  | 42 +++++++++++++++++++
 3 files changed, 56 insertions(+), 1 deletion(-)
 create mode 100644 launcher/src/components/UI/control-page/sections/StakingSidebar.vue

diff --git a/launcher/public/output.css b/launcher/public/output.css
index ecb9fc1b1..abbc7f8bf 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -1067,6 +1067,10 @@ video {
   grid-column: 1 / -1;
 }
 
+.col-span-12{
+  grid-column: span 12 / span 12;
+}
+
 .col-start-1{
   grid-column-start: 1;
 }
@@ -4220,6 +4224,11 @@ video {
   background-color: rgb(63 63 70 / var(--tw-bg-opacity));
 }
 
+.bg-red-400{
+  --tw-bg-opacity: 1;
+  background-color: rgb(248 113 113 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-80{
   --tw-bg-opacity: 0.8;
 }
diff --git a/launcher/src/components/UI/control-page/ControlScreen.vue b/launcher/src/components/UI/control-page/ControlScreen.vue
index 89505831e..70b99dc81 100644
--- a/launcher/src/components/UI/control-page/ControlScreen.vue
+++ b/launcher/src/components/UI/control-page/ControlScreen.vue
@@ -1,9 +1,12 @@
 <template>
   <base-layout>
-    <div class="Control-screen w-full h-full grid grid-cols-24 grid-rows-12 items-center bg-[#242529]">
+    <div
+      class="Control-screen w-full h-full grid grid-cols-24 grid-rows-12 items-center bg-[#242529]"
+    >
       <ControlHeader />
       <CommonSidebar />
       <AlertSection />
+      <StakingSidebar />
     </div>
   </base-layout>
 </template>
@@ -12,6 +15,7 @@
 import ControlHeader from "./sections/ControlHeader.vue";
 import CommonSidebar from "./sections/CommonSidebar.vue";
 import AlertSection from "./sections/AlertSection.vue";
+import StakingSidebar from "./sections/StakingSidebar.vue";
 </script>
 <style scoped>
 .Control-screen {
diff --git a/launcher/src/components/UI/control-page/sections/StakingSidebar.vue b/launcher/src/components/UI/control-page/sections/StakingSidebar.vue
new file mode 100644
index 000000000..65137f174
--- /dev/null
+++ b/launcher/src/components/UI/control-page/sections/StakingSidebar.vue
@@ -0,0 +1,42 @@
+<template>
+  <div
+    class="stake-sidebar w-full h-full col-start-10 col-end-22 row-start-2 row-span-full grid grid-cols-12 grid-rows-15 items-center gap-1 pt-2 pb-1 pr-1 pl-1 bg-red-400"
+  >
+    <WidgetCard
+      class="services-select-widget col-start-1 col-span-6 row-start-1 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="amsterdam-widget col-start-1 col-span-6 row-start-4 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="endpoint-widget col-start-1 col-span-6 row-start-7 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="p2pNetwork-widget col-start-1 col-span-6 row-start-10 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="p2p-widget col-start-1 col-span-6 row-start-13 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="connected-validator-widget col-start-7 col-span-12 row-start-1 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="sync-status-widget col-start-7 col-span-12 row-start-4 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="epoch-slot-widget col-start-7 col-span-12 row-start-7 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="subscribed-subnet-widget col-start-7 col-span-12 row-start-10 row-span-3"
+    ></WidgetCard>
+    <WidgetCard
+      class="peer-over-time-widget col-start-7 col-span-12 row-start-13 row-span-3"
+    ></WidgetCard>
+  </div>
+</template>
+
+<script setup>
+import WidgetCard from "../components/cards/WidgetCard.vue";
+</script>
+
+<style scoped></style>