Use "type" instead of "className" in Notification component

pull/9/head
Vasek Mlejnsky 6 years ago
parent cc19dfc4e0
commit d28c49cb08

@ -109,12 +109,12 @@ export const Notification = (props: NProps): React$Element<string> => {
}; };
return ( return (
<Wrapper type={props.className}> <Wrapper type={props.type}>
{props.loading && <Loader size={50} /> } {props.loading && <Loader size={50} /> }
{props.cancelable && ( {props.cancelable && (
<CloseClick onClick={() => close()}> <CloseClick onClick={() => close()}>
<Icon <Icon
color={getIconColor(props.className)} color={getIconColor(props.type)}
icon={icons.CLOSE} icon={icons.CLOSE}
size={20} size={20}
/> />
@ -123,8 +123,8 @@ export const Notification = (props: NProps): React$Element<string> => {
<Body> <Body>
<MessageContent> <MessageContent>
<StyledIcon <StyledIcon
color={getIconColor(props.className)} color={getIconColor(props.type)}
icon={icons[props.className.toUpperCase()]} icon={icons[props.type.toUpperCase()]}
/> />
<Texts> <Texts>
<Title>{ props.title }</Title> <Title>{ props.title }</Title>
@ -142,7 +142,7 @@ export const Notification = (props: NProps): React$Element<string> => {
{props.actions.map(action => ( {props.actions.map(action => (
<NotificationButton <NotificationButton
key={action.label} key={action.label}
type={props.className} type={props.type}
text={action.label} text={action.label}
onClick={() => { close(); action.callback(); }} onClick={() => { close(); action.callback(); }}
>{action.label} >{action.label}
@ -160,7 +160,7 @@ export const NotificationGroup = (props) => {
return notifications.map((n, i) => ( return notifications.map((n, i) => (
<Notification <Notification
key={i} key={i}
className={n.type} type={n.type}
title={n.title} title={n.title}
message={n.message} message={n.message}
cancelable={n.cancelable} cancelable={n.cancelable}

@ -20,7 +20,7 @@ export type Props = StateProps & DispatchProps;
const SelectedAccount = (props: Props) => { const SelectedAccount = (props: Props) => {
const device = props.wallet.selectedDevice; const device = props.wallet.selectedDevice;
if (!device || !device.state) { if (!device || !device.state) {
return (<section><Notification className="info" title="Loading device..." /></section>); return (<section><Notification type="info" title="Loading device..." /></section>);
} }
const accountState = props.selectedAccount; const accountState = props.selectedAccount;
@ -38,7 +38,7 @@ const SelectedAccount = (props: Props) => {
if (device.available) { if (device.available) {
return ( return (
<section> <section>
<Notification className="info" title="Loading accounts..." /> <Notification type="info" title="Loading accounts..." />
</section> </section>
); );
} }
@ -46,7 +46,7 @@ const SelectedAccount = (props: Props) => {
return ( return (
<section> <section>
<Notification <Notification
className="info" type="info"
title={`Device ${device.instanceLabel} is unavailable`} title={`Device ${device.instanceLabel} is unavailable`}
message="Change passphrase settings to use this device" message="Change passphrase settings to use this device"
/> />

@ -36,7 +36,7 @@ const Acquire = (props: Props) => {
<Notification <Notification
title="Device is used in other window" title="Device is used in other window"
message="Do you want to use your device in this window?" message="Do you want to use your device in this window?"
className="info" type="info"
cancelable={false} cancelable={false}
actions={actions} actions={actions}
/> />

@ -22,7 +22,7 @@ const UnreadableDevice = (props: Props) => (
<Notification <Notification
title="Unreadable device" title="Unreadable device"
message="Please install bridge" message="Please install bridge"
className="error" type="error"
cancelable={false} cancelable={false}
/> />
</Wrapper> </Wrapper>

Loading…
Cancel
Save