Dark mode: Updating error color and adding story (#14116)

* Updating error color and adding story

* Fixing class

* Updates

* removing console log

ui/components/ui/qr-code/index.scss

@@ -21,7 +21,7 @@
     display: flex;
     justify-content: center;
     align-items: center;
-    color: var(--color-warning-default);
+    color: var(--color-error-default);
     margin-bottom: 9px;
   }
 

ui/components/ui/qr-code/qr-code.js

@@ -49,7 +49,7 @@ function QrCodeView(props) {
       ) : (
         header
       )}
-      {warning ? <span className="qr_code__error">{warning}</span> : null}
+      {warning ? <span className="qr-code__error">{warning}</span> : null}
       <div
         className="qr-code__wrapper"
         dangerouslySetInnerHTML={{

ui/components/ui/qr-code/qr-code.stories.js

@@ -0,0 +1,22 @@
+import React from 'react';
+import QrCodeView from '.';
+
+export default {
+  title: 'Components/UI/QrCodeView',
+  id: __filename,
+  argTypes: {
+    Qr: {
+      control: 'object',
+    },
+  },
+  args: {
+    Qr: {
+      message: <div>message</div>,
+      data: 'data',
+    },
+  },
+};
+
+export const DefaultStory = (args) => <QrCodeView {...args} />;
+
+DefaultStory.storyName = 'Default';