From 17cd039c9b9c60ea3989fa070f7d585073d7f25d Mon Sep 17 00:00:00 2001
From: ChiaraBm <chiara.bm04@gmail.com>
Date: Wed, 20 Aug 2025 17:16:19 +0200
Subject: [PATCH] Improved design of login method selection screen

---
 .../Http/Controllers/LocalAuth/Login.razor    |  3 +-
 .../Http/Controllers/LocalAuth/Register.razor |  3 +-
 .../UI/Partials/LoginSelector.razor           | 56 ++++++++++++-------
 3 files changed, 37 insertions(+), 25 deletions(-)

diff --git a/Moonlight.ApiServer/Http/Controllers/LocalAuth/Login.razor b/Moonlight.ApiServer/Http/Controllers/LocalAuth/Login.razor
index 6b235da6..2fbdbad9 100644
--- a/Moonlight.ApiServer/Http/Controllers/LocalAuth/Login.razor
+++ b/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
-            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="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>
diff --git a/Moonlight.ApiServer/Http/Controllers/LocalAuth/Register.razor b/Moonlight.ApiServer/Http/Controllers/LocalAuth/Register.razor
index aec21a39..fc4cf118 100644
--- a/Moonlight.ApiServer/Http/Controllers/LocalAuth/Register.razor
+++ b/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
-            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="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>
diff --git a/Moonlight.Client/UI/Partials/LoginSelector.razor b/Moonlight.Client/UI/Partials/LoginSelector.razor
index c1b9d54e..35e09a36 100644
--- a/Moonlight.Client/UI/Partials/LoginSelector.razor
+++ b/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="w-full card card-body text-center">
-            <LazyLoader EnableDefaultSpacing="false" Load="Load">
-                @if (ShowSelection)
-                {
-                    <h5 class="card-title mb-2.5">Login to Moonlight</h5>
-                
-                    <p class="mb-4">Choose a login provider to start using the app</p>
-                
-                    <div class="flex flex-col w-full mt-5 gap-y-2.5">
+    <div class="sm:min-w-md">
+        <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">
+            @if (ShowSelection)
+            {
+                <div class="flex justify-center items-center gap-3">
+                    <img src="/_content/Moonlight.Client/svg/logo.svg" class="size-12" alt="brand-logo"/>
+                </div>
+                <div class="text-center">
+                    <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>
-                }
-                else
-                {
-                    <div class="flex justify-center">
-                        <span class="loading loading-spinner loading-xl"></span>
-                    </div>
-                }
-            </LazyLoader>
-        </div>
+                </div>
+            }
+            else
+            {
+                <div class="flex justify-center">
+                    <span class="loading loading-spinner loading-xl"></span>
+                </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