From 8174f9f6f6c1a1439182aa11a6bf3368a6fc1774 Mon Sep 17 00:00:00 2001
From: andy <andy@sarsoo.xyz>
Date: Sun, 19 Dec 2021 22:50:03 +0000
Subject: [PATCH] Fiddling with html, padding, icons etc

---
 .../Areas/Identity/Pages/Account/Login.cshtml | 25 ++----
 .../Account/Manage/ChangePassword.cshtml      |  8 +-
 .../Account/Manage/DeletePersonalData.cshtml  |  4 +-
 .../Pages/Account/Manage/Email.cshtml         |  6 +-
 .../Account/Manage/EnableAuthenticator.cshtml |  4 +-
 .../Pages/Account/Manage/Index.cshtml         |  6 +-
 .../Pages/Account/Manage/Lastfm.cshtml        |  6 +-
 .../Pages/Account/Manage/ManageNavPages.cs    |  2 +-
 .../Pages/Account/Manage/PersonalData.cshtml  |  4 +-
 .../Pages/Account/Manage/SetPassword.cshtml   |  6 +-
 .../Pages/Account/Manage/Spotify.cshtml       | 13 ++-
 .../Pages/Account/Manage/Spotify.cshtml.cs    |  4 +
 .../Pages/Account/Manage/_Layout.cshtml       |  6 +-
 .../Pages/Account/Manage/_ManageNav.cshtml    | 16 ++--
 .../Identity/Pages/Account/Register.cshtml    | 12 ++-
 Selector.Web/CSS/index.scss                   | 84 ++++++++++++++++++-
 Selector.Web/CSS/now.scss                     | 11 +--
 Selector.Web/Pages/Index.cshtml               |  4 +
 Selector.Web/Pages/Shared/_Layout.cshtml      | 10 +--
 .../Pages/Shared/_LoginPartial.cshtml         |  4 +-
 Selector.Web/scripts/Now/Spotify.ts           |  2 +-
 21 files changed, 158 insertions(+), 79 deletions(-)

diff --git a/Selector.Web/Areas/Identity/Pages/Account/Login.cshtml b/Selector.Web/Areas/Identity/Pages/Account/Login.cshtml
index a9e502f..a775569 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Login.cshtml
+++ b/Selector.Web/Areas/Identity/Pages/Account/Login.cshtml
@@ -10,20 +10,18 @@
     <div class="col-md-4">
         <section>
             <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="form-group">
+                <div class="form-group form-element">
                     <label asp-for="Input.Username"></label>
                     <input asp-for="Input.Username" class="form-control" />
                     <span asp-validation-for="Input.Username" class="text-danger"></span>
                 </div>
-                <div class="form-group">
+                <div class="form-group form-element">
                     <label asp-for="Input.Password"></label>
                     <input asp-for="Input.Password" class="form-control" />
                     <span asp-validation-for="Input.Password" class="text-danger"></span>
                 </div>
-                <div class="form-group">
+                <div class="form-group form-element">
                     <div class="checkbox">
                         <label asp-for="Input.RememberMe">
                             <input asp-for="Input.RememberMe" />
@@ -31,15 +29,15 @@
                         </label>
                     </div>
                 </div>
-                <div class="form-group">
+                <div class="form-group form-element">
                     <button type="submit" class="btn btn-primary">Log in</button>
                 </div>
-                <div class="form-group">
+                <div class="form-group form-element">
                     <p>
-                        <a id="forgot-password" asp-page="./ForgotPassword">Forgot your password?</a>
+                        <a id="forgot-password" asp-page="./ForgotPassword">Forgot password?</a>
                     </p>
                     <p>
-                        <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register as a new user</a>
+                        <a asp-page="./Register" asp-route-returnUrl="@Model.ReturnUrl">Register</a>
                     </p>
                     <p>
                         <a id="resend-confirmation" asp-page="./ResendEmailConfirmation">Resend email confirmation</a>
@@ -50,17 +48,10 @@
     </div>
     <div class="col-md-6 col-md-offset-2">
         <section>
