diff --git a/src/components/Notification/NotificationGroups/components/Group/index.js b/src/components/Notification/NotificationGroups/components/Group/index.js index ea3f5934..38d8b839 100644 --- a/src/components/Notification/NotificationGroups/components/Group/index.js +++ b/src/components/Notification/NotificationGroups/components/Group/index.js @@ -1,22 +1,31 @@ import React, { Component } from 'react'; import styled from 'styled-components'; import Icon from 'components/Icon'; +import ICONS from 'config/icons'; import colors from 'config/colors'; import { Notification } from 'components/Notification'; -import { getIcon } from 'utils/notification'; +import { getIcon, getColor } from 'utils/notification'; const Wrapper = styled.div``; const Header = styled.div` display: flex; cursor: pointer; + justify-content: space-between; background: ${colors.WHITE}; - justify-content: flex-start; align-items: center; padding: 5px 10px; border-bottom: 1px solid ${colors.BACKGROUND}; `; +const Left = styled.div` + display: flex; + justify-content: flex-start; + align-items: center; +`; + +const Right = styled.div``; + const Body = styled.div``; const Title = styled.div` @@ -47,20 +56,32 @@ class Group extends Component { } render() { - const { type, groupNotifications, color } = this.props; + const { type, groupNotifications } = this.props; + const color = getColor(type); return ( {groupNotifications.length > 1 && (
- - {groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type} - + + + {groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type} + + + + +
)} diff --git a/src/components/Notification/NotificationGroups/index.js b/src/components/Notification/NotificationGroups/index.js index bc684b30..715b1da3 100644 --- a/src/components/Notification/NotificationGroups/index.js +++ b/src/components/Notification/NotificationGroups/index.js @@ -1,6 +1,5 @@ import React, { Component } from 'react'; import styled from 'styled-components'; -import { getColor } from 'utils/notification'; import { PRIORITY } from 'constants/notifications'; import Group from './components/Group'; @@ -22,14 +21,15 @@ class NotificationsGroup extends Component { ]; } - groupNotifications = notifications => notifications.reduce((acc, obj) => { - const key = obj.type; - if (!acc[key]) { - acc[key] = []; - } - acc[key].push(obj); - return acc; - }, {}); + groupNotifications = notifications => notifications + .reduce((acc, obj) => { + const key = obj.type; + if (!acc[key]) { + acc[key] = []; + } + acc[key].push(obj); + return acc; + }, {}); sortByPriority(notifications) { return notifications; @@ -45,7 +45,6 @@ class NotificationsGroup extends Component { {Object.keys(sortedNotifications).map(group => ( ))}