diff --git a/sass/notifications.scss b/sass/notifications.scss index 4c97547b..3cec306b 100644 --- a/sass/notifications.scss +++ b/sass/notifications.scss @@ -81,67 +81,63 @@ $unread_notifications_dot_size: 8px; } } -.controller-notifications { - .notificationPage, - .notificationsPage { - font-family: 'din-regular', Sans-Serif; +.notificationPage, +.notificationsPage { + font-family: 'din-regular', Sans-Serif; - & a:hover { - text-decoration: none; + & a:hover { + text-decoration: none; + } + + & > .notification-title { + border-bottom: 1px solid #eee; + padding-bottom: 0.25em; + margin-bottom: 0.5em; + } + + .back { + margin-top: 1em; + } +} + +.notificationsPage { + header { + margin-bottom: 0; + } + + .emptyInbox { + padding-top: 15px; + } +} + +.notificationPage { + .thirty-two-avatar { + display: inline-block; + width: 32px; + height: 32px; + border-radius: 16px; + vertical-align: middle; + } + + .button { + line-height: 32px; + + img { + margin-top: 8px; } - & > .notification-title { - border-bottom: 1px solid #eee; - padding-bottom: 0.25em; - margin-bottom: 0.5em; - } - - .back { - margin-top: 1em; + &.decline { + background: #DB5D5D; + &:hover { + background: #DC4B4B; + } } } - .notificationsPage { - header { - margin-bottom: 0; - } - - .emptyInbox { - padding-top: 15px; - } - } - - - - .notificationPage { - .thirty-two-avatar { - display: inline-block; - width: 32px; - height: 32px; - border-radius: 16px; - vertical-align: middle; - } - - .button { - line-height: 32px; - - img { - margin-top: 8px; - } - - &.decline { - background: #DB5D5D; - &:hover { - background: #DC4B4B; - } - } - } - - .notification-body { - p, div { - margin: 1em auto; - line-height: 20px; - } + .notification-body { + p, div { + margin: 1em auto; + line-height: 20px; } } } diff --git a/src/Metamaps/GlobalUI/Notifications.js b/src/Metamaps/GlobalUI/Notifications.js index 2ed7238d..1b93d2cd 100644 --- a/src/Metamaps/GlobalUI/Notifications.js +++ b/src/Metamaps/GlobalUI/Notifications.js @@ -7,7 +7,7 @@ const Notifications = { notificationsLoading: false, unreadNotificationsCount: 0, init: serverData => { - Notifications.unreadNotificationsCount = serverData.unreadNotificationsCount + Notifications.unreadNotificationsCount = serverData.ActiveMapper.unread_notifications_count }, fetchNotifications: render => { Notifications.notificationsLoading = true diff --git a/src/components/NotificationBox.js b/src/components/NotificationBox.js index fdb836f6..b3669de4 100644 --- a/src/components/NotificationBox.js +++ b/src/components/NotificationBox.js @@ -61,11 +61,11 @@ class NotificationBox extends Component { } render = () => { - const { loading } = this.props + const { notifications, loading } = this.props return
} diff --git a/src/routes/Notifications/Notifications.js b/src/routes/Notifications/Notifications.js index a1f96cfd..bfe92b75 100644 --- a/src/routes/Notifications/Notifications.js +++ b/src/routes/Notifications/Notifications.js @@ -27,7 +27,7 @@ class Notifications extends Component { render = () => { const { notificationsLoading, markAsRead, markAsUnread } = this.props const notifications = (this.props.notifications || []).filter(n => !(BLACKLIST.indexOf(n.type) > -1 && (!n.data.object || !n.data.map))) - if (notificationsLoading) { + if (notifications.length === 0 && notificationsLoading) { return (