Add ~apple~ UI

public/fonts/Inter Web/inter.css

@@ -0,0 +1,200 @@
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-Thin.woff2?v=3.18") format("woff2"),
+       url("Inter-Thin.woff?v=3.18") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 100;
+  font-display: swap;
+  src: url("Inter-ThinItalic.woff2?v=3.18") format("woff2"),
+       url("Inter-ThinItalic.woff?v=3.18") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLight.woff2?v=3.18") format("woff2"),
+       url("Inter-ExtraLight.woff?v=3.18") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 200;
+  font-display: swap;
+  src: url("Inter-ExtraLightItalic.woff2?v=3.18") format("woff2"),
+       url("Inter-ExtraLightItalic.woff?v=3.18") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-Light.woff2?v=3.18") format("woff2"),
+       url("Inter-Light.woff?v=3.18") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 300;
+  font-display: swap;
+  src: url("Inter-LightItalic.woff2?v=3.18") format("woff2"),
+       url("Inter-LightItalic.woff?v=3.18") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Regular.woff2?v=3.18") format("woff2"),
+       url("Inter-Regular.woff?v=3.18") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 400;
+  font-display: swap;
+  src: url("Inter-Italic.woff2?v=3.18") format("woff2"),
+       url("Inter-Italic.woff?v=3.18") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-Medium.woff2?v=3.18") format("woff2"),
+       url("Inter-Medium.woff?v=3.18") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 500;
+  font-display: swap;
+  src: url("Inter-MediumItalic.woff2?v=3.18") format("woff2"),
+       url("Inter-MediumItalic.woff?v=3.18") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBold.woff2?v=3.18") format("woff2"),
+       url("Inter-SemiBold.woff?v=3.18") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 600;
+  font-display: swap;
+  src: url("Inter-SemiBoldItalic.woff2?v=3.18") format("woff2"),
+       url("Inter-SemiBoldItalic.woff?v=3.18") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-Bold.woff2?v=3.18") format("woff2"),
+       url("Inter-Bold.woff?v=3.18") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 700;
+  font-display: swap;
+  src: url("Inter-BoldItalic.woff2?v=3.18") format("woff2"),
+       url("Inter-BoldItalic.woff?v=3.18") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBold.woff2?v=3.18") format("woff2"),
+       url("Inter-ExtraBold.woff?v=3.18") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 800;
+  font-display: swap;
+  src: url("Inter-ExtraBoldItalic.woff2?v=3.18") format("woff2"),
+       url("Inter-ExtraBoldItalic.woff?v=3.18") format("woff");
+}
+
+@font-face {
+  font-family: 'Inter';
+  font-style:  normal;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-Black.woff2?v=3.18") format("woff2"),
+       url("Inter-Black.woff?v=3.18") format("woff");
+}
+@font-face {
+  font-family: 'Inter';
+  font-style:  italic;
+  font-weight: 900;
+  font-display: swap;
+  src: url("Inter-BlackItalic.woff2?v=3.18") format("woff2"),
+       url("Inter-BlackItalic.woff?v=3.18") format("woff");
+}
+
+/* -------------------------------------------------------
+Variable font.
+Usage:
+
+  html { font-family: 'Inter', sans-serif; }
+  @supports (font-variation-settings: normal) {
+    html { font-family: 'Inter var', sans-serif; }
+  }
+*/
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: normal;
+  font-named-instance: 'Regular';
+  src: url("Inter-roman.var.woff2?v=3.18") format("woff2");
+}
+@font-face {
+  font-family: 'Inter var';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: italic;
+  font-named-instance: 'Italic';
+  src: url("Inter-italic.var.woff2?v=3.18") format("woff2");
+}
+
+
+/* --------------------------------------------------------------------------
+[EXPERIMENTAL] Multi-axis, single variable font.
+
+Slant axis is not yet widely supported (as of February 2019) and thus this
+multi-axis single variable font is opt-in rather than the default.
+
+When using this, you will probably need to set font-variation-settings
+explicitly, e.g.
+
+  * { font-variation-settings: "slnt" 0deg }
+  .italic { font-variation-settings: "slnt" 10deg }
+
+*/
+@font-face {
+  font-family: 'Inter var experimental';
+  font-weight: 100 900;
+  font-display: swap;
+  font-style: oblique 0deg 10deg;
+  src: url("Inter.var.woff2?v=3.18") format("woff2");
+}

