💄 Optimized the authorized page style

DysonNetwork.Sphere/Developer/CustomApp.cs

@@ -38,14 +38,14 @@ public class CustomApp : ModelBase, IIdentifiedResource
     [NotMapped] public string ResourceIdentifier => "custom-app/" + Id;
 }
 
-public class CustomAppLinks : ModelBase
+public class CustomAppLinks
 {
     [MaxLength(8192)] public string? HomePage { get; set; }
     [MaxLength(8192)] public string? PrivacyPolicy { get; set; }
     [MaxLength(8192)] public string? TermsOfService { get; set; }
 }
 
-public class CustomAppOauthConfig : ModelBase
+public class CustomAppOauthConfig
 {
     [MaxLength(1024)] public string? ClientUri { get; set; }
     [MaxLength(4096)] public string[] RedirectUris { get; set; } = [];

DysonNetwork.Sphere/Pages/Account/Profile.cshtml

@@ -15,7 +15,7 @@
             </div>
 
             <!-- Two Column Layout -->
-            <div class="flex flex-col md:flex-row gap-8">
+            <div class="flex flex-col md:flex-row gap-6">
                 <!-- Left Pane - Profile Card -->
                 <div class="w-full md:w-1/3 lg:w-1/4">
                     <div class="card bg-base-100 shadow-xl sticky top-8">

DysonNetwork.Sphere/Pages/Auth/Authorize.cshtml

@@ -4,9 +4,9 @@
     ViewData["Title"] = "Authorize Application";
 }
 
-<div class="min-h-screen flex items-center justify-center bg-base-200 py-12 px-4 sm:px-6 lg:px-8">
+<div class="h-full flex items-center justify-center bg-base-200 py-12 px-4 sm:px-6 lg:px-8">
     <div class="card w-full max-w-md bg-base-100 shadow-xl">
-        <div class="card-body">
+        <div class="card-body px-8 py-7">
             <h2 class="card-title justify-center text-2xl font-bold">
                 Authorize Application
             </h2>
@@ -17,11 +17,19 @@
                         @if (!string.IsNullOrEmpty(Model.AppLogo))
                         {
                             <div class="avatar">
-                                <div class="w-16 rounded">
+                                <div class="w-12 rounded">
                                     <img src="@Model.AppLogo" alt="@Model.AppName logo" />
                                 </div>
                             </div>
                         }
+                        else
+                        {
+                            <div class="avatar avatar-placeholder">
+                                <div class="bg-neutral text-neutral-content rounded-full w-12">
+                                    <span class="text-xl">@Model.AppName?[..1].ToUpper()</span>
+                                </div>
+                            </div>
+                        }
                         <div class="ml-4 text-left">
                             <h3 class="text-lg font-medium">@Model.AppName</h3>
                             @if (!string.IsNullOrEmpty(Model.AppUri))
@@ -35,11 +43,11 @@
                 </div>
             }
             <p class="mt-6 text-sm text-center">
-                wants to access your account with the following permissions:
+                When you authorize this application, you consent to the following permissions:
             </p>
 
-            <div class="mt-6">
+            <div class="mt-4">
-                <ul class="menu bg-base-200 rounded-box">
+                <ul class="menu bg-base-200 rounded-box w-full">
                     @if (Model.Scope != null)
                     {
                         var scopeDescriptions = new Dictionary<string, (string Name, string Description)>
@@ -67,10 +75,6 @@
                         }
                     }
                 </ul>
-                
-                <div class="mt-4 text-xs text-base-content/70">
-                    <p>By authorizing, you allow this application to access your information on your behalf.</p>
-                </div>
             </div>
 
             <form method="post" class="mt-8 space-y-4">
@@ -81,19 +85,13 @@
                 <input type="hidden" asp-for="State" name="state" />
                 <input type="hidden" asp-for="Nonce" name="nonce" />
                 <input type="hidden" asp-for="ReturnUrl" name="returnUrl" />
-                <input type="hidden" name="code_challenge" value="@HttpContext.Request.Query["code_challenge"]" />
+                <input type="hidden" asp-for="CodeChallenge" value="@HttpContext.Request.Query["code_challenge"]" />
-                <input type="hidden" name="code_challenge_method" value="@HttpContext.Request.Query["code_challenge_method"]" />
+                <input type="hidden" asp-for="CodeChallengeMethod" value="@HttpContext.Request.Query["code_challenge_method"]" />
-                <input type="hidden" name="response_mode" value="@HttpContext.Request.Query["response_mode"]" />
+                <input type="hidden" asp-for="ResponseMode" value="@HttpContext.Request.Query["response_mode"]" />
                 
