From b22b5dee53f74a2690ac66235dcedb82379321b7 Mon Sep 17 00:00:00 2001
From: mabasian <54101509+mabasian@users.noreply.github.com>
Date: Tue, 13 Aug 2024 15:34:43 +0200
Subject: [PATCH] Alert Box Improvements (#1986)

---
 .../NOTIFICATION-GR\303\234N.png"             | Bin 0 -> 3495 bytes
 .../node-alert-icons/alert-settings-mute.png  | Bin 0 -> 6030 bytes
 launcher/public/output.css                    |   4 +
 .../UI/language-page/components/MenuBody.vue  |  15 +-
 .../node-page/components/alert/NodeAlert.vue  | 186 ++++++++----------
 .../setting-page/components/VolumeSlider.vue  |  15 +-
 .../UI/the-control/ControlAlert.vue           |  90 ++++++---
 launcher/src/store/theFooter.js               |   1 +
 8 files changed, 172 insertions(+), 139 deletions(-)
 create mode 100644 "launcher/public/img/icon/node-alert-icons/NOTIFICATION-GR\303\234N.png"
 create mode 100644 launcher/public/img/icon/node-alert-icons/alert-settings-mute.png

diff --git "a/launcher/public/img/icon/node-alert-icons/NOTIFICATION-GR\303\234N.png" "b/launcher/public/img/icon/node-alert-icons/NOTIFICATION-GR\303\234N.png"
new file mode 100644
index 0000000000000000000000000000000000000000..759e2b06091c9c6a014c65b2ee74a140e16d9a1d
GIT binary patch
literal 3495
zcmV;Y4OsGtP)<h;3K|Lk000e1NJLTq001ul001xu1^@s6fu|$l00004b3#c}2nYxW
zd<bNS000eMNkl<ZXhYRm30M?Y68?L7PMG0PKoAfVL{U+}#A8FEMoqk85*5WG`Bu%b
zU)HP#F^RkCnwUiKTBEsKj~p8DK3R`w!~?umMLZzlje>Fs12fFsz12O=a5%u|vb*0F
z^!H77*Q@%gUcIV%uNk;OYtlByOMsDJ(2EB`7%(l}81_UgJoo|zxCb65c?q+5V()|#
zjR_!r*EE;sCE>@mj^TLzF9bHaF+olJo{Y(17<_i;g@lcB8HRHu-zE4p>AN(H)wG>J
z_it)YPb!b+`2%v5der!ygDdKeeGL5SjBR18h1*Yz?VnW9e~O=GAzR8|=$pMq-Kwdh
z7WnVe(v&<?e3(4m%N-zRvTou0&1{&%E8StQ=AnfnzZQts`^TY0b1(PC@_Yv1-+w~i
zzDCD@I^Z{N1;dPJOd3rkj-9;<>7LfmYx0n>dSzonYQ4ARGhj#WMYC=@F?y6g0{wj4
z9lvElpM+75f&b~~_GlYty+q*Ih9vPEkBrP~kne~<NMR&&Oexm=@HQl^>s|YgiL?IH
z1IkrDgOOO_8@Cd#ysAX2pyrJm!1FdnCh79~_>orxW~aurN4Bh^oAHeSKa+JErd|Gs
z%<l~F!f+l3o?C+33o_^z-O;Sr$UvKL^GJb&@+^fSSPAi4iD%pwP!v3JAZvnO?0O6w
z#v{C?U!w+)*!2_pB)s7Szw+!^nXK|=DZ?<D`bG;L7h>GBD*%!Ax;WVcj745|uwla#
zSQMNHzJB7t9`}cL@^P>hm0-7>$N=BY>+xEG1i=Bm4I034T;-$}M~e$Z^t@Pv80L7r
zzzNXF%p0)mX@RzPyNYb0UK(wd$zhW6So`)U7zb-9>go?4!7$m}sqnlp0}M@#RLg;}
zKC(b!fp^?8B#aE8HQ?Rw4Dga(6Z(!gC2CrIFl8buldf?!LQr`8d@iKB!x3IU*^`%u
zz&VNqvqC|)bWc1v%mExqNd}{=A3RrPgL?8|$ZFI)R>y&@dQ^j03w+|f!K<%o5E|I5
zp$Qx_p>M)QQB(5z<%<JCf|BZT3!!rI!VNIn!_cZQ3XBMxhgB-25K-1*=Xe`_n4JiH
zw^El%#c*2iJiIT{Lamb%SR)xw;V{5VA@nl_zh*`2V1Jjg9^@5#KJ(2fvqbQptXj0T
zRon0hH8};~|Gan$RlEHVl^5#_6&nE;Jno7P#wH_Y_I{V4!&ge+@qQ}gR$AyTh&7M_
zl@0?;Xdb%`Ltm4)oPm2c^483rl=PMe{x2&&+YlMkZj3{wjpK0o!cCY{1DwExcY<i6
zr-wb*Ymh?5!dtC?PI3<^-%f_Im5j0t52M*68X{w9rjB@_<+@aqRw$t}kR0>l7RV}W
zV2qE}04-vlxbKiSx*7a@YUh!g+1J<4dvE3&B8r*I=WUGY+<vq}TxppO=?ikvp{O4`
z+3MIck;etkJ1E#sjZP7M@Knj{29e&SJtiY>>=iLJI*7Ay2u^wnF(H(R?QGCeQU2{V
zkaLF?J*7{PXtw1gHs>sJ+-<ZSyb@za_NZlP?#16W&HvNvM3>;p9_kUcup=UiTH=cJ
z22OA{;IE2-S)~C>O-4kp4?<gL;H6TCo^>Wi`f*&o6FU~J04TRRDaRB2c5S6RFSi48
z3?S`<7kZkByh0%JDjAZmL!f>W-oy@cXRqO_A${<|=mAd#KAgb!ED_Qo4>SFpV=tp1
z(14IoTD;A|t3!vB*UapCixzW6Q32}v$b*Dbv$`jGX+O8eor8oy_8Le3Ht36T5OD1u
z2+7)kZjvG>gf5sIGw0<2cz*OtPYb?!oL2`49;ogj%X|xJpD?JEfl$b(*i@S${!aB;
zgTwPu#NU>?Hgx~)EBJYLbb4GU1wz&`o64aqIE#QQDd?}g1X*QqEs#wL-YJ=sd$a~J
z6i4uoQf5?8cd(3H&?P#vz<L`C7EJ)FVxidB9=-EdfVvXuWe7ACC#$Ip6`4Qc_3IlE
zW!1uBayE+p1@NRoN<~nrW?(cLQBYorH0C5YWeA$9TOy`w2tJ|3shd%PsD(+0Pz*+K
zA&1<o4D`Lf0)4Bp;m;YMP>{hS%WN`%rwsQPHD%a{l~qRSe8`2YeWA)Ib9x2vsJd!H
zUP%FR<#!>8lS1aH!GZzP(EGx2_}w{#=qvlsw)_e-G}P0}3oOl8Sw$tRHY=z#p%~}E
znd{`wrUY*z#U_<hoPL()z)_0hSP224U3n~z;xsD%ZOEudJ+|Ea9y`n%F-0duf4Kry
z%K1h4_aLWqEA`Oe-h=yMQ!4b|4xekJETjb3nPi(1yp_CemXiYN3<4rJ=yN$3$RdlC
zfd^wlg`pUgJx)X0=0|kxScS>fXOJ9!43}5w(Iv|hxKTpIOoQ9^9}r+3%_wYyjLK6H
zE79pi(7tkVjw61W61>CnVs;^yDX8#iS^!nbLhQ?%jlS_m5!@x1LP>>b7n<YjlyC86
z{&2*$wZcsO%b7!EC`{I&%`F3zRP37jRPUe)OG`!2J_O!bBAODsy_=-{gp9l`;c$uF
z26c1_TDHwbyRM<&?&X0|s8Hq`g5ll2fh;T>1JBRGN3kcNt15?{E|W!x%NZpo+RY&_
zjYSA*c$(yU5qRfTt|`IWSRN0<a-nN+05b2*hzO<Wr)M?_S`R-zC=7b4tSt7ZyJN+;
zwPKNxT{(f2ppRfO-xY&FCilbxt(F!kWtnmY#i=$Zk9r`oR1GO*9gD%xlwrfez#CBR
zaS6AB|Bi@f(x}t(goeP{DzvE5>tVIhLiP8DL|X={QjJ9Fu63`7J2lGdHY6S!gJIEU
z#Cw+FyUbvLl~QAXw-1yuCG|G6mE4*KSqg*bd<A^X426zRH2#eW`)o-^WJor`f54~c
z6=7dRIs!xcpIRwd$PZppp#t$pt7?JyAEiT5qk#*|*@Y#(Q=DV0G*eoWqZ_k77UNyX
zLazgkEH>cT!*T?2vL|m3N*`9Da?3tUY?F;<zIq6_93;lQa0wk1X%up_<Fx?b!=OpH
zm^iDJah8$?n18(oBEs!PJ9;6Duu-Q=*q93`QV1mn>B>3eXY%;w><|ncR{P+t!LHJ5
zvEtOZD;RD#g#O+SY5{5J=3XU_F~fJjvy*-E;vgdxpWtm%@nxUAVhiC8nJg?;?~R7s
zYY3ex)ZS4w2wo6Q2dqdxeGy|!2k^Y6PQz4>_IbuQ9Gtcu9!h(&<^*psqwHEHwkgKJ
z*RyuGxDsWtO7P<^(a`Y&&@nRPF_uQbI}A8_`V!u=q@uG&SuL+gJk`|P2%8W)2~jjG
zCK;8neJBiSHuLn7yj`i&;SZ-qAhBmrH5eLWH0db>?d`L`Xrl)1yVMTg6fdKF>mZkI
zss(=ff<Lc`=@~oG6{irBhte<L9sGh`>XKS4Rti$uB#HFPT`4}EdJv3C*e1Flp$$Hk
zid`{tp;FNjr+byS$g3MNj$^QJa||@T0}vJN8n__&(y7d~OF#Z%k{E%LKKkR5_(6T9
zyVhzCq2s46V1)6o%Qax4R5v_qCM*f>hzr;i87Xw`7Z+h+-bloUKfaEHQ2BaS2go%q
zA+l9agXcf#`;IJKll*m(sA<I8W2O%sH+)Hb;O${S#~^1f<8}Q3yy!)Hwi=XUR%1ls
zPRPA|p`s>CPHB>5S!z7R&IJ~#Vp@GAs;GVbUFI?@j@?{qys$WbI@q2LuLhxASYSgi
z#CNGbZ%^8`DrKn%UgPT<zc^*ZuW}`IN)3=;z_F8Am}J|BXFMJ{*FciKCsN;P(DrJn
z`FYsHj-^6p4;R7XYxj3R6@AC(<YIBwg+sl+<%7icU#u)EOLxq1)QqKb_H~GhY15e5
zjx{h{vKKKP<+x8prT4%TFrlp)8|r*N{^E4J*ZCCPGf3Xp37$R!(5|(6pSiNnU%I(y
z`lo|vaIOP98y(ka!;HnV6BtR&QsEj89d;t^B&AWyLEQChjxWZqb{n|B7<BDdq=e7G
z-?nvvkN-eA84GAI#vQ_Gx5Xz<`((@2tn9J$jPg=7y*v4{52kjD@8Q<x9D5ze!Zm{t
zr5&GrBJg~b9?#|Pgn!HaVpeJBaJHu4bLppl`)bzWW%Nw^no$#cuu`R(KkxfRL;M0;
zG;qpUElxOD6T;|eNKh=Jos+wCKQF)d(|2d?HyR8d)0l#~;D!4)g2O_FB`u!ylCQtJ
zAB)^o|MYxi#ibR=Q|BHi%zv<lq^xsDs+*LBk~zoA*E{0FWq<7#92Oez^eUTXWZw1L
z_ZKD2JEGH8<dDP#bXn>HFFY4Q=0gd~wj4NWXn4QjgE}|!Z{Emhf71Z1Ddk~tsrK-W
z{g?J_+H;Gu*@Q5ePnWhPPklX}&{+u;H%efRd!dJauYS*khem|?tG&HEJT>ZidVr@l
zLSLz?BJWn+%Dq*1`q1$^7fzgW^diE?v*mO>b~4pagDSl1N!KvC+)KhwkKNTs!P~p(
z5(<LLtl(yMjkYA9J6(~F!piLrr%zx{Iq^QEi_VH6>=|!1Hr8G6jmi0+y#K!j|1UK;
V&3r+NWa<C_002ovPDHLkV1fXBuZI8t

literal 0
HcmV?d00001

diff --git a/launcher/public/img/icon/node-alert-icons/alert-settings-mute.png b/launcher/public/img/icon/node-alert-icons/alert-settings-mute.png
new file mode 100644
index 0000000000000000000000000000000000000000..abb039c60f3d2f0f12fe1764a829ed4cfbc44595
GIT binary patch
literal 6030
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
IM6N<$f@>R_5dZ)H

literal 0
HcmV?d00001

diff --git a/launcher/public/output.css b/launcher/public/output.css
index 457ed640b..bb5a96944 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -1846,6 +1846,10 @@ video {
   height: 100vh;
 }
 
+.h-\[8\%\]{
+  height: 8%;
+}
+
 .max-h-10{
   max-height: 2.5rem;
 }
diff --git a/launcher/src/components/UI/language-page/components/MenuBody.vue b/launcher/src/components/UI/language-page/components/MenuBody.vue
index 81ebb873b..b57c3a348 100644
--- a/launcher/src/components/UI/language-page/components/MenuBody.vue
+++ b/launcher/src/components/UI/language-page/components/MenuBody.vue
@@ -29,11 +29,7 @@
         }"
         @click="handleClick(lang, index)"
       >
-        <img
-          :src="lang.flag"
-          :alt="`${lang.name} Flag`"
-          class="col-start-1 col-span-3 w-10 h-10 rounded-full"
-        />
+        <img :src="lang.flag" :alt="`${lang.name} Flag`" class="col-start-1 col-span-3 w-10 h-10 rounded-full" />
         <span
           class="col-start-4 col-span-full text-lg font-bold uppercase"
           :class="{ 'text-gray-700': selectedLanguage }"
@@ -80,11 +76,18 @@ onBeforeMount(async () => {
 const checkSettings = async () => {
   try {
     const savedConfig = await ControlService.readConfig();
-    if (savedConfig?.savedLanguage.flag && savedConfig?.savedLanguage.label) {
+
+    // Handle language settings and routing
+    const { savedLanguage, savedVolume } = savedConfig || {};
+
+    if (savedLanguage?.flag && savedLanguage?.label) {
       router.push("/login");
     } else {
       router.push("/");
     }
+
+    // Handle volume settings
+    langStore.currentVolume = savedVolume?.volume ?? 0.95;
   } catch (error) {
     console.error("Failed to load saved settings:", error);
   }
diff --git a/launcher/src/components/UI/node-page/components/alert/NodeAlert.vue b/launcher/src/components/UI/node-page/components/alert/NodeAlert.vue
index 844b89c13..bfd131a21 100755
--- a/launcher/src/components/UI/node-page/components/alert/NodeAlert.vue
+++ b/launcher/src/components/UI/node-page/components/alert/NodeAlert.vue
@@ -1,46 +1,41 @@
 <template>
   <div class="status-box flex flex-col justify-between items-center">
-    <div class="status-box_header bg-[#151618] border border-gray-600 rounded-md">
-      <div class="icon-line">
-        <div class="status-icon" :class="{ active: perfect }">
-          <img src="/img/icon/node-alert-icons/alert-notification.png" alt="green" />
-        </div>
-        <div class="status-icon" :class="{ active: warning || pointStatus.length !== 0 }">
-          <img src="/img/icon/node-alert-icons/alert-general-yellow.png" alt="green" />
-        </div>
-        <div class="status-icon" :class="{ active: alarm }">
-          <img src="/img/icon/node-alert-icons/alert-general-red.png" alt="green" />
+    <div class="status-box_header h-[8%] w-full flex">
+      <div
+        class="status-box_icon-box border border-gray-600 rounded-md bg-[#151618] w-3/4 h-full flex justify-center items-center"
+      >
+        <div class="icon-line">
+          <div class="status-icon" :class="{ active: perfect }">
+            <img src="/img/icon/node-alert-icons/NOTIFICATION-GRÜN.png" alt="green" />
+          </div>
+          <div class="status-icon" :class="{ active: warning || pointStatus.length !== 0 }">
+            <img src="/img/icon/node-alert-icons/alert-general-yellow.png" alt="green" />
+          </div>
+          <div class="status-icon" :class="{ active: alarm }">
+            <img src="/img/icon/node-alert-icons/alert-general-red.png" alt="green" />
+          </div>
         </div>
-        <div
-          class="status-icon"
-          :class="{
-            active:
-              stereumUpdate.current !== stereumUpdate.version ||
-              updatedNewUpdates.length > 0,
-          }"
-        >
-          <img src="/img/icon/node-alert-icons/alert-settings.png" alt="green" />
+      </div>
+      <div class="status-box_vol-state w-1/4 h-full flex justify-center items-center">
+        <div class="volBtn cursor-pointer w-8" @click="volToggle">
+          <img
+            :src="
+              volState
+                ? '/img/icon/node-alert-icons/alert-settings.png'
+                : '/img/icon/node-alert-icons/alert-settings-mute.png'
+            "
+            alt="green"
+          />
         </div>
       </div>
     </div>
-    <div
-      class="status-box_messages bg-[#151618] border border-gray-600 rounded-md overflow-x-hidden overflow-y-auto"
-    >
+
+    <div class="status-box_messages bg-[#151618] border border-gray-600 rounded-md overflow-x-hidden overflow-y-auto">
       <AlertSkeleton v-for="i in skeletons" v-show="loadingAlerts" :key="i" />
-      <div
-        v-show="!loadingAlerts"
-        class="status_innerBox overflow-x-hidden overflow-y-auto space-y-1 px-[2px]"
-      >
-        <router-link
-          v-if="storageWarning"
-          to="/control"
-          class="status-message_yellow h-9"
-        >
+      <div v-show="!loadingAlerts" class="status_innerBox overflow-x-hidden overflow-y-auto space-y-1 px-[2px]">
+        <router-link v-if="storageWarning" to="/control" class="status-message_yellow h-9">
           <div class="message-icon">
-            <img
-              src="/img/icon/node-alert-icons/alert-storage-yellow.png"
-              alt="warn_storage"
-            />
+            <img src="/img/icon/node-alert-icons/alert-storage-yellow.png" alt="warn_storage" />
           </div>
           <div class="message-text_container">
             <div class="main-message">
@@ -51,10 +46,7 @@
         </router-link>
         <router-link v-if="cpuWarning" to="/control" class="status-message_yellow h-9">
           <div class="message-icon">
-            <img
-              src="/img/icon/node-alert-icons/alert-cpu-yellow.png"
-              alt="warn_storage"
-            />
+            <img src="/img/icon/node-alert-icons/alert-cpu-yellow.png" alt="warn_storage" />
           </div>
           <div class="message-text_container">
             <div class="main-message">
@@ -65,17 +57,9 @@
             </div>
           </div>
         </router-link>
-        <router-link
-          v-for="point in pointStatus"
-          :key="point"
-          to="/control"
-          class="status-message_yellow h-9"
-        >
+        <router-link v-for="point in pointStatus" :key="point" to="/control" class="status-message_yellow h-9">
           <div class="message-icon">
-            <img
-              src="/img/icon/control-page-icons/PORT_LIST_ICON.png"
-              alt="warn_storage"
-            />
+            <img src="/img/icon/control-page-icons/PORT_LIST_ICON.png" alt="warn_storage" />
           </div>
           <div class="message-text_container">
             <div class="main-message">
@@ -105,36 +89,19 @@
           class="w-full h-10 grid grid-cols-12 rounded-md bg-red-700 p-1 cursor-pointer hover:bg-red-500"
           @click="callReconnectModal"
         >
-          <div
-            class="col-start-1 col-end-4 w-full h-full flex justify-center items-center p-1"
-          >
-            <img
-              class="w-8"
-              src="/img/icon/connection-status/searching.gif"
-              alt="WIFI Icon"
-            />
+          <div class="col-start-1 col-end-4 w-full h-full flex justify-center items-center p-1">
+            <img class="w-8" src="/img/icon/connection-status/searching.gif" alt="WIFI Icon" />
           </div>
           <div class="col-start-5 col-span-full flex flex-col justify-center items-start">
-            <span class="text-[8px] text-gray-100 font-semibold uppercase"
-              >Poor Connection</span
-            >
+            <span class="text-[8px] text-gray-100 font-semibold uppercase">Poor Connection</span>
 
-            <span class="text-[8px] text-left text-gray-100 font-semibold lowercase"
-              >> Click to reconnect</span
-            >
+            <span class="text-[8px] text-left text-gray-100 font-semibold lowercase">> Click to reconnect</span>
           </div>
         </div>
 
-        <router-link
-          v-if="synchronizationErrorControl"
-          to="/control"
-          class="status-message_red h-9"
-        >
+        <router-link v-if="synchronizationErrorControl" to="/control" class="status-message_red h-9">
           <div class="message-icon">
-            <img
-              src="/img/icon/node-alert-icons/alert-sync-error.gif"
-              alt="warn_storage"
-            />
+            <img src="/img/icon/node-alert-icons/alert-sync-error.gif" alt="warn_storage" />
           </div>
           <div class="message-text_container">
             <div class="main-message">
@@ -145,16 +112,9 @@
             </div>
           </div>
         </router-link>
-        <div
-          v-if="errorAlarm"
-          class="status-message_red h-9"
-          @click="isTaskModalActive = true"
-        >
+        <div v-if="errorAlarm" class="status-message_red h-9" @click="isTaskModalActive = true">
           <div class="message-icon">
-            <img
-              src="/img/icon/node-alert-icons/alert-task-error.png"
-              alt="warn_storage"
-            />
+            <img src="/img/icon/node-alert-icons/alert-task-error.png" alt="warn_storage" />
           </div>
           <div class="message-text_container">
             <div class="main-message">
@@ -192,10 +152,7 @@
           @click="showUpdate"
         >
           <div class="message-icon">
-            <img
-              src="/img/icon/node-alert-icons/alert-notification-stereum-update.png"
-              alt="warn_storage"
-            />
+            <img src="/img/icon/node-alert-icons/alert-notification-stereum-update.png" alt="warn_storage" />
           </div>
           <div class="message-text_container">
             <div class="main-message">
@@ -293,6 +250,7 @@ export default {
     ...mapWritableState(useFooter, {
       cursorLocation: "cursorLocation",
       stereumStatus: "stereumStatus",
+      volState: "volState",
     }),
     ...mapWritableState(useNodeStore, {
       skeletonLoading: "skeletonLoading",
@@ -321,8 +279,7 @@ export default {
     updatedNewUpdates() {
       const updatedUpdates = this.newUpdates.map((update) => {
         const matchingService = this.allServices.find(
-          (service) =>
-            service.service.replace(/(Beacon|Validator|Service)/gm, "") === update.name
+          (service) => service.service.replace(/(Beacon|Validator|Service)/gm, "") === update.name
         );
         if (matchingService) {
           return {
@@ -365,6 +322,7 @@ export default {
     },
   },
   mounted() {
+    this.checkSettings();
     this.readService();
     this.watchAlertStatus();
     this.polling = setInterval(() => {
@@ -379,6 +337,39 @@ export default {
     this.cpuMeth();
   },
   methods: {
+    async checkSettings() {
+      try {
+        const savedConfig = await ControlService.readConfig();
+
+        if (savedConfig?.savedVolume?.volume !== undefined) {
+          this.volState = savedConfig.savedVolume.volume !== 0;
+          this.currentVolume = savedConfig.savedVolume.volume;
+        } else {
+          this.volState = false;
+          console.warn("Volume configuration is missing or invalid.");
+        }
+      } catch (error) {
+        console.error("Failed to load saved settings:", error);
+      }
+    },
+
+    async updateSettings(vol) {
+      try {
+        const prevConf = await ControlService.readConfig();
+        const conf = {
+          ...prevConf,
+          savedVolume: { volume: vol },
+        };
+        await ControlService.writeConfig(conf);
+      } catch (error) {
+        console.error("Failed to update settings:", error);
+      }
+    },
+
+    volToggle() {
+      this.volState = !this.volState;
+      this.updateSettings(this.volState ? 0.95 : 0);
+    },
     iconFilter(arg) {
       if (arg.name === "PrometheusNodeExporter") {
         return "/img/icon/service-icons/Other/PrometheusNodeExporter-s.png";
@@ -400,9 +391,7 @@ export default {
       this.stereumStatus = false;
     },
     expertHandler(el) {
-      let selectedObject = this.installedServices.find(
-        (obj) => obj.config.serviceID === el
-      );
+      let selectedObject = this.installedServices.find((obj) => obj.config.serviceID === el);
       this.selectedValidatorFromNodeAlert = selectedObject;
       this.openModalFromNodeAlert = true;
     },
@@ -421,15 +410,11 @@ export default {
           }
           if (!validator.yaml)
             try {
-              validator.yaml = await ControlService.getServiceYAML(
-                validator.config.serviceID
-              );
+              validator.yaml = await ControlService.getServiceYAML(validator.config.serviceID);
             } catch (e) {
               console.log("couldn't get service yaml");
             }
-          const patternIndex = validator.expertOptions.findIndex(
-            (o) => o.title === "Default Fee Recipient"
-          );
+          const patternIndex = validator.expertOptions.findIndex((o) => o.title === "Default Fee Recipient");
           if (patternIndex === -1 || !validator.yaml) {
             continue;
           }
@@ -447,8 +432,7 @@ export default {
           }
         }
         const notSetAddresses = addresses.filter(
-          (validator) =>
-            validator.address === "0x0000000000000000000000000000000000000000"
+          (validator) => validator.address === "0x0000000000000000000000000000000000000000"
         );
         this.notSetAddresses = notSetAddresses;
       }
@@ -504,6 +488,9 @@ export default {
 </script>
 
 <style scoped>
+.volBtn:active {
+  transform: scale(0.9);
+}
 .update-items {
   height: 90% !important;
   justify-content: center !important;
@@ -559,9 +546,6 @@ export default {
 }
 
 .status-box_header {
-  width: 100%;
-  height: 8%;
-  display: flex;
   justify-content: center;
   align-items: center;
 }
diff --git a/launcher/src/components/UI/setting-page/components/VolumeSlider.vue b/launcher/src/components/UI/setting-page/components/VolumeSlider.vue
index f5a91b2a6..09db60a9c 100644
--- a/launcher/src/components/UI/setting-page/components/VolumeSlider.vue
+++ b/launcher/src/components/UI/setting-page/components/VolumeSlider.vue
@@ -7,7 +7,10 @@
           class="absolute h-2 rounded-full bg-teal-600"
         ></div>
         <div
-          :style="{ left: (volumePercentage <= 92 ? volumePercentage : 92) + '%' }"
+          :style="{
+            left: (volumePercentage <= 92 ? volumePercentage : 92) + '%',
+            background: langStore.currentVolume === 0 ? '#ff0000' : '#336666',
+          }"
           class="slider-thumb absolute h-4 flex items-center justify-center w-4 rounded-full shadow border border-gray-300 top-0 cursor-pointer"
           @mousedown="startDrag"
         ></div>
@@ -33,8 +36,13 @@ const checkSettings = async () => {
     const savedConfig = await ControlService.readConfig();
 
     if (savedConfig?.savedVolume?.volume) {
-      volumePercentage.value = savedConfig.savedVolume.volume;
+      langStore.currentVolume = savedConfig.savedVolume.volume;
+      volumePercentage.value = savedConfig.savedVolume.volume * 100;
+    } else if (savedConfig?.savedVolume?.volume === 0) {
+      langStore.currentVolume = 0;
+      volumePercentage.value = 0;
     } else {
+      langStore.currentVolume = 0.95;
       volumePercentage.value = 95;
     }
   } catch (error) {
@@ -60,7 +68,7 @@ const updateVolume = async (clientX) => {
   const newVolume = Math.max(0, Math.min(1, (clientX - barRect.left) / barRect.width));
   langStore.currentVolume = newVolume;
   volumePercentage.value = newVolume * 100;
-  await updateSettings(volumePercentage.value);
+  await updateSettings(langStore.currentVolume);
 };
 
 const playSoundEffect = async (base64Data) => {
@@ -115,7 +123,6 @@ onUnmounted(() => {
 
 <style>
 .slider-thumb {
-  background-color: #336666;
   cursor: pointer;
   touch-action: none;
 }
diff --git a/launcher/src/components/UI/the-control/ControlAlert.vue b/launcher/src/components/UI/the-control/ControlAlert.vue
index b2efdb3a5..c68e6f1a0 100755
--- a/launcher/src/components/UI/the-control/ControlAlert.vue
+++ b/launcher/src/components/UI/the-control/ControlAlert.vue
@@ -1,23 +1,31 @@
 <template>
   <div class="alert-box_parent">
     <div class="alert-box">
-      <div class="alert-box_header">
-        <div class="icon_alarm" :class="{ active: perfect }">
-          <img src="/img/icon/node-alert-icons/alert-notification.png" alt="green" />
-        </div>
-        <div class="icon_alarm" :class="{ active: warning || pointStatus.length !== 0 }">
-          <img src="/img/icon/node-alert-icons/alert-general-yellow.png" alt="green" />
-        </div>
-        <div class="icon_alarm" :class="{ active: alarm }">
-          <img src="/img/icon/node-alert-icons/alert-general-red.png" alt="green" />
-        </div>
+      <div class="alert-box_header h-8 w-full flex justify-center items-center">
         <div
-          class="icon_alarm"
-          :class="{
-            active: stereumUpdate.current !== stereumUpdate.version || updatedNewUpdates.length > 0,
-          }"
+          class="alert-box_icons border border-gray-600 rounded-md bg-[#151618] w-3/4 h-full flex justify-start items-center"
         >
-          <img src="/img/icon/node-alert-icons/alert-settings.png" alt="green" />
+          <div class="icon_alarm" :class="{ active: perfect }">
+            <img src="/img/icon/node-alert-icons/NOTIFICATION-GRÜN.png" alt="green" />
+          </div>
+          <div class="icon_alarm" :class="{ active: warning || pointStatus.length !== 0 }">
+            <img src="/img/icon/node-alert-icons/alert-general-yellow.png" alt="green" />
+          </div>
+          <div class="icon_alarm" :class="{ active: alarm }">
+            <img src="/img/icon/node-alert-icons/alert-general-red.png" alt="green" />
+          </div>
+        </div>
+        <div class="status-box_vol-state w-1/4 h-full flex justify-center items-center">
+          <div class="volBtn cursor-pointer w-8" @click="volToggle">
+            <img
+              :src="
+                volState
+                  ? '/img/icon/node-alert-icons/alert-settings.png'
+                  : '/img/icon/node-alert-icons/alert-settings-mute.png'
+              "
+              alt="green"
+            />
+          </div>
         </div>
       </div>
       <div class="alert-box_messages overflow-x-hidden overflow-y-auto">
@@ -238,6 +246,7 @@ export default {
     }),
     ...mapWritableState(useFooter, {
       cursorLocation: "cursorLocation",
+      volState: "volState",
     }),
     pointStatus() {
       let port = [];
@@ -299,6 +308,7 @@ export default {
     },
   },
   mounted() {
+    this.checkSettings();
     this.readService();
     this.polling = setInterval(() => {
       this.readService();
@@ -312,6 +322,38 @@ export default {
     this.cpuMeth();
   },
   methods: {
+    async checkSettings() {
+      try {
+        const savedConfig = await ControlService.readConfig();
+
+        if (savedConfig?.savedVolume?.volume !== undefined) {
+          this.volState = savedConfig.savedVolume.volume !== 0;
+          this.currentVolume = savedConfig.savedVolume.volume;
+        } else {
+          this.volState = false;
+          console.warn("Volume configuration is missing or invalid.");
+        }
+      } catch (error) {
+        console.error("Failed to load saved settings:", error);
+      }
+    },
+    async updateSettings(vol) {
+      try {
+        const prevConf = await ControlService.readConfig();
+        const conf = {
+          ...prevConf,
+          savedVolume: { volume: vol },
+        };
+        await ControlService.writeConfig(conf);
+      } catch (error) {
+        console.error("Failed to update settings:", error);
+      }
+    },
+
+    volToggle() {
+      this.volState = !this.volState;
+      this.updateSettings(this.volState ? 0.95 : 0);
+    },
     iconFilter(arg) {
       if (arg.name === "PrometheusNodeExporter") {
         return "/img/icon/service-icons/Other/PrometheusNodeExporter-s.png";
@@ -416,6 +458,9 @@ export default {
 };
 </script>
 <style scoped>
+.volBtn:active {
+  transform: scale(0.9);
+}
 .pointer {
   cursor: pointer;
 }
@@ -464,20 +509,9 @@ export default {
   flex-direction: column;
   padding: 5px;
 }
-.alert-box_header {
-  display: flex;
-  justify-content: flex-start;
-  align-items: center;
-  width: 100%;
-  height: 30px;
-  background: #23272a;
-  border: 1px solid grey;
-  border-radius: 5px;
-  padding: 1px 2px;
-  box-sizing: border-box;
-}
+
 .icon_alarm {
-  width: 23%;
+  width: 26%;
   height: 100%;
   display: flex;
   justify-content: center;
diff --git a/launcher/src/store/theFooter.js b/launcher/src/store/theFooter.js
index 415d88f81..2df50ae08 100644
--- a/launcher/src/store/theFooter.js
+++ b/launcher/src/store/theFooter.js
@@ -18,6 +18,7 @@ export const useFooter = defineStore("theFooter", {
       missingServices: false,
       prometheusIsOff: false,
       nodataMessage: "",
+      volState: false,
     };
   },
   getters: {},