-            <h4>Use another service to log in.</h4>
-            <hr />
             @{
                 if ((Model.ExternalLogins?.Count ?? 0) == 0)
                 {
-                    <div>
-                        <p>
-                            There are no external authentication services configured. See <a href="https://go.microsoft.com/fwlink/?LinkID=532715">this article</a>
-                            for details on setting up this ASP.NET application to support logging in via external services.
-                        </p>
-                    </div>
+                    
                 }
                 else
                 {
diff --git a/Selector.Web/Areas/Identity/Pages/Account/Manage/ChangePassword.cshtml b/Selector.Web/Areas/Identity/Pages/Account/Manage/ChangePassword.cshtml
index 31a2ea5..2008940 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Manage/ChangePassword.cshtml
+++ b/Selector.Web/Areas/Identity/Pages/Account/Manage/ChangePassword.cshtml
@@ -11,22 +11,22 @@
     <div class="col-md-6">
         <form id="change-password-form" method="post">
             <div asp-validation-summary="All" class="text-danger"></div>
-            <div class="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Input.OldPassword"></label>
                 <input asp-for="Input.OldPassword" class="form-control" />
                 <span asp-validation-for="Input.OldPassword" class="text-danger"></span>
             </div>
-            <div class="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Input.NewPassword"></label>
                 <input asp-for="Input.NewPassword" class="form-control" />
                 <span asp-validation-for="Input.NewPassword" class="text-danger"></span>
             </div>
-            <div class="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Input.ConfirmPassword"></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">Update password</button>
+            <button type="submit" class="btn btn-primary form-element">Update password</button>
         </form>
     </div>
 </div>
diff --git a/Selector.Web/Areas/Identity/Pages/Account/Manage/DeletePersonalData.cshtml b/Selector.Web/Areas/Identity/Pages/Account/Manage/DeletePersonalData.cshtml
index c95ab92..af2fb13 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Manage/DeletePersonalData.cshtml
+++ b/Selector.Web/Areas/Identity/Pages/Account/Manage/DeletePersonalData.cshtml
@@ -18,13 +18,13 @@
         <div asp-validation-summary="All" class="text-danger"></div>
         @if (Model.RequirePassword)
         {
-            <div class="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Input.Password"></label>
                 <input asp-for="Input.Password" class="form-control" />
                 <span asp-validation-for="Input.Password" class="text-danger"></span>
             </div>
         }
-        <button class="btn btn-danger" type="submit">Delete data and close my account</button>
+        <button class="btn btn-danger form-element" type="submit">Delete data and close my account</button>
     </form>
 </div>
 
diff --git a/Selector.Web/Areas/Identity/Pages/Account/Manage/Email.cshtml b/Selector.Web/Areas/Identity/Pages/Account/Manage/Email.cshtml
index 8ff8e39..8c034de 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Manage/Email.cshtml
+++ b/Selector.Web/Areas/Identity/Pages/Account/Manage/Email.cshtml
@@ -11,7 +11,7 @@
     <div class="col-md-6">
         <form id="email-form" method="post">
             <div asp-validation-summary="All" class="text-danger"></div>
-            <div class="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Email"></label>
                 @if (Model.IsEmailConfirmed)
                 {
@@ -28,12 +28,12 @@
                     <button id="email-verification" type="submit" asp-page-handler="SendVerificationEmail" class="btn btn-link">Send verification email</button>
                 }
             </div>
-            <div class="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Input.NewEmail"></label>
                 <input asp-for="Input.NewEmail" class="form-control" />
                 <span asp-validation-for="Input.NewEmail" class="text-danger"></span>
             </div>
-            <button id="change-email-button" type="submit" asp-page-handler="ChangeEmail" class="btn btn-primary">Change email</button>
+            <button id="change-email-button" type="submit" asp-page-handler="ChangeEmail" class="btn btn-primary form-element">Change email</button>
         </form>
     </div>
 </div>
diff --git a/Selector.Web/Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml b/Selector.Web/Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml
index 6ea8510..eae747d 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml
+++ b/Selector.Web/Areas/Identity/Pages/Account/Manage/EnableAuthenticator.cshtml
@@ -34,12 +34,12 @@
             <div class="row">
                 <div class="col-md-6">
                     <form id="send-code" method="post">
-                        <div class="form-group">
+                        <div class="form-group form-element">
                             <label asp-for="Input.Code" class="control-label">Verification Code</label>
                             <input asp-for="Input.Code" class="form-control" autocomplete="off" />
                             <span asp-validation-for="Input.Code" class="text-danger"></span>
                         </div>
-                        <button type="submit" class="btn btn-primary">Verify</button>
+                        <button type="submit" class="btn btn-primary form-element">Verify</button>
                         <div asp-validation-summary="ModelOnly" class="text-danger"></div>
                     </form>
                 </div>
diff --git a/Selector.Web/Areas/Identity/Pages/Account/Manage/Index.cshtml b/Selector.Web/Areas/Identity/Pages/Account/Manage/Index.cshtml
index 2a18fdb..100a45c 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Manage/Index.cshtml
+++ b/Selector.Web/Areas/Identity/Pages/Account/Manage/Index.cshtml
@@ -11,16 +11,16 @@
     <div class="col-md-6">
         <form id="profile-form" method="post">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
-            <div class="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Username"></label>
                 <input asp-for="Username" class="form-control" disabled />
             </div>
-            <div class="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Input.PhoneNumber"></label>
                 <input asp-for="Input.PhoneNumber" class="form-control" />
                 <span asp-validation-for="Input.PhoneNumber" class="text-danger"></span>
             </div>
-            <button id="update-profile-button" type="submit" class="btn btn-primary">Save</button>
+            <button id="update-profile-button" type="submit" class="btn btn-primary form-element">Save</button>
         </form>
     </div>
 </div>
diff --git a/Selector.Web/Areas/Identity/Pages/Account/Manage/Lastfm.cshtml b/Selector.Web/Areas/Identity/Pages/Account/Manage/Lastfm.cshtml
index 1c2166b..e81e942 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Manage/Lastfm.cshtml
+++ b/Selector.Web/Areas/Identity/Pages/Account/Manage/Lastfm.cshtml
@@ -5,18 +5,18 @@
     ViewData["ActivePage"] = ManageNavPages.LastFm;
 }
 
-<h4>@ViewData["Title"]</h4>
+<h4>@ViewData["Title"] <a href="https://last.fm"><img src="/last-fm.png" class="lastfm-logo central" /></a></h4>
 <partial name="_StatusMessage" model="Model.StatusMessage" />
 <div class="row">
     <div class="col-md-6">
         <form id="lastfm-form" method="post">
             <div asp-validation-summary="All" class="text-danger"></div>
-            <div class="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Input.Username"></label>
                 <input asp-for="Input.Username" class="form-control" />
                 <span asp-validation-for="Input.Username" class="text-danger"></span>
             </div>
-            <button id="change-username-button" type="submit" asp-page-handler="ChangeUsername" class="btn btn-primary">Change Username</button>
+            <button id="change-username-button" type="submit" asp-page-handler="ChangeUsername" class="btn btn-primary form-element">Change Username</button>
         </form>
     </div>
 </div>
diff --git a/Selector.Web/Areas/Identity/Pages/Account/Manage/ManageNavPages.cs b/Selector.Web/Areas/Identity/Pages/Account/Manage/ManageNavPages.cs
index 2fb4a76..ac005a6 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Manage/ManageNavPages.cs
+++ b/Selector.Web/Areas/Identity/Pages/Account/Manage/ManageNavPages.cs
@@ -50,7 +50,7 @@ namespace Selector.Web.Areas.Identity.Pages.Account.Manage
         {
             var activePage = viewContext.ViewData["ActivePage"] as string
                 ?? System.IO.Path.GetFileNameWithoutExtension(viewContext.ActionDescriptor.DisplayName);
-            return string.Equals(activePage, page, StringComparison.OrdinalIgnoreCase) ? "active" : null;
+            return string.Equals(activePage, page, StringComparison.OrdinalIgnoreCase) ? "active" : "unselected";
         }
     }
 }
