UPDATE: alert box to add setting

launcher/src/components/UI/control-page/ControlScreen.vue

@@ -3,9 +3,10 @@
     <div class="Control-screen w-full h-full grid grid-cols-24 grid-rows-12 items-center bg-[#242529]">
       <ControlHeader />
       <CommonSidebar />
-      <AlertSection />
+      <AlertSection @expert-handler="expertModeHandlerAlert" />
       <StakingSidebar />
       <SidebarRight />
+      <ExpertWindow v-if="isExpertWindowOpen" :item="expertModeClient" bg-opacity="opacity-25" @hide-modal="hideExpertMode(item)" />
     </div>
   </base-layout>
 </template>
@@ -15,18 +16,32 @@ import { useSetups } from "@/store/setups";
 import { useFooter } from "@/store/theFooter";
 import { useServices } from "@/store/services";
 
-import { watch, computed } from "vue";
+import { watch, computed, ref } from "vue";
 
 import ControlHeader from "./sections/ControlHeader.vue";
 import CommonSidebar from "./sections/CommonSidebar.vue";
 import AlertSection from "./sections/AlertSection.vue";
 import StakingSidebar from "./sections/StakingSidebar.vue";
 import SidebarRight from "./sections/SidebarRight.vue";
+import ExpertWindow from "../node-page/sections/ExpertWindow.vue";
 
 const setupStore = useSetups();
 const footerStore = useFooter();
 const serviceStore = useServices();
 
+const isExpertWindowOpen = ref(false);
+const expertModeClient = ref(null);
+
+const hideExpertMode = (el) => {
+  expertModeClient.value = el;
+  isExpertWindowOpen.value = false;
+};
+
+const expertModeHandlerAlert = (validator) => {
+  expertModeClient.value = validator;
+  isExpertWindowOpen.value = true;
+};
+
 const selectedConfigServices = computed(() => {
   let services = [];
   const selectedSetup = setupStore.selectedSetup;

launcher/src/components/UI/control-page/components/alert/ControlAlert.vue

@@ -215,6 +215,7 @@
         </template>
 
         <!-- csm green end -->
+
         <div
           v-if="synchronizationErrorControl && !alertShowState.includes('red')"
           class="alert-message_red"

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

@@ -1,9 +1,15 @@
 <template>
   <div class="w-full h-full col-start-7 col-end-10 row-start-2 row-span-full flex justify-center items-center pt-2 pb-1">
-    <ControlAlert />
+    <ControlAlert @expert-handler="expertHandler" />
   </div>
 </template>
 
 <script setup>
 import ControlAlert from "../components/alert/ControlAlert.vue";
+
+const emit = defineEmits(["expertHandler"]);
+
+const expertHandler = (data) => {
+  emit("expertHandler", data);
+};
 </script>

launcher/src/components/UI/node-page/sections/ExpertWindow.vue

@@ -311,6 +311,7 @@ export default {
     bgOpacity: {
       type: String,
       required: false,
+      default: "opacity-100",
     },
     leftDistance: {
       type: String,