From 4354f87eed162a2aad881efc35aa63b93cf72969 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Wed, 11 Aug 2021 19:56:11 -0400
Subject: [PATCH] add footer

---
 src/components/App.tsx    | 11 ++++++++++-
 src/components/Footer.tsx | 17 +++++++++++++++++
 2 files changed, 27 insertions(+), 1 deletion(-)
 create mode 100644 src/components/Footer.tsx

diff --git a/src/components/App.tsx b/src/components/App.tsx
index d5956a8..ecd2c58 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -2,6 +2,7 @@ import { CSSProperties, lazy, Suspense, useContext, useEffect } from 'react';
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
 import NotificationsProvider from '../state/Notifications/NotificationsProvider';
 import AuthenticationContext from './Authentication/AuthenticationContext';
+import Footer from './Footer';
 import Header from './Header/Header';
 import {
 	hasLoginContinueURL,
@@ -42,7 +43,14 @@ export default function App() {
 	}, [loaded, user]);
 
 	return (
-		<div style={{ padding: '1rem', maxWidth: '100vw' }}>
+		<div
+			style={{
+				padding: '1rem',
+				maxWidth: '100vw',
+				minHeight: 'calc(100vh - 2rem)',
+				position: 'relative',
+			}}
+		>
 			<div style={style}>
 				<Suspense fallback={null}>
 					<BrowserRouter>
@@ -68,6 +76,7 @@ export default function App() {
 					</BrowserRouter>
 				</Suspense>
 			</div>
+			<Footer />
 		</div>
 	);
 }
diff --git a/src/components/Footer.tsx b/src/components/Footer.tsx
new file mode 100644
index 0000000..d9efe62
--- /dev/null
+++ b/src/components/Footer.tsx
@@ -0,0 +1,17 @@
+export default function Footer() {
+	return (
+		<div
+			style={{
+				position: 'absolute',
+				bottom: '0.5rem',
+				fontSize: '0.75rem',
+				textAlign: 'center',
+				width: '100%',
+			}}
+		>
+			Made by Michael Fatemi, Joshua Hsueh, Nitin Kanchinadam. Code:{' '}
+			<a href="https://github.com/myfatemi04/wheelshare-frontend">frontend</a>,{' '}
+			<a href="https://github.com/myfatemi04/wheelshare-altbackend">backend</a>
+		</div>
+	);
+}