From c9d9d5bc627fe1574e8e45be79464f02d4b7ee85 Mon Sep 17 00:00:00 2001
From: Harrison Deng <yunyangdeng@gmail.com>
Date: Sat, 5 Jun 2021 03:05:53 -0500
Subject: [PATCH] Made progress on "dark mode" colours.

---
 src/MultiShop/Client/Listing/TableView.razor  | 13 ++++-
 .../Client/Listing/TableView.razor.css        |  8 ++++
 src/MultiShop/Client/Pages/Search.razor.cs    |  6 +--
 src/MultiShop/Client/Pages/Search.razor.css   |  7 ---
 src/MultiShop/Client/Shared/SearchBar.razor   | 10 ++--
 src/MultiShop/Client/wwwroot/css/app.css      | 48 +++++++++++++++++--
 6 files changed, 72 insertions(+), 20 deletions(-)
 create mode 100644 src/MultiShop/Client/Listing/TableView.razor.css

diff --git a/src/MultiShop/Client/Listing/TableView.razor b/src/MultiShop/Client/Listing/TableView.razor
index 5c12b08..d3413bc 100644
--- a/src/MultiShop/Client/Listing/TableView.razor
+++ b/src/MultiShop/Client/Listing/TableView.razor
@@ -3,7 +3,7 @@
 @inherits ListingView
 
 <div class="table-responsive">
-    <table class="table">
+    <table class=@("table" + (ApplicationProfile.DarkMode ? " table-dark" : null))>
         <thead>
             <tr>
                 <th scope="col">Name</th>
@@ -73,8 +73,19 @@
 </div>
 
 @code {
+    [CascadingParameter(Name = "RuntimeDependencyManager")]
+    private RuntimeDependencyManager RuntimeDependencyManager {get; set; }
+
+    private ApplicationProfile ApplicationProfile {get; set;}
+
     public override Views View => Views.Table;
 
+    protected override void OnInitialized()
+        {
+            base.OnInitialized();
+            ApplicationProfile = RuntimeDependencyManager.Get<ApplicationProfile>();
+        }
+    
     private protected override string GetCategoryTag(ResultsProfile.Category c)
     {
         switch (c)
diff --git a/src/MultiShop/Client/Listing/TableView.razor.css b/src/MultiShop/Client/Listing/TableView.razor.css
new file mode 100644
index 0000000..ae63950
--- /dev/null
+++ b/src/MultiShop/Client/Listing/TableView.razor.css
@@ -0,0 +1,8 @@
+tbody > tr > th > div {
+    width: 45em;
+}
+
+.table thead th {
+    border-top-style: none;
+}
+
diff --git a/src/MultiShop/Client/Pages/Search.razor.cs b/src/MultiShop/Client/Pages/Search.razor.cs
index 0a135ca..9650743 100644
--- a/src/MultiShop/Client/Pages/Search.razor.cs
+++ b/src/MultiShop/Client/Pages/Search.razor.cs
@@ -85,8 +85,8 @@ namespace MultiShop.Client.Pages
 
             if (Query != null)
             {
-                searchBar.Searching = true;
-                await PerformSearch(Query);
+                searchBar.Query = Query;
+                await searchBar.Search();
             }
         }
 
@@ -103,7 +103,6 @@ namespace MultiShop.Client.Pages
         {
             if (string.IsNullOrWhiteSpace(query)) return;
             if (status.Searching) return;
-            searchBar.Searching = true;
             SearchProfile searchProfile = activeSearchProfile.DeepCopy();
             status.Searching = true;
             Logger.LogDebug($"Received search request for \"{query}\".");
@@ -170,7 +169,6 @@ namespace MultiShop.Client.Pages
             }
             status.Searching = false;
             status.Searched = true;
-            searchBar.Searching = false;
 
             int tagsAdded = 0;
             foreach (ResultsProfile.Category c in greatest.Keys)
diff --git a/src/MultiShop/Client/Pages/Search.razor.css b/src/MultiShop/Client/Pages/Search.razor.css
index 8db9f50..e69de29 100644
--- a/src/MultiShop/Client/Pages/Search.razor.css
+++ b/src/MultiShop/Client/Pages/Search.razor.css
@@ -1,7 +0,0 @@
-tbody > tr > th > div {
-    width: 45em;
-}
-
-.table.table thead th {
-    border-top-style: none;
-}
\ No newline at end of file
diff --git a/src/MultiShop/Client/Shared/SearchBar.razor b/src/MultiShop/Client/Shared/SearchBar.razor
index 807ccac..32d2464 100644
--- a/src/MultiShop/Client/Shared/SearchBar.razor
+++ b/src/MultiShop/Client/Shared/SearchBar.razor
@@ -3,10 +3,10 @@
 @inject ILogger<SearchBar> Logger
 
 <div @attributes="AdditionalAttributes" class=@groupClassCss>
-    <input type="text" class="form-control" placeholder=@SearchPlaceholder aria-label=@SearchPlaceholder id="search-input" @bind="Query" @onkeyup="@(async (a) => {if (a.Code == "Enter" || a.Code == "NumpadEnter") await Search();})" disabled="@Searching">
+    <input type="text" class="form-control" placeholder=@SearchPlaceholder aria-label=@SearchPlaceholder id="search-input" @bind="Query" @onkeyup="@(async (a) => {if (a.Code == "Enter" || a.Code == "NumpadEnter") await Search();})" autocomplete="off" disabled="@Disabled">
     <div class="input-group-append">
         @Append
-        <button class="btn btn-outline-primary" type="button" @onclick="@(async () => await Search())" disabled="@Searching">Search</button>
+        <button class="btn btn-outline-primary" type="button" @onclick="@(async () => await Search())" disabled="@Disabled">Search</button>
     </div>
 </div>
 
@@ -25,14 +25,14 @@
     [Parameter]
     public EventCallback<string> OnSearchRequested { get; set; }
 
-    public bool Searching { get; set; }
+    public bool Disabled { get; private set; }
 
     private string groupClassCss => "input-group " + (AdditionalAttributes != null && AdditionalAttributes.ContainsKey("class") ? AdditionalAttributes["class"] as string : null);
 
     public async Task Search()
     {
-        Searching = true;
+        Disabled = true;
         await OnSearchRequested.InvokeAsync(Query);
-        Searching = false;
+        Disabled = false;
     }
 }
