diff options
| -rw-r--r-- | src/components/extra_notifications/extra_notifications.vue | 58 |
1 files changed, 32 insertions, 26 deletions
diff --git a/src/components/extra_notifications/extra_notifications.vue b/src/components/extra_notifications/extra_notifications.vue index 7e09e5cc..4f32c04f 100644 --- a/src/components/extra_notifications/extra_notifications.vue +++ b/src/components/extra_notifications/extra_notifications.vue @@ -1,30 +1,39 @@ <template> <div class="ExtraNotifications"> - <router-link - v-if="shouldShowChats" - class="button-unstyled -link extra-notification" - :to="{ name: 'chats', params: { username: currentUser.screen_name } }" - > - {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }} - </router-link> - <router-link - v-if="shouldShowAnnouncements" - class="button-unstyled -link extra-notification" - :to="{ name: 'announcements' }" - > - {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }} - </router-link> - <router-link - v-if="shouldShowFollowRequests" - class="button-unstyled -link extra-notification" - :to="{ name: 'friend-requests' }" - > - {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }} - </router-link> + <div class="notification unseen"> + <div class="notification-overlay"></div> + <router-link + v-if="shouldShowChats" + class="button-unstyled -link extra-notification-link" + :to="{ name: 'chats', params: { username: currentUser.screen_name } }" + > + {{ $tc('notifications.unread_chats', unreadChatCount, { num: unreadChatCount }) }} + </router-link> + </div> + <div class="notification unseen"> + <div class="notification-overlay"></div> + <router-link + v-if="shouldShowAnnouncements" + class="button-unstyled -link extra-notification-link" + :to="{ name: 'announcements' }" + > + {{ $tc('notifications.unread_announcements', unreadAnnouncementCount, { num: unreadAnnouncementCount }) }} + </router-link> + </div> + <div class="notification unseen"> + <div class="notification-overlay"></div> + <router-link + v-if="shouldShowFollowRequests" + class="button-unstyled -link extra-notification-link" + :to="{ name: 'friend-requests' }" + > + {{ $tc('notifications.unread_follow_requests', followRequestCount, { num: followRequestCount }) }} + </router-link> + </div> <i18n-t v-if="shouldShowCustomizationTip" tag="span" - class="extra-notification tip" + class="notification tip" keypath="notifications.configuration_tip" > <template #theSettings> @@ -58,12 +67,9 @@ flex-direction: column; align-items: stretch; - .extra-notification { + .notification { width: 100%; padding: 1em; - } - - .extra-notification { border-bottom: 1px solid; border-color: $fallback--border; border-color: var(--border, $fallback--border); |