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

6 years ago · d28c49cb08
parent cc19dfc4e0
commit d28c49cb08
4 changed files with 11 additions and 11 deletions
--- a/src/components/Notification/index.js
+++ b/src/components/Notification/index.js
@ -109,12 +109,12 @@ export const Notification = (props: NProps): React$Element<string> => {
    };

    return (
-        <Wrapper type={props.className}>
+        <Wrapper type={props.type}>
            {props.loading && <Loader size={50} /> }
            {props.cancelable && (
                <CloseClick onClick={() => close()}>
                    <Icon
-                        color={getIconColor(props.className)}
+                        color={getIconColor(props.type)}
                        icon={icons.CLOSE}
                        size={20}
                    />
@ -123,8 +123,8 @@ export const Notification = (props: NProps): React$Element<string> => {
            <Body>
                <MessageContent>
                    <StyledIcon
-                        color={getIconColor(props.className)}
-                        icon={icons[props.className.toUpperCase()]}
+                        color={getIconColor(props.type)}
+                        icon={icons[props.type.toUpperCase()]}
                    />
                    <Texts>
                        <Title>{ props.title }</Title>
@ -142,7 +142,7 @@ export const Notification = (props: NProps): React$Element<string> => {
                        {props.actions.map(action => (
                            <NotificationButton
                                key={action.label}
-                                type={props.className}
+                                type={props.type}
                                text={action.label}
                                onClick={() => { close(); action.callback(); }}
                            >{action.label}
@ -160,7 +160,7 @@ export const NotificationGroup = (props) => {
    return notifications.map((n, i) => (
        <Notification
            key={i}
-            className={n.type}
+            type={n.type}
            title={n.title}
            message={n.message}
            cancelable={n.cancelable}
--- a/src/views/Wallet/components/SelectedAccount/index.js
+++ b/src/views/Wallet/components/SelectedAccount/index.js
@ -20,7 +20,7 @@ export type Props = StateProps & DispatchProps;
 const SelectedAccount = (props: Props) => {
    const device = props.wallet.selectedDevice;
    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;
@ -38,7 +38,7 @@ const SelectedAccount = (props: Props) => {
                if (device.available) {
                    return (
                        <section>
-                            <Notification className="info" title="Loading accounts..." />
+                            <Notification type="info" title="Loading accounts..." />
                        </section>
                    );
                }
@ -46,7 +46,7 @@ const SelectedAccount = (props: Props) => {
                return (
                    <section>
                        <Notification
-                            className="info"
+                            type="info"
                            title={`Device ${device.instanceLabel} is unavailable`}
                            message="Change passphrase settings to use this device"
                        />
--- a/src/views/Wallet/views/Acquire/index.js
+++ b/src/views/Wallet/views/Acquire/index.js
@ -36,7 +36,7 @@ const Acquire = (props: Props) => {
            <Notification
                title="Device is used in other window"
                message="Do you want to use your device in this window?"
-                className="info"
+                type="info"
                cancelable={false}
                actions={actions}
            />
--- a/src/views/Wallet/views/UnreadableDevice/index.js
+++ b/src/views/Wallet/views/UnreadableDevice/index.js
@ -22,7 +22,7 @@ const UnreadableDevice = (props: Props) => (
        <Notification
            title="Unreadable device"
            message="Please install bridge"
-            className="error"
+            type="error"
            cancelable={false}
        />
    </Wrapper>