arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-11 16:41:06 +00:00
Code Issues Releases Wiki Activity

Better style for notifications

Browse Source
This commit is contained in:
Vladimir Volek 2018-10-01 15:54:35 +02:00 committed by Szymon Lesisz
parent 6fbb76b165
commit 2c2fdf4913
1 changed files with 32 additions and 15 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,7 @@
/* @flow */ /* @flow */
import React from 'react'; import React from 'react';
import media from 'styled-media-query';
import { bindActionCreators } from 'redux'; import { bindActionCreators } from 'redux';
import { connect } from 'react-redux'; import { connect } from 'react-redux';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
@ -60,11 +61,19 @@ const Wrapper = styled.div`
color: ${colors.ERROR_PRIMARY}; color: ${colors.ERROR_PRIMARY};
background: ${colors.ERROR_SECONDARY}; background: ${colors.ERROR_SECONDARY};
`} `}
${media.lessThan('610px')`
flex-direction: column;
`}
`; `;
const Body = styled.div` const Body = styled.div`
display: flex; display: flex;
margin-right: 40px; width: 60%;
${media.lessThan('610px')`
width: 100%;
`}
`; `;
const Title = styled.div` const Title = styled.div`
@ -86,28 +95,36 @@ const Message = styled.div`
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
position: relative; position: relative;
top: -7px; top: -7px;
min-width: 20px;
`; `;
const MessageContent = styled.div` const IconWrapper = styled.div`
height: 20px; min-width: 20px;
display: flex;
`; `;
const Texts = styled.div` const Texts = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
flex: 1;
`; `;
const AdditionalContent = styled.div` const AdditionalContent = styled.div`
flex: 1;
display: flex; display: flex;
justify-content: flex-end; justify-content: flex-end;
align-items: flex-end; align-items: flex-end;
flex: 1;
`; `;
const ActionContent = styled.div` const ActionContent = styled.div`
display: flex;
justify-content: right; justify-content: right;
align-items: flex-end; align-items: flex-end;
${media.lessThan('610px')`
width: 100%;
padding: 10px 0 0 30px;
align-items: flex-start;
`}
`; `;
export const Notification = (props: NProps): React$Element<string> => { export const Notification = (props: NProps): React$Element<string> => {
@ -127,20 +144,20 @@ export const Notification = (props: NProps): React$Element<string> => {
</CloseClick> </CloseClick>
)} )}
<Body> <Body>
<MessageContent> <IconWrapper>
<StyledIcon <StyledIcon
color={getColor(props.type)} color={getColor(props.type)}
icon={getIcon(props.type)} icon={getIcon(props.type)}
/> />
<Texts> </IconWrapper>
<Title>{ props.title }</Title> <Texts>
{ props.message && ( <Title>{ props.title }</Title>
<Message> { props.message && (
<p dangerouslySetInnerHTML={{ __html: props.message }} /> <Message>
</Message> <p dangerouslySetInnerHTML={{ __html: props.message }} />
) } </Message>
</Texts> ) }
</MessageContent> </Texts>
</Body> </Body>
<AdditionalContent> <AdditionalContent>
{props.actions && props.actions.length > 0 && ( {props.actions && props.actions.length > 0 && (