From 6f0e54aa26cf1769b488b9bbce0722c63514ef1c Mon Sep 17 00:00:00 2001
From: Dan J Miller <dmiller@kyokan.io>
Date: Fri, 16 Jul 2021 15:36:48 -0230
Subject: [PATCH] Implement modern design for error messages (#11521)

---
 .../ui/error-message/error-message.component.js       |  2 +-
 .../ui/error-message/error-message.component.test.js  |  4 ++--
 .../ui/error-message/error-message.stories.js         | 11 +++++++++++
 ui/components/ui/error-message/index.scss             | 10 +++++-----
 4 files changed, 19 insertions(+), 8 deletions(-)
 create mode 100644 ui/components/ui/error-message/error-message.stories.js

diff --git a/ui/components/ui/error-message/error-message.component.js b/ui/components/ui/error-message/error-message.component.js
index 542ecc47b..1786e332a 100644
--- a/ui/components/ui/error-message/error-message.component.js
+++ b/ui/components/ui/error-message/error-message.component.js
@@ -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>
   );
 };
diff --git a/ui/components/ui/error-message/error-message.component.test.js b/ui/components/ui/error-message/error-message.component.test.js
index 5e1f0669a..94c16de27 100644
--- a/ui/components/ui/error-message/error-message.component.test.js
+++ b/ui/components/ui/error-message/error-message.component.test.js
@@ -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',
     );
   });
 });
diff --git a/ui/components/ui/error-message/error-message.stories.js b/ui/components/ui/error-message/error-message.stories.js
new file mode 100644
index 000000000..64114ea0f
--- /dev/null
+++ b/ui/components/ui/error-message/error-message.stories.js
@@ -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!')} />
+);
diff --git a/ui/components/ui/error-message/index.scss b/ui/components/ui/error-message/index.scss
index eba500931..e355d9939 100644
--- a/ui/components/ui/error-message/index.scss
+++ b/ui/components/ui/error-message/index.scss
@@ -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;