Added arrow icon

6 years ago · ea27662fc1
parent ae1a40bf3e
commit ea27662fc1
2 changed files with 42 additions and 22 deletions
--- 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 (
            <Wrapper>
                {groupNotifications.length > 1 && (
                    <Header onClick={this.toggle}>
-                        <Icon
-                            color={color}
-                            size={30}
-                            icon={getIcon(type)}
-                        />
-                        <Title
-                            color={color}
-                        >{groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type}
-                        </Title>
+                        <Left>
+                            <Icon
+                                color={color}
+                                size={30}
+                                icon={getIcon(type)}
+                            />
+                            <Title
+                                color={color}
+                            >{groupNotifications.length} {groupNotifications.length > 1 ? `${type}s` : type}
+                            </Title>
+                        </Left>
+                        <Right>
+                            <Icon
+                                icon={ICONS.ARROW_DOWN}
+                                color={colors.TEXT_SECONDARY}
+                                size={24}
+                                isActive={this.state.visible}
+                                canAnimate
+                            />
+                        </Right>
                    </Header>
                )}
                <Body>
--- 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 => (
                    <Group
                        groupNotifications={notificationGroups[group]}
-                        color={getColor(group)}
                        type={group}
                    />
                ))}