-                <div class="card-actions justify-center">
+                <div class="card-actions justify-center flex gap-4">
-                    <button type="submit" name="allow" value="true" class="btn btn-primary">Allow</button>
+                    <button type="submit" name="allow" value="true" class="btn btn-primary flex-1">Allow</button>
-                    <button type="submit" name="allow" value="false" class="btn btn-ghost">Deny</button>
+                    <button type="submit" name="allow" value="false" class="btn btn-ghost flex-1">Deny</button>
-                </div>
-                
-                <div class="mt-4 pt-4 border-t border-base-300">
-                    <p class="text-xs text-center text-base-content/70">
-                        You can change these permissions later in your account settings.
-                    </p>
                 </div>
             </form>
         </div>

DysonNetwork.Sphere/Pages/Shared/_Layout.cshtml

@@ -22,19 +22,27 @@
         <a class="btn btn-ghost text-xl">Solar Network</a>
     </div>
     <div class="flex-none">
-        <ul class="menu menu-horizontal px-1">
+        <ul class="menu menu-horizontal menu-sm px-1">
             @if (Context.Request.Cookies.TryGetValue(AuthConstants.CookieTokenName, out _))
             {
-                <li><a href="/web/account/profile">Profile</a></li>
+                <li class="tooltip tooltip-bottom" data-tip="Profile">
-                <li>
+                    <a href="/web/account/profile">
+                        <span class="material-symbols-outlined">account_circle</span>
+                    </a>
+                </li>
+                <li class="tooltip tooltip-bottom" data-tip="Logout">
                     <form method="post" asp-page="/Account/Profile" asp-page-handler="Logout">
-                        <button type="submit">Logout</button>
+                        <button type="submit">
+                            <span class="material-symbols-outlined">
+                                logout
+                            </span>
+                        </button>
                     </form>
                 </li>
             }
             else
             {
-                <li>
+                <li class="tooltip tooltip-bottom" data-tip="Login">
                     <a href="/web/auth/login"><span class="material-symbols-outlined">login</span></a>
                 </li>
             }

DysonNetwork.Sphere/wwwroot/css/styles.css

@@ -930,6 +930,21 @@
       }
     }
   }
+  .avatar-online {
+    &:before {
+      content: "";
+      position: absolute;
+      z-index: 1;
+      display: block;
+      border-radius: calc(infinity * 1px);
+      background-color: var(--color-success);
+      outline: 2px solid var(--color-base-100);
+      width: 15%;
+      height: 15%;
+      top: 7%;
+      right: 7%;
+    }
+  }
   .steps {
     display: inline-grid;
     grid-auto-flow: column;
@@ -1356,6 +1371,16 @@
   .sticky {
     position: sticky;
   }
+  .tooltip-bottom {
+    > .tooltip-content, &[data-tip]:before {
+      transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem));
+      inset: var(--tt-off) auto auto 50%;
+    }
+    &:after {
+      transform: translateX(-50%) translateY(var(--tt-pos, -0.25rem)) rotate(180deg);
+      inset: var(--tt-tail) auto auto 50%;
+    }
+  }
   .top-0 {
     top: calc(var(--spacing) * 0);
   }
@@ -1861,6 +1886,12 @@
   .table {
     display: table;
   }
+  .btn-circle {
+    border-radius: calc(infinity * 1px);
+    padding-inline: calc(0.25rem * 0);
+    width: var(--size);
+    height: var(--size);
+  }
   .h-5 {
     height: calc(var(--spacing) * 5);
   }
@@ -1972,6 +2003,9 @@
   .gap-3 {
     gap: calc(var(--spacing) * 3);
   }
+  .gap-4 {
+    gap: calc(var(--spacing) * 4);
+  }
   .gap-6 {
     gap: calc(var(--spacing) * 6);
   }
@@ -2003,6 +2037,18 @@
   .overflow-x-auto {
     overflow-x: auto;
   }
+  .menu-sm {
+    :where(li:not(.menu-title) > *:not(ul, details, .menu-title)), :where(li:not(.menu-title) > details > summary:not(.menu-title)) {
+      border-radius: var(--radius-field);
+      padding-inline: calc(0.25rem * 2.5);
+      padding-block: calc(0.25rem * 1);
+      font-size: 0.75rem;
+    }
+    .menu-title {
+      padding-inline: calc(0.25rem * 3);
+      padding-block: calc(0.25rem * 2);
+    }
+  }
   .rounded {
     border-radius: 0.25rem;
   }