\ No newline at end of file
diff --git a/src/MultiShop/Client/wwwroot/css/app.css b/src/MultiShop/Client/wwwroot/css/app.css
index f1da7a9..6b8ade4 100644
--- a/src/MultiShop/Client/wwwroot/css/app.css
+++ b/src/MultiShop/Client/wwwroot/css/app.css
@@ -13,7 +13,7 @@ html, body {
 }
 
 .bg-dark {
-    background-color: #2E2E2E !important;
+    background-color: #36383C !important;
 }
 
 nav.bg-dark {
@@ -21,20 +21,62 @@ nav.bg-dark {
 }
 
 .bg-dark .card {
-    background-color: #1F1F1F;
+    border-style: solid;
+    border-width: 2px;
+    background-color: transparent;
+    border-color: #4F5A61;
 }
 
 .bg-dark .jumbotron {
     background-color: #262626;
 }
 
+.text-white {
+    color: whitesmoke;
+}
+
+.bg-dark input {
+    background-color: #4F5A61;
+    border-color: #4F5A61;
+    color: whitesmoke;
+}
+
+.bg-dark input:focus  {
+    background-color: #4F5A61;
+    border-color: #85A6A6;
+    color: whitesmoke;
+}
+
+.bg-dark input:disabled  {
+    background-color: #36383C;
+    color: whitesmoke;
+}
+
+.bg-dark input::placeholder {
+    color: whitesmoke;
+}
+
+.bg-dark a {
+    color: #A9CEC2;
+}
+
+.bg-dark .btn-outline-primary {
+    color: #A9CEC2;
+    border-color: #A9CEC2;
+}
+
+.bg-dark .btn-outline-primary:hover {
+    background-color: #A9CEC2;
+    color: whitesmoke;
+}
+
+
 .content {
     padding-top: 1.5rem;
     padding-right: 2rem;
     padding-left: 2rem;
 }
 
-
 #blazor-error-ui {
     background: lightyellow;
     bottom: 0;