FIX: control page multi Config

launcher/public/output.css

@@ -1,7 +1,7 @@
 @import url("https://fonts.googleapis.com/css2?family=Noto+Sans:wght@100;200;300;400;500;600;700;800;900&display=swap");
 
 /*
-! tailwindcss v3.4.3 | MIT License | https://tailwindcss.com
+! tailwindcss v3.4.4 | MIT License | https://tailwindcss.com
 */
 
 /*
@@ -4125,6 +4125,11 @@ video {
   background-color: rgb(63 63 70 / var(--tw-bg-opacity));
 }
 
+.bg-\[\#664933\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(102 73 51 / var(--tw-bg-opacity));
+}
+
 .bg-opacity-80{
   --tw-bg-opacity: 0.8;
 }

launcher/src/components/UI/base-header/components/modals/NotifModal.vue

@@ -125,9 +125,10 @@
 </template>
 
 <script>
-import { mapWritableState } from "pinia";
+import { mapWritableState, mapState } from "pinia";
 import { useServices } from "@/store/services";
 import { useNodeHeader } from "@/store/nodeHeader";
+import { useSetups } from "@/store/setups";
 import ControlService from "@/store/ControlService";
 export default {
   data() {
@@ -157,9 +158,25 @@ export default {
     ...mapWritableState(useNodeHeader, {
       notificationModalIsActive: "notificationModalIsActive",
     }),
+    ...mapState(useSetups, {
+      selectedSetup: "selectedSetup",
+    }),
     installedValidators() {
-      const copyOfInstalledServices = [...this.installedServices];
-      return copyOfInstalledServices.filter(
+      let test = [];
+      const selectedSetup = this.selectedSetup;
+      if (selectedSetup && selectedSetup.services) {
+        const selectedServiceIds = selectedSetup.services.map((service) => service.id);
+        this.installedServices.forEach((service) => {
+          if ("validator".includes(service.category) && selectedServiceIds.includes(service.config.serviceID)) {
+            test.push({
+              isServicePending: false,
+              ...service,
+            });
+          }
+        });
+      }
+
+      return test.filter(
         (obj) => obj.category === "validator" && obj.name !== "ssv.network" && obj.name !== "Obol Charon"
       );
     },
@@ -201,7 +218,7 @@ export default {
 
     selectedValidator(arg) {
       //to select the validator
-      console.log(arg);
+
       if (this.fixedConnectedVal == false) {
         this.selectedVal = arg.config.serviceID;
         this.selectedValToConnect = true;
@@ -273,7 +290,6 @@ export default {
               }
             }
           } else if (item.service === "NimbusValidatorService") {
-            console.log(item);
             let nimbusServiceID = item.config.dependencies.consensusClients[0].id;
             //console.log("nimbusServiceID", nimbusServiceID);
             for (let idx = 0; idx < this.installedMetricsExporter.length; idx++) {

launcher/src/components/UI/base-header/components/modals/SupportModal.vue

@@ -20,9 +20,9 @@
         ></support-modal-box>
         <support-modal-box
           :box-title="$t('supportModal.docsTitle')"
-          :box-image-path="docsImage"
+          box-image-path="/img/icon/base-header-icons/help-modal-doc-stereum_docs.png"
           :box-text="$t('supportModal.docsText')"
-          @card-action="openGnoEthDocs"
+          @card-action="openStereumDocs"
         ></support-modal-box>
       </div>
       <span class="email"
@@ -64,13 +64,8 @@ export default {
       let URL = "https://discord.gg/DzAwgnSXtB";
       window.open(URL, "_blank");
     },
-    openGnoEthDocs() {
-      let url;
-      if (this.currentNetwork.network === "gnosis") {
-        url = "https://docs.gnosischain.com/node/manual/";
-      } else {
-        url = "https://ethereum.org/en/developers/docs/";
-      }
+    openStereumDocs() {
+      let url = "https://stereum-dev.github.io/ethereum-node-web-docs/";
       window.open(url, "_blank");
     },
   },

launcher/src/components/UI/edit-page/components/edit/setups/SetupDropdown.vue

@@ -1,8 +1,5 @@
 <template>
-  <div
-    class="w-full relative col-start-1 col-span-full grid grid-cols-6 gap-x-1"
-    :class="newHeight"
-  >
+  <div class="w-full relative col-start-1 col-span-full grid grid-cols-6 gap-x-1" :class="newHeight">
     <label
       v-if="setupStore.isRenameSetupActive && route.path === '/edit'"
       for="rename"
@@ -22,9 +19,7 @@
     <div
       v-else
       class="col-start-1 relative p-1 grid rounded-[4px] border border-gray-600"
-      :class="
-        route.path === '/edit' ? 'col-end-6 grid-cols-9' : 'col-span-full  grid-cols-12'
-      "
+      :class="route.path === '/edit' ? 'col-end-6 grid-cols-9' : 'col-span-full  grid-cols-12'"
       @click="toggleDropdown"
     >
       <span
@@ -49,17 +44,9 @@
         viewBox="0 0 24 24"
         stroke="currentColor"
         class="h-3 w-3 text-white self-center col-span-1 transform transition-transform duration-200 ease-in-out"
-        :class="[
-          isOpen ? 'rotate-180' : 'rotate-0',
-          route.path === '/edit' ? 'col-start-9' : 'col-start-12',
-        ]"
+        :class="[isOpen ? 'rotate-180' : 'rotate-0', route.path === '/edit' ? 'col-start-9' : 'col-start-12']"
       >
-        <path
-          stroke-linecap="round"
-          stroke-linejoin="round"
-          stroke-width="2"
-          d="M19 9l-7 7-7-7"
-        />
+        <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M19 9l-7 7-7-7" />
       </svg>
     </div>
 
@@ -79,7 +66,7 @@
         @mouseleave="isOpen = false"
       >
         <div
-          v-if="setupStore.isConfigViewActive || setupStore.isEditConfigViewActive"
+          v-if="(setupStore.isConfigViewActive || setupStore.isEditConfigViewActive) && notShowServerViewInControl"
           class="p-2 bg-gray-300 capitalize transition-colors duration-300 transform text-[#336666] hover:bg-blue-300 cursor-pointer grid grid-cols-6 items-center"
           @click="selectServerView"
         >
@@ -104,21 +91,16 @@
             class="col-start-1 col-span-1 w-5 h-5 rounded-full border border-gray-300 self-center justify-self-start"
             :class="setupStore.getBGColor(setup.color)"
           ></span>
-          <span
-            class="col-start-2 col-span-full self-center text-sm font-bold overflow-hidden truncate font-sans"
-            >{{ setup.setupName }}</span
-          >
+          <span class="col-start-2 col-span-full self-center text-sm font-bold overflow-hidden truncate font-sans">{{
+            setup.setupName
+          }}</span>
         </div>
       </div>
     </Transition>
 
     <!-- Rename setup button -->
     <!-- Rename Button  -->
-    <RenameSetup
-      v-if="route.path === '/edit'"
-      @confirm-rename="confirmRename"
-      @rename-setup="selectRename"
-    />
+    <RenameSetup v-if="route.path === '/edit'" @confirm-rename="confirmRename" @rename-setup="selectRename" />
   </div>
 </template>
 <script setup>
@@ -163,6 +145,10 @@ const getDropdownWidth = computed(() => {
   return width;
 });
 
+const notShowServerViewInControl = computed(() => {
+  return route.path === "/control" ? false : true;
+});
+
 const getSelectedOption = computed(() => {
   let option;
   if (setupStore.selectedSetup === null) {

launcher/src/components/UI/staking-page/components/list/rows/KeyRow.vue

@@ -1,7 +1,7 @@
 import { computed } from 'vue';
 <template>
   <div
-    class="w-full h-8 rounded-full grid grid-cols-24 items-center p-1 cursor-pointer animate__animated animate__slideInLeft animate__delay-0.5s"
+    class="w-full h-8 rounded-full grid grid-cols-24 items-center p-1 cursor-pointer animate__animated animate__slideInLeft animate__delay-0.5s mt-1"
     :class="[props.item?.selected ? 'bg-blue-400 ' : 'bg-gray-700 ', props.item?.showExitText ? 'bg-red-500 z-10' : '']"
     @click="selectKey(props.item)"
   >