Merge pull request #1006 from TechnologyEnhancedLearning/TD-5304-Anchors-Used-as-Tg

TD-5304-Notifications Page - Anchors are used for buttons

Author: AnjuJose011

LearningHub.Nhs.WebUI/Scripts/vuesrc/notification/notification.vue

@@ -30,7 +30,7 @@
                                 <a href="#" @click="showNotification(notification)">{{ notification.title }}</a>
                             </td>
                             <td class="px-sm-3 py-sm-3">
-                                <div class="d-flex justify-content-between" 
+                                <div class="d-flex justify-content-between"
                                      v-for="item in notificationTypeContent(notification.notificationType)">
                                     {{ item.text }}&nbsp;
                                     <i :class="item.className"></i>
@@ -45,7 +45,7 @@
                             </td>
                             <td class="px-sm-3 py-sm-3">
                                 <div class="d-flex justify-content-between" v-if="notification.userDismissable">
-                                    <button data-target="#deleteModal" class="nhsuk-button nhsuk-u-margin-bottom-0" data-toggle="modal" @click="selectNotification(notification)">Delete</button>
+                                    <button data-target="#deleteModal" class="nhsuk-button" data-toggle="modal" @click="selectNotification(notification)">Delete</button>
                                 </div>
                             </td>
                         </tr>
@@ -74,10 +74,7 @@
                         <i :class="['fal fa-envelope' + (notification.readOnDate != null ? '-open text-success' : '')]">&nbsp;</i>
                         <a href="#" @click="showNotification(notification)">{{ notification.title }}</a>
                     </div>
-
-                    <a href="#deleteModalButton" data-toggle="modal" @click="deleteNotification()" aria-label="Delete" v-if="notification.userDismissable">
-                        <i class="fas fa-ellipsis-h fa-lg" style="color: #435563;"></i>
-                    </a>
+                    <button data-target="#deleteModalButton" class="nhsuk-button" data-toggle="modal" @click="deleteNotification()" aria-label="Delete" v-if="notification.userDismissable">Delete</button>
                 </div>
 
                 <paging v-bind="this.pagingModel" @loadPage="loadPage"></paging>
@@ -173,7 +170,7 @@
                         .catch(e => console.log(e));
                 }
             },
-            async deleteNotification() {                
+            async deleteNotification() {
                 await axios.delete(
                     '/api/notification/' + this.selectedNotification.notificationId + '?userNotificationId=' + this.selectedNotification.id)
                     .catch(e => console.log(e));