Finish Mention.feature 🥒

cypress/integration/common/steps.js

@@ -301,7 +301,7 @@ When('I log in with the following credentials:', table => {
 
 When('open the notification menu and click on the first item', () => {
   cy.get('.notifications-menu').click()
-  cy.get('.notifications-menu-popover a').first().click()
+  cy.get('.notification-mention-post').first().click()
 })
 
 Then('see {int} unread notifications in the top menu', count => {
@@ -327,7 +327,9 @@ When('mention {string} in the text', (mention) => {
 })
 
 Then('the notification gets marked as read', () => {
+  cy.get('.notification').first().should('have.class', 'read')
 })
 
 Then('there are no notifications in the top menu', () => {
+  cy.get('.notifications-menu').should('contain', '0')
 })

webapp/components/notifications/Notification/index.vue

@@ -1,5 +1,8 @@
 <template>
-  <ds-space margin-bottom="x-small">
+  <ds-space
+    :class='{"notification": true, "read": notification.read}'
+    margin-bottom="x-small"
+  >
     <no-ssr>
       <ds-space margin-bottom="x-small">
         <hc-user
@@ -22,7 +25,6 @@
         <ds-card
           :header="post.title"
           :image="post.image"
-          :class="{'post-card': true, 'disabled-content': post.disabled}"
           hover
           space="x-small"
         >

webapp/components/notifications/NotificationMenu/index.vue

@@ -1,6 +1,7 @@
 <template>
   <ds-button
     v-if="totalNotifications <= 0"
+    class="notifications-menu"
     disabled
     icon="bell"
   >