Merge branch 'main' into call-to-action

3 files changed, 12 insertions, 11 deletions

diff --git a/ufund-ui/src/app/components/need-list/need-list.component.css b/ufund-ui/src/app/components/need-list/need-list.component.css
index 60af7bb..38ed4df 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.css
+++ b/ufund-ui/src/app/components/need-list/need-list.component.css
@@ -1,5 +1,5 @@
 .needEntry {
-    background-color: #2e2e2e;
+    background-color: var(--tertiary-color);
     display: flex;
     flex-direction: column;
     border-radius: 5px;
@@ -8,7 +8,7 @@
 #needList {
     display: flex;
     flex-direction: column;
-    gap: 15px
+    gap: 10px
 }
 
 .needName {
@@ -72,7 +72,7 @@
 .urgent {
     font-size: 11pt;
     background-color: rgba(255, 165, 0, 0.27);
-    color: rgba(255, 165, 0, 1);
+    color: light-dark(rgb(138, 93, 0),rgba(255, 165, 0, 1));
     padding: 2px;
     border-radius: 5px;
 }
@@ -88,7 +88,7 @@
 
 .clickable {
     padding: 10px;
-    background-color: #3a3a3a;
+    background-color: var(--secondary-color);
     border-radius: 5px;
     cursor: pointer;
     height: 130px;
@@ -98,7 +98,7 @@
 }
 
 .clickable:hover {
-    background-color: #444444;
+    background-color: var(--hover-color);
 }
 
 .actionArea {
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.html b/ufund-ui/src/app/components/need-list/need-list.component.html
index 1410ce6..99c9f97 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.html
+++ b/ufund-ui/src/app/components/need-list/need-list.component.html
@@ -2,12 +2,12 @@
 <div id="needList">
     <div *ngFor="let need of visibleNeeds" class="needEntry">
         <div [routerLink]="'/need/' + need.id" class="clickable">
-           
+
             <div class="split">
                 <div class="left">
                     <img *ngIf="need.image" alt="Need image" class="need-image" [src]="need.image"/>
                 </div>
-                
+
                 <div class="middle">
                     <span class="needName">{{need.name}}</span>
                     <span class="needType">{{need.type}}</span>
@@ -21,18 +21,18 @@
             <div class="prog">
                 <span id="hover-status-label-{{need.id}}"> </span>
 
-                <span>{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current}}/{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.maxGoal}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
+                <span>{{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.current.toLocaleString()}} / {{need.type.toString() == 'MONETARY' ? '$' : ''}}{{need.maxGoal.toLocaleString()}} ({{((need.current / need.maxGoal) * 100).toFixed(0)}}%)</span>
                 <progress [value]="need.current" [max]="need.maxGoal"></progress>
             </div>
         </div>
-    
+
         <div *ngIf="actionArea" class="actionArea">
             <ng-container [ngTemplateOutlet]="actionArea" [ngTemplateOutletContext]="{$implicit: need}"/>
         </div>
     </div>
 </div>
 
-<div id="page-selector">
+<div *ngIf="itemsPerPage !== Infinity" id="page-selector">
     <button [disabled]="!(currentPage !== 0)" (click)="firstPage()"><span class="icon">first_page</span></button>
     <button [disabled]="!(currentPage > 0)" (click)="decrementPage()"><span class="icon">arrow_back_ios_new</span></button>
     <span>Page {{currentPage + 1}} of {{totalPages}}</span>
diff --git a/ufund-ui/src/app/components/need-list/need-list.component.ts b/ufund-ui/src/app/components/need-list/need-list.component.ts
index 7ca0ae7..b0a012f 100644
--- a/ufund-ui/src/app/components/need-list/need-list.component.ts
+++ b/ufund-ui/src/app/components/need-list/need-list.component.ts
@@ -19,8 +19,8 @@ export class NeedListComponent implements OnChanges {
     totalPages: number = 0;
 
     ngOnChanges() {
-        this.updateVisibleNeeds()
         this.currentPage = parseInt(localStorage.getItem('currentPage'+this.uid) ?? '0') ?? 0;
+        this.updateVisibleNeeds()
     }
 
     getPrefix(need: Need) {
@@ -59,5 +59,6 @@ export class NeedListComponent implements OnChanges {
     }
 
     protected readonly GoalType = GoalType;
+    protected readonly Infinity = Infinity;
 }