mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-24 09:18:09 +00:00
Added arrow icon
This commit is contained in:
parent
ae1a40bf3e
commit
ea27662fc1
@ -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,11 +56,13 @@ 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}>
|
||||
<Left>
|
||||
<Icon
|
||||
color={color}
|
||||
size={30}
|
||||
@ -61,6 +72,16 @@ class Group extends Component {
|
||||
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>
|
||||
|
@ -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,7 +21,8 @@ class NotificationsGroup extends Component {
|
||||
];
|
||||
}
|
||||
|
||||
groupNotifications = notifications => notifications.reduce((acc, obj) => {
|
||||
groupNotifications = notifications => notifications
|
||||
.reduce((acc, obj) => {
|
||||
const key = obj.type;
|
||||
if (!acc[key]) {
|
||||
acc[key] = [];
|
||||
@ -45,7 +45,6 @@ class NotificationsGroup extends Component {
|
||||
{Object.keys(sortedNotifications).map(group => (
|
||||
<Group
|
||||
groupNotifications={notificationGroups[group]}
|
||||
color={getColor(group)}
|
||||
type={group}
|
||||
/>
|
||||
))}
|
||||
|
Loading…
Reference in New Issue
Block a user