From 5e1dcac6ac813d4682becada41c243dd35ee1e27 Mon Sep 17 00:00:00 2001
From: Sebastian <sebastian@squidex.io>
Date: Mon, 31 May 2021 18:58:33 +0200
Subject: [PATCH] More styling.

---
 .../Api/Controllers/Apps/Models/ClientsDto.cs |   2 +-
 .../Views/Account/Consent.cshtml              |   6 +-
 .../IdentityServer/Views/Account/Login.cshtml | 150 +++++++++---------
 frontend/app/theme/_static.scss               |  12 +-
 4 files changed, 91 insertions(+), 79 deletions(-)

diff --git a/backend/src/Squidex/Areas/Api/Controllers/Apps/Models/ClientsDto.cs b/backend/src/Squidex/Areas/Api/Controllers/Apps/Models/ClientsDto.cs
index fc1d9d316..08ee667b1 100644
--- a/backend/src/Squidex/Areas/Api/Controllers/Apps/Models/ClientsDto.cs
+++ b/backend/src/Squidex/Areas/Api/Controllers/Apps/Models/ClientsDto.cs
@@ -30,7 +30,7 @@ namespace Squidex.Areas.Api.Controllers.Apps.Models
                     .ToArray()
             };
 
-            return result;
+            return result.CreateLinks(resources);
         }
 
         private ClientsDto CreateLinks(Resources resources)
diff --git a/backend/src/Squidex/Areas/IdentityServer/Views/Account/Consent.cshtml b/backend/src/Squidex/Areas/IdentityServer/Views/Account/Consent.cshtml
index 563d65e59..6ebd6eee1 100644
--- a/backend/src/Squidex/Areas/IdentityServer/Views/Account/Consent.cshtml
+++ b/backend/src/Squidex/Areas/IdentityServer/Views/Account/Consent.cshtml
@@ -15,7 +15,7 @@
     <h2>@T.Get("users.consent.headline")</h2>
         
     <label for="consentToAutomatedEmails">
-        <div class="card profile-section-sm @ErrorClass("ConsentToAutomatedEmails")">
+        <div class="card card-consent @ErrorClass("ConsentToAutomatedEmails")">
             <div class="card-body">
                 <h4 class="card-title">@T.Get("users.consent.emailHeadline")</h4>
 
@@ -32,7 +32,7 @@
     </label>
 
     <label for="consentToCookies">
-        <div class="card profile-section-sm @ErrorClass("ConsentToCookies")">
+        <div class="card card-consent @ErrorClass("ConsentToCookies")">
             <div class="card-body">
                 <h4 class="card-title">@T.Get("users.consent.cookiesHeadline")</h4>
 
@@ -49,7 +49,7 @@
     </label>
 
     <label for="consentToPersonalInformation">
-        <div class="card profile-section-sm @ErrorClass("ConsentToPersonalInformation")">
+        <div class="card card-consent @ErrorClass("ConsentToPersonalInformation")">
             <div class="card-body">
                 <h4 class="card-title">@T.Get("users.consent.piiHeadline")</h4>
 
diff --git a/backend/src/Squidex/Areas/IdentityServer/Views/Account/Login.cshtml b/backend/src/Squidex/Areas/IdentityServer/Views/Account/Login.cshtml
index c614e8f9c..8fc54ab03 100644
--- a/backend/src/Squidex/Areas/IdentityServer/Views/Account/Login.cshtml
+++ b/backend/src/Squidex/Areas/IdentityServer/Views/Account/Login.cshtml
@@ -6,93 +6,95 @@
     ViewBag.Title = action;
 }
 
-<div class="container">
-    <div class="row text-center">
-        <div class="btn-group profile-headline">
-            @if (Model.IsLogin)
-            {
-                <a class="btn btn-toggle btn-primary" asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl">@T.Get("common.login")</a>
-            }
-            else
-            {
-                <a class="btn btn-toggle" asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl">@T.Get("common.login")</a>
-            }
-            @if (!Model.IsLogin)
-            {
-                <a class="btn btn-toggle btn-primary" asp-controller="Account" asp-action="Signup" asp-route-returnurl="@Model.ReturnUrl">@T.Get("common.signup")</a>
-            }
-            else
-            {
-                <a class="btn btn-toggle" asp-controller="Account" asp-action="Signup" asp-route-returnurl="@Model.ReturnUrl">@T.Get("common.signup")</a>
-            }
+<div class="login-container">
+    <div class="container">
+        <div class="row text-center">
+            <div class="btn-group profile-headline">
+                @if (Model.IsLogin)
+                {
+                    <a class="btn btn-toggle btn-primary" asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl">@T.Get("common.login")</a>
+                }
+                else
+                {
+                    <a class="btn btn-toggle" asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl">@T.Get("common.login")</a>
+                }
+                @if (!Model.IsLogin)
+                {
+                    <a class="btn btn-toggle btn-primary" asp-controller="Account" asp-action="Signup" asp-route-returnurl="@Model.ReturnUrl">@T.Get("common.signup")</a>
+                }
+                else
+                {
+                    <a class="btn btn-toggle" asp-controller="Account" asp-action="Signup" asp-route-returnurl="@Model.ReturnUrl">@T.Get("common.signup")</a>
+                }
+            </div>
         </div>
     </div>
-</div>
 
