From 2e1475f5b4fe99b91ad837b585b7ac2eb202790c Mon Sep 17 00:00:00 2001
From: Max Behzadi <69126271+MaxTheGeeek@users.noreply.github.com>
Date: Fri, 31 Jan 2025 10:59:58 +0100
Subject: [PATCH] REFACTOR: widget cards

---
 launcher/public/output.css                    | 35 ++++++++++++++++---
 .../UI/control-page/ControlScreen.vue         |  2 +-
 .../components/cards/MiniCard.vue             |  2 +-
 .../components/cards/ThinCard.vue             |  2 +-
 .../components/cards/WidgetCard.vue           |  2 +-
 .../components/widgets/NoData.vue             |  2 +-
 .../control-page/sections/ControlHeader.vue   | 10 ++++--
 .../components/edit/header/SetupDetails.vue   |  6 +++-
 .../components/edit/setups/SetupDropdown.vue  | 21 +++++------
 .../src/components/layers/NetworkStatus.vue   |  2 +-
 10 files changed, 60 insertions(+), 24 deletions(-)

diff --git a/launcher/public/output.css b/launcher/public/output.css
index d32601d38..7eb5dbac7 100755
--- a/launcher/public/output.css
+++ b/launcher/public/output.css
@@ -3766,11 +3766,6 @@ video {
   background-color: rgb(9 58 76 / var(--tw-bg-opacity, 1));
 }
 