public/index.html

@@ -6,6 +6,7 @@
 		<meta name="viewport" content="width=device-width, initial-scale=1" />
 		<meta name="theme-color" content="#000000" />
 		<meta name="description" content="Carpooling App For Communities" />
+		<link rel="stylesheet" href="/fonts/Inter Web/inter.css" />
 		<link rel="apple-touch-icon" href="%PUBLIC_URL%/logo192.png" />
 		<!--
       manifest.json provides metadata used when your web app is installed on a

src/App.tsx

@@ -1,21 +1,18 @@
 import { BrowserRouter, Route, Switch } from 'react-router-dom';
-import Nav from './components/Nav';
-
-import Group from './components/Group';
-import Profile from './components/Profile';
-import CreateGroup from './components/CreateGroup';
-import Groups from './components/Groups';
-import MyGroups from './components/MyGroups';
-import UpdatePool from './components/UpdatePool';
-import Home from './components/Home';
-import Main from './components/Main';
-//import 'bootstrap/dist/css/bootstrap.min.css';
-//import 'bootstrap/dist/js/bootstrap.bundle.min';
 import './App.css';
-import Authenticator from './components/Authenticator';
+import AuthenticationWrapper from './components/Authentication/AuthenticationWrapper';
-import AuthenticationWrapper from './components/AuthenticationWrapper';
+import Authenticator from './components/Authentication/Authenticator';
+import CreateGroup from './components/CreateGroup';
+import Group from './components/Group';
+import Groups from './components/Groups';
+import Home from './components/Home';
 import Logout from './components/Logout';
+import Main from './components/Main';
+import MyGroups from './components/MyGroups';
+import Nav from './components/Nav';
 import PoolPage from './components/PoolPage';
