m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-12-23 09:52:26 +01:00
Code

Implement modern design for error messages (#11521)

Browse Source
This commit is contained in:
Dan J Miller 2021-07-16 15:36:48 -02:30 committed by GitHub
parent 493448c96e
commit 6f0e54aa26
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
4 changed files with 19 additions and 8 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
ui/components/ui/error-message/error-message.component.js
View File

@ -12,7 +12,7 @@ const ErrorMessage = (props, context) => {
alt=""
className="error-message__icon"
/>
<div className="error-message__text">{`ALERT: ${error}`}</div>
<div className="error-message__text">{error}</div>
</div>
);
};

4
ui/components/ui/error-message/error-message.component.test.js
View File

@ -14,7 +14,7 @@ describe('ErrorMessage Component', () => {
expect(wrapper.find('.error-message')).toHaveLength(1);
expect(wrapper.find('.error-message__icon')).toHaveLength(1);
expect(wrapper.find('.error-message__text').text()).toStrictEqual(
'ALERT: This is an error.',
'This is an error.',
);
});
@ -27,7 +27,7 @@ describe('ErrorMessage Component', () => {
expect(wrapper.find('.error-message')).toHaveLength(1);
expect(wrapper.find('.error-message__icon')).toHaveLength(1);
expect(wrapper.find('.error-message__text').text()).toStrictEqual(
'ALERT: translate testKey',
'translate testKey',
);
});
});

11
ui/components/ui/error-message/error-message.stories.js Normal file
View File

@ -0,0 +1,11 @@
import React from 'react';
import { text } from '@storybook/addon-knobs';
import ErrorMessage from '.';
export default {
title: 'ErrorMessage',
};
export const primaryType = () => (
<ErrorMessage errorMessage={text('Error Message:', 'There was an error!')} />
);

10
ui/components/ui/error-message/index.scss
View File

@ -2,14 +2,14 @@
@include H7;
min-height: 32px;
border: 1px solid $monzo;
color: $monzo;
background: lighten($monzo, 56%);
border-radius: 4px;
border: 1px solid $Red-300;
color: $ui-black;
background: $error-2;
border-radius: 8px;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 8px 16px;
padding: 8px 10px;
&__icon {
margin-right: 8px;