diff --git a/Selector.Web/Areas/Identity/Pages/Account/Manage/PersonalData.cshtml b/Selector.Web/Areas/Identity/Pages/Account/Manage/PersonalData.cshtml
index d64bd82..23c1831 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Manage/PersonalData.cshtml
+++ b/Selector.Web/Areas/Identity/Pages/Account/Manage/PersonalData.cshtml
@@ -13,11 +13,11 @@
         <p>
             <strong>Deleting this data will permanently remove your account, and this cannot be recovered.</strong>
         </p>
-        <form id="download-data" asp-page="DownloadPersonalData" method="post" class="form-group">
+        <form id="download-data" asp-page="DownloadPersonalData" method="post" class="form-group form-element">
             <button class="btn btn-primary" type="submit">Download</button>
         </form>
         <p>
-            <a id="delete" asp-page="DeletePersonalData" class="btn btn-secondary">Delete</a>
+            <a id="delete" asp-page="DeletePersonalData" class="btn btn-secondary form-element">Delete</a>
         </p>
     </div>
 </div>
diff --git a/Selector.Web/Areas/Identity/Pages/Account/Manage/SetPassword.cshtml b/Selector.Web/Areas/Identity/Pages/Account/Manage/SetPassword.cshtml
index f1817aa..59ec4bb 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Manage/SetPassword.cshtml
+++ b/Selector.Web/Areas/Identity/Pages/Account/Manage/SetPassword.cshtml
@@ -15,17 +15,17 @@
     <div class="col-md-6">
         <form id="set-password-form" method="post">
             <div asp-validation-summary="ModelOnly" class="text-danger"></div>
