From 1d4073c04aac11226fa3394ba84a745ed427d1cd Mon Sep 17 00:00:00 2001
From: Gunther6070 <haydenhartman10@yahoo.com>
Date: Sat, 5 Apr 2025 23:26:11 -0400
Subject: Updated dashboard styling

---
 .../components/dashboard/dashboard.component.html  | 30 +++++++++++++++-------
 1 file changed, 21 insertions(+), 9 deletions(-)

(limited to 'ufund-ui/src/app/components/dashboard/dashboard.component.html')

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>
-- 
cgit v1.2.3