Merge pull request #490 from TechnologyEnhancedLearning/Develop/Features/TD-4175-Replace-notification-anchor-with-button

Replace Notification page Delete anchor with button

Author: akdalin-hee

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

@@ -45,8 +45,7 @@
                             </td>
                             <td class="px-sm-3 py-sm-3">
                                 <div class="d-flex justify-content-between" v-if="notification.userDismissable">
-                                    <a href="#deleteModal" data-toggle="modal" @click="selectNotification(notification)">Delete</a>
-                                    &nbsp;<i class="fa-solid fa-trash-can-alt pt-1"></i>
+                                    <button data-target="#deleteModal" data-toggle="modal" @click="selectNotification(notification)">Delete <i class="fa-solid fa-trash-can-alt pt-1"></i></button>
                                 </div>
                             </td>
                         </tr>

LearningHub.Nhs.WebUI/Styles/nhsuk/layout.scss

@@ -183,6 +183,18 @@
     }
 }
 
+button[data-toggle="modal"] {
+    color: #005eb8;
+    padding: 0;
+    border: none;
+    background: none;
+
+    &:focus {
+        background: yellow;
+        border-bottom: 4px solid;
+    }
+}
+
 /* large desktop */
 @media (min-width: px2rem(990)) {