From 177a7da5f3d1dc517601755beebf5caa0bdda568 Mon Sep 17 00:00:00 2001
From: Derek Holloway <derek@mistox.com>
Date: Thu, 15 May 2025 21:42:09 -0700
Subject: [PATCH] Stylize the store

---
 ToDo.txt                                      |  7 +-
 .../Account/ActivityPages/ResetPassword.razor |  2 +-
 .../Pages/Admin/CreateProduct.razor           |  3 +-
 .../Pages/Admin/EditProduct.razor             | 76 ++++++++++---------
 .../Pages/Store/Catalog.razor.css             | 32 ++++++--
 5 files changed, 75 insertions(+), 45 deletions(-)

diff --git a/ToDo.txt b/ToDo.txt
index acb0021..7ef9e0e 100755
--- a/ToDo.txt
+++ b/ToDo.txt
@@ -13,4 +13,9 @@ ProjectMistData.cs
     Data inside the sql doesnt match what is inside the database
 
 ForgotPassword Email / Resetpassword Email
-    Needs styles that match the theme of the website
\ No newline at end of file
+    Needs styles that match the theme of the website
+
+Manage / Data tabs in Account settings
+    Theme needs to be updated to match
+    Delete button doesn't shade when mouse hovers
+    frame that comes up isnt themed either
\ No newline at end of file
diff --git a/src/MistoxWebsite.Client/Pages/Account/ActivityPages/ResetPassword.razor b/src/MistoxWebsite.Client/Pages/Account/ActivityPages/ResetPassword.razor
index 3a6a260..551726e 100755
--- a/src/MistoxWebsite.Client/Pages/Account/ActivityPages/ResetPassword.razor
+++ b/src/MistoxWebsite.Client/Pages/Account/ActivityPages/ResetPassword.razor
@@ -57,7 +57,7 @@
                 bool success = result == "true" ? true : false;
                 if (success){
                     Result = "Password changed successfully";
-                    await Task.Delay(2000);
+                    Thread.Sleep(2000);
                     Nav.NavigateTo("/", true);
                 }else{
                     Result = "Something is wrong";
diff --git a/src/MistoxWebsite.Client/Pages/Admin/CreateProduct.razor b/src/MistoxWebsite.Client/Pages/Admin/CreateProduct.razor
index 6e36a50..e6106bf 100755
--- a/src/MistoxWebsite.Client/Pages/Admin/CreateProduct.razor
+++ b/src/MistoxWebsite.Client/Pages/Admin/CreateProduct.razor
@@ -10,7 +10,7 @@
     </div>
     <div>
         <label for="Description">Description</label>
-        <input type="text" placeholder="Description" @bind-value=obj.Description />
+        <textarea type="text" placeholder="Description" @bind-value=obj.Description />
     </div>
     <div>
         <label for="Images">Images</label>
@@ -64,6 +64,7 @@
     public async Task Submit() {
         HttpResponseMessage response = await Http.PostAsJsonAsync( "api/product/create", obj );
         Result = await response.Content.ReadAsStringAsync();
+        Nav.NavigateTo("/store/catalog", true);
     }
 
     public void RemoveImage(int index) {
diff --git a/src/MistoxWebsite.Client/Pages/Admin/EditProduct.razor b/src/MistoxWebsite.Client/Pages/Admin/EditProduct.razor
index e154bf5..3bdd02f 100755
--- a/src/MistoxWebsite.Client/Pages/Admin/EditProduct.razor
+++ b/src/MistoxWebsite.Client/Pages/Admin/EditProduct.razor
@@ -1,43 +1,44 @@
 @page "/admin/product/edit"
 @attribute [Authorize(Roles = "Admin")]
 
-<h3>EditProduct</h3>
-
-@if( product != null ) {
-    <div>
-        <span>Name</span>
-        <input type="text" value="@product.Name" />
-    </div>
-    <div>
-        <span>Description</span>
-        <input type="text" value="@product.Description" />
-    </div>
-    <div>
-        <span>Cost</span>
-        <input type="number" value="@product.Cost" />
-    </div>
-    <div>
-        <span>PurchaseURL</span>
-        <input type="text" value="@product.URL" />
-    </div>
-    <div>
-        @foreach( string img in product.Images ) {
-            <div>
-                <img src="@img" alt="not found" />
-                <input type="button" value="Remove" @onclick="() => { product.Images.Remove(img); }"></input>
-            </div>
-        }
-        <InputFile OnChange="@OnFileUpload" multiple />
-    </div>
-    <div>
-        <input type="button" value="Submit" @onclick="onSubmit"></input>
-    </div>
-    <div>
-        <span>@Result</span>
-    </div>
-}else{
-    <h1>Product Doesnt Exist</h1>
-}
+<div class="big-frame background-border horizontal-center">
+    <h3>EditProduct</h3>
+    @if( product != null ) {
+        <div>
+            <span>Name</span>
+            <input type="text" value="@product.Name" />
+        </div>
+        <div>
+            <span>Description</span>
+            <textarea type="text" value="@product.Description" />
+        </div>
+        <div>
+            <span>Cost</span>
+            <input type="number" value="@product.Cost" />
+        </div>
+        <div>
+            <span>PurchaseURL</span>
+            <input type="text" value="@product.URL" />
+        </div>
+        <div>
+            @foreach( string img in product.Images ) {
+                <div>
+                    <img src="@img" alt="not found" />
+                    <input type="button" value="Remove" @onclick="() => { product.Images.Remove(img); }" />
+                </div>
+            }
+            <InputFile OnChange="@OnFileUpload" multiple />
+        </div>
+        <div>
+            <input type="button" value="Submit" @onclick="onSubmit" />
+        </div>
+        <div>
+            <span>@Result</span>
+        </div>
+    }else{
+        <h1>Product Doesnt Exist</h1>
+    }
+</div>
 
 @code {
 
@@ -75,6 +76,7 @@
     protected async void onSubmit() {
         HttpResponseMessage TestLogin = await Http.PostAsJsonAsync("api/product/update", product);
         Result = await TestLogin.Content.ReadAsStringAsync();
+        Nav.NavigateTo("/store/catalog", true);
     }
 
 }
diff --git a/src/MistoxWebsite.Client/Pages/Store/Catalog.razor.css b/src/MistoxWebsite.Client/Pages/Store/Catalog.razor.css
index 40214e7..5391e0c 100755
--- a/src/MistoxWebsite.Client/Pages/Store/Catalog.razor.css
+++ b/src/MistoxWebsite.Client/Pages/Store/Catalog.razor.css
@@ -1,6 +1,6 @@
 .gameCard {
     position: relative;
-    background-color: var(--Secondary-Button-Color);
+    background-color: var(--Mistox-Black);
     float: left;
     box-sizing: border-box;
     margin: 0;
@@ -9,6 +9,12 @@
     border-radius: 10px;
     break-inside: avoid;
     margin-bottom: 2rem;
+    border: solid 2px var(--Mistox-Background);
+    transition-duration: 1s;
+}
+
+.gameCard :hover{
+    border-color: var(--Mistox-Light);
 }
 
 .gameCard-Name {
@@ -62,7 +68,7 @@
 .gameCard-Next,
 .gameCard-Prev {
     background-color: transparent;
-    color: #fff;
+    color: var(--Mistox-White);
     padding: 16px;
     margin-top: -22px;
     font-size: 18px;
@@ -90,7 +96,7 @@
 .gameCard-Desc {
     font-size: 13px;
     margin: 5px;
-    color: #ccc;
+    color: var(--Mistox-Light);
 }
 
 .gameCard-Price {
@@ -105,17 +111,33 @@
     width: 40%;
     margin: 5px 5%;
     height: 38.4px;
+    color: var(--Mistox-Black);
+    background-color: var(--Mistox-Light);
+    font-size: 16px;
+    text-decoration: none;
+    text-transform: uppercase;
+    overflow: hidden;
+    transition: 0.5s;
+    letter-spacing: 2px;
+    border: 1px solid var(--Mistox-Light);
+    border-radius: 5px;
 }
 
+    .gameCard-Button :hover{
+        background-color: var(--Mistox-Light);
+        color: var(--Mistox-White);
+        box-shadow: 4px 3px 6px var(--Mistox-Dark);
+    }
+
 .cartopen {
     position: absolute;
-    background: #2c2946AA;
+    background: var(--Mistox-Offset);
     right: 10px;
     top: 55px;
     width: 400px;
     border-radius: 5px;
     backdrop-filter: blur(3px);
-    border: 1px solid #00f;
+    border: 1px solid var(--Mistox-Light);
 }
 
 .cartclosed {