design notification box in post menu area

src/Bundle/ChillMainBundle/Resources/public/vuejs/_components/Notification/NotificationReadToggle.vue

@@ -1,10 +1,42 @@
 <template>
-    <button v-if="isRead" @click="markAsUnread">Marquer non-lu</button>
-    <button v-if="!isRead" @click="markAsRead">Marquer lu</button>
+    <div class="btn-group btn-group-sm float-end"
+         role="group" aria-label="Notification actions">
+
+        <button v-if="isRead"
+                class="btn"
+                :class="overrideClass"
+                type="button"
+                :title="$t('markAsUnread')"
+                @click="markAsUnread"
+                >
+            <i class="fa fa-sm fa-envelope-o"></i>
+            <template v-if="!buttonNoText">
+                {{ $t('markAsUnread') }}
+            </template>
+        </button>
+
+        <button v-if="!isRead"
+                class="btn"
+                :class="overrideClass"
+                type="button"
+                :title="$t('markAsRead')"
+                @click="markAsRead"
+                >
+            <i class="fa fa-sm fa-envelope-open-o"></i>
+            <template v-if="!buttonNoText">
+                {{ $t('markAsRead') }}
+            </template>
+        </button>
+
+        <a v-if="showButton"
+           type="button" class="btn btn-outline-primary"
+           :href="showUrl">
+            <i class="fa fa-sm fa-eye"></i>
+        </a>
+    </div>
 </template>
 
 <script>
-
 import { makeFetch } from 'ChillMainAssets/lib/api/apiMethods.js';
 
 export default {
@@ -17,9 +49,33 @@ export default {
         notificationId: {
             required: true,
             type: Number,
+        },
+        buttonClass: {
+            required: false,
+            type: String
+        },
+        buttonNoText: {
+            required: false,
+            type: Boolean,
+        },
+        showUrl: {
+            required: false,
+            type: String
         }
     },
     emits: ['markRead', 'markUnread'],
+    computed: {
+        overrideClass() {
+            console.log('button', this.buttonClass);
+            return this.buttonClass ? this.buttonClass : 'btn-misc'
+        },
+        buttonHideText() {
+            return this.buttonNoText;
+        },
+        showButton() {
+            return !!this.showUrl
+        }
+    },
     methods: {
         markAsUnread() {
            makeFetch('POST', `/api/1.0/main/notification/${this.notificationId}/mark/unread`, []).then(response => {
@@ -32,9 +88,41 @@ export default {
             })
         },
     },
+    i18n: {
+        messages: {
+            fr: {
+                markAsUnread: 'Marquer comme non-lu',
+                markAsRead: 'Marquer comme lu'
+            }
+        }
+    }
 }
 </script>
 
-<style scoped>
-
+<style lang="scss">
+.notification {
+    h6 {
+        &::before {
+            font-family: "ForkAwesome";
+            font-size: 80%;
+        }
+    }
+    .read {
+        h6 {
+            font-weight: 500;
+            &::before {
+                //content: "\f2b6";  //envelope-open
+                content: "\f2b7";  //envelope-open-o
+            }
+        }
+    }
+    .unread {
+        h6 {
+            &::before {
+                //content: "\f0e0";  //envelope
+                content: "\f003";  //envelope-o
+            }
+        }
+    }
+}
 </style>