Stylize the store

ToDo.txt

@@ -14,3 +14,8 @@ ProjectMistData.cs
 
 ForgotPassword Email / Resetpassword Email
     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

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";

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) {

src/MistoxWebsite.Client/Pages/Admin/EditProduct.razor

@@ -1,8 +1,8 @@
 @page "/admin/product/edit"
 @attribute [Authorize(Roles = "Admin")]
 
+<div class="big-frame background-border horizontal-center">
     <h3>EditProduct</h3>
-
     @if( product != null ) {
         <div>
             <span>Name</span>
@@ -10,7 +10,7 @@
         </div>
         <div>
             <span>Description</span>
-        <input type="text" value="@product.Description" />
+            <textarea type="text" value="@product.Description" />
         </div>
         <div>
             <span>Cost</span>
@@ -24,13 +24,13 @@
             @foreach( string img in product.Images ) {
                 <div>
                     <img src="@img" alt="not found" />
-                <input type="button" value="Remove" @onclick="() => { product.Images.Remove(img); }"></input>
+                    <input type="button" value="Remove" @onclick="() => { product.Images.Remove(img); }" />
                 </div>
             }
             <InputFile OnChange="@OnFileUpload" multiple />
         </div>
         <div>
-        <input type="button" value="Submit" @onclick="onSubmit"></input>
+            <input type="button" value="Submit" @onclick="onSubmit" />
         </div>
         <div>
             <span>@Result</span>
@@ -38,6 +38,7 @@
     }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);
     }
 
 }

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 {