From 5d8a4a3803fa908c80a91bc2b35ca2f57e093507 Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Sat, 24 Jul 2021 14:47:40 -0500
Subject: [PATCH] Updated styling.

---
 .../Areas/Identity/Pages/Account/Login.cshtml | 109 +++++++++---------
 .../Identity/Pages/Account/Register.cshtml    |  88 +++++++-------
 Props/Pages/Search.cshtml                     |  14 +--
 Props/assets/styles/_variables.scss           |  14 ++-
 Props/assets/styles/site-wide.scss            |  10 +-
 5 files changed, 120 insertions(+), 115 deletions(-)

diff --git a/Props/Areas/Identity/Pages/Account/Login.cshtml b/Props/Areas/Identity/Pages/Account/Login.cshtml
index 49b154e..8a88f7c 100644
--- a/Props/Areas/Identity/Pages/Account/Login.cshtml
+++ b/Props/Areas/Identity/Pages/Account/Login.cshtml
@@ -5,68 +5,69 @@
     ViewData["Title"] = "Log in";
 }
 
-<div class="flex-grow-1 d-flex flex-column justify-content-center py-3">
-    <div class="jumbotron d-flex flex-column align-content-center">
-        <img alt="Props logo" src="~/images/logo-simplified.svg" class="img-fluid" style="max-height: 180px;" asp-append-version="true" />
-        <h1 class="mt-3 mb-4 text-center">@ViewData["Title"]</h1>
-        <div class="my-3 row justify-content-md-center">
-            <div class="col-md-4">
-                <form id="account" method="post">
-                    <h4>Use a local account to log in.</h4>
-                    <hr />
-                    <div asp-validation-summary="All" class="text-danger"></div>
-                    <div class="mb-3">
-                        <label asp-for="Input.Email" class="form-label"></label>
-                        <input asp-for="Input.Email" class="form-control" />
-                        <span asp-validation-for="Input.Email" class="text-danger"></span>
+<div class="jumbotron text-center">
+    <img alt="Props logo" src="~/images/logo-simplified.svg" class="img-fluid" style="max-height: 150px;" asp-append-version="true" />
+    <h1 class="mt-3 mb-4 display-1">@ViewData["Title"]</h1>
+    <p>Welcome back!</p>
+</div>
+<div class="jumbotron sub flex-grow-1">
+    <div class="py-4 row justify-content-md-center">
+        <div class="col-md-4">
+            <form id="account" method="post">
+                <h4>Use a local account to log in.</h4>
+                <hr />
+                <div asp-validation-summary="All" class="text-danger"></div>
+                <div class="mb-3">
+                    <label asp-for="Input.Email" class="form-label"></label>
+                    <input asp-for="Input.Email" class="form-control" />
+                    <span asp-validation-for="Input.Email" class="text-danger"></span>
+                </div>
+                <div class="mb-3">
+                    <label asp-for="Input.Password" class="form-label"></label>
+                    <input asp-for="Input.Password" class="form-control" />
+                    <span asp-validation-for="Input.Password" class="text-danger"></span>
+                </div>
+                <div class="mb-3">
+                    <div class="form-check">
+                        <input asp-for="Input.RememberMe" class="form-check-input" />
+                        <label asp-for="Input.RememberMe" class="form-check-label">
+                            @Html.DisplayNameFor(m => m.Input.RememberMe)
+                        </label>
                     </div>
-                    <div class="mb-3">
-                        <label asp-for="Input.Password" class="form-label"></label>
-                        <input asp-for="Input.Password" class="form-control" />
-                        <span asp-validation-for="Input.Password" class="text-danger"></span>
+                </div>
+                <div class="mb-3">
+                    <button type="submit" class="btn btn-primary">Log in</button>
+                </div>
+                <div class="row">
+                    <div class="col-lg">
+                        <a class="link-secondary" id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
                     </div>
-                    <div class="mb-3">
-                        <div class="form-check">
-                            <input asp-for="Input.RememberMe" class="form-check-input" />
-                            <label asp-for="Input.RememberMe" class="form-check-label">
-                                @Html.DisplayNameFor(m => m.Input.RememberMe)
-                            </label>
-                        </div>
+                    <div class="col-lg">
+                        <a class="link-secondary" asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
                     </div>
-                    <div class="mb-3">
-                        <button type="submit" class="btn btn-primary">Log in</button>
+                    <div class="col-lg">
+                        <a class="link-secondary" id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
                     </div>
