Create email invite confirmation screen

src/components/EmailInviteConfirmation/index.tsx

@@ -0,0 +1,32 @@
+import React, { useEffect } from 'react';
+import { useNavigate } from 'react-router-dom';
+
+import './stylesheet.scss';
+
+export default function EmailInviteConfirmation(): React.ReactElement {
+  const navigate = useNavigate();
+
+  useEffect(() => {
+    setTimeout(() => {
+      navigate('/');
+    }, 30000);
+  });
+
+  return (
+    <div className="EmailInviteConfirmation">
+      <h1>Congratulations on Adding a New Schedule to your View!</h1>
+      <p>You are being redirected to our main site, please wait...</p>
+      <p>
+        If you have not been redirected in 30 seconds, please click the button
+        below
+      </p>
+      <button type="button" className="continue-button">
+        Continue
+      </button>
+
+      <a className="footer" href="https://bitsofgood.org/">
+        <img alt="Bits of Good Logo" src="bitsOfGood.png" />
+      </a>
+    </div>
+  );
+}

src/components/EmailInviteConfirmation/stylesheet.scss

@@ -0,0 +1,53 @@
+@import '../../variables';
+
+body {
+  background-color: $theme-dark-background;
+  color: $theme-dark-foreground;
+}
+
+.EmailInviteConfirmation {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  padding-top: 160px;
+  padding-bottom: 38px;
+  padding-left: 32px;
+  padding-right: 32px;
+  font-size: 24px;
+  height: 100%;
+
+  @media (max-width: 1000px) {
+    padding-top: 80px;
+
+    h1 {
+      font-size: 24px;
+      align-self: flex-start;
+    }
+
+    p {
+      align-self: flex-start;
+    }
+  }
+
+  h1 {
+    font-size: 36px;
+    font-weight: 600;
+  }
+
+  .footer {
+    position: absolute;
+    bottom: 38px;
+  }
+
+  .continue-button {
+    background-color: #FE7C53;
+    color: white;
+    margin-top: 96px;
+    padding: 8px 24px;
+    border: none;
+    border-radius: 16px;
+    cursor: pointer;
+    font-size: 32px;
+    font-weight: 600;
+  }
+}

src/components/RouterComponent/index.tsx

@@ -2,6 +2,7 @@ import React from 'react';
 import { BrowserRouter, Routes, Route, Navigate } from 'react-router-dom';
 
 import App from '../App';
+import EmailInviteConfirmation from '../EmailInviteConfirmation';
 import InviteBackLink from '../InviteBackLink';
 
 export default function RouterComponent(): React.ReactElement {
@@ -10,6 +11,7 @@ export default function RouterComponent(): React.ReactElement {
       <Routes>
         <Route path="/" element={<App />} />
         <Route path="/invite/:id" element={<InviteBackLink />} />
+        <Route path="/confirm-invite" element={<EmailInviteConfirmation />} />
         <Route path="*" element={<Navigate to="/" replace />} />
       </Routes>
     </BrowserRouter>