Help

package.json

@@ -30,7 +30,7 @@
   },
   "scripts": {
     "start": "react-scripts start",
-    "firebase": "firebase emulators:start",
+    "emu": "firebase emulators:start",
     "build": "react-scripts build",
     "test": "react-scripts test",
     "eject": "react-scripts eject",

src/assets/styles/_colors.scss

@@ -18,7 +18,7 @@ $mint-bright: #e5faf3;
 // Taffy
 $taffy: #7e66cd;
 $taffy-light: #a594dc;
-$taffy-bright: #efecf9;
+$taffy-bright: #f4f1ff;
 
 $sun: #fff250;
 $sun-light: #fff8a2;
@@ -28,7 +28,7 @@ $sun-bright: #fffdea;
 $gray-dark: #4c547c;
 $gray: #6f738b;
 $gray-light: #b5b8cc;
-$gray-bright: #ebebff;
+$gray-bright: #fafaff;
 
 // Feedback
 $success: $mint;

src/components/AdminNavigation/AdminNavigation.jsx

@@ -12,6 +12,9 @@ const AdminNavigation = () => {
 			<li>
 				<NavLink to="/admin/dashboard">Dashboard</NavLink>
 			</li>
+			<li>
+				<NavLink to="/help">Help</NavLink>
+			</li>
 			<li>
 				<NavLink to="/admin/kids">Kids</NavLink>
 			</li>

src/components/Footer/Footer.jsx

@@ -19,6 +19,9 @@ const Footer = () => {
 							<li>
 								<Link to="/about">About</Link>
 							</li>
+							<li>
+								<Link to="/help">Help</Link>
+							</li>
 							<li>
 								<Link to="/terms">Terms & Conditions</Link>
 							</li>

src/components/HeaderNav/HeaderNav.jsx

@@ -48,6 +48,9 @@ const HeaderNav = ({ variant }) => {
 												How It Works
 											</NavLink>
 										</li>
+										<li>
+											<NavLink to="/help">Help</NavLink>
+										</li>
 										<li>
 											<NavLink exact to="/feedback">
 												Feedback

src/components/HelpCard/HelpCard.jsx

@@ -0,0 +1,21 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import './HelpCard.scss';
+
+const HelpCard = ({ className, children, ...rest }) => {
+	return (
+		<div className={`HelpCard ${className || ''}`} {...rest}>
+			{children}
+		</div>
+	);
+};
+
+export default HelpCard;
+
+HelpCard.propTypes = {
+	className: PropTypes.string,
+};
+
+HelpCard.defaultProps = {
+	className: '',
+};

src/components/HelpCard/HelpCard.scss

@@ -0,0 +1,16 @@
+
+@import '../../assets/styles/colors';
+.HelpCard {
+    padding: 2rem;
+    border-radius: 0.5rem;
+    background-color: $primary-bright;
+    transition: 0.3s;
+    text-align: center;
+    h2 {
+        color: $gray;
+    }
+    &:hover {
+        background-color: $primary-hover;
+        color: $primary-bright;
+    }
+}

src/components/HelpCard/index.js

@@ -0,0 +1 @@
+export { default } from './HelpCard';

src/components/HelpContentPage/HelpContentPage.jsx

@@ -0,0 +1,36 @@
+import React from 'react';
+import PropTypes from 'prop-types';
+import Button from '../Button';
+import './HelpContentPage.scss';
+
+const HelpContentPage = ({
+	className,
+	title,
+	description,
+	children,
+	...rest
+}) => {
+	return (
+		<main className={`HelpContentPage ${className || ''}`} {...rest}>
+			<h1 className="text-center">{title}</h1>
+			<p className="text-center">{description}</p>
+			<Button size="small" variant="secondary-ghosted" href="/help">
+				Go Back
+			</Button>
+			{children}
+			<Button size="small" variant="secondary-ghosted" href="/help">
+				Go Back
+			</Button>
+		</main>
+	);
+};
+
+export default HelpContentPage;
+
+HelpContentPage.propTypes = {
+	className: PropTypes.string,
+};
+
+HelpContentPage.defaultProps = {
+	className: '',
+};

src/components/HelpContentPage/HelpContentPage.scss

@@ -0,0 +1,6 @@
+.HelpContentPage {
+    .Button {
+        display: table;
+        margin: 1rem auto;
+    }
+}

src/components/HelpContentPage/index.js

@@ -0,0 +1 @@
+export { default } from './HelpContentPage';

src/components/HelpMessage/HelpMessage.jsx

@@ -0,0 +1,29 @@
+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">
+			<hr />
+			<div
+				className={`HelpMessageBox text-center mt-4 ${className || ''}`}
+				{...rest}
+			>
+				<AiOutlineQuestionCircle size="24" />
+				{children}
+			</div>
+		</div>
+	);
+};
+
+export default HelpMessage;
+
+HelpMessage.propTypes = {
+	className: PropTypes.string,
+};
+
+HelpMessage.defaultProps = {
+	className: '',
+};

src/components/HelpMessage/HelpMessage.scss

@@ -0,0 +1,20 @@
+@import '../../assets/styles/colors';
+.HelpMessage {
+    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;
+        }
+    }
+}

src/components/HelpMessage/index.js

