From 48d305104cc2fdc7aa02338ba9cd978ec065a037 Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Wed, 18 Sep 2024 12:11:01 +0200
Subject: [PATCH] ADD: Ram widget to the new control page

---
 launcher/public/output.css                    |  21 +++
 .../components/widgets/TheNetwork.vue         |   2 +-
 .../components/widgets/TheRam.vue             |  29 ++++
 .../control-page/sections/CommonSidebar.vue   |   3 +-
 .../UI/the-control/ControlDashboard.vue       |   2 +-
 .../src/components/UI/the-control/TheRam.vue  | 124 ------------------
 6 files changed, 54 insertions(+), 127 deletions(-)
 create mode 100755 launcher/src/components/UI/control-page/components/widgets/TheRam.vue
 delete mode 100755 launcher/src/components/UI/the-control/TheRam.vue

diff --git a/launcher/public/output.css b/launcher/public/output.css
index d22404f8cd..b3cc1de1ee 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -4172,6 +4172,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;
 }
@@ -4551,6 +4556,18 @@ video {
   font-size: 50%;
 }
 
+.text-\[80\%\]{
+  font-size: 80%;
+}
+
+.text-\[90\%\]{
+  font-size: 90%;
+}
+
+.text-\[100\%\]{
+  font-size: 100%;
+}
+
 .font-\[400\]{
   font-weight: 400;
 }
@@ -4579,6 +4596,10 @@ video {
   font-weight: 600;
 }
 
+.font-thin{
+  font-weight: 100;
+}
+
 .uppercase{
   text-transform: uppercase;
 }
diff --git a/launcher/src/components/UI/control-page/components/widgets/TheNetwork.vue b/launcher/src/components/UI/control-page/components/widgets/TheNetwork.vue
index af797ac9df..5b221714d8 100755
--- a/launcher/src/components/UI/control-page/components/widgets/TheNetwork.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/TheNetwork.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="networkParent flex w-full h-full justify-center items-center">
-    <div class="networkIco w-1/3 h-full flex flex-col">
+    <div class="networkIco w-1/3 h-full flex flex-col justify-center items-center">
       <div class="networkIco-container flex justify-center items-center w-full h-4/5">
         <img class="w-3/4" src="/img/icon/control-page-icons/wifiIcon.svg" />
       </div>
diff --git a/launcher/src/components/UI/control-page/components/widgets/TheRam.vue b/launcher/src/components/UI/control-page/components/widgets/TheRam.vue
new file mode 100755
index 0000000000..5478363ebb
--- /dev/null
+++ b/launcher/src/components/UI/control-page/components/widgets/TheRam.vue
@@ -0,0 +1,29 @@
+<template>
+  <div class="theRamParent flex w-full h-full justify-center items-center">
+    <div class="ramIco w-1/3 h-full flex flex-col justify-center items-center">
+      <div class="ramIco-container flex justify-center items-center w-full h-4/5">
+        <img class="w-3/4" src="/img/icon/control-page-icons/ramStick.svg" />
+      </div>
+      <span class="w-full h-1/5 flex justify-center items-center text-gray-200 text-2xs font-semibold uppercase">{{
+        $t("controlPage.ram")
+      }}</span>
+    </div>
+    <div class="ramValue w-2/3 h-full flex flex-col justify-center items-center">
+      <div class="valDigits w-full h-2/3 flex justify-center items-center">
+        <div class="digits flex h-full w-2/3 justify-center items-center">
+          <span class="text-[100%] text-gray-200 font-semibold">{{ controlStore.usedRam }} / {{ controlStore.totalRam }}</span>
+        </div>
+        <span class="flex w-1/3 justify-center items-center text-gray-200 font-semibold h-full">MB</span>
+      </div>
+      <div class="valLbl h-1/3 w-full flex justify-start items-center text-2xs font-thin text-gray-200">
+        <span class="w-1/3 flex justify-center items-center">{{ $t("controlPage.used") }}</span
+        ><span class="w-1/3 flex justify-center items-center">{{ $t("controlPage.totalram") }}</span>
+      </div>
+    </div>
+  </div>
+</template>
+<script setup>
+import { useControlStore } from "@/store/theControl";
+
+const controlStore = useControlStore();
+</script>
diff --git a/launcher/src/components/UI/control-page/sections/CommonSidebar.vue b/launcher/src/components/UI/control-page/sections/CommonSidebar.vue
index 99681f9fae..d143cf60ed 100644
--- a/launcher/src/components/UI/control-page/sections/CommonSidebar.vue
+++ b/launcher/src/components/UI/control-page/sections/CommonSidebar.vue
@@ -4,7 +4,7 @@
   >
     <WidgetCard class="info-widget col-start-1 col-span-6 row-start-1 row-span-3" />
     <WidgetCard class="info-widget col-start-1 col-span-6 row-start-4 row-span-3" />
