From a2db7be26f65a8e51ad022502a0f67f0218f3eb7 Mon Sep 17 00:00:00 2001
From: ChiaraBm <chiara.bm04@gmail.com>
Date: Fri, 18 Jul 2025 23:17:56 +0200
Subject: [PATCH] Improved server header and variables page

---
 .../Servers/ServerTabs/VariablesTab.razor     | 28 +++++++++++--------
 .../UI/Views/Client/Manage.razor              | 24 ++++++++++------
 2 files changed, 31 insertions(+), 21 deletions(-)

diff --git a/MoonlightServers.Frontend/UI/Components/Servers/ServerTabs/VariablesTab.razor b/MoonlightServers.Frontend/UI/Components/Servers/ServerTabs/VariablesTab.razor
index 483009e..ba46a08 100644
--- a/MoonlightServers.Frontend/UI/Components/Servers/ServerTabs/VariablesTab.razor
+++ b/MoonlightServers.Frontend/UI/Components/Servers/ServerTabs/VariablesTab.razor
@@ -12,18 +12,22 @@
     <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:grid-cols-6">
         @foreach (var variable in Variables)
         {
-            <div class="sm:col-span-2 card card-body">
-                <label class="block text-sm font-medium leading-6 text-base-content">
-                    @variable.Name
-                </label>
-                <p class="mt-1 mb-2.5 text-sm leading-6 text-base-content/60">
-                    @variable.Description
-                </p>
-                <div class="mt-auto">
-                    <input @onchange="e => UpdateVariable(variable, e)"
-                           value="@variable.Value"
-                           type="text"
-                           class="input w-full">
+            <div class="sm:col-span-2 card card-sm">
+                <div class="card-header pb-1">
+                    <h5 class="text-base font-semibold">
+                        @variable.Name
+                    </h5>
+                </div>
+                <div class="card-body">
+                    <p class="mb-2.5 text-sm leading-6 text-base-content/60">
+                        @variable.Description
+                    </p>
+                    <div class="mt-auto">
+                        <input @onchange="e => UpdateVariable(variable, e)"
+                               value="@variable.Value"
+                               type="text"
+                               class="input w-full">
+                    </div>
                 </div>
             </div>
         }
diff --git a/MoonlightServers.Frontend/UI/Views/Client/Manage.razor b/MoonlightServers.Frontend/UI/Views/Client/Manage.razor
index dec6244..91e1246 100644
--- a/MoonlightServers.Frontend/UI/Views/Client/Manage.razor
+++ b/MoonlightServers.Frontend/UI/Views/Client/Manage.razor
@@ -29,18 +29,24 @@
         <div class="card card-body justify-between py-2.5 px-5 flex-row">
             <div class="flex flex-row items-center">
                 @{
-                    var bgColor = State switch
+                    var statusClass = State switch
                     {
-                        ServerState.Installing => "bg-primary",
-                        ServerState.Offline => "bg-error",
-                        ServerState.Starting => "bg-warning",
-                        ServerState.Stopping => "bg-warning",
-                        ServerState.Online => "bg-success",
-                        _ => "bg-gray-500"
+                        ServerState.Installing => "status-primary",
+                        ServerState.Offline => "status-error",
+                        ServerState.Starting => "status-warning",
+                        ServerState.Stopping => "status-warning",
+                        ServerState.Online => "status-success",
+                        _ => "status-secondary"
                     };
                 }
-
-                <div class="p-2.5 rounded-full @bgColor me-3"></div>
+                
+                <div class="inline-grid *:[grid-area:1/1] me-3">
+                    @if (State != ServerState.Offline)
+                    {
+                        <div class="status status-xl @statusClass animate-ping"></div>
+                    }
+                    <div class="status status-xl @statusClass"></div>
+                </div>
 
                 <div class="flex flex-col">
                     <div class="hidden sm:flex text-lg font-semibold">@Server.Name</div>