@@ -0,0 +1 @@
+export { default } from './HelpMessage';

src/components/LoomVideo/LoomVideo.jsx

@@ -0,0 +1,30 @@
+import React from 'react';
+import { string } from 'prop-types';
+import './LoomVideo.scss';
+
+const LoomVideo = ({ className, title, embedUrl, ...rest }) => {
+	return (
+		<div className={`LoomVideo ${className}`} {...rest}>
+			<iframe
+				title={title}
+				src={embedUrl}
+				frameBorder="0"
+				webkitallowfullscreen
+				mozallowfullscreen
+				allowFullScreen
+			/>
+		</div>
+	);
+};
+
+export default LoomVideo;
+
+LoomVideo.propTypes = {
+	className: string,
+	title: string.isRequired,
+	embedUrl: string.isRequired,
+};
+
+LoomVideo.defaultProps = {
+	className: '',
+};

src/components/LoomVideo/LoomVideo.scss

@@ -0,0 +1,12 @@
+.LoomVideo {
+    position: relative;
+    padding-bottom: 56.25%;
+    height: 0;
+    iframe {
+        position: absolute;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+    }
+}

src/components/LoomVideo/index.js

@@ -0,0 +1 @@
+export { default } from './LoomVideo';

src/components/MarketingMain/MarketingMain.jsx

@@ -20,6 +20,7 @@ import { UserContext } from '../../providers/UserProvider';
 import { ChildContext } from '../../providers/ChildProvider';
 import ContactThankYou from '../../pages/ContactThankYou';
 import './MarketingMain.scss';
+import Help from '../../pages/Help';
 
 const MarketingMain = () => {
 	const { user } = useContext(UserContext);
@@ -38,6 +39,7 @@ const MarketingMain = () => {
 			<Switch>
 				<Route exact path="/" component={Home} />
 				<Route path="/how-it-works" component={HowItWorks} />
+				<Route path="/help" component={Help} />
 				<Route path="/feedback" component={Feedback} />
 				<Route path="/feedback-thanks" component={FeedbackThankYou} />
 				<Route path="/terms" component={Terms} />

src/index.scss

@@ -1,5 +1,6 @@
-@import '~bootstrap/scss/bootstrap';
+
 @import './assets/styles/colors';
+@import '~bootstrap/scss/bootstrap';
 @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@300;500;700&display=swap');
 
 body {
@@ -80,8 +81,11 @@ h5,
 a,
 .LINK {
 	transition: 0.3s;
-	color: var(--prime);
+	color: $primary;
 	text-decoration: none;
+	&:hover {
+		text-decoration: none;
+	}
 }
 p,
 li {
@@ -119,3 +123,4 @@ li {
 .fw-bold {
 	font-weight: bold;
 }
+

src/pages/AdminKids/AdminKids.jsx

@@ -1,5 +1,5 @@
 import React, { useContext } from 'react';
-import { Redirect } from 'react-router-dom';
+import { Link, Redirect } from 'react-router-dom';
 import { Row, Col } from 'react-bootstrap';
 import { UserContext } from '../../providers/UserProvider';
 import KidCard from '../../components/KidCard';
@@ -12,6 +12,7 @@ import pendingKids from '../../assets/images/bird_pending_data.svg';
 import addChildIcon from '../../assets/images/add_child_white.svg';
 import './AdminKids.scss';
 import { ToastContext } from '../../providers/ToastProvider';
+import HelpMessage from '../../components/HelpMessage';
 
 const AdminKids = () => {
 	const { user } = useContext(UserContext);
@@ -56,6 +57,17 @@ const AdminKids = () => {
 							</p>
 						</div>
 					)}
+					<HelpMessage className="text-primary">
+						<p className="m-0">
+							Need help logging your child(ren) in?{' '}
+							<Link
+								className="LINK"
+								to="/help/logging-children-in"
+							>
+								Learn More
+							</Link>
+						</p>
+					</HelpMessage>
 				</Col>
 				<Col sm={4} className="text-center d-none d-md-block">
 					<DashSideForm>

src/pages/AdminSetupFamily/AdminSetupFamily.jsx

@@ -1,12 +1,13 @@
 import React, { useContext, useState } from 'react';
-import { useHistory } from 'react-router-dom';
+import { useHistory, Link } from 'react-router-dom';
 import { firestore } from '../../config/firebaseConfig';
 import { UserContext } from '../../providers/UserProvider';
 import Section from '../../components/Section';
 import Button from '../../components/Button';
 import Input from '../../components/Input';
-import './AdminSetupFamily.scss';
+import HelpMessage from '../../components/HelpMessage';
 import { ToastContext } from '../../providers/ToastProvider';
+import './AdminSetupFamily.scss';
 
 const AdminSetupFamily = () => {
 	const history = useHistory();
@@ -104,6 +105,14 @@ const AdminSetupFamily = () => {
 				{feedback ? <p className="uk-text-danger">{feedback}</p> : null}
 				<Button type="submit">Setup Family</Button>
 			</form>
+			<HelpMessage>
+				<p className="m-0">
+					Need help logging your child(ren) in?{' '}
+					<Link className="LINK" to="/help/family-setup">
+						Learn More
+					</Link>
+				</p>
+			</HelpMessage>
 		</Section>
 	);
 };