From 3d168e99464396be83a5e962d7e94987315f2f7b Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?J=C3=B3zsef=20Sallai?= <jozsef@sallai.me>
Date: Fri, 17 Jul 2020 01:24:28 +0300
Subject: [PATCH] =?UTF-8?q?=F0=9F=92=84=20Make=20notifications=20use=20the?=
 =?UTF-8?q?mable=20classes?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 assets/styles/global/modifiers/_theming.scss  |  4 ++
 .../notifications/OkUserNotifications.vue     | 43 ++++++++++++++++---
 .../notification/OkUserNotification.vue       |  8 +---
 .../components/OkNotificationContents.vue     |  4 +-
 4 files changed, 45 insertions(+), 14 deletions(-)

diff --git a/assets/styles/global/modifiers/_theming.scss b/assets/styles/global/modifiers/_theming.scss
index 96d57e6e..81067b49 100644
--- a/assets/styles/global/modifiers/_theming.scss
+++ b/assets/styles/global/modifiers/_theming.scss
@@ -188,6 +188,10 @@
   border-top: 1px solid var(--primary-invert-color-80) !important;
 }
 
+.ok-has-border-bottom-accent {
+  border-bottom: 1px solid var(--accent-color) !important;
+}
+
 .ok-has-border-color-primary-highlight {
   border-color: var(--primary-highlight-color) !important;
 }
diff --git a/components/notifications/OkUserNotifications.vue b/components/notifications/OkUserNotifications.vue
index 234e63b3..f36b63fd 100644
--- a/components/notifications/OkUserNotifications.vue
+++ b/components/notifications/OkUserNotifications.vue
@@ -1,13 +1,31 @@
 <template>
     <section class="notifications-container">
         <b-tabs position="is-centered" expanded @change="onTabChange">
-            <b-tab-item :label="$t('components.notifications.general_tab_label')">
+            <b-tab-item>
+                <template slot="header">
+                    <div
+                        class="ok-notification-tab has-padding-10 ok-has-text-primary-invert"
+                        :class="{ 'ok-has-border-bottom-accent': currentTabIndex === 0 }"
+                    >
+                        {{ $t('components.notifications.general_tab_label') }}
+                    </div>
+                </template>
+
                 <ok-user-notifications-stream
                     :notificationTypes="generalNotificationTypes"
                     v-if="shouldGeneralTabRender"
                 ></ok-user-notifications-stream>
             </b-tab-item>
-            <b-tab-item :label="$t('components.notifications.requests_tab_label')">
+            <b-tab-item>
+                <template slot="header">
+                    <div
+                        class="ok-notification-tab has-padding-10 ok-has-text-primary-invert"
+                        :class="{ 'ok-has-border-bottom-accent': currentTabIndex === 1 }"
+                    >
+                        {{ $t('components.notifications.requests_tab_label') }}
+                    </div>
+                </template>
+
                 <ok-user-notifications-stream
                     :notificationTypes="requestsNotificationTypes"
                     v-if="shouldRequestsTabRender"
@@ -35,11 +53,14 @@
         shouldGeneralTabRender = true;
         shouldRequestsTabRender = false;
         hasForcefullyReRendered = false;
+        currentTabIndex = 0;
 
         onTabChange(idx) {
             if (idx === 1) {
                 this.shouldRequestsTabRender = true;
             }
+
+            this.currentTabIndex = idx;
         }
 
         forceReRender() {
@@ -62,9 +83,21 @@
         }
 
         .tabs {
-            padding: 10px;
-            a, a:hover {
-                text-decoration: none !important;
+            li {
+                a {
+                    display: block;
+                    text-align: center;
+                    margin-bottom: 0;
+
+                    &:hover {
+                        text-decoration: none !important;
+                    }
+
+                    .ok-notification-tab {
+                        border-bottom: 2px solid transparent;
+                        border-bottom-width: 2px !important;
+                    }
+                }
             }
         }
     }
diff --git a/components/notifications/components/notification/OkUserNotification.vue b/components/notifications/components/notification/OkUserNotification.vue
index ff01982c..5625dc88 100644
--- a/components/notifications/components/notification/OkUserNotification.vue
+++ b/components/notifications/components/notification/OkUserNotification.vue
@@ -1,5 +1,5 @@
 <template>
-    <article class="ok-notification" :class="{ unread: !notification.read }">
+    <article class="ok-notification" :class="{ 'ok-has-background-primary-highlight': !notification.read }">
         <ok-notification-contents
                 v-if="componentIsReady"
                 :initiator="initiator"
@@ -236,9 +236,3 @@
         }
     }
 </script>
-
-<style lang="scss" scoped>
-    .ok-notification.unread {
-        background: #f5f5f5;
-    }
-</style>
diff --git a/components/notifications/components/notification/components/OkNotificationContents.vue b/components/notifications/components/notification/components/OkNotificationContents.vue
index da3e9b8d..91649029 100644
--- a/components/notifications/components/notification/components/OkNotificationContents.vue
+++ b/components/notifications/components/notification/components/OkNotificationContents.vue
@@ -12,11 +12,11 @@
                 :avatar-size="avatarSize.medium"
             ></ok-user-avatar>
         </div>
-        <div class="notification-body media-content">
+        <div class="notification-body media-content ok-has-text-primary-invert">
             <strong class="notification-body-name" v-if="!community">{{ initiator.profile.name }}</strong>
             <span class="notification-body-username" v-if="!community">@{{ initiator.username }}</span>
             <span class="notification-text has-preserved-whitespace">{{ notificationBody }}</span>
-            <div class="created-at">
+            <div class="created-at subtitle is-7 ok-has-text-primary-invert-80">
                 {{ created | moment("from", "now") }}
             </div>
         </div>