-            <div class="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Input.NewPassword"></label>
                 <input asp-for="Input.NewPassword" class="form-control" />
                 <span asp-validation-for="Input.NewPassword" class="text-danger"></span>
             </div>
-            <div class="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Input.ConfirmPassword"></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">Set password</button>
+            <button type="submit" class="btn btn-primary form-element">Set password</button>
         </form>
     </div>
 </div>
diff --git a/Selector.Web/Areas/Identity/Pages/Account/Manage/Spotify.cshtml b/Selector.Web/Areas/Identity/Pages/Account/Manage/Spotify.cshtml
index 10e7a81..4d0904d 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Manage/Spotify.cshtml
+++ b/Selector.Web/Areas/Identity/Pages/Account/Manage/Spotify.cshtml
@@ -5,22 +5,29 @@
     ViewData["ActivePage"] = ManageNavPages.Spotify;
 }
 
-<h4>@ViewData["Title"]</h4>
+<h4>@ViewData["Title"] <a href="https://spotify.com"><img src="/Spotify_Icon_RGB_White.png" class="spotify-logo central" /></a></h4>
 <partial name="_StatusMessage" model="Model.StatusMessage" />
+
 <div class="row">
     <div class="col-md-6">
         <form id="spotify-form" method="post">
             @if (Model.SpotifyIsLinked)
             {
-                <button id="unlink-button" type="submit" asp-page-handler="Unlink" class="btn btn-primary">Unlink</button>
+                <button id="unlink-button" type="submit" asp-page-handler="Unlink" class="btn btn-primary form-element">Unlink</button>
             }
             else
             {
-                <button id="link-button" type="submit" asp-page-handler="Link" class="btn btn-primary">Link</button>
+                <button id="link-button" type="submit" asp-page-handler="Link" class="btn btn-primary form-element">Link</button>
             }
         </form>
     </div>
 </div>
+@if (Model.SpotifyIsLinked)
+{
+    <div class="row">
+        <p class="small">Token last refreshed: <span class="data-value">@Model.LastRefresh</span></p>
+    </div>    
+}
 
 @section Scripts {
     <partial name="_ValidationScriptsPartial" />
diff --git a/Selector.Web/Areas/Identity/Pages/Account/Manage/Spotify.cshtml.cs b/Selector.Web/Areas/Identity/Pages/Account/Manage/Spotify.cshtml.cs
index 3bc9b3a..4ce193e 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Manage/Spotify.cshtml.cs
+++ b/Selector.Web/Areas/Identity/Pages/Account/Manage/Spotify.cshtml.cs
@@ -37,6 +37,9 @@ namespace Selector.Web.Areas.Identity.Pages.Account.Manage
         [BindProperty]
         public bool SpotifyIsLinked { get; set; }
 
+        [BindProperty]
+        public DateTime LastRefresh { get; set; }
+
         [TempData]
         public string StatusMessage { get; set; }
 
@@ -49,6 +52,7 @@ namespace Selector.Web.Areas.Identity.Pages.Account.Manage
             }
 
             SpotifyIsLinked = user.SpotifyIsLinked;
+            LastRefresh = user.SpotifyLastRefresh;
 
             return Page();
         }
diff --git a/Selector.Web/Areas/Identity/Pages/Account/Manage/_Layout.cshtml b/Selector.Web/Areas/Identity/Pages/Account/Manage/_Layout.cshtml
index 3d882cc..c477298 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Manage/_Layout.cshtml
+++ b/Selector.Web/Areas/Identity/Pages/Account/Manage/_Layout.cshtml
@@ -9,16 +9,14 @@
     }
 }
 