-    <WidgetCard class="info-widget col-start-1 col-span-6 row-start-7 row-span-3" />
+    <WidgetCard class="ram-widget col-start-1 col-span-6 row-start-7 row-span-3"><TheRam /></WidgetCard>
     <WidgetCard class="network-widget col-start-1 col-span-6 row-start-10 row-span-3"><TheNetwork /></WidgetCard>
   </div>
 </template>
@@ -12,4 +12,5 @@
 <script setup>
 import WidgetCard from "../components/cards/WidgetCard.vue";
 import TheNetwork from "../components/widgets/TheNetwork.vue";
+import TheRam from "../components/widgets/TheRam.vue";
 </script>
diff --git a/launcher/src/components/UI/the-control/ControlDashboard.vue b/launcher/src/components/UI/the-control/ControlDashboard.vue
index ee01756600..eb6e16f10c 100755
--- a/launcher/src/components/UI/the-control/ControlDashboard.vue
+++ b/launcher/src/components/UI/the-control/ControlDashboard.vue
@@ -68,7 +68,7 @@ import TheHard from "./TheHard.vue";
 import MachineName from "./MachineName.vue";
 import DashboardCard from "./DashboardCard.vue";
 import AmsterdamComponent from "./AmsterdamComponent.vue";
-import TheRam from "./TheRam.vue";
+import TheRam from "../control-page/components/widgets/TheRam.vue";
 import PeerToPeer from "./PeerToPeer.vue";
 import TheNetwork from "./TheNetwork.vue";
 import TheBalance from "./TheBalance";
diff --git a/launcher/src/components/UI/the-control/TheRam.vue b/launcher/src/components/UI/the-control/TheRam.vue
deleted file mode 100755
index 022ca3a6f5..0000000000
--- a/launcher/src/components/UI/the-control/TheRam.vue
+++ /dev/null
@@ -1,124 +0,0 @@
-<template>
-  <div class="theRamParent">
-    <div class="ramBox">
-      <div class="ramIco">
-        <div class="ramIco-container">
-          <img src="../../../../public/img/icon/control-page-icons/ramStick.svg" />
-        </div>
-        <span>{{ $t("controlPage.ram") }}</span>
-      </div>
-      <div class="ramValue">
-        <div class="valDigits">
-          <div class="digits">
-            <span>{{ usedRam }} / {{ totalRam }}</span>
-          </div>
-          <span>MB</span>
-        </div>
-        <div class="valLbl">
-          <span>{{ $t("controlPage.used") }}</span
-          ><span>{{ $t("controlPage.totalram") }}</span>
-        </div>
-      </div>
-    </div>
-  </div>
-</template>
-<script>
-import { mapState } from "pinia";
-import { useControlStore } from "../../../store/theControl";
-export default {
-  data() {
-    return {};
-  },
-  computed: {
-    ...mapState(useControlStore, {
-      usedRam: "usedRam",
-      totalRam: "totalRam",
-    }),
-  },
-};
-</script>
-
-<style scoped>
-.theRamParent {
-  display: flex;
-  width: 100%;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-  box-sizing: border-box;
-  height: 100%;
-}
-.ramBox {
-  width: 100%;
-  height: 100%;
-  display: flex;
-  box-sizing: border-box;
-}
-.ramIco {
-  box-sizing: border-box;
-  width: 30%;
-  height: 100%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  flex-direction: column;
-}
-.ramIco span {
-  width: 100%;
-  height: 20%;
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  font-size: 60%;
-  font-weight: bold;
-  color: #c1c1c1;
-}
-.ramIco-container {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 100%;
-  height: 80%;
-}
-.ramIco-container img {
-  width: 75%;
-}
-.ramValue {
-  width: 70%;
-  height: 100%;
-  display: flex;
-  flex-direction: column;
-  justify-content: center;
-  align-items: center;
-}
-.valDigits {
-  display: flex;
-  width: 100%;
-  height: 70%;
-  justify-content: center;
-  align-items: center;
-  color: #c1c1c1;
-}
-.digits {
-  display: flex;
-  justify-content: center;
-  align-items: center;
-  width: 70%;
-  height: 100%;
-}
-.valDigits,
-.digits span {
-  font-size: 1rem;
-  font-weight: 600;
-  color: #c1c1c1;
-}
-.valLbl {
-  display: flex;
-  width: 40%;
-  align-items: center;
-  justify-content: space-between;
-  font-size: 0.7rem;
-  font-weight: 500;
-  color: #c1c1c1;
-}
-</style>