mirror of
https://github.com/trezor/trezor-wallet
synced 2024-11-13 20:08:56 +00:00
Refactored notifications buttons
This commit is contained in:
parent
a4720fc2e3
commit
59ce098c92
@ -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};
|
||||
|
@ -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>
|
||||
|
@ -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 {
|
||||
|
||||
|
Loading…
Reference in New Issue
Block a user