-<h2>Manage your account</h2>
+<h2>Manage</h2>
 
 <div>
-    <h4>Change your account settings</h4>
-    <hr />
     <div class="row">
         <div class="col-md-3">
             <partial name="_ManageNav" />
         </div>
-        <div class="col-md-9">
+        <div class="col-md-9" style="margin-top: 20px">
             @RenderBody()
         </div>
     </div>
diff --git a/Selector.Web/Areas/Identity/Pages/Account/Manage/_ManageNav.cshtml b/Selector.Web/Areas/Identity/Pages/Account/Manage/_ManageNav.cshtml
index 05e9f00..8e89fde 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Manage/_ManageNav.cshtml
+++ b/Selector.Web/Areas/Identity/Pages/Account/Manage/_ManageNav.cshtml
@@ -4,15 +4,15 @@
     var hasExternalLogins = (await SignInManager.GetExternalAuthenticationSchemesAsync()).Any();
 }
 <ul class="nav nav-pills flex-column">
-    <li class="nav-item"><a class="nav-link @ManageNavPages.IndexNavClass(ViewContext)" id="profile" asp-page="./Index">Profile</a></li>
-    <li class="nav-item"><a class="nav-link @ManageNavPages.SpotifyNavClass(ViewContext)" id="spotify" asp-page="./Spotify">Spotify</a></li>
-    <li class="nav-item"><a class="nav-link @ManageNavPages.LastFmNavClass(ViewContext)" id="lastfm" asp-page="./Lastfm">Last.fm</a></li>
-    <li class="nav-item"><a class="nav-link @ManageNavPages.EmailNavClass(ViewContext)" id="email" asp-page="./Email">Email</a></li>
-    <li class="nav-item"><a class="nav-link @ManageNavPages.ChangePasswordNavClass(ViewContext)" id="change-password" asp-page="./ChangePassword">Password</a></li>
+    <li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.IndexNavClass(ViewContext)" id="profile" asp-page="./Index">Profile</a></li>
+    <li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.SpotifyNavClass(ViewContext)" id="spotify" asp-page="./Spotify">Spotify <img src="/Spotify_Icon_RGB_White.png" class="spotify-logo menu-icon" /></a></li>
+    <li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.LastFmNavClass(ViewContext)" id="lastfm" asp-page="./Lastfm">Last.fm <img src="/last-fm.png" class="lastfm-logo menu-icon" /></a></li>
+    <li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.EmailNavClass(ViewContext)" id="email" asp-page="./Email">Email</a></li>
+    <li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.ChangePasswordNavClass(ViewContext)" id="change-password" asp-page="./ChangePassword">Password</a></li>
     @if (hasExternalLogins)
     {
-        <li id="external-logins" class="nav-item"><a id="external-login" class="nav-link @ManageNavPages.ExternalLoginsNavClass(ViewContext)" asp-page="./ExternalLogins">External logins</a></li>
+        <li id="external-logins" class="nav-item"><a id="external-login" class="nav-link dash-underline @ManageNavPages.ExternalLoginsNavClass(ViewContext)" asp-page="./ExternalLogins">External logins</a></li>
     }
-    <li class="nav-item"><a class="nav-link @ManageNavPages.TwoFactorAuthenticationNavClass(ViewContext)" id="two-factor" asp-page="./TwoFactorAuthentication">Two-factor authentication</a></li>
-    <li class="nav-item"><a class="nav-link @ManageNavPages.PersonalDataNavClass(ViewContext)" id="personal-data" asp-page="./PersonalData">Personal data</a></li>
+    <li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.TwoFactorAuthenticationNavClass(ViewContext)" id="two-factor" asp-page="./TwoFactorAuthentication">Two-factor authentication</a></li>
+    <li class="nav-item"><a class="nav-link dash-underline @ManageNavPages.PersonalDataNavClass(ViewContext)" id="personal-data" asp-page="./PersonalData">Personal data</a></li>
 </ul>
diff --git a/Selector.Web/Areas/Identity/Pages/Account/Register.cshtml b/Selector.Web/Areas/Identity/Pages/Account/Register.cshtml
index e245c1d..e742ef7 100644
--- a/Selector.Web/Areas/Identity/Pages/Account/Register.cshtml
+++ b/Selector.Web/Areas/Identity/Pages/Account/Register.cshtml
@@ -9,30 +9,28 @@
 <div class="row">
     <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="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Input.Username"></label>
                 <input asp-for="Input.Username" class="form-control" />
                 <span asp-validation-for="Input.Username" class="text-danger"></span>
             </div>
