Release fix

launcher/public/output.css

@@ -759,6 +759,11 @@ video {
   bottom: 0px;
 }
 
+.inset-x-2{
+  left: 0.5rem;
+  right: 0.5rem;
+}
+
 .-bottom-2{
   bottom: -0.5rem;
 }
@@ -983,6 +988,26 @@ video {
   top: 7rem;
 }
 
+.left-\[1px\]{
+  left: 1px;
+}
+
+.top-\[56px\]{
+  top: 56px;
+}
+
+.bottom-2{
+  bottom: 0.5rem;
+}
+
+.top-4{
+  top: 1rem;
+}
+
+.top-\[1px\]{
+  top: 1px;
+}
+
 .z-0{
   z-index: 0;
 }
@@ -1808,6 +1833,10 @@ video {
   height: 95%;
 }
 
+.h-\[95\.5\%\]{
+  height: 95.5%;
+}
+
 .h-fit{
   height: -webkit-fit-content;
   height: -moz-fit-content;
@@ -1822,8 +1851,28 @@ video {
   height: 100vh;
 }
 
-.h-\[95\.5\%\]{
-  height: 95.5%;
+.h-\[490px\]{
+  height: 490px;
+}
+
+.h-\[492px\]{
+  height: 492px;
+}
+
+.h-\[80\%\]{
+  height: 80%;
+}
+
+.h-\[540\]{
+  height: 540;
+}
+
+.h-\[540px\]{
+  height: 540px;
+}
+
+.h-\[554px\]{
+  height: 554px;
 }
 
 .max-h-10{
@@ -1978,10 +2027,6 @@ video {
   max-height: 100%;
 }
 
-.max-h-\[409px\]{
-  max-height: 409px;
-}
-
 .min-h-11{
   min-height: 2.75rem;
 }
@@ -2322,14 +2367,6 @@ video {
   width: 100vw;
 }
 
-.w-64{
-  width: 16rem;
-}
-
-.w-\[230px\]{
-  width: 230px;
-}
-
 .min-w-\[100px\]{
   min-width: 100px;
 }
@@ -2384,12 +2421,6 @@ video {
       flex-shrink: 0;
 }
 
-.flex-grow{
-  -webkit-box-flex: 1;
-      -ms-flex-positive: 1;
-          flex-grow: 1;
-}
-
 .origin-top-right{
   -webkit-transform-origin: top right;
           transform-origin: top right;
@@ -2531,27 +2562,6 @@ video {
           animation: spin 1s linear infinite;
 }
 
-@-webkit-keyframes ping{
-  75%, 100%{
-    -webkit-transform: scale(2);
-            transform: scale(2);
-    opacity: 0;
-  }
-}
-
-@keyframes ping{
-  75%, 100%{
-    -webkit-transform: scale(2);
-            transform: scale(2);
-    opacity: 0;
-  }
-}
-
-.animate-ping{
-  -webkit-animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-          animation: ping 1s cubic-bezier(0, 0, 0.2, 1) infinite;
-}
-
 .cursor-default{
   cursor: default;
 }
@@ -2603,6 +2613,11 @@ video {
   grid-auto-rows: max-content;
 }
 
+.auto-rows-min{
+  grid-auto-rows: -webkit-min-content;
+  grid-auto-rows: min-content;
+}
+
 .grid-cols-1{
   grid-template-columns: repeat(1, minmax(0, 1fr));
 }
@@ -2929,11 +2944,6 @@ video {
   border-color: rgb(156 163 175 / var(--tw-divide-opacity));
 }
 
-.divide-gray-500 > :not([hidden]) ~ :not([hidden]){
-  --tw-divide-opacity: 1;
-  border-color: rgb(107 114 128 / var(--tw-divide-opacity));
-}
-
 .divide-gray-600 > :not([hidden]) ~ :not([hidden]){
   --tw-divide-opacity: 1;
   border-color: rgb(75 85 99 / var(--tw-divide-opacity));
@@ -4129,11 +4139,6 @@ 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;
 }
@@ -4885,10 +4890,6 @@ video {
   opacity: 0.8;
 }
 
-.opacity-75{
-  opacity: 0.75;
-}
-
 .shadow{
   --tw-shadow: 0 1px 3px 0 rgb(0 0 0 / 0.1), 0 1px 2px -1px rgb(0 0 0 / 0.1);
   --tw-shadow-colored: 0 1px 3px 0 var(--tw-shadow-color), 0 1px 2px -1px var(--tw-shadow-color);
@@ -5522,6 +5523,11 @@ html body {
   border-color: rgb(77 117 117 / var(--tw-border-opacity));
 }
 
+.hover\:border-amber-300:hover{
+  --tw-border-opacity: 1;
+  border-color: rgb(252 211 77 / var(--tw-border-opacity));
+}
+
 .hover\:border-blue-400:hover{
   --tw-border-opacity: 1;
   border-color: rgb(96 165 250 / var(--tw-border-opacity));
@@ -5572,11 +5578,6 @@ html body {
   border-color: rgb(13 148 136 / var(--tw-border-opacity));
 }
 
-.hover\:border-amber-300:hover{
-  --tw-border-opacity: 1;
-  border-color: rgb(252 211 77 / var(--tw-border-opacity));
-}
-
 .hover\:bg-\[\#212325\]:hover{
   --tw-bg-opacity: 1;
   background-color: rgb(33 35 37 / var(--tw-bg-opacity));
@@ -5791,6 +5792,11 @@ html body {
   --tw-bg-opacity: 0.1;
 }
 
+.hover\:text-black:hover{
+  --tw-text-opacity: 1;
+  color: rgb(0 0 0 / var(--tw-text-opacity));
+}
+
 .hover\:text-gray-100:hover{
   --tw-text-opacity: 1;
   color: rgb(243 244 246 / var(--tw-text-opacity));
@@ -5821,11 +5827,6 @@ html body {
   color: rgb(255 255 255 / var(--tw-text-opacity));
 }
 
-.hover\:text-black:hover{
-  --tw-text-opacity: 1;
-  color: rgb(0 0 0 / var(--tw-text-opacity));
-}
-
 .hover\:shadow-2xl:hover{
   --tw-shadow: 0 25px 50px -12px rgb(0 0 0 / 0.25);
   --tw-shadow-colored: 0 25px 50px -12px var(--tw-shadow-color);

launcher/src/components/UI/node-page/NodeScreen.vue

@@ -11,11 +11,6 @@
           @open-log="openLogPage"
           @export-setup="exportSetup"
         />
-        <ExpertWindow
-          v-if="isExpertModeOpen"
-          :item="expertModeClient"
-          @hide-modal="closeExpertMode"
-        />
       </div>
       <div class="col-start-17 col-end-21 ml-1 grid grid-cols-2 grid-rows-9">
         <NetworkStatus />
@@ -52,6 +47,11 @@
         @export-all-log="updateAndExportAllLogs"
         @export-customized-logs="updateAndExportAllLogs"
       />
+      <ExpertWindow
+        v-if="isExpertModeOpen"
+        :item="expertModeClient"
+        @hide-modal="closeExpertMode"
+      />
     </div>
 
     <!-- End Node main layout -->

launcher/src/components/UI/node-page/components/logs/LogSidebar.vue

@@ -1,12 +1,15 @@
 <template>
-  <div class="w-full h-full col-start-1 col-span-1 row-start-1 row-span-full">
+  <div
+    class="w-full h-full col-start-1 col-span-1 row-start-1 row-span-full overflow-x-hidden overflow-y-auto"
+  >
     <div
-      class="w-full h-full row-start-2 row-span-full grid grid-rows-10 items-center justify-start py-4"
+      class="w-full h-full row-start-2 row-span-full grid grid-flow-row auto-rows-min items-center justify-start pt-4 gap-y-1 overflow-x-hidden overflow-y-auto"
+      style="grid-auto-rows: minmax(28px, auto)"
     >
       <div
         v-for="(item, index) in installedClients"
         :key="item.config?.serviceID"
-        class="w-9 h-9 max-h-[35px] row-span-1 py-1 rounded-r-full text-gray-700 focus:outline-nones transition-colors duration-200 flex justify-center items-center cursor-pointer"
+        class="w-9 h-7 max-h-[35px] row-span-1 py-1 rounded-r-full text-gray-700 focus:outline-nones transition-colors duration-200 flex justify-center items-center cursor-pointer"
         :class="{
           'bg-[#336666] shadow-md shadow-[#191a1b] animate__animated animate__slideInLeft animate__faster pointer-events-none':
             currentService === item.config?.serviceID,
@@ -22,8 +25,8 @@
           :src="item.icon"
           :alt="`${item.service} Icon`"
           :class="{
-            'w-7': currentService === item.config?.serviceID,
-            'w-6': currentService !== item.config?.serviceID,
+            'w-6': currentService === item.config?.serviceID,
+            'w-5': currentService !== item.config?.serviceID,
           }"
           @mousedown.prevent
         />

launcher/src/components/UI/node-page/components/logs/LogsPage.vue

@@ -0,0 +1,43 @@
+<template>
+  <div class="w-full h-full items-center grid grid-cols-24 grid-rows-12 rounded-md">
+    <LogHeader :client="client" @close-log="closeLog" />
+    <LogBody :client="client" />
+    <LogFooter
+      :client="client"
+      @export-log="exportLog"
+      @export-all-log="exportAllLog"
+      @export-customized-logs="exportCustomizedLogs"
+    />
+  </div>
+</template>
+
+<script setup>
+import LogHeader from "./LogHeader.vue";
+import LogBody from "./LogBody.vue";
+import LogFooter from "./LogFooter.vue";
+
+const { client } = defineProps({
+  client: {
+    type: Object,
+    default: null,
+  },
+});
+
+const emit = defineEmits(["close-log", "export-log", "export-all-log", "export-customized-logs"]);
+
+const closeLog = () => {
+  emit("close-log");
+};
+
+const exportLog = (item) => {
+  emit("export-log", item);
+};
+
+const exportAllLog = (item) => {
+  emit("export-all-log", item);
+};
+
+const exportCustomizedLogs = (item) => {
+  emit("export-customized-logs", item);
+};
+</script>