Make admin panel look nicer

src/MistoxWebsite.Client/src/app/pages/store/admin/edititem/edit.component.html

@@ -1,4 +1,5 @@
-<form class="center big-frame background-border" #accountForm="ngForm" (ngSubmit)="onSubmit()">
+<div class="center">
+  <form class="big-frame background-border" style="width: 520px;"  #accountForm="ngForm" (ngSubmit)="onSubmit()">
     <h3>Edit Item</h3>
 
     <div class="frame-item">
@@ -22,14 +23,13 @@
       </div>
 
     <div class="frame-item">
-    <!-- Need to fix for image file upload -->
       <div id="FileUploadPlaceholder" ></div>
-    <input type="file" (change)="onFileSelected($event)" accept="image/*" multiple />
+      <input #FileUpload type="file" (change)="onFileSelected($event)" accept="image/*" multiple />
     </div>
 
     <div class="flex-row">
       <div class="frame-button">
-      <input class="submit" type="submit" value="Create Item" />
+        <input class="submit" type="submit" value="Update Item" />
       </div>
     </div>
 
@@ -39,8 +39,10 @@
   </form>
 
   <!-- Finish file preview for uploads -->
-<div class="center big-frame background-border">
+  <div class="img-frame">
-  <div *ngFor="let cur of imagePreviews" id="imageHolder">
+    <div *ngFor="let cur of imagePreviews" class="image-holder">
+      <input class="delete-button" type="button" value="X" (click)="RemovePhoto(cur)" />
       <img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
     </div>
   </div>
+</div>

src/MistoxWebsite.Client/src/app/pages/store/admin/newitem/new.component.html

@@ -1,4 +1,5 @@
-<form class="center big-frame background-border" #accountForm="ngForm" (ngSubmit)="onSubmit()">
+<div class="center">
+  <form class="big-frame background-border" style="width: 520px;" #accountForm="ngForm" (ngSubmit)="onSubmit()">
     <h3>Create New Item</h3>
 
     <div class="frame-item">
@@ -39,8 +40,9 @@
   </form>
 
   <!-- Finish file preview for uploads -->
-<div class="center big-frame background-border">
+  <div class="img-frame">
-  <div *ngFor="let cur of imagePreviews" id="imageHolder">
+    <div *ngFor="let cur of imagePreviews" class="image-holder">
       <img [src]="cur" alt="Image Preview" style="max-width: 200px;"/>
     </div>
   </div>
+</div>

src/MistoxWebsite.Client/src/styles.css

@@ -23,22 +23,17 @@ main {
 /* CSS used for the Account Activity Pages */
 
 .center {
-    position: relative;
+    display: flex;
-    left: 50%;
+    justify-content: center;
-    top: 50vh;
+    align-items: center;
-    transform: translateY(-50%) translateX(-50%);
+    min-height: 100vh;
 }
 
-.horizontal-center {
+.text-frame {
-    position: relative;
+    margin: 50px !important;
-    left: 50%;
+    max-width: 2200px !important;
-    transform: translateX(-50%);
+    padding: 10px !important;
-}
+    width: auto !important;
-
-.vertical-center {
-    position: relative;
-    top: 50vh;
-    transform: translateY(-50%);
 }
 
 .background-border {
@@ -49,8 +44,9 @@ main {
 .big-frame {
     background-color: var(--Mistox-Black);
     padding: 4px;
-    max-width: 400px;
+    width: 400px;
     color: var(--Mistox-White);
+    margin: 40px;
 }
 
 .big-frame h3{
@@ -149,6 +145,33 @@ main {
         color: var(--Mistox-Bright);
     }
 
+.img-frame {
+    width: 610px;
+}
+
+.image-holder{
+    float: left;
+    border: 1px solid white;
+    width: fit-content;
+    border-radius: 6px;
+}
+
+.delete-button {
+    position: absolute;
+    width: 20px;
+    height: 20px;
+    text-align: center;
+    color: #000;
+    background-color: red;
+    border: none;
+    border-radius: 4px;
+    transform: translate(180px, 0);
+}
+
+    .delete-button:hover{
+        background-color: #890620;
+    }
+
 .submit{
     position: relative;
     padding: 10px 20px;