need list reformatting- button does not span whole list element

3 files changed, 30 insertions, 10 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 c42dfda..74dbc34 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
@@ -5,7 +5,7 @@
     border-radius: 5px;
 }
 
-div, li > button {
+div {
     border: 2px solid #000;
     border-radius: 5px;
     padding: 5px;
@@ -17,17 +17,26 @@ ul {
     padding-inline-start: 0px;
 }
 
-li > button {
-    width: 98%;
-    padding: 1%;
-    margin: 1%;
+li {
     display: flex;
     justify-content: space-between;
     align-items: center;
     transition: all 0.3s ease;
     font-weight: bold;
+    border: 2px solid #000;
+    border-radius: 5px;
+    margin: 5px;
+    
+    > button {
+        width: 90%;
+        float: left;
+        transition: all 0.3s ease;
+        font-weight: bold;
+        display: flex;
+    }
 }
 
+
 li > button span {
     font-style: italic;
     font-weight: normal;
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 741b899..b31ccf0 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
@@ -13,13 +13,19 @@
 <h2 *ngIf="searchResults.length == 0"> No Results Found </h2>
 
 <ul>
-    <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')" >
-        <button [routerLink]="'/need/' + need.id">
+    <li *ngFor="let need of searchResults" id="need-button-{{need.id}}" >
+        <button [routerLink]="'/need/' + need.id" (mouseenter) ="changeText(need.id, '(details)')" (mouseleave)="changeText(need.id, '')">
             <p>{{need.name}}<span id="hover-status-label-{{need.id}}"> </span></p>
+        </button>
+
+        <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
+        <section *ngIf="isManager()">
+            <button (click)="select(need)">
+                <img class="icon" src="/edit.png" alt="Select">
+            </button>
             <button (click)="delete(need.id)" *ngIf="isManager()"> 
                 <img class="icon" src="/delete.png" alt="Delete">
             </button>
-            <button (click)="add(need)" *ngIf="isHelper()">Add To Basket</button>
-        </button>
+        </section>
     </li>
 </ul>
\ No newline at end of file
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 0f86921..e47929b 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
@@ -11,6 +11,7 @@ import { userType } from '../../models/User';
   styleUrl: './need-list.component.css'
 })
 export class NeedListComponent {
+  selectedNeed: Need | undefined;
   needs: Need[] = [];
   searchResults: Need[] = [];
 
@@ -109,4 +110,8 @@ export class NeedListComponent {
   back() {
     this.searchResults = this.needs;
   }
-}
+
+  select(need : Need) {
+    this.selectedNeed = need;
+  }
+}
\ No newline at end of file