Updated dashboard styling

2 files changed, 49 insertions, 9 deletions

diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.css b/ufund-ui/src/app/components/dashboard/dashboard.component.css
index 742a151..303b890 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.css
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.css
@@ -9,3 +9,31 @@
     flex-direction: column;
     gap: 10px;
 }
+
+#stats {
+    display: flex;
+    flex-direction: row;
+    gap: 10px;
+}
+
+.card {
+    background-color: #2e2e2e;
+    width: 400px;
+    height: 130px;
+    border-radius: 5px;
+    padding: 20px;
+    display: flex;
+    flex-direction: column;
+
+}
+
+.listCard {
+    background-color: #2e2e2e;
+    border-radius: 5px;
+    padding: 10px;
+
+}
+
+.content {
+    align-self: end;
+}
diff --git a/ufund-ui/src/app/components/dashboard/dashboard.component.html b/ufund-ui/src/app/components/dashboard/dashboard.component.html
index 074ca76..233096a 100644
--- a/ufund-ui/src/app/components/dashboard/dashboard.component.html
+++ b/ufund-ui/src/app/components/dashboard/dashboard.component.html
@@ -1,15 +1,27 @@
 <div id="box">
     @if ((authService.getCurrentUserSubject() | async)?.type === userType.MANAGER) {
         <h1>Admin Dashboard</h1>
-        <span>_ Registered users</span>
-        <span *ngIf="count"> {{count | async}} </span>
-        <span>_ Fulfilled needs</span>
-        <app-mini-need-list [needList]="fulfilledNeeds.getValue()" label="Fulfilled needs"> </app-mini-need-list>
-        <span>_ Most fulfilled needs</span>
-        <app-mini-need-list [needList]="mostFulfilledNeeds.getValue()" label="Most fulfilled"> </app-mini-need-list>
-        <span>_ Total monetary contributions</span>
-        <span *ngIf="totalDonations">${{totalDonations | async}} </span>
-        <span>_ </span>
+        <div id="stats">
+            <div class="card">
+                <span>Registered users</span>
+                <h1 class="content" *ngIf="count"> {{count | async}} </h1>
+            </div>
+
+            <div class="card">
+                <span>Total monetary contributions</span>
+                <h1 class="content" *ngIf="totalDonations"> ${{totalDonations | async}} </h1>
+            </div>
+        </div>
+
+        <div class="listCard">
+            <span>Fulfilled needs</span>
+            <app-mini-need-list [needList]="fulfilledNeeds.getValue()" label="Fulfilled needs"> </app-mini-need-list>
+        </div>
+        <div class="listCard">
+            <span>Most fulfilled needs</span>
+            <app-mini-need-list [needList]="mostFulfilledNeeds.getValue()" label="Most fulfilled"> </app-mini-need-list>
+        </div>
+
     } @else {
         <h1>Unauthorized</h1>
         <span>This page requires you to be logged in as an admin! <a routerLink="/login">Log In</a></span>