Improved design of login method selection screen

Moonlight.ApiServer/Http/Controllers/LocalAuth/Login.razor

@@ -9,8 +9,7 @@
 
 <div class="flex h-auto min-h-screen items-center justify-center overflow-x-hidden py-10">
     <div class="relative flex items-center justify-center px-4 sm:px-6 lg:px-8">
-        <div
+        <div class="bg-base-100 shadow-base-300/20 z-1 w-full space-y-6 rounded-xl p-6 shadow-md sm:min-w-md lg:p-8">
-            class="bg-base-100 shadow-base-300/20 z-1 w-full space-y-6 rounded-xl p-6 shadow-md sm:min-w-md lg:p-8">
             <div class="flex justify-center items-center gap-3">
                 <img src="/_content/Moonlight.Client/svg/logo.svg" class="size-12" alt="brand-logo"/>
             </div>

Moonlight.ApiServer/Http/Controllers/LocalAuth/Register.razor

@@ -9,8 +9,7 @@
 
 <div class="flex h-auto min-h-screen items-center justify-center overflow-x-hidden py-10">
     <div class="relative flex items-center justify-center px-4 sm:px-6 lg:px-8">
-        <div
+        <div class="bg-base-100 shadow-base-300/20 z-1 w-full space-y-6 rounded-xl p-6 shadow-md sm:min-w-md lg:p-8">
-            class="bg-base-100 shadow-base-300/20 z-1 w-full space-y-6 rounded-xl p-6 shadow-md sm:min-w-md lg:p-8">
             <div class="flex justify-center items-center gap-3">
                 <img src="/_content/Moonlight.Client/svg/logo.svg" class="size-12" alt="brand-logo"/>
             </div>

Moonlight.Client/UI/Partials/LoginSelector.razor

@@ -5,16 +5,28 @@
 @inject NavigationManager Navigation
 
 <div class="flex h-screen justify-center items-center">
-    <div class="sm:max-w-lg">
+    <div class="sm:min-w-md">
-        <div class="w-full card card-body text-center">
+        <div class="bg-base-100 shadow-base-300/20 z-1 w-full space-y-6 rounded-xl p-6 shadow-md lg:p-8">
-            <LazyLoader EnableDefaultSpacing="false" Load="Load">
+        <LazyLoader EnableDefaultSpacing="false" Load="Load">
-                @if (ShowSelection)
+            @if (ShowSelection)
-                {
+            {
-                    <h5 class="card-title mb-2.5">Login to Moonlight</h5>
+                <div class="flex justify-center items-center gap-3">
-                
+                    <img src="/_content/Moonlight.Client/svg/logo.svg" class="size-12" alt="brand-logo"/>
-                    <p class="mb-4">Choose a login provider to start using the app</p>
+                </div>
-                
+                <div class="text-center">
-                    <div class="flex flex-col w-full mt-5 gap-y-2.5">
+                    <h3 class="text-base-content mb-1.5 text-2xl font-semibold">Login into your account</h3>
+                    <p class="text-base-content/80">Chose a login method to continue</p>
+                </div>
+                <div class="space-y-4">
+
+                    @if (AuthSchemes.Length == 0)
+                    {
+                        <div class="alert alert-error text-center">
+                            No auth schemes enabled/available
+                        </div>
+                    }
+
+                    <div class="mb-4 space-y-4">
                         @foreach (var scheme in AuthSchemes)
                         {
                             var config = Configs.GetValueOrDefault(scheme.Identifier);
@@ -22,7 +34,8 @@
                             if (config == null) // Ignore all schemes which have no ui configured
                                 continue;
 
-                            <button @onclick="() => Start(scheme)" class="btn btn-text w-full" style="background-color: @(config.Color)">
+                            <button @onclick="() => Start(scheme)" class="btn btn-text w-full"
+                                    style="background-color: @(config.Color)">
                                 <img src="@config.IconUrl"
                                      alt="scheme icon"
                                      class="size-5 object-cover fill-base-content"/>
@@ -30,15 +43,16 @@
                             </button>
                         }
                     </div>
-                }
+                </div>
-                else
+            }
-                {
+            else
-                    <div class="flex justify-center">
+            {
-                        <span class="loading loading-spinner loading-xl"></span>
+                <div class="flex justify-center">
-                    </div>
+                    <span class="loading loading-spinner loading-xl"></span>
-                }
+                </div>
-            </LazyLoader>
+            }
-        </div>
+        </LazyLoader>
+    </div>
     </div>
 </div>
 
@@ -66,7 +80,7 @@
         // If we only have one auth scheme available
         // we want to auto redirect the user without
         // showing the selection screen
-        
+
         if (AuthSchemes.Length == 1)
             await Start(AuthSchemes[0]);
         else