+import Profile from './components/Profile';
+import UpdatePool from './components/UpdatePool';
 
 function App() {
 	return (

src/components/Authentication/AuthenticationWrapper.tsx

@@ -1,5 +1,5 @@
 import { useCallback, useEffect, useState } from 'react';
-import { getMe } from '../api/api';
+import { getMe } from '../../api/api';
 import AuthenticationContext, { AuthState } from './AuthenticationContext';
 
 export default function AuthenticationWrapper({
@@ -33,13 +33,9 @@ export default function AuthenticationWrapper({
 		refreshAuthState();
 	}, [refreshAuthState]);
 
-	if (authState?.isLoggedIn == null) {
-		return null;
-	} else {
 	return (
 		<AuthenticationContext.Provider value={authState}>
 			{children}
 		</AuthenticationContext.Provider>
 	);
-	}
 }

src/components/Authentication/Authenticator.tsx

@@ -1,6 +1,6 @@
 import { useContext, useEffect, useState } from 'react';
 import { Redirect, useLocation, useParams } from 'react-router-dom';
-import { makeAPIPostCall } from '../api/utils';
+import { makeAPIPostCall } from '../../api/utils';
 import AuthenticationContext from './AuthenticationContext';
 
 export default function Authenticator() {
@@ -8,9 +8,8 @@ export default function Authenticator() {
 	const query = new URLSearchParams(useLocation().search);
 	const code = query.get('code');
 	const { refreshAuthState } = useContext(AuthenticationContext);
-	const [status, setStatus] = useState<'pending' | 'errored' | 'authenticated'>(
+	const [status, setStatus] =
-		'pending'
+		useState<'pending' | 'errored' | 'authenticated'>('pending');
-	);
 
 	useEffect(() => {
 		makeAPIPostCall('/create_session', { code, provider })

src/components/Home.tsx

@@ -1,7 +1,7 @@
 import Button from '@material-ui/core/Button';
 import { useContext } from 'react';
 import { ION_AUTHORIZATION_ENDPOINT } from '../api/api';
-import AuthenticationContext from './AuthenticationContext';
+import AuthenticationContext from './Authentication/AuthenticationContext';
 
 import ChatIcon from '@material-ui/icons/Chat';
 import LockIcon from '@material-ui/icons/Lock';

src/components/Main.tsx

@@ -1,5 +1,5 @@
-import 'bootstrap/dist/css/bootstrap.min.css';
+// import 'bootstrap/dist/css/bootstrap.min.css';
-import 'bootstrap/dist/js/bootstrap.bundle.min';
+// import 'bootstrap/dist/js/bootstrap.bundle.min';
 export default function Main() {
 	return (
 		<div className="d-flex flex-column">

src/components/NewUI/App.tsx

@@ -0,0 +1,38 @@
+import Event from './Event';
+
+export default function App() {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				alignItems: 'center',
+				maxWidth: '50rem',
+				marginLeft: 'auto',
+				marginRight: 'auto',
+			}}
+		>
+			<h1
+				style={{
+					fontSize: '4rem',
+					marginTop: '0.25em',
+					marginBottom: '0.25em',
+				}}
+			>
+				WheelShare
+			</h1>
+			<Event
+				title="TJ Track Regional Meet"
+				group="TJHSST Track and Field"
+				location="Ashburn, Virginia"
+				time="11:00 AM to 2:45 PM"
+			/>
+			<Event
+				title="End of Year Party"
+				group="TJHSST 2022"
+				location="Dulles, Virginia"
+				time="5:00 PM to 8:00 PM"
+			/>
+		</div>
+	);
+}

src/components/NewUI/Event.tsx

@@ -0,0 +1,173 @@
+import { useState } from 'react';
+
+const green = '#60f760';
+const lightgrey = '#e0e0e0';
+
+export default function Event({
+	title,
+	group,
+	location,
+	time,
+}: {
+	title: string;
+	group: string;
+	location: string;
+	time: string;
+}) {
+	const [needRideThere, setNeedRideThere] = useState(false);
+	const [needRideBack, setNeedRideBack] = useState(false);
+
+	return (
+		<div
+			style={{
+				display: 'flex',
+				flexDirection: 'column',
+				backgroundColor: '#f9f9f9',
+				borderRadius: '0.5rem',
+				padding: '1rem',
+				marginBottom: '1em',
+			}}
+		>
+			<h2
+				style={{
+					marginTop: '0rem',
+					marginBottom: '0.25em',
+					textAlign: 'center',
+				}}
+			>
+				{title}
+			</h2>
+			<span
+				style={{
+					color: '#303030',
+					textAlign: 'center',
+				}}
+			>
+				{group}
+			</span>
+			<div
+				style={{
+					marginTop: '0.5rem',
+				}}
+			>
+				<span
+					style={{
+						color: '#303030',
+					}}
+				>
+					<b>Time: </b>
+					{time}
+				</span>
+				<br />
+				<span
+					style={{
+						color: '#303030',
+					}}
+				>
+					<b>Location: </b>
+					{location}
+				</span>
+			</div>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'row',
+					width: '100%',
+					justifyContent: 'center',
+					marginTop: '1rem',
+				}}
+			>
+				<div
+					style={{
+						backgroundColor: needRideThere ? green : lightgrey,
+						color: needRideThere ? 'white' : 'black',
+						transition: 'color 0.2s, background-color 0.2s',
+						padding: '1rem',
+						borderRadius: '0.5em',
+						textTransform: 'uppercase',
+						fontWeight: 500,
+						marginRight: '0.5em',
+						cursor: 'pointer',
+						userSelect: 'none',
+					}}
+					onClick={() => {
+						setNeedRideThere((needRideThere) => !needRideThere);
+					}}
+				>
+					I need a ride there
+				</div>
+				<div
+					style={{
+						backgroundColor: needRideBack ? green : lightgrey,
+						color: needRideBack ? 'white' : 'black',
+						transition: 'color 0.2s, background-color 0.2s',
+						padding: '1rem',
+						borderRadius: '0.5em',
+						textTransform: 'uppercase',
+						fontWeight: 500,
+						marginLeft: '0.5em',
+						cursor: 'pointer',
+						userSelect: 'none',
+					}}
+					onClick={() => {
+						setNeedRideBack((needRideBack) => !needRideBack);
+					}}
+				>
+					I need a ride back
+				</div>
+			</div>
+			{needRideThere && (
+				<>
+					<input
+						type="text"
+						style={{
+							marginTop: '0.5em',
+							padding: '0.5em',
+							fontSize: '1.25rem',
+							borderRadius: '0.5em',
+							border: '0px',
+						}}
+						placeholder="Where would you be picked up?"
+					/>
+					<input
+						type="time"
+						style={{
+							marginTop: '0.5em',
+							padding: '0.5em',
+							fontFamily: 'Inter',
+							fontSize: '1.25rem',
+							borderRadius: '0.5em',
+							border: '0px',
+						}}
+					/>
+				</>
+			)}
+			{needRideBack && (
+				<>
+					<input
+						type="text"
+						style={{
+							marginTop: '0.5em',
+							padding: '0.5em',
+							fontSize: '1.25rem',
+							borderRadius: '0.5em',
+							border: '0px',
+						}}
+						placeholder="Where would you be dropped off?"
+					/>
+					<input
+						type="time"
+						style={{
+							marginTop: '0.5em',
+							padding: '0.5em',
+							fontFamily: 'Inter',
+							fontSize: '1.25rem',
+							borderRadius: '0.5em',
+							border: '0px',
+						}}
+					/>
+				</>
+			)}
+		</div>
+	);
+}

src/components/Pool.tsx

@@ -5,7 +5,7 @@ import Textarea from '@material-ui/core/TextareaAutosize';
 import Typography from '@material-ui/core/Typography';
 import Comment from './Comment';
 import { makeAPIPostCall } from '../api/utils';
-import AuthenticationContext from './AuthenticationContext';
+import AuthenticationContext from './Authentication/AuthenticationContext';
 import PoolMap from './PoolMap';
 
 import PlacesAutocomplete, {
@@ -57,9 +57,8 @@ export default function Pool({
 		setAddress(address);
 	};
 	const commentTextareaRef = useRef<HTMLTextAreaElement>(null);
-	const [commentStatus, setCommentStatus] = useState<
+	const [commentStatus, setCommentStatus] =
-		null | 'pending' | 'errored'
+		useState<null | 'pending' | 'errored'>(null);
-	>(null);
 
 	const onComment = useCallback<React.MouseEventHandler<HTMLButtonElement>>(
 		(e) => {

src/components/Profile.tsx

@@ -7,7 +7,7 @@ import { makeStyles } from '@material-ui/core/styles';
 import Typography from '@material-ui/core/Typography';
 import { useContext, useEffect, useState } from 'react';
 import { makeAPIGetCall } from '../api/utils';
-import AuthenticationContext from './AuthenticationContext';
+import AuthenticationContext from './Authentication/AuthenticationContext';
 
 const useStyles = makeStyles({
 	root: {

src/index.css

@@ -1,6 +1,6 @@
 body {
   margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
     'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
     sans-serif;
   -webkit-font-smoothing: antialiased;

src/index.js

@@ -1,7 +1,7 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
 import './index.css';
-import App from './App';
+import App from './components/NewUI/App';
 import reportWebVitals from './reportWebVitals';
 
 ReactDOM.render(