arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2024-12-25 00:18:07 +00:00
Code Issues Releases Wiki Activity

Finalized notifiction refactor

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-29 15:48:05 +02:00
parent a7726081f2
commit 5a3bb77fb0
2 changed files with 29 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

53
src/components/Notification/index.js
View File

@ -19,8 +19,6 @@ const Wrapper = styled.div`
padding: 24px 48px 24px 24px;
display: flex;
flex-direction: row;
flex-wrap: wrap;
justify-content: space-between;
text-align: left;
${props => props.type === 'info' && css`
@ -45,12 +43,13 @@ const Wrapper = styled.div`
`;
const Body = styled.div`
flex: 1;
display: flex;
margin-right: 40px;
flex: 1;
`;
const Title = styled.div`
padding-bottom: 5px;
font-weight: ${FONT_WEIGHT.BIGGER};
`;
@ -64,20 +63,25 @@ const CloseClick = styled.div`
`;
const Message = styled.div`
padding: 5px 0 0 0;
font-size: ${FONT_SIZE.SMALLER};
`;
const IconContent = styled.div`
padding-right: 5px;
`;
const StyledIcon = styled(Icon)`
position: relative;
top: -7px;
`;
const MessageContent = styled.div``;
const MessageContent = styled.div`
height: 20px;
display: flex;
`;
const Texts = styled.div`
display: flex;
flex-direction: column;
`;
const AdditionalContent = styled.div``;
export const Notification = (props: NProps): React$Element<string> => {
const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
@ -117,25 +121,25 @@ export const Notification = (props: NProps): React$Element<string> => {
</CloseClick>
)}
<Body>
<IconContent>
<MessageContent>
<StyledIcon
color={getIconColor(props.className)}
icon={icons[props.className.toUpperCase()]}
/>
</IconContent>
<MessageContent>
<Title>{ props.title }</Title>
{ props.message && (
<Message>
<p dangerouslySetInnerHTML={{ __html: props.message }} />
</Message>
) }
<Texts>
<Title>{ props.title }</Title>
{ props.message && (
<Message>
<p dangerouslySetInnerHTML={{ __html: props.message }} />
</Message>
) }
</Texts>
</MessageContent>
</Body>
{props.actions && props.actions.length > 0 && (
<ActionContent>
{props.actions
.map(action => (
<AdditionalContent>
{props.actions && props.actions.length > 0 && (
<ActionContent>
{props.actions.map(action => (
<NotificationButton
key={action.label}
type={props.className}
@ -143,8 +147,9 @@ export const Notification = (props: NProps): React$Element<string> => {
onClick={() => { close(); action.callback(); }}
/>
))}
</ActionContent>
)}
</ActionContent>
)}
</AdditionalContent>
</Wrapper>
);
};

42
src/views/Wallet/views/Dashboard/index.js
View File

@ -2,8 +2,6 @@ import React from 'react';
import styled from 'styled-components';
import { connect } from 'react-redux';
import { Notification } from 'components/Notification';
import { H2 } from 'components/Heading';
import DashboardImg from 'images/dashboard.png';
@ -34,46 +32,6 @@ const P = styled.p`
const Dashboard = () => (
<Wrapper>
<Notification
title="TITLE TITLE TITLE TITLETITLE TITLE"
message="Config files are missing"
className="error"
actions={[{
label: 'Button action',
callback: () => false,
}]}
/>
<Notification
title="TITLE TITLE TITLE TITLETITLE TITLE"
message="Config files are missing"
className="warning"
actions={[{
label: 'Button action',
callback: () => false,
}]}
/>
<Notification
title="TITLE TITLE TITLE TITLETITLE TITLE"
message="Config files are missing"
className="success"
cancelable={false}
actions={[{
label: 'Button action',
callback: () => false,
}]}
/>
<Notification
title="TITLE TITLE TITLE TITLETITLE TITLE"
message="Description hahahah aloglg lfkdlfkdlfk"
className="info"
actions={[{
label: 'Button action',
callback: () => false,
}]}
/>
<StyledH2>Dashboard</StyledH2>
<Row>
<H2>Please select your coin</H2>