Added helper message component (not final). Improved stat card design. Started improving theme preview

Moonlight.Client/Styles/mappings/classes.map

@@ -33,6 +33,7 @@ advance-select-toggle
 alert
 alert-error
 alert-outline
+alert-primary
 alert-soft
 align-bottom
 align-middle
@@ -312,6 +313,7 @@ loading-xs
 lowercase
 m-10
 mask
+max-h-52
 max-lg:flex-col
 max-lg:hidden
 max-w-7xl
@@ -398,6 +400,7 @@ overlay-open:opacity-100
 p-0.5
 p-1
 p-2
+p-2.5
 p-3
 p-4
 p-5
@@ -413,10 +416,12 @@ progress
 progress-bar
 progress-indeterminate
 progress-primary
+pt-0
 pt-0.5
 pt-3
 px-1.5
 px-2
+px-2.5
 px-3
 px-4
 px-5
@@ -466,6 +471,7 @@ shrink-0
 size-10
 size-4
 size-5
+size-7
 size-8
 skeleton
 skeleton-animated
@@ -508,7 +514,15 @@ space-y-1
 space-y-4
 space-y-6
 sr-only
+stat
+stat-actions
+stat-desc
+stat-figure
+stat-title
+stat-value
 static
+stats
+stats-border
 status
 status-error
 sticky
@@ -565,6 +579,7 @@ text-warning
 text-warning-content
 text-white
 text-xl
+text-xl!
 text-xs
 text-xs/5
 textarea

Moonlight.Client/UI/Components/HelperMessage.razor

@@ -0,0 +1,15 @@
+<div class="alert alert-soft alert-primary border-2 flex items-center p-2.5" role="alert">
+    <div class="avatar me-2">
+        <div class="size-7 rounded-full">
+            <img src="/_content/Moonlight.Client/img/ghost.png" alt="avatar" />
+        </div>
+    </div>
+    <div class="text-primary-content">
+        @ChildContent
+    </div>
+</div>
+
+@code
+{
+    [Parameter] public RenderFragment ChildContent { get; set; }
+}

Moonlight.Client/UI/Components/StatCard.razor

@@ -1,11 +1,19 @@
-<div class="card card-body">
+@*<div class="card card-body">
     <div class="flex justify-between">
         <p class="text-xl font-semibold text-base-content">
             @Text
         </p>
-        <i class="@Icon text-4xl text-primary"></i>
+        <i class="@Icon "></i>
     </div>
     <p class="text-base-content/80">@Title</p>
+</div>*@
+
+<div class="stat rounded-lg bg-base-100">
+    <div class="stat-figure">
+        <span class="@Icon text-4xl text-primary"></span>
+    </div>
+    <div class="stat-title">@Title</div>
+    <div class="stat-value text-xl!">@Text</div>
 </div>
 
 @code

Moonlight.Client/UI/Views/Admin/Sys/Hangfire.razor

@@ -13,6 +13,12 @@
     <NavTabs Index="3" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks"/>
 </div>
 
+<div class="mb-5">
+    <HelperMessage>
+        Hangfire is used to run scheduled and repeating tasks scalable via multiple instances. Here you can see a bunch of stats of the integrated hangfire instance
+    </HelperMessage>
+</div>
+
 <LazyLoader Load="Load">
     <div class="grid grid-cols-1 lg:grid-cols-2 xl:grid-cols-4 gap-5">
         <StatCard Title="Servers" Text="@Stats.Servers.ToString()" Icon="icon-server"/>

Moonlight.Client/UI/Views/Admin/Sys/Theme.razor

@@ -9,4 +9,15 @@
     <NavTabs Index="1" Names="UiConstants.AdminNavNames" Links="UiConstants.AdminNavLinks" />
 </div>
 
-<ThemeSettings />
+<div class="mt-5">
+    <div class="mockup-browser bg-base-300/40">
+        <div class="mockup-browser-toolbar">
+            <div class="input bg-base-200">https://your-moonlight.instance</div>
+        </div>
+        <div class="flex h-80 justify-center">
+            <iframe src="http://localhost:5165/admin/system" class="w-full object-cover" >
+                
+            </iframe>
+        </div>
+    </div>
+</div>