ADD: Ram widget to the new control page

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;
 }

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>

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>

launcher/src/components/UI/control-page/sections/CommonSidebar.vue

@@ -4,12 +4,13 @@
   >
     <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>
 
 <script setup>
 import WidgetCard from "../components/cards/WidgetCard.vue";
 import TheNetwork from "../components/widgets/TheNetwork.vue";
+import TheRam from "../components/widgets/TheRam.vue";
 </script>

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";