From a62416b7a73a22729d48182bfb8884193f66f707 Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Tue, 7 Nov 2023 16:34:43 +0100
Subject: [PATCH] FIX: release bugs (#1547)

* FIX: chang box height

* FIX: grafiti position on staking

* FIX: replacing options

* FIX:dropdown top element

* CHANGE: border color

* FIX: relays icons
---
 launcher/public/output.css                    | 12 +++++++++
 .../components/changes/ChangesBox.vue         |  2 +-
 .../components/modals/NetworkModal.vue        |  2 +-
 .../components/modals/RelaysCheckbox.vue      |  5 +++-
 .../components/service/ServiceBody.vue        |  2 +-
 .../UI/edit-page/sections/ChangesSection.vue  |  6 +++--
 .../node-page/components/alert/NodeAlert.vue  | 27 ++++++-------------
 .../components/alert/NodeTutorial.vue         |  2 +-
 .../components/service/ServiceBody.vue        |  2 +-
 .../components/plugin/ConfigBody.vue          |  6 ++++-
 .../the-staking/GrafitiMultipleValidators.vue |  5 +++-
 launcher/src/components/base/BaseLayout.vue   |  2 +-
 launcher/tailwind.config.js                   |  1 +
 13 files changed, 44 insertions(+), 30 deletions(-)

diff --git a/launcher/public/output.css b/launcher/public/output.css
index 0c2eb2f94..54d210391 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -1547,6 +1547,10 @@ video {
   max-height: 430px;
 }
 
+.max-h-\[503px\]{
+  max-height: 503px;
+}
+
 .max-h-\[70px\]{
   max-height: 70px;
 }
@@ -2032,6 +2036,10 @@ video {
   grid-template-rows: repeat(7 , minmax(0,1fr));
 }
 
+.grid-rows-8{
+  grid-template-rows: repeat(8 , minmax(0,1fr));
+}
+
 .flex-col{
   -webkit-box-orient: vertical;
   -webkit-box-direction: normal;
@@ -3102,6 +3110,10 @@ video {
   padding-top: 2rem;
 }
 
+.pt-20{
+  padding-top: 5rem;
+}
+
 .text-left{
   text-align: left;
 }
diff --git a/launcher/src/components/UI/edit-page/components/changes/ChangesBox.vue b/launcher/src/components/UI/edit-page/components/changes/ChangesBox.vue
index 9976d32be..eb396e6e0 100644
--- a/launcher/src/components/UI/edit-page/components/changes/ChangesBox.vue
+++ b/launcher/src/components/UI/edit-page/components/changes/ChangesBox.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full h-[430px] flex flex-col justify-start items-center px-1 py-2 overflow-y-hidden hover:overflow-y-auto rounded-md border border-gray-600 bg-[#151618] space-y-2"
+    class="col-start-1 col-span-full row-start-2 row-span-full flex flex-col justify-start items-center p-1 overflow-y-hidden hover:overflow-y-auto rounded-md border border-gray-600 bg-[#151618] space-y-2"
     :class="manageStore.disableConfirmButton ? 'opacity-70 pointer-events-none' : ''"
   >
     <template v-if="manageStore.confirmChanges.length">
diff --git a/launcher/src/components/UI/edit-page/components/modals/NetworkModal.vue b/launcher/src/components/UI/edit-page/components/modals/NetworkModal.vue
index a9ad9ce21..0705c9925 100644
--- a/launcher/src/components/UI/edit-page/components/modals/NetworkModal.vue
+++ b/launcher/src/components/UI/edit-page/components/modals/NetworkModal.vue
@@ -52,7 +52,7 @@
             <Transition name="slide">
               <ul
                 v-show="networkDropdownOpen"
-                class="transition-all max-h-[150px] duration-400 ease-in-out absolute bg-gray-600 rounded-lg shadow-lg pt-10 w-full z-10 mt-1 divide-y overflow-x-hidden overflow-y-auto flex flex-col justify-evenly items-center"
+                class="transition-all max-h-[150px] duration-400 ease-in-out absolute bg-gray-600 rounded-lg shadow-lg pt-20 w-full z-10 mt-1 divide-y overflow-x-hidden overflow-y-auto flex flex-col justify-evenly items-center"
                 @mouseleave="networkDropdownOpen = false"
               >
                 <li
diff --git a/launcher/src/components/UI/edit-page/components/modals/RelaysCheckbox.vue b/launcher/src/components/UI/edit-page/components/modals/RelaysCheckbox.vue
index e4eef5a71..5627689b9 100644
--- a/launcher/src/components/UI/edit-page/components/modals/RelaysCheckbox.vue
+++ b/launcher/src/components/UI/edit-page/components/modals/RelaysCheckbox.vue
@@ -10,7 +10,10 @@ import { watch, watchEffect } from 'vue';
     "
   >
     <input :id="fieldId" v-model="relay.isSelected" type="checkbox" :value="relay" class="hidden" @change="getRelays" />
-    <div class="col-start-1 col-span-1 w-[15px] h-[15px] flex justify-center items-center mr-1 bg-black rounded-full">
+    <div
+      v-if="icon"
+      class="col-start-1 col-span-1 w-[15px] h-[15px] flex justify-center items-center mr-1 bg-black rounded-full"
+    >
       <img class="self-center rounded-full" :src="icon" alt="Relay Icon" />
     </div>
     <span class="col-start-3 col-end-12 text-sm" :class="relay.isSelected ? 'text-gray-800' : 'text-gray-300'">{{
diff --git a/launcher/src/components/UI/edit-page/components/service/ServiceBody.vue b/launcher/src/components/UI/edit-page/components/service/ServiceBody.vue
index 6031bfc7f..52ba01948 100755
--- a/launcher/src/components/UI/edit-page/components/service/ServiceBody.vue
+++ b/launcher/src/components/UI/edit-page/components/service/ServiceBody.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full h-[430px] rounded-md border border-gray-500 bg-[#151618] relative hover:scroll-auto overflow-y-auto"
+    class="w-full h-[430px] rounded-md border border-gray-600 bg-[#151618] relative hover:scroll-auto overflow-y-auto"
   >
     <div
       class="absolute inset-x-0 w-full mx-auto flex justify-center items-center h-6 bg-[#33393E] border border-gray-950 rounded-t-[5px] text-gray-300 text-[10px] font-semibold z-10"
diff --git a/launcher/src/components/UI/edit-page/sections/ChangesSection.vue b/launcher/src/components/UI/edit-page/sections/ChangesSection.vue
index 3b95aa36a..cdb169dc2 100644
--- a/launcher/src/components/UI/edit-page/sections/ChangesSection.vue
+++ b/launcher/src/components/UI/edit-page/sections/ChangesSection.vue
@@ -1,6 +1,8 @@
 <template>
-  <div class="w-full h-full flex flex-col">
-    <div class="h-[60px] self-center w-full flex flex-col justify-center items-center">
+  <div class="h-full grid grid-cols-1 grid-rows-8">
+    <div
+      class="col-start-1 col-span-full row-start-1 row-span-1 h-[60px] self-center w-full flex flex-col justify-center items-center"
+    >
       <button
         v-if="editStore.disableConfirmButton"
         type="button"
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 589dbf016..7101a3fcd 100755
--- a/launcher/src/components/UI/node-page/components/alert/NodeAlert.vue
+++ b/launcher/src/components/UI/node-page/components/alert/NodeAlert.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="status-box flex flex-col justify-between items-center">
-    <div class="status-box_header bg-[#151618] border border-gray-500 rounded-md">
+    <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/control/NOTIFICATION_GRUN.png" alt="green" />
@@ -14,16 +14,14 @@
         <div
           class="status-icon"
           :class="{
-            active:
-              stereumUpdate.current !== stereumUpdate.version ||
-              updatedNewUpdates.length > 0,
+            active: stereumUpdate.current !== stereumUpdate.version || updatedNewUpdates.length > 0,
           }"
         >
           <img src="/img/icon/control/SETTINGS.png" alt="green" />
         </div>
       </div>
     </div>
-    <div class="status-box_messages bg-[#151618] border border-gray-500 rounded-md">
+    <div class="status-box_messages bg-[#151618] border border-gray-600 rounded-md">
       <div v-if="storageWarning" class="status-message_yellow">
         <div class="message-icon">
           <img src="/img/icon/control/WARNSCHILD_GELB_storage.png" alt="warn_storage" />
@@ -218,9 +216,7 @@ export default {
     },
     updatedNewUpdates() {
       const updatedUpdates = this.newUpdates.map((update) => {
-        const matchingService = this.installedServices.find(
-          (service) => service.name === update.name
-        );
+        const matchingService = this.installedServices.find((service) => service.name === update.name);
         if (matchingService) {
           return {
             ...update,
@@ -285,9 +281,7 @@ export default {
       }
     },
     expertHandler(el) {
-      let selectedObject = this.installedServices.find(
-        (obj) => obj.config.serviceID === el
-      );
+      let selectedObject = this.installedServices.find((obj) => obj.config.serviceID === el);
       selectedObject.expertOptionsModal = true;
       return selectedObject;
     },
@@ -306,15 +300,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;
           }
@@ -336,8 +326,7 @@ export default {
           }
         }
         const notSetAddresses = addresses.filter(
-          (validator) =>
-            validator.address === "0x0000000000000000000000000000000000000000"
+          (validator) => validator.address === "0x0000000000000000000000000000000000000000"
         );
         this.notSetAddresses = notSetAddresses;
       }
diff --git a/launcher/src/components/UI/node-page/components/alert/NodeTutorial.vue b/launcher/src/components/UI/node-page/components/alert/NodeTutorial.vue
index 436f319ea..333ceb515 100755
--- a/launcher/src/components/UI/node-page/components/alert/NodeTutorial.vue
+++ b/launcher/src/components/UI/node-page/components/alert/NodeTutorial.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="tutorial-box border border-gray-500 rounded-md bg-[#151618]">
+  <div class="tutorial-box border border-gray-600 rounded-md bg-[#151618]">
     <div class="tutorial-btn" @click="handleWrittenOptionClick">
       <div class="icon-box">
         <img src="/img/icon/tutorial-icons/manual-icon.png" alt="" />
diff --git a/launcher/src/components/UI/node-page/components/service/ServiceBody.vue b/launcher/src/components/UI/node-page/components/service/ServiceBody.vue
index e6d41b1c1..6a924b713 100755
--- a/launcher/src/components/UI/node-page/components/service/ServiceBody.vue
+++ b/launcher/src/components/UI/node-page/components/service/ServiceBody.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full h-[430px] rounded-md border border-gray-500 bg-[#151618] relative hover:scroll-auto overflow-y-auto"
+    class="w-full h-[430px] rounded-md border border-gray-600 bg-[#151618] relative hover:scroll-auto overflow-y-auto"
   >
     <div
       class="absolute inset-x-0 w-full mx-auto flex justify-center items-center h-6 bg-[#33393E] border border-gray-950 rounded-t-[5px] text-gray-200 text-[10px] font-semibold z-10"
diff --git a/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue b/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue
index 8d848bb93..7cc897dc6 100644
--- a/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue
+++ b/launcher/src/components/UI/one-click/components/plugin/ConfigBody.vue
@@ -175,8 +175,12 @@ const checkPluginCategory = (element) => {
       filter = (item) => {
         if (element.category === "validator") {
           return item.service === "SSVNetworkService";
+        } else if (element.category === "consensus" && item.category === "consensus") {
+          return true;
+        } else if (element.category === "execution" && item.category === "execution") {
+          return true;
         }
-        return element.category === "consensus" ? !/Reth/.test(item.service) : item.category === element.category;
+        return false;
       };
       break;
     case "obol":
diff --git a/launcher/src/components/UI/the-staking/GrafitiMultipleValidators.vue b/launcher/src/components/UI/the-staking/GrafitiMultipleValidators.vue
index 5c1b99efa..b7f6fcbbd 100755
--- a/launcher/src/components/UI/the-staking/GrafitiMultipleValidators.vue
+++ b/launcher/src/components/UI/the-staking/GrafitiMultipleValidators.vue
@@ -32,13 +32,16 @@ export default {
 <style scoped>
 .grafitiBox {
   grid-column: 4/12;
-  grid-row: 2/3;
+  grid-row: 3/4;
   width: 100%;
   height: 40px;
   margin-top: 21px;
   display: flex;
   justify-content: center;
   align-items: center;
+  z-index: 2;
+  align-self: flex-end;
+  margin-bottom: -9px;
 }
 
 .grafitiRow {
diff --git a/launcher/src/components/base/BaseLayout.vue b/launcher/src/components/base/BaseLayout.vue
index 1ab8f0dba..202b1a596 100755
--- a/launcher/src/components/base/BaseLayout.vue
+++ b/launcher/src/components/base/BaseLayout.vue
@@ -20,7 +20,7 @@
 
       <MainNavbar />
     </div>
-    <div class="flex justify-center items-center w-full h-full bg-[#33393E]">
+    <div class="flex justify-center items-center w-full h-full max-h-[503px] bg-[#33393E]">
       <slot></slot>
     </div>
     <div class="w-full h-[30px] rounded-b-lg bg-[#33393E]" @pointerdown.prevent.stop @mousedown.prevent.stop>
diff --git a/launcher/tailwind.config.js b/launcher/tailwind.config.js
index c2cb26982..aab927cfc 100755
--- a/launcher/tailwind.config.js
+++ b/launcher/tailwind.config.js
@@ -7,6 +7,7 @@ module.exports = {
       },
       gridTemplateRows: {
         7: "repeat(7 , minmax(0,1fr))",
+        8: "repeat(8 , minmax(0,1fr))",
         12: "repeat(12 , minmax(0,1fr))",
       },