+                </div>
+            </form>
+        </div>
+        @if ((Model.ExternalLogins?.Count ?? 0) != 0)
+        {
+            <div class="col-md-6 md-offset-2">
+                <h4>Use another service to log in.</h4>
+                <hr />
+                <form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
                     <div>
-                        <div class="my-1">
-                            <a class="link-secondary" id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
-                        </div>
-                        <div class="my-1">
-                            <a class="link-secondary" asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
-                        </div>
-                        <div class="my-1">
-                            <a class="link-secondary" id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
-                        </div>
+                        <p>
+                            @foreach (var provider in Model.ExternalLogins)
+                            {
+                                <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
+                            }
+                        </p>
                     </div>
                 </form>
             </div>
-            @if ((Model.ExternalLogins?.Count ?? 0) != 0)
-            {
-                <div class="col-md-6 md-offset-2">
-                    <h4>Use another service to log in.</h4>
-                    <hr />
-                    <form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
-                        <div>
-                            <p>
-                                @foreach (var provider in Model.ExternalLogins)
-                                {
-                                    <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
-                                }
-                            </p>
-                        </div>
-                    </form>
-                </div>
-            }
-        </div>
+        }
     </div>
 </div>
 
diff --git a/Props/Areas/Identity/Pages/Account/Register.cshtml b/Props/Areas/Identity/Pages/Account/Register.cshtml
index f690509..37d58f0 100644
--- a/Props/Areas/Identity/Pages/Account/Register.cshtml
+++ b/Props/Areas/Identity/Pages/Account/Register.cshtml
@@ -3,53 +3,53 @@
 @{
     ViewData["Title"] = "Register";
 }
-
-<div class="flex-grow-1 d-flex flex-column justify-content-center py-3">
-    <div class="jumbotron d-flex flex-column align-content-center">
-        <img alt="Props logo" src="~/images/logo-simplified.svg" class="img-fluid" style="max-height: 180px;" asp-append-version="true" />
-        <h1 class="mt-3 mb-4 text-center display-2">@ViewData["Title"]</h1>
-        <div class="my-3 row justify-content-md-center">
-            <div class="col-md-4">
-                <form asp-route-returnUrl="@Model.ReturnUrl" method="post">
-                    <h4>Create a new account.</h4>
-                    <hr />
-                    <div asp-validation-summary="All" class="text-danger"></div>
-                    <div class="mb-3">
-                        <label asp-for="Input.Email" class="form-label"></label>
-                        <input asp-for="Input.Email" class="form-control" />
-                        <span asp-validation-for="Input.Email" class="text-danger"></span>
+<div class="jumbotron text-center">
+    <img alt="Props logo" src="~/images/logo-simplified.svg" class="img-fluid" style="max-height: 150px;" asp-append-version="true" />
+    <h1 class="mt-3 mb-4 display-1">@ViewData["Title"]</h1>
+    <p>Create more projects and access them across your devices! Join the community and show off your projects to the world!</p>
+</div>
+<div class="jumbotron sub flex-grow-1">
+    <div class="py-3 row justify-content-md-center">
+        <div class="col-md-4">
+            <form asp-route-returnUrl="@Model.ReturnUrl" method="post">
+                <h4>Create a new account.</h4>
+                <hr />
+                <div asp-validation-summary="All" class="text-danger"></div>
+                <div class="mb-3">
+                    <label asp-for="Input.Email" class="form-label"></label>
+                    <input asp-for="Input.Email" class="form-control" />
+                    <span asp-validation-for="Input.Email" class="text-danger"></span>
+                </div>
+                <div class="mb-3">
+                    <label asp-for="Input.Password" class="form-label"></label>
+                    <input asp-for="Input.Password" class="form-control" />
+                    <span asp-validation-for="Input.Password" class="text-danger"></span>
+                </div>
+                <div class="mb-3">
+                    <label asp-for="Input.ConfirmPassword" class="form-label"></label>
+                    <input asp-for="Input.ConfirmPassword" class="form-control" />
+                    <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
+                </div>
+                <button type="submit" class="btn btn-primary">Register</button>
+            </form>
+        </div>
+        @if ((Model.ExternalLogins?.Count ?? 0) != 0)
+        {
+            <div class="col-md-6 md-offset-2">
+                <h4>Use another service to register.</h4>
+                <hr />
+                <form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
+                    <div>
+                        <p>
+                            @foreach (var provider in Model.ExternalLogins)
+                            {
+                                <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
+                            }
+                        </p>
                     </div>
-                    <div class="mb-3">
-                        <label asp-for="Input.Password" class="form-label"></label>
-                        <input asp-for="Input.Password" class="form-control" />
-                        <span asp-validation-for="Input.Password" class="text-danger"></span>
-                    </div>
-                    <div class="mb-3">
-                        <label asp-for="Input.ConfirmPassword" class="form-label"></label>
-                        <input asp-for="Input.ConfirmPassword" class="form-control" />
-                        <span asp-validation-for="Input.ConfirmPassword" class="text-danger"></span>
-                    </div>
-                    <button type="submit" class="btn btn-primary">Register</button>
                 </form>
             </div>
-            @if ((Model.ExternalLogins?.Count ?? 0) != 0)
-            {
-                <div class="col-md-6 md-offset-2">
-                    <h4>Use another service to register.</h4>
-                    <hr />
-                    <form id="external-account" asp-page="./ExternalLogin" asp-route-returnUrl="@Model.ReturnUrl" method="post" class="form-horizontal">
-                        <div>
-                            <p>
-                                @foreach (var provider in Model.ExternalLogins)
-                                {
-                                    <button type="submit" class="btn btn-primary" name="provider" value="@provider.Name" title="Log in using your @provider.DisplayName account">@provider.DisplayName</button>
-                                }
-                            </p>
-                        </div>
-                    </form>
-                </div>
-            }
-        </div>
+        }
     </div>
 </div>
 
