m/metamask-extension
1
0
Fork 0
mirror of https://github.com/kremalicious/metamask-extension.git synced 2024-11-22 18:00:18 +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="" alt=""
className="error-message__icon" className="error-message__icon"
/> />
<div className="error-message__text">{`ALERT: ${error}`}</div> <div className="error-message__text">{error}</div>
</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')).toHaveLength(1);
expect(wrapper.find('.error-message__icon')).toHaveLength(1); expect(wrapper.find('.error-message__icon')).toHaveLength(1);
expect(wrapper.find('.error-message__text').text()).toStrictEqual( 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')).toHaveLength(1);
expect(wrapper.find('.error-message__icon')).toHaveLength(1); expect(wrapper.find('.error-message__icon')).toHaveLength(1);
expect(wrapper.find('.error-message__text').text()).toStrictEqual( 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; @include H7;
min-height: 32px; min-height: 32px;
border: 1px solid $monzo; border: 1px solid $Red-300;
color: $monzo; color: $ui-black;
background: lighten($monzo, 56%); background: $error-2;
border-radius: 4px; border-radius: 8px;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
align-items: center; align-items: center;
padding: 8px 16px; padding: 8px 10px;
&__icon { &__icon {
margin-right: 8px; margin-right: 8px;