-<form asp-controller="Account" asp-action="External" asp-route-returnurl="@Model.ReturnUrl" method="post">
-    @foreach (var provider in Model.ExternalProviders)
-    {
-        var schema = provider.AuthenticationScheme.ToLowerInvariant();
+    <form asp-controller="Account" asp-action="External" asp-route-returnurl="@Model.ReturnUrl" method="post">
+        @foreach (var provider in Model.ExternalProviders)
+        {
+            var schema = provider.AuthenticationScheme.ToLowerInvariant();
+
+            <div class="form-group">
+                <button class="btn external-button btn-block btn btn-@schema" type="submit" name="provider" value="@provider.AuthenticationScheme">
+                    <i class="icon-@schema external-icon"></i> @Html.Raw(T.Get("users.login.loginWith", new { action, provider = provider.DisplayName }))
+                </button>
+            </div>
+        }
+    </form>
 
-        <div class="form-group">
-            <button class="btn external-button btn-block btn btn-@schema" type="submit" name="provider" value="@provider.AuthenticationScheme">
-                <i class="icon-@schema external-icon"></i> @Html.Raw(T.Get("users.login.loginWith", new { action, provider = provider.DisplayName }))
-            </button>
+    @if (Model.HasExternalLogin && Model.HasPasswordAuth)
+    {
+        <div class="profile-separator">
+            <div class="profile-separator-text">@T.Get("users.login.separator")</div>
         </div>
     }
-</form>
 
-@if (Model.HasExternalLogin && Model.HasPasswordAuth)
-{
-    <div class="profile-separator">
-        <div class="profile-separator-text">@T.Get("users.login.separator")</div>
-    </div>
-}
-
-@if (Model.HasPasswordAuth)
-{
-    if (Model.IsLogin)
+    @if (Model.HasPasswordAuth)
     {
-        if (Model.IsFailed)
+        if (Model.IsLogin)
         {
-            <div class="form-alert form-alert-error">@T.Get("users.login.error")</div>
-        }
+            if (Model.IsFailed)
+            {
+                <div class="form-alert form-alert-error">@T.Get("users.login.error")</div>
+            }
 
-        <form asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl" method="post">
-            <div class="form-group">
-                <input type="email" class="form-control" name="email" id="email" placeholder="@T.Get("users.login.emailPlaceholder")" />
-            </div>
+            <form asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl" method="post">
+                <div class="form-group">
+                    <input type="email" class="form-control" name="email" id="email" placeholder="@T.Get("users.login.emailPlaceholder")" />
+                </div>
 
-            <div class="form-group">
-                <input type="password" class="form-control" name="password" id="password" placeholder="@T.Get("users.login.passwordPlaceholder")" />
-            </div>
+                <div class="form-group">
+                    <input type="password" class="form-control" name="password" id="password" placeholder="@T.Get("users.login.passwordPlaceholder")" />
+                </div>
 
-            <button type="submit" class="btn btn-block btn-primary">@action</button>
-        </form>
-    }
-    else
-    {
-        <div class="profile-password-signup text-center">@T.Get("users.login.askAdmin")</div>
+                <button type="submit" class="btn btn-block btn-primary">@action</button>
+            </form>
+        }
+        else
+        {
+            <div class="profile-password-signup text-center">@T.Get("users.login.askAdmin")</div>
+        }
     }
-}
 
-@if (Model.IsLogin)
-{
-    <p class="profile-footer">
-        @T.Get("users.login.noAccountSignupQuestion")
+    @if (Model.IsLogin)
+    {
+        <p class="profile-footer">
+            @T.Get("users.login.noAccountSignupQuestion")
 
-        <a asp-controller="Account" asp-action="Signup" asp-route-returnurl="@Model.ReturnUrl">
-            @T.Get("users.login.noAccountSignupAction")
-        </a>
-    </p>
-}
-else
-{
-    <p class="profile-footer">
-        @T.Get("users.login.noAccountLoginQuestion")
+            <a asp-controller="Account" asp-action="Signup" asp-route-returnurl="@Model.ReturnUrl">
+                @T.Get("users.login.noAccountSignupAction")
+            </a>
+        </p>
+    }
+    else
+    {
+        <p class="profile-footer">
+            @T.Get("users.login.noAccountLoginQuestion")
 
-        <a asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl">
-            @T.Get("users.login.noAccountLoginAction")
-        </a>
-    </p>
-}
\ No newline at end of file
+            <a asp-controller="Account" asp-action="Login" asp-route-returnurl="@Model.ReturnUrl">
+                @T.Get("users.login.noAccountLoginAction")
+            </a>
+        </p>
+    }
+</div>
\ No newline at end of file
diff --git a/frontend/app/theme/_static.scss b/frontend/app/theme/_static.scss
index a51619eb2..6e11b57b0 100644
--- a/frontend/app/theme/_static.scss
+++ b/frontend/app/theme/_static.scss
@@ -36,7 +36,7 @@ noscript {
 .profile {
     &-container {
         margin: 0 auto;
-        max-width: 30rem;
+        max-width: 40rem;
         min-width: 10rem;
         padding: 1rem 2rem;
     }
@@ -156,6 +156,12 @@ noscript {
     }
 }
 
+.login-container {
+    max-width: 20rem;
+    margin-left: auto;
+    margin-right: auto;
+}
+
 //
 // Splash text for loader.
 //
@@ -172,6 +178,10 @@ noscript {
     }
 }
 
+.card-consent {
+    border-color: transparent;
+}
+
 //
 // Loader element.
 //