2 files changed, 32 insertions, 45 deletions
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 40af9f5..564f1f0 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
@@ -14,13 +14,9 @@ export class NeedListComponent implements OnChanges {
     @Input() actionArea: TemplateRef<any> | null = null
 
     visibleNeeds: Need[] = [];
-    currentPage: number = 0;
+    currentPage: number = localStorage.getItem('currentPage') ? parseInt(localStorage.getItem('currentPage')!) : 0;
     totalPages: number = 0;
 
-    constructor(
-
-    ) {}
-
     ngOnChanges() {
         this.updateVisibleNeeds()
     }
@@ -29,25 +25,31 @@ export class NeedListComponent implements OnChanges {
         return (need.type === GoalType.MONETARY) ? "$" : "";
     }
 
-    decrementPage() {
-        this.currentPage--;
-        this.updateVisibleNeeds();
-    }
-
-    incrementPage() {
-        this.currentPage++;
-        this.updateVisibleNeeds();
-    }
-
-    lastPage() {
-        this.currentPage = this.totalPages - 1
-        this.updateVisibleNeeds()
-    }
-
-    firstPage() {
-        this.currentPage = 0
-        this.updateVisibleNeeds()
-    }
+  //increment/decrement
+  decrementPage() {
+    this.currentPage--;
+    localStorage.setItem('currentPage', this.currentPage.toString());
+    this.updateVisibleNeeds();
+  }
+
+  incrementPage() {
+    this.currentPage++;
+    localStorage.setItem('currentPage', this.currentPage.toString());
+    this.updateVisibleNeeds();
+  }
+
+  //skipping pages
+  lastPage() {
+      this.currentPage = this.totalPages - 1
+      localStorage.setItem('currentPage', this.currentPage.toString());
+      this.updateVisibleNeeds()
+  }
+
+  firstPage() {
+      this.currentPage = 0
+      localStorage.setItem('currentPage', this.currentPage.toString());
+      this.updateVisibleNeeds()
+  }
 
     updateVisibleNeeds() {
         this.totalPages = Math.ceil(this.needs.length / this.itemsPerPage);
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 f1b7f1f..79d3fb3 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
@@ -4,6 +4,7 @@
 }
 
 #box {
+    padding-top: 7.5%;
     display: flex;
     flex-direction: column;
     width: 800px;
@@ -22,32 +23,16 @@
     /*margin-bottom: 20px;*/
 }
 
-.split {
-    display: flex;
-    flex-direction: row;
-    justify-content: space-between;
-
-
-    .left {
-        display: flex;
-        flex-direction: column;
-        width : 50%;
-    }
-
-    .right {
-        display: flex;
-        flex-direction: column;
-        align-items: end;
-    }
-}
 
 .need-image {
-    width: 400px;
-    height: auto;
+    width: 55%;
+    height: 40%;
+    position: absolute;
+    left: 22.5%;
     aspect-ratio: 16/9;
     object-fit: cover;
+    mask-image: linear-gradient(to bottom, rgba(255,255,255,1) 0%, rgba(255,255,255,.2) 50%, rgba(255,255,255,.1) 90%, transparent 100%);
     border-radius: 10px;
-    box-shadow: rgb(0, 40, 70) 0 0 50px;
 }
 
 .urgent {