better feedback using a <span>

3 files changed, 13 insertions, 7 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 c2b8b90..c42dfda 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
@@ -25,10 +25,16 @@ li > button {
     justify-content: space-between;
     align-items: center;
     transition: all 0.3s ease;
+    font-weight: bold;
+}
+
+li > button span {
+    font-style: italic;
+    font-weight: normal;
 }
 
 li > button:hover p {
-    font-weight: bold;
+    text-decoration: underline;
 }
 
 
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 fc2daa5..741b899 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,9 +13,9 @@
 <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, need.name + '(Click to view)')" (mouseleave)="changeText(need.id, need.name)" >
+    <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">
-            <p id="need-label-{{need.id}}">{{need.name}}</p>
+            <p>{{need.name}}<span id="hover-status-label-{{need.id}}"> </span></p>
             <button (click)="delete(need.id)" *ngIf="isManager()"> 
                 <img class="icon" src="/delete.png" alt="Delete">
             </button>
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 8ae7370..0f86921 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
@@ -79,10 +79,10 @@ export class NeedListComponent {
   }
 
   changeText(id : number, text : string) {
-    const label = document.getElementById('need-label-' + id);
-    if (label) {
-      label.innerHTML = text;
-    }
+    const span = document.getElementById('hover-status-label-' + id);  
+    if (span) {
+      span.innerHTML = ' ' + text;
+    }    
   }
 
   add(need: Need) {