-            <div class="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Input.Email"></label>
                 <input asp-for="Input.Email" class="form-control" />
                 <span asp-validation-for="Input.Email" class="text-danger"></span>
             </div>
-            <div class="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Input.Password"></label>
                 <input asp-for="Input.Password" class="form-control" />
                 <span asp-validation-for="Input.Password" class="text-danger"></span>
             </div>
-            <div class="form-group">
+            <div class="form-group form-element">
                 <label asp-for="Input.ConfirmPassword"></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>
+            <button type="submit" class="btn btn-primary form-element">Register</button>
         </form>
     </div>
     <div class="col-md-6 col-md-offset-2">
diff --git a/Selector.Web/CSS/index.scss b/Selector.Web/CSS/index.scss
index 14133fa..39e42c5 100644
--- a/Selector.Web/CSS/index.scss
+++ b/Selector.Web/CSS/index.scss
@@ -1,5 +1,85 @@
 @import "now.scss";
 
 body {
-    background-color: #c6c6c6;
-}
\ No newline at end of file
+    background-color: #121212;
+    color: #efefef;
+}
+
+.navbar-bg {
+    background-color: #232323;
+}
+
+.form-element {
+    margin-top: 10px;
+    margin-bottom: 10px;
+}
+
+.menu-icon {
+    vertical-align: middle;
+    float: right;
+}
+
+.unselected img {
+    filter: brightness(0.4);
+}
+
+.black-img {
+    filter: brightness(0);
+}
+
+.central {
+    vertical-align: middle;
+}
+
+.data-value {
+    color: grey;
+}
+
+.separator-border {
+    border-bottom: 1px solid #191919;
+}
+
+.dash-underline {
+    text-decoration: dotted;
+    text-decoration-line: underline;
+    text-decoration-thickness: 2px;
+    text-underline-offset: 5px;
+
+    &:hover {
+        text-decoration: solid;
+        text-decoration-line: underline;
+        text-decoration-thickness: 1.5px;
+    }
+}
+
+.dash-underline-lg {
+    font-size: 24px;
+    text-decoration: dotted;
+    text-decoration-line: underline;
+    text-decoration-thickness: 4px;
+    text-underline-offset: 5px;
+
+    &:hover {
+        text-decoration: solid;
+        text-decoration-line: underline;
+        text-decoration-thickness: 3.4px;
+    }
+}
+
+.link-dark {
+    color: #a3a3a3;
+
+    &:hover {
+        color: #a3a3a3;
+    }
+}
+
+input[type=text], input[type=email], input[type=tel], input[type=password] {
+    background-color: #444444 !important;
+    border-color: #545454;
+    color: $text-color;
+
+    &:focus {
+        color: $text-color;
+    }
+}
diff --git a/Selector.Web/CSS/now.scss b/Selector.Web/CSS/now.scss
index 1b57a6e..c697c0e 100644
--- a/Selector.Web/CSS/now.scss
+++ b/Selector.Web/CSS/now.scss
@@ -3,13 +3,14 @@
 }
 
 $text-color: white;