-.bg-\[\#0F1217\]{
-  --tw-bg-opacity: 1;
-  background-color: rgb(15 18 23 / var(--tw-bg-opacity, 1));
-}
-
 .bg-\[\#0d0d0e\]{
   --tw-bg-opacity: 1;
   background-color: rgb(13 13 14 / var(--tw-bg-opacity, 1));
@@ -4071,6 +4066,11 @@ video {
   background-color: rgb(48 50 50 / var(--tw-bg-opacity, 1));
 }
 
+.bg-\[\#313136\]{
+  --tw-bg-opacity: 1;
+  background-color: rgb(49 49 54 / var(--tw-bg-opacity, 1));
+}
+
 .bg-\[\#32363A\]{
   --tw-bg-opacity: 1;
   background-color: rgb(50 54 58 / var(--tw-bg-opacity, 1));
@@ -4473,11 +4473,22 @@ video {
   background-image: linear-gradient(to bottom, var(--tw-gradient-stops));
 }
 
+.bg-gradient-to-br{
+  background-image: -webkit-gradient(linear, left top, right bottom, from(var(--tw-gradient-stops)));
+  background-image: linear-gradient(to bottom right, var(--tw-gradient-stops));
+}
+
 .bg-gradient-to-r{
   background-image: -webkit-gradient(linear, left top, right top, from(var(--tw-gradient-stops)));
   background-image: linear-gradient(to right, var(--tw-gradient-stops));
 }
 
+.from-\[\#1e1e1f\]{
+  --tw-gradient-from: #1e1e1f var(--tw-gradient-from-position);
+  --tw-gradient-to: rgb(30 30 31 / 0) var(--tw-gradient-to-position);
+  --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to);
+}
+
 .from-\[\#264744\]{
   --tw-gradient-from: #264744 var(--tw-gradient-from-position);
   --tw-gradient-to: rgb(38 71 68 / 0) var(--tw-gradient-to-position);
@@ -4504,6 +4515,10 @@ video {
   --tw-gradient-stops: var(--tw-gradient-from), #d1d5db var(--tw-gradient-via-position), var(--tw-gradient-to);
 }
 
+.to-\[\#0b0b0b\]{
+  --tw-gradient-to: #0b0b0b var(--tw-gradient-to-position);
+}
+
 .to-\[\#264744\]{
   --tw-gradient-to: #264744 var(--tw-gradient-to-position);
 }
@@ -5415,6 +5430,11 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.shadow-\[\#161515\]{
+  --tw-shadow-color: #161515;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .shadow-\[\#182020\]{
   --tw-shadow-color: #182020;
   --tw-shadow: var(--tw-shadow-colored);
@@ -5455,6 +5475,11 @@ video {
   --tw-shadow: var(--tw-shadow-colored);
 }
 
+.shadow-\[\#2a2929\]{
+  --tw-shadow-color: #2a2929;
+  --tw-shadow: var(--tw-shadow-colored);
+}
+
 .shadow-\[\#303232\]{
   --tw-shadow-color: #303232;
   --tw-shadow: var(--tw-shadow-colored);
diff --git a/launcher/src/components/UI/control-page/ControlScreen.vue b/launcher/src/components/UI/control-page/ControlScreen.vue
index 0c242baa9..7d9849098 100644
--- a/launcher/src/components/UI/control-page/ControlScreen.vue
+++ b/launcher/src/components/UI/control-page/ControlScreen.vue
@@ -1,6 +1,6 @@
 <template>
   <base-layout>
-    <div class="Control-screen w-full h-full grid grid-cols-24 grid-rows-12 items-center bg-[#242529]">
+    <div class="Control-screen w-full h-full grid grid-cols-24 grid-rows-12 items-center bg-[#313136]">
       <ControlHeader />
       <CommonSidebar />
       <AlertSection @expert-handler="expertModeHandlerAlert" />
diff --git a/launcher/src/components/UI/control-page/components/cards/MiniCard.vue b/launcher/src/components/UI/control-page/components/cards/MiniCard.vue
index 324d40542..b82f995d0 100644
--- a/launcher/src/components/UI/control-page/components/cards/MiniCard.vue
+++ b/launcher/src/components/UI/control-page/components/cards/MiniCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full bg-[#0F1217] border border-gray-700 shadow-xl shadow-grey-800 rounded-lg">
+  <div class="w-full h-full bg-gradient-to-br from-[#1e1e1f] to-[#0b0b0b] mx-h-[145px] shadow-sm shadow-[#161515] rounded-lg p-[2px]">
     <slot></slot>
   </div>
 </template>
diff --git a/launcher/src/components/UI/control-page/components/cards/ThinCard.vue b/launcher/src/components/UI/control-page/components/cards/ThinCard.vue
index 0342f7269..1b8b534a9 100644
--- a/launcher/src/components/UI/control-page/components/cards/ThinCard.vue
+++ b/launcher/src/components/UI/control-page/components/cards/ThinCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full bg-[#0F1217] mx-h-[145px] border border-gray-700 shadow-xl shadow-grey-800 rounded-lg">
+  <div class="w-full h-full bg-gradient-to-br from-[#1e1e1f] to-[#0b0b0b] mx-h-[145px] shadow-sm shadow-[#2a2929] rounded-md p-[2px]">
     <slot></slot>
   </div>
 </template>
diff --git a/launcher/src/components/UI/control-page/components/cards/WidgetCard.vue b/launcher/src/components/UI/control-page/components/cards/WidgetCard.vue
index 0342f7269..b82f995d0 100644
--- a/launcher/src/components/UI/control-page/components/cards/WidgetCard.vue
+++ b/launcher/src/components/UI/control-page/components/cards/WidgetCard.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="w-full h-full bg-[#0F1217] mx-h-[145px] border border-gray-700 shadow-xl shadow-grey-800 rounded-lg">
+  <div class="w-full h-full bg-gradient-to-br from-[#1e1e1f] to-[#0b0b0b] mx-h-[145px] shadow-sm shadow-[#161515] rounded-lg p-[2px]">
     <slot></slot>
   </div>
 </template>
diff --git a/launcher/src/components/UI/control-page/components/widgets/NoData.vue b/launcher/src/components/UI/control-page/components/widgets/NoData.vue
index 7c9444b76..18583b759 100755
--- a/launcher/src/components/UI/control-page/components/widgets/NoData.vue
+++ b/launcher/src/components/UI/control-page/components/widgets/NoData.vue
@@ -1,6 +1,6 @@
 <template>
   <div class="no-data_box text-blue-300">
-    <span class="big-sign flex justify-center items-center w-full h-full uppercase text-xl font-semibold">
+    <span class="big-sign flex justify-center items-center w-full h-full uppercase text-lg font-semibold">
       &gt; {{ $t("noData.noData") }} &lt;
     </span>
   </div>
diff --git a/launcher/src/components/UI/control-page/sections/ControlHeader.vue b/launcher/src/components/UI/control-page/sections/ControlHeader.vue
index 15f9cd8ea..d4c48a9e4 100644
--- a/launcher/src/components/UI/control-page/sections/ControlHeader.vue
+++ b/launcher/src/components/UI/control-page/sections/ControlHeader.vue
@@ -1,12 +1,18 @@
 <template>
   <div
-    class="control-header col-start-1 col-end-25 row-start-1 row-span-1 grid h-full p-[.10rem] gap-1 bg-[#0F1217] mx-h-[145px] border border-gray-700 shadow-xl shadow-grey-800 rounded-lg mt-2 mr-1 ml-1"
+    class="control-header col-start-1 col-end-25 row-start-1 row-span-1 grid h-full p-[.10rem] gap-1 mx-h-[145px] shadow-xl shadow-grey-800 rounded-lg mt-2 mr-1 ml-1"
     style="grid-template-columns: repeat(22, 1fr)"
   >
     <ThinCard class="server-name col-start-1 col-span-6"><ServerName /></ThinCard>
     <ThinCard class="network-status col-start-7 col-end-13"><NetworkStatus /></ThinCard>
 
-    <SetupDetails class="SetupDetails col-start-13 col-span-4" :list="setupsList" @select-setup="selectSetup" @server-view="serverView" />
+    <SetupDetails
+      class="SetupDetails col-start-13 col-span-4"
+      :border="false"
+      :list="setupsList"
+      @select-setup="selectSetup"
+      @server-view="serverView"
+    />
     <ThinCard class="setup-services col-start-17 col-span-6"><SetupServices /></ThinCard>
   </div>
 </template>
diff --git a/launcher/src/components/UI/edit-page/components/edit/header/SetupDetails.vue b/launcher/src/components/UI/edit-page/components/edit/header/SetupDetails.vue
index a2abbab13..8605fe4c2 100644
--- a/launcher/src/components/UI/edit-page/components/edit/header/SetupDetails.vue
+++ b/launcher/src/components/UI/edit-page/components/edit/header/SetupDetails.vue
@@ -1,5 +1,5 @@
 <template>
-  <div class="grid grid-cols-6 gap-1 items-center bg-[#151618] border h-full border-gray-600 rounded-md">
+  <div class="grid grid-cols-6 gap-1 items-center bg-[#151618] h-full rounded-md" :class="props.border ? 'border border-gray-600' : ''">
     <SetupDropdown
       :list="props.list"
       @select-rename="selectRename"
@@ -17,6 +17,10 @@ const props = defineProps({
     type: Array,
     required: true,
   },
+  border: {
+    type: Boolean,
+    default: true,
+  },
 });
 
 const emit = defineEmits(["selectRename", "confirmRename", "selectSetup", "serverView"]);
diff --git a/launcher/src/components/UI/edit-page/components/edit/setups/SetupDropdown.vue b/launcher/src/components/UI/edit-page/components/edit/setups/SetupDropdown.vue
index a3d4a8f9a..55aedbf95 100644
--- a/launcher/src/components/UI/edit-page/components/edit/setups/SetupDropdown.vue
+++ b/launcher/src/components/UI/edit-page/components/edit/setups/SetupDropdown.vue
@@ -16,7 +16,12 @@
 
     <!-- Dropdown toggle button -->
 
-    <div v-else class="col-start-1 relative p-1 grid rounded-[4px]" :class="dynamicClasses" @click="toggleDropdown">
+    <div
+      v-else
+      class="col-start-1 relative p-1 grid rounded-[4px]"
+      :class="[dynamicClasses, border ? 'border border-gray-600' : '']"
+      @click="toggleDropdown"
+    >
       <span
         v-if="setupStore.selectedSetup !== null && setupStore.selectedSetup?.isActive"
         class="col-start-1 col-span-1 w-4 h-4 rounded-full self-center justify-self-center shadow-sm shadow-black"
@@ -109,7 +114,7 @@ import RenameSetup from "./RenameSetup.vue";
 import { useServices } from "@/store/services";
 import { useDeepClone } from "@/composables/utils";
 
-const { newHeight, newBorder } = defineProps({
+const { newHeight, border } = defineProps({
   list: {
     type: Array,
     required: true,
@@ -119,10 +124,10 @@ const { newHeight, newBorder } = defineProps({
     required: false,
     default: "h-full",
   },
-  newBorder: {
-    type: String,
+  border: {
+    type: Boolean,
     required: false,
-    default: "border border-gray-600",
+    default: false,
   },
 });
 
@@ -153,11 +158,7 @@ const setupsList = computed(() => {
   return useDeepClone(output);
 });
 
-const borderClass = computed(() => {
-  if (newBorder === "") return "";
-  return newBorder;
-});
-const dynamicClasses = computed(() => [route.path === "/edit" ? "col-end-6 grid-cols-9" : "col-span-full grid-cols-12", borderClass.value]);
+const dynamicClasses = computed(() => [route.path === "/edit" ? "col-end-6 grid-cols-9" : "col-span-full grid-cols-12"]);
 
 const getDropdownWidth = computed(() => {
   let width;
diff --git a/launcher/src/components/layers/NetworkStatus.vue b/launcher/src/components/layers/NetworkStatus.vue
index 55ad11f49..b657414bb 100644
--- a/launcher/src/components/layers/NetworkStatus.vue
+++ b/launcher/src/components/layers/NetworkStatus.vue
@@ -1,6 +1,6 @@
 <template>
   <div
-    class="w-full h-full bg-[#151618] border border-gray-600 px-1 grid"
+    class="w-full h-full bg-[#151618] px-1 grid"
     :class="[
       route.path === '/staking' || route.path === '/control' ? 'rounded-[4px]' : 'mt-1 rounded-md',
       route.path === '/control' ? 'grid-cols-6' : 'grid-cols-3 col-start-1 col-span-full',