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

Refactored notifications buttons

Browse Source
This commit is contained in:
Vladimir Volek 2018-08-29 11:33:17 +02:00
parent a4720fc2e3
commit 59ce098c92
3 changed files with 60 additions and 16 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/components/Button/index.js
View File

@ -41,6 +41,30 @@ const Wrapper = styled.button`
}
`}
${props => props.color === 'red' && css`
background: transparent;
border: 1px solid ${colors.ERROR_PRIMARY};
color: ${colors.ERROR_SECONDARY};
padding: 12px 58px;
&:hover {
color: ${colors.WHITE};
background: ${colors.ERROR_PRIMARY};
}
`}
${props => props.color === 'orange' && css`
background: transparent;
border: 1px solid ${colors.WARNING_PRIMARY};
color: ${colors.WARNING_SECONDARY};
padding: 12px 58px;
&:hover {
color: ${colors.WHITE};
background: ${colors.WARNING_PRIMARY};
}
`}
${props => props.color === 'white' && css`
background: ${colors.WHITE};
color: ${colors.TEXT_SECONDARY};

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

@ -76,9 +76,28 @@ const CloseClick = styled.div``;
export const Notification = (props: NProps): React$Element<string> => {
const close: Function = typeof props.close === 'function' ? props.close : () => {}; // TODO: add default close action
const actionButtons = props.actions ? props.actions.map((a, i) => (
<button key={i} onClick={(event) => { close(); a.callback(); }} className="transparent">{ a.label }</button>
)) : null;
const getButtonColor = (type) => {
let color;
switch (type) {
case 'info':
color = 'blue';
break;
case 'error':
color = 'red';
break;
case 'warning':
color = 'orange';
break;
case 'success':
color = 'green';
break;
default:
color = null;
}
return color;
};
return (
<Wrapper type={props.className}>
@ -92,18 +111,19 @@ export const Notification = (props: NProps): React$Element<string> => {
<H2>{ props.title }</H2>
{ props.message && <p dangerouslySetInnerHTML={{ __html: props.message }} /> }
</Body>
{ props.actions && props.actions.length > 0 ? (
{ props.actions && props.actions.length > 0 && (
<ActionContent>
{props.actions
.map(action => (
<Button
color={props.className}
color={getButtonColor(props.className)}
text={action.label}
onClick={() => { close(); action.callback(); }}
/>
))}
</ActionContent>
) : null }
)
}
{ props.loading && <Loader size={50} /> }
</Wrapper>

20
src/styles/notification.less
View File

@ -23,16 +23,16 @@
}
}
&.info {
.notification-action button {
border: 1px solid @color_info_primary;
color: @color_info_primary;
&:hover {
color: @color_white;
background: @color_info_primary;
}
}
}
// &.info {
// .notification-action button {
// border: 1px solid @color_info_primary;
// color: @color_info_primary;
// &:hover {
// color: @color_white;
// background: @color_info_primary;
// }
// }
// }
&.success {