+$shadow-color: #1e1e1e;
 
 .card {
-    background-color: grey;
+    background-color: #333232;
     color: $text-color;
     margin: 5px;
     padding: 15px;
-    box-shadow: 4px 4px 2px #5e5e5e;
+    box-shadow: 4px 4px 2px $shadow-color;
     transition: box-shadow 0.5s;
 
     &:hover {
@@ -21,10 +22,10 @@ $text-color: white;
 .now-playing-card {
     // max-width: 300px;
 
-    text-shadow: 2px 2px 2px #5e5e5e;
+    text-shadow: 2px 2px 2px $shadow-color;
 
     .cover-art {
-        box-shadow: 4px 4px 2px #5e5e5e;
+        box-shadow: 4px 4px 2px $shadow-color;
         margin-bottom: 15px;
     }
 
@@ -85,7 +86,7 @@ $text-color: white;
 .popularity-progress {
     margin-top: 10px;
     margin-bottom: 20px;
-    box-shadow: 2px 2px 2px #5e5e5e;
+    box-shadow: 2px 2px 2px $shadow-color;
 }
 
 .subtle-link {
diff --git a/Selector.Web/Pages/Index.cshtml b/Selector.Web/Pages/Index.cshtml
index 70ebfeb..cda4653 100644
--- a/Selector.Web/Pages/Index.cshtml
+++ b/Selector.Web/Pages/Index.cshtml
@@ -6,4 +6,8 @@
 
 <div class="text-center">
     <h1 class="display-4">Welcome</h1>
+
+    <p>Selector is a tool for monitoring Spotify usage.</p>
+
+    <a href="/now" class="dash-underline-lg link-dark" style="">Now Playing</a>
 </div>
\ No newline at end of file
diff --git a/Selector.Web/Pages/Shared/_Layout.cshtml b/Selector.Web/Pages/Shared/_Layout.cshtml
index da68f40..27d5f52 100644
--- a/Selector.Web/Pages/Shared/_Layout.cshtml
+++ b/Selector.Web/Pages/Shared/_Layout.cshtml
@@ -9,17 +9,13 @@
 </head>
 <body>
     <header>
-        <nav class="navbar navbar-expand-sm navbar-toggleable-sm navbar-light bg-white border-bottom box-shadow mb-3">
+        <nav class="navbar navbar-expand-sm navbar-dark navbar-bg separator-border box-shadow mb-3">
             <div class="container">
                 <a class="navbar-brand" asp-area="" asp-page="/Index">Selector</a>
-                <button class="navbar-toggler" type="button" data-toggle="collapse" data-target=".navbar-collapse" aria-controls="navbarSupportedContent"
-                        aria-expanded="false" aria-label="Toggle navigation">
-                    <span class="navbar-toggler-icon"></span>
-                </button>
                 <div class="navbar-collapse collapse d-sm-inline-flex justify-content-between">
                     <ul class="navbar-nav flex-grow-1">
                         <li class="nav-item">
-                            <a class="nav-link text-dark" asp-area="" asp-page="/Now">Now</a>
+                            <a class="nav-link" asp-area="" asp-page="/Now">Now</a>
                         </li>
                     </ul>
                 </div>
@@ -33,7 +29,7 @@
         </main>
     </div>
 
-    <footer class="border-top footer text-muted">
+    <footer class="footer text-muted">
         <div class="container">
             &copy; 2021 - Selector.Web - <a asp-area="" asp-page="/Privacy">Privacy</a>
         </div>
diff --git a/Selector.Web/Pages/Shared/_LoginPartial.cshtml b/Selector.Web/Pages/Shared/_LoginPartial.cshtml
index 3c4193c..f0e203d 100644
--- a/Selector.Web/Pages/Shared/_LoginPartial.cshtml
+++ b/Selector.Web/Pages/Shared/_LoginPartial.cshtml
@@ -8,11 +8,11 @@
 @if (SignInManager.IsSignedIn(User))
 {
     <li class="nav-item">
-        <a id="manage" class="nav-link text-dark" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">Hello @UserManager.GetUserName(User)!</a>
+        <a id="manage" class="nav-link" asp-area="Identity" asp-page="/Account/Manage/Index" title="Manage">@UserManager.GetUserName(User)</a>
     </li>
     <li class="nav-item">
         <form id="logoutForm" class="form-inline" asp-area="Identity" asp-page="/Account/Logout" asp-route-returnUrl="@Url.Page("/Index", new { area = "" })">
-            <button id="logout" type="submit" class="nav-link btn btn-link text-dark">Logout</button>
+            <button id="logout" type="submit" class="nav-link btn btn-link">Logout</button>
         </form>
     </li>
 }
diff --git a/Selector.Web/scripts/Now/Spotify.ts b/Selector.Web/scripts/Now/Spotify.ts
index 8954e67..16510b6 100644
--- a/Selector.Web/scripts/Now/Spotify.ts
+++ b/Selector.Web/scripts/Now/Spotify.ts
@@ -103,7 +103,7 @@ export let AudioFeatureChartCard: Vue.Component = {
                 elements: {
                     line: {
                         borderWidth: 4,
-                        borderColor: "#3a3a3a",
+                        borderColor: "#a34c77",
                         backgroundColor: "#727272",
                         borderCapStyle: "round",
                         borderJoinStyle: "round"