From 6c22a1af453d62ef77ba2e77f9eb043dc296399f Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Thu, 26 May 2022 17:04:30 -0700
Subject: [PATCH 1/2] Use theme instead of color

---
 src/components/InlineSystemMessage.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/components/InlineSystemMessage.js b/src/components/InlineSystemMessage.js
index 4ecd6d201c0d..9f3b124db8e8 100644
--- a/src/components/InlineSystemMessage.js
+++ b/src/components/InlineSystemMessage.js
@@ -2,9 +2,9 @@ import React from 'react';
 import {View} from 'react-native';
 import PropTypes from 'prop-types';
 import styles from '../styles/styles';
+import theme from '../styles/themes/default';
 import Text from './Text';
 import * as Expensicons from './Icon/Expensicons';
-import colors from '../styles/colors';
 import Icon from './Icon';
 
 const propTypes = {
@@ -18,7 +18,7 @@ const InlineSystemMessage = (props) => {
     }
     return (
         <View style={[styles.flexRow, styles.alignItemsCenter]}>
-            <Icon src={Expensicons.Exclamation} fill={colors.red} />
+            <Icon src={Expensicons.Exclamation} fill={theme.badgeDangerBG} />
             <Text style={[styles.inlineSystemMessage]}>{props.message}</Text>
         </View>
     );

From 17aaf24a19330a4bfdcfce38a5976215576a7b4e Mon Sep 17 00:00:00 2001
From: Rory Abraham <rory@expensify.com>
Date: Thu, 26 May 2022 17:13:05 -0700
Subject: [PATCH 2/2] Add story for InlineSystemMessage

---
 src/stories/InlineSystemMessage.stories.js | 27 ++++++++++++++++++++++
 1 file changed, 27 insertions(+)
 create mode 100644 src/stories/InlineSystemMessage.stories.js

diff --git a/src/stories/InlineSystemMessage.stories.js b/src/stories/InlineSystemMessage.stories.js
new file mode 100644
index 000000000000..5d966d49ee22
--- /dev/null
+++ b/src/stories/InlineSystemMessage.stories.js
@@ -0,0 +1,27 @@
+import React from 'react';
+import InlineSystemMessage from '../components/InlineSystemMessage';
+
+/**
+ * We use the Component Story Format for writing stories. Follow the docs here:
+ *
+ * https://storybook.js.org/docs/react/writing-stories/introduction#component-story-format
+ */
+const story = {
+    title: 'Components/InlineSystemMessage',
+    component: InlineSystemMessage,
+};
+
+// eslint-disable-next-line react/jsx-props-no-spreading
+const Template = args => <InlineSystemMessage {...args} />;
+
+// Arguments can be passed to the component by binding
+// See: https://storybook.js.org/docs/react/writing-stories/introduction#using-args
+const Default = Template.bind({});
+Default.args = {
+    message: 'This is an error message',
+};
+
+export default story;
+export {
+    Default,
+};