1
0
mirror of https://github.com/trezor/trezor-wallet synced 2024-11-30 20:28:09 +00:00

Separate group notifications with border

This commit is contained in:
Vladimir Volek 2018-10-10 17:29:43 +02:00 committed by Szymon Lesisz
parent 4072e9480d
commit 2ed673b05a
2 changed files with 11 additions and 2 deletions

View File

@ -21,6 +21,7 @@ type Props = {
type: string, type: string,
cancelable?: boolean; cancelable?: boolean;
title: string; title: string;
className: string;
message?: string; message?: string;
actions?: Array<CallbackAction>; actions?: Array<CallbackAction>;
close?: typeof NotificationActions.close, close?: typeof NotificationActions.close,
@ -127,7 +128,7 @@ const Notification = (props: Props): React$Element<string> => {
const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
return ( return (
<Wrapper type={props.type}> <Wrapper className={props.className} type={props.type}>
{props.loading && <Loader size={50} /> } {props.loading && <Loader size={50} /> }
{props.cancelable && ( {props.cancelable && (
<CloseClick onClick={() => close()}> <CloseClick onClick={() => close()}>

View File

@ -32,6 +32,14 @@ const Title = styled.div`
color: ${props => props.color}; color: ${props => props.color};
`; `;
const StyledNotification = styled(Notification)`
border-bottom: 1px solid ${props => getColor(props.type)};
&:last-child {
border: 0;
}
`;
class Group extends PureComponent { class Group extends PureComponent {
constructor() { constructor() {
super(); super();
@ -87,7 +95,7 @@ class Group extends PureComponent {
{groupNotifications {groupNotifications
.slice(0, this.state.visibleCount) .slice(0, this.state.visibleCount)
.map(notification => ( .map(notification => (
<Notification <StyledNotification
key={notification.key} key={notification.key}
type={notification.type} type={notification.type}
title={notification.title} title={notification.title}