help: Created Help message component to quickly show a help article l…

…ink when necessary for quick updates. Could help with issue #65

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>
 	);
 };

src/components/HelpMessage/HelpMessage.scss

@@ -1,3 +1,20 @@
+@import '../../assets/styles/colors';
 .HelpMessage {
-    border-radius: 0.5rem;
-}
+    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;
+        }
+    }
+}