From d84cb2e5058e6f129ad397522a36d4b6412ce5fb Mon Sep 17 00:00:00 2001
From: coherency1 <coreychen@nyu.edu>
Date: Wed, 22 Mar 2023 02:15:38 -0400
Subject: [PATCH 1/2] Added Toast Component

---
 front-end/src/components/Toast/Toast.css |  9 +++++++
 front-end/src/components/Toast/Toast.jsx | 33 ++++++++++++++++++++++++
 front-end/src/containers/App/App.jsx     |  2 ++
 3 files changed, 44 insertions(+)
 create mode 100644 front-end/src/components/Toast/Toast.css
 create mode 100644 front-end/src/components/Toast/Toast.jsx

diff --git a/front-end/src/components/Toast/Toast.css b/front-end/src/components/Toast/Toast.css
new file mode 100644
index 0000000..2bfd65f
--- /dev/null
+++ b/front-end/src/components/Toast/Toast.css
@@ -0,0 +1,9 @@
+.toast {
+	background-color: --info;
+	padding-top: 5rem;
+	z-index: 1000;
+}
+
+.toast.show {
+	transform: translateX(0px);
+}
diff --git a/front-end/src/components/Toast/Toast.jsx b/front-end/src/components/Toast/Toast.jsx
new file mode 100644
index 0000000..76bf006
--- /dev/null
+++ b/front-end/src/components/Toast/Toast.jsx
@@ -0,0 +1,33 @@
+import './Toast.css'
+// import { useState } from 'react'
+
+export default function Toast({
+	show = true,
+	toastMessage = 'Verify Location'
+}) {
+	// TODO: make self contained
+	// Toast component will have to be useState'd in separate file
+	// const [show, setShow] = useState(false)
+	// const [toastMessage, setToastMessage] = useState(false)
+	// useImperativeHandle(ref, () => ({
+	// 	showToast(msg = '') {
+	// 		setShow(true)
+	// 		setToastMessage(msg)
+	// 		setTimeout(() => {
+	// 			setShow(false)
+	// 		}, timeout)
+	// 	}
+	// }))
+
+	return show ? (
+		<div className="toast toast-top toast-end">
+			<div className="alert alert-info">
+				<div>
+					<span>{toastMessage}</span>
+				</div>
+			</div>
+		</div>
+	) : (
+		<></>
+	)
+}
diff --git a/front-end/src/containers/App/App.jsx b/front-end/src/containers/App/App.jsx
index 8cf935e..e2d9eb3 100644
--- a/front-end/src/containers/App/App.jsx
+++ b/front-end/src/containers/App/App.jsx
@@ -8,6 +8,7 @@ import FeedPage from '../../routes/feed/FeedPage'
 import BottomNav from '../../components/BottomNav/BottomNav'
 import UploadPage from '../../routes/upload/UploadPage'
 import StoopMapPage from '../../routes/map/[id]/StoopMapPage'
+// import Toast from '../../components/Toast/Toast'
 import { MapProvider } from '../../context/map'
 
 const App = () => {
@@ -27,6 +28,7 @@ const App = () => {
 		>
 			<div className="app">
 				<main>
+					{/* <Toast /> */}
 					<Routes>
 						<Route
 							path="/"

From 752883e000e2f1c22b6b4f60e41e6cd4c1f04e06 Mon Sep 17 00:00:00 2001
From: coherency1 <coreychen@nyu.edu>
Date: Wed, 22 Mar 2023 02:31:15 -0400
Subject: [PATCH 2/2] Added Location Service Toast

---
 front-end/src/containers/App/App.jsx | 7 +++++--
 1 file changed, 5 insertions(+), 2 deletions(-)

diff --git a/front-end/src/containers/App/App.jsx b/front-end/src/containers/App/App.jsx
index e2d9eb3..cc6f99d 100644
--- a/front-end/src/containers/App/App.jsx
+++ b/front-end/src/containers/App/App.jsx
@@ -8,7 +8,7 @@ import FeedPage from '../../routes/feed/FeedPage'
 import BottomNav from '../../components/BottomNav/BottomNav'
 import UploadPage from '../../routes/upload/UploadPage'
 import StoopMapPage from '../../routes/map/[id]/StoopMapPage'
-// import Toast from '../../components/Toast/Toast'
+import Toast from '../../components/Toast/Toast'
 import { MapProvider } from '../../context/map'
 
 const App = () => {
@@ -27,8 +27,11 @@ const App = () => {
 			}}
 		>
 			<div className="app">
+				<Toast
+					show={error}
+					toastMessage="Please Allow Location Services"
+				/>
 				<main>
-					{/* <Toast /> */}
 					<Routes>
 						<Route
 							path="/"