From 5a0a43cf47d424a9f5c250d04281d8ddd7c1719f Mon Sep 17 00:00:00 2001
From: Christopher Jones <tkcwebdev@gmail.com>
Date: Sat, 9 Oct 2021 03:18:23 -0700
Subject: [PATCH] help: Created Help message component to quickly show a help
 article link when necessary for quick updates. Could help with issue #65

---
 src/components/HelpMessage/HelpMessage.jsx  | 17 ++++++++++-------
 src/components/HelpMessage/HelpMessage.scss | 21 +++++++++++++++++++--
 2 files changed, 29 insertions(+), 9 deletions(-)

diff --git a/src/components/HelpMessage/HelpMessage.jsx b/src/components/HelpMessage/HelpMessage.jsx
index 3b4e400..f6af297 100644
--- a/src/components/HelpMessage/HelpMessage.jsx
+++ b/src/components/HelpMessage/HelpMessage.jsx
@@ -1,16 +1,19 @@
 import React from 'react';
+import { AiOutlineQuestionCircle } from 'react-icons/ai';
 import PropTypes from 'prop-types';
 import './HelpMessage.scss';
 
 const HelpMessage = ({ className, children, ...rest }) => {
 	return (
-		<div
-			className={`HelpMessage p-4 text-center text-gray-light bg-gray-bright mt-3 ${
-				className || ''
-			}`}
-			{...rest}
-		>
-			{children}
+		<div className="HelpMessage">
+			<hr />
+			<div
+				className={`HelpMessageBox text-center mt-4 ${className || ''}`}
+				{...rest}
+			>
+				<AiOutlineQuestionCircle size="24" />
+				{children}
+			</div>
 		</div>
 	);
 };
diff --git a/src/components/HelpMessage/HelpMessage.scss b/src/components/HelpMessage/HelpMessage.scss
index 0ae1bd6..3dc2c5c 100644
--- a/src/components/HelpMessage/HelpMessage.scss
+++ b/src/components/HelpMessage/HelpMessage.scss
@@ -1,3 +1,20 @@
+@import '../../assets/styles/colors';
 .HelpMessage {
-    border-radius: 0.5rem;
-}
\ No newline at end of file
+    hr {
+        margin: 1.5rem 0;
+        border-color: $primary-bright;
+    }
+    .HelpMessageBox {
+        border-radius: 0.5rem;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 0.5rem;
+        svg {
+            fill: $primary;
+        }
+        p {
+            color: $gray;
+        }
+    }
+}