arno/trezor-wallet
1
0
Fork 0
mirror of https://github.com/trezor/trezor-wallet synced 2025-01-01 03:40:53 +00:00
Code Issues Releases Wiki Activity

fix notification layout

Browse Source
This commit is contained in:
slowbackspace 2019-01-14 13:11:26 +01:00
parent e24574d70b
commit ea804969cd
1 changed files with 51 additions and 43 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -27,14 +27,20 @@ type Props = {
const Wrapper = styled.div` const Wrapper = styled.div`
width: 100%; width: 100%;
position: relative; position: relative;
padding: 24px 48px 9px 24px; display: flex;
justify-content: center;
color: ${props => getPrimaryColor(props.type)};
background: ${props => getSecondaryColor(props.type)};
`;
const Content = styled.div`
width: 100%;
max-width: 1170px;
padding: 24px;
display: flex; display: flex;
flex-direction: row; flex-direction: row;
text-align: left; text-align: left;
justify-content: center;
align-items: center; align-items: center;
color: ${props => getPrimaryColor(props.type)};
background: ${props => getSecondaryColor(props.type)};
`; `;
const Body = styled.div` const Body = styled.div`
@ -42,7 +48,6 @@ const Body = styled.div`
`; `;
const Message = styled.div` const Message = styled.div`
padding-bottom: 13px;
font-size: ${FONT_SIZE.SMALL}; font-size: ${FONT_SIZE.SMALL};
`; `;
@ -56,7 +61,9 @@ const CloseClick = styled.div`
position: absolute; position: absolute;
right: 0; right: 0;
top: 0; top: 0;
padding: 20px 10px 0 0; padding-right: inherit;
padding-top: inherit;
cursor: pointer;
`; `;
const StyledIcon = styled(Icon)` const StyledIcon = styled(Icon)`
@ -86,7 +93,6 @@ const ActionContent = styled.div`
display: flex; display: flex;
justify-content: right; justify-content: right;
align-items: flex-end; align-items: flex-end;
padding-bottom: 14px;
`; `;
const Notification = (props: Props): React$Element<string> => { const Notification = (props: Props): React$Element<string> => {
@ -94,43 +100,45 @@ const Notification = (props: Props): React$Element<string> => {
return ( return (
<Wrapper className={props.className} type={props.type}> <Wrapper className={props.className} type={props.type}>
{props.loading && <Loader size={50} /> } <Content>
{props.cancelable && ( {props.loading && <Loader size={50} /> }
<CloseClick onClick={() => close()}> {props.cancelable && (
<Icon <CloseClick onClick={() => close()}>
color={getPrimaryColor(props.type)} <Icon
icon={icons.CLOSE} color={getPrimaryColor(props.type)}
size={20} icon={icons.CLOSE}
/> size={20}
</CloseClick> />
)} </CloseClick>
<Body>
<IconWrapper>
<StyledIcon
color={getPrimaryColor(props.type)}
icon={getIcon(props.type)}
/>
</IconWrapper>
<Texts>
<Title>{ props.title }</Title>
{ props.message ? <Message>{props.message}</Message> : '' }
</Texts>
</Body>
<AdditionalContent>
{props.actions && props.actions.length > 0 && (
<ActionContent>
{props.actions.map(action => (
<NotificationButton
key={action.label}
type={props.type}
isLoading={props.isActionInProgress}
onClick={() => { close(); action.callback(); }}
>{action.label}
</NotificationButton>
))}
</ActionContent>
)} )}
</AdditionalContent> <Body>
<IconWrapper>
<StyledIcon
color={getPrimaryColor(props.type)}
icon={getIcon(props.type)}
/>
</IconWrapper>
<Texts>
<Title>{ props.title }</Title>
{ props.message ? <Message>{props.message}</Message> : '' }
</Texts>
</Body>
<AdditionalContent>
{props.actions && props.actions.length > 0 && (
<ActionContent>
{props.actions.map(action => (
<NotificationButton
key={action.label}
type={props.type}
isLoading={props.isActionInProgress}
onClick={() => { close(); action.callback(); }}
>{action.label}
</NotificationButton>
))}
</ActionContent>
)}
</AdditionalContent>
</Content>
</Wrapper> </Wrapper>
); );
}; };