diff --git a/Props/Pages/Search.cshtml b/Props/Pages/Search.cshtml
index 3ea7962..3a33b80 100644
--- a/Props/Pages/Search.cshtml
+++ b/Props/Pages/Search.cshtml
@@ -4,25 +4,25 @@
     ViewData["Specific"] = "Search";
 }
 
-<div class="container">
+<div>
     <div class="my-4 less-concise mx-auto">
         <div class="input-group">
-            <input type="text" class="form-control" placeholder="What are you looking for?" aria-label="Search" aria-describedby="search-btn" id="search-bar">
+            <input type="text" class="form-control bg-transparent border-primary" placeholder="What are you looking for?" aria-label="Search" aria-describedby="search-btn" id="search-bar">
             <button class="btn btn-outline-secondary" type="button" id="configuration-toggle" data-bs-toggle="collapse" data-bs-target="#configuration"><i class="bi bi-sliders"></i></button>
             <button class="btn btn-outline-primary" type="button" id="search-btn">Search</button>
         </div>
     </div>
 </div>
 
-<div class="collapse" id="configuration">
-    <div class="tear">
+<div class="collapse tear" id="configuration">
+    <div class="p-3">
         <div class="container invisible">
             <div class="d-flex">
                 <h1 class="my-2 display-2 me-auto">Configuration</h1>
                 <button class="btn align-self-start" type="button" id="configuration-close" data-bs-toggle="collapse" data-bs-target="#configuration"><i class="bi bi-x-lg"></i></button>
             </div>
             <div class="row justify-content-md-center">
-                <section class="col-lg">
+                <section class="col-lg px-4">
                     <h3>Price</h3>
                     <div class="mb-3">
                         <label for="max-price" class="form-label">Maximum Price</label>
@@ -61,7 +61,7 @@
                         </div>
                     </div>
                 </section>
-                <section class="col-lg">
+                <section class="col-lg px-4">
                     <h3>Metrics</h3>
                     <div class="mb-3">
                         <label for="min-purchases" class="form-label">Minimum Purchases</label>
@@ -101,7 +101,7 @@
                         </div>
                     </div>
                 </section>
-                <section class="col-md">
+                <section class="col-lg px-4">
                     <h3>Shops Enabled</h3>
                     <div class="mb-3 px-3" id="shop-checkboxes">
                     </div>
diff --git a/Props/assets/styles/_variables.scss b/Props/assets/styles/_variables.scss
index 8649f20..aa14b1c 100644
--- a/Props/assets/styles/_variables.scss
+++ b/Props/assets/styles/_variables.scss
@@ -1,12 +1,14 @@
 $themes: (
     "light": (
-        "background": #f4f4f4, 
-        "navbar": #FFF8F8, 
-        "main": #BDF2D5, 
+        "background": #ebf0ef, 
+        "navbar": #E6F4F1,
+        "navbar-link": #005780,
+        "navbar-active": #001f2e,
+        "main": #B4EEFF, 
         "footer": #F2F2F2, 
-        "sub": #F4FCFC, 
-        "bold": #647b9b, 
-        "text": #1A1A1A, 
+        "sub": #EEFBFF, 
+        "text": #1A1A1A,
+        "special": #00A2EF,
         "muted": #797a7e, 
     ),
 );
diff --git a/Props/assets/styles/site-wide.scss b/Props/assets/styles/site-wide.scss
index 572bae7..43df9db 100644
--- a/Props/assets/styles/site-wide.scss
+++ b/Props/assets/styles/site-wide.scss
@@ -12,12 +12,15 @@ header > nav {
 
     .nav-link, .navbar-brand {
         @include themer.themed {
-            color: themer.color-of("bold");
+            color: themer.color-of("navbar-link");
         }
         &.active {
             @include themer.themed {
-                color: themer.color-of("text");
+                color: themer.color-of("navbar-active");
+                border-color: themer.color-of("navbar-active");
             }
+            border-bottom-style: solid;
+            border-bottom-width: 1px;
         }
     }
 
@@ -34,7 +37,6 @@ main {
     flex-direction: column;
 
     .tear {
-        @extend .p-3;
         border-top: 1px;
         border-top-style: solid;
         border-bottom: 1px;
@@ -92,7 +94,7 @@ footer {
 hr.concise {
     @extend .my-3;
     @include themer.themed {
-        color: themer.color-of("bold");
+        color: themer.color-of("special");
     }
     width: 15%;
     max-width: 160px;