Merge branch 'main' into need-list-abstraction

# Conflicts:
#	ufund-ui/src/app/components/cupboard/cupboard.component.ts
#	ufund-ui/src/app/components/funding-basket/funding-basket.component.html
#	ufund-ui/src/app/components/funding-basket/funding-basket.component.ts
#	ufund-ui/src/app/components/need-list/need-list.component.html
#	ufund-ui/src/app/components/need-list/need-list.component.ts
#	ufund-ui/src/app/components/need-page/need-page.component.html

2 files changed, 33 insertions, 17 deletions

diff --git a/ufund-ui/src/app/components/need-page/need-page.component.css b/ufund-ui/src/app/components/need-page/need-page.component.css
index 5a92ee9..f1b7f1f 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.css
+++ b/ufund-ui/src/app/components/need-page/need-page.component.css
@@ -31,6 +31,7 @@
     .left {
         display: flex;
         flex-direction: column;
+        width : 50%;
     }
 
     .right {
@@ -40,6 +41,15 @@
     }
 }
 
+.need-image {
+    width: 400px;
+    height: auto;
+    aspect-ratio: 16/9;
+    object-fit: cover;
+    border-radius: 10px;
+    box-shadow: rgb(0, 40, 70) 0 0 50px;
+}
+
 .urgent {
     font-size: 11pt;
     background-color: rgba(255, 165, 0, 0.27);
diff --git a/ufund-ui/src/app/components/need-page/need-page.component.html b/ufund-ui/src/app/components/need-page/need-page.component.html
index 592a71e..ff5990f 100644
--- a/ufund-ui/src/app/components/need-page/need-page.component.html
+++ b/ufund-ui/src/app/components/need-page/need-page.component.html
@@ -2,35 +2,41 @@
     @if (need) {
         <h1>{{need.name}}</h1>
         <span class="needType">{{need.type}} GOAL</span>
-
-        <img *ngIf="need.image" alt="Need image" [src]="need.image"/>
-
         <p>{{need.description}}</p>
         <div class="prog">
             <progress [value]="need.current" [max]="need.maxGoal"></progress>
             <span>This goal is <strong>{{(((need.current)*100) / (need.maxGoal)).toFixed(0)}}%</strong> complete!</span>
         </div>
 
-        <span><strong>Target Goal:</strong> {{need.maxGoal}}</span>
 
-        <span><strong>Amount Currently Collected:</strong> {{need.current}}</span>
+        <div class="split">
+          <div class="left">
+            <span><strong>Target Goal:</strong> {{(need.type === GoalType.MONETARY) ? "$" : ""}}{{need.maxGoal}}</span>
 
-        <span><strong>Location:</strong> {{need.location}}</span>
+            <span><strong>Amount Currently Collected:</strong> {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}}</span>
 
-        <span><strong>Urgency: </strong>
-            <span *ngIf="!need.urgent">Not urgent</span>
-            <span *ngIf="need.urgent" class="urgent">URGENT</span>
-        </span>
+            <span><strong>Location:</strong> {{need.location}}</span>
 
-        <div *ngIf="need.filterAttributes?.length">
-            <strong>Tags:</strong>
-            <ul style="display: flex; column-gap: 24px;">
-                <li *ngFor="let tag of need?.filterAttributes">
-                    <p>{{tag}}</p>
-                </li>
-            </ul>
+                <span><strong>Urgency: </strong>
+                    <span *ngIf="!need.urgent">Not urgent</span>
+                    <span *ngIf="need.urgent" class="urgent">URGENT</span>
+                </span>
+
+            <div *ngIf="need.filterAttributes?.length">
+                    <strong>Tags:</strong>
+                    <ul style="display: flex; column-gap: 24px;">
+                        <li *ngFor="let tag of need?.filterAttributes">
+                            <p>{{tag}}</p>
+                        </li>
+                    </ul>
+                </div>
+            </div>
+            <div class="right">
+              <img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/>
+            </div>
         </div>
 
+
         <div class="actionArea">
             <button *ngIf="usersService.isHelper()" (click)="add(need)" [disabled]="usersService.inBasket(usersService.getBasket() | async, need)">
                 <span class="icon">{{usersService.inBasket(usersService.getBasket() | async, need)? "check": "add" }}</span>Add To Basket