1 files changed, 23 insertions, 17 deletions
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