diff --git a/package.json b/package.json
index c104007..c9eb35f 100644
--- a/package.json
+++ b/package.json
@@ -3,6 +3,7 @@
"version": "0.1.0",
"private": true,
"dependencies": {
+ "@material-ui/core": "^4.12.1",
"@material-ui/icons": "^4.11.2",
"@testing-library/jest-dom": "^5.11.4",
"@testing-library/react": "^11.1.0",
diff --git a/src/components/Event/EventCarpools.tsx b/src/components/Event/EventCarpools.tsx
index f102024..8b9d78c 100644
--- a/src/components/Event/EventCarpools.tsx
+++ b/src/components/Event/EventCarpools.tsx
@@ -1,5 +1,8 @@
import { useState } from 'react';
import { IEvent } from './Event';
+import CallMergeIcon from '@material-ui/icons/CallMerge';
+import ScheduleIcon from '@material-ui/icons/Schedule';
+import EmojiPeopleIcon from '@material-ui/icons/EmojiPeople';
export type ICarpool = {
driver: {
@@ -19,6 +22,7 @@ function CarpoolRow({ carpool }: { carpool: ICarpool }) {
display: 'flex',
alignItems: 'center',
position: 'relative',
+ justifyContent: 'space-between',
padding: PADDING,
borderRadius: '0.5rem',
border: '1px solid #e0e0e0',
@@ -27,28 +31,20 @@ function CarpoolRow({ carpool }: { carpool: ICarpool }) {
}}
>
-
{carpool.driver.name}
+
{carpool.driver.name}
- Time:{' '}
-
+
+
+
{carpool.startTime} - {carpool.endTime}
-
+
- Offset from route: {carpool.extraDistance} miles
-
-
- Request to join
+
+ {' '}
+ {carpool.extraDistance} miles
+
+
);
}
diff --git a/src/components/Event/EventSignups.tsx b/src/components/Event/EventSignups.tsx
index 4b230bd..d4afa1b 100644
--- a/src/components/Event/EventSignups.tsx
+++ b/src/components/Event/EventSignups.tsx
@@ -2,8 +2,9 @@ import { useMe } from '../hooks';
import latlongdist, { R_miles } from '../latlongdist';
import usePlace from '../usePlace';
import { IEvent, IEventSignup } from './Event';
+import PersonAddIcon from '@material-ui/icons/PersonAdd';
-export default function Signups({
+export default function EventSignups({
event,
signups,
myPlaceId,
@@ -12,7 +13,6 @@ export default function Signups({
signups: IEventSignup[];
myPlaceId: string | null;
}) {
- const PADDING = '1rem';
const placeDetails = usePlace(myPlaceId);
const locationLongitude = event.latitude;
const locationLatitude = event.longitude;
@@ -59,6 +59,7 @@ export default function Signups({
style={{
display: 'flex',
alignItems: 'center',
+ justifyContent: 'space-between',
position: 'relative',
padding: '1rem',
borderRadius: '0.5rem',
@@ -70,19 +71,7 @@ export default function Signups({
>
{user.name}
{extraDistance ? `: +${extraDistance.toFixed(1)} miles` : ''}
-
- Invite to carpool
-
+
);
})}
diff --git a/yarn.lock b/yarn.lock
index 9447f5c..a1400aa 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1077,6 +1077,13 @@
dependencies:
regenerator-runtime "^0.13.4"
+"@babel/runtime@^7.3.1", "@babel/runtime@^7.8.3":
+ version "7.14.6"
+ resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.14.6.tgz#535203bc0892efc7dec60bdc27b2ecf6e409062d"
+ integrity sha512-/PCB2uJ7oM44tz8YhC4Z/6PeOKXp4K588f+5M3clr1M4zbqztlo0XEfJ2LEzj/FgwfgGcIdl8n7YYjTCI0BYwg==
+ dependencies:
+ regenerator-runtime "^0.13.4"
+
"@babel/template@^7.10.4", "@babel/template@^7.12.13", "@babel/template@^7.3.3":
version "7.12.13"
resolved "https://registry.npmjs.org/@babel/template/-/template-7.12.13.tgz"
@@ -1133,6 +1140,11 @@
resolved "https://registry.npmjs.org/@csstools/normalize.css/-/normalize.css-10.1.0.tgz"
integrity sha512-ij4wRiunFfaJxjB0BdrYHIH8FxBJpOwNPhhAcunlmPdXudL1WQV1qoP9un6JsEBAgQH+7UXyyjh0g7jTxXK6tg==
+"@emotion/hash@^0.8.0":
+ version "0.8.0"
+ resolved "https://registry.yarnpkg.com/@emotion/hash/-/hash-0.8.0.tgz#bbbff68978fefdbe68ccb533bc8cbe1d1afb5413"
+ integrity sha512-kBJtf7PH6aWwZ6fka3zQ0p6SBYzx4fl1LoZXE2RrnYST9Xljm7WfKJrU4g/Xr3Beg72MLrp1AWNUmuYJTL7Cow==
+
"@eslint/eslintrc@^0.3.0":
version "0.3.0"
resolved "https://registry.npmjs.org/@eslint/eslintrc/-/eslintrc-0.3.0.tgz"
@@ -1368,6 +1380,24 @@
"@types/yargs" "^15.0.0"
chalk "^4.0.0"
+"@material-ui/core@^4.12.1":
+ version "4.12.1"
+ resolved "https://registry.yarnpkg.com/@material-ui/core/-/core-4.12.1.tgz#ac8f081498047aa02bb6ee70b77c5dad6a2a6e73"
+ integrity sha512-C6hYsjkWCTfBx9FaqxhCZCITBagh7fyCKFtHyvO3tTOcBw6NJaktdhNZ2n82jQdQdgfFvg6OOxi7OOzsAdAcBQ==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ "@material-ui/styles" "^4.11.4"
+ "@material-ui/system" "^4.12.1"
+ "@material-ui/types" "5.1.0"
+ "@material-ui/utils" "^4.11.2"
+ "@types/react-transition-group" "^4.2.0"
+ clsx "^1.0.4"
+ hoist-non-react-statics "^3.3.2"
+ popper.js "1.16.1-lts"
+ prop-types "^15.7.2"
+ react-is "^16.8.0 || ^17.0.0"
+ react-transition-group "^4.4.0"
+
"@material-ui/icons@^4.11.2":
version "4.11.2"
resolved "https://registry.npmjs.org/@material-ui/icons/-/icons-4.11.2.tgz"
@@ -1375,6 +1405,52 @@
dependencies:
"@babel/runtime" "^7.4.4"
+"@material-ui/styles@^4.11.4":
+ version "4.11.4"
+ resolved "https://registry.yarnpkg.com/@material-ui/styles/-/styles-4.11.4.tgz#eb9dfccfcc2d208243d986457dff025497afa00d"
+ integrity sha512-KNTIZcnj/zprG5LW0Sao7zw+yG3O35pviHzejMdcSGCdWbiO8qzRgOYL8JAxAsWBKOKYwVZxXtHWaB5T2Kvxew==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ "@emotion/hash" "^0.8.0"
+ "@material-ui/types" "5.1.0"
+ "@material-ui/utils" "^4.11.2"
+ clsx "^1.0.4"
+ csstype "^2.5.2"
+ hoist-non-react-statics "^3.3.2"
+ jss "^10.5.1"
+ jss-plugin-camel-case "^10.5.1"
+ jss-plugin-default-unit "^10.5.1"
+ jss-plugin-global "^10.5.1"
+ jss-plugin-nested "^10.5.1"
+ jss-plugin-props-sort "^10.5.1"
+ jss-plugin-rule-value-function "^10.5.1"
+ jss-plugin-vendor-prefixer "^10.5.1"
+ prop-types "^15.7.2"
+
+"@material-ui/system@^4.12.1":
+ version "4.12.1"
+ resolved "https://registry.yarnpkg.com/@material-ui/system/-/system-4.12.1.tgz#2dd96c243f8c0a331b2bb6d46efd7771a399707c"
+ integrity sha512-lUdzs4q9kEXZGhbN7BptyiS1rLNHe6kG9o8Y307HCvF4sQxbCgpL2qi+gUk+yI8a2DNk48gISEQxoxpgph0xIw==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ "@material-ui/utils" "^4.11.2"
+ csstype "^2.5.2"
+ prop-types "^15.7.2"
+
+"@material-ui/types@5.1.0":
+ version "5.1.0"
+ resolved "https://registry.yarnpkg.com/@material-ui/types/-/types-5.1.0.tgz#efa1c7a0b0eaa4c7c87ac0390445f0f88b0d88f2"
+ integrity sha512-7cqRjrY50b8QzRSYyhSpx4WRw2YuO0KKIGQEVk5J8uoz2BanawykgZGoWEqKm7pVIbzFDN0SpPcVV4IhOFkl8A==
+
+"@material-ui/utils@^4.11.2":
+ version "4.11.2"
+ resolved "https://registry.yarnpkg.com/@material-ui/utils/-/utils-4.11.2.tgz#f1aefa7e7dff2ebcb97d31de51aecab1bb57540a"
+ integrity sha512-Uul8w38u+PICe2Fg2pDKCaIG7kOyhowZ9vjiC1FsVwPABTW8vPPKfF6OvxRq3IiBaI1faOJmgdvMG7rMJARBhA==
+ dependencies:
+ "@babel/runtime" "^7.4.4"
+ prop-types "^15.7.2"
+ react-is "^16.8.0 || ^17.0.0"
+
"@nodelib/fs.scandir@2.1.4":
version "2.1.4"
resolved "https://registry.npmjs.org/@nodelib/fs.scandir/-/fs.scandir-2.1.4.tgz"
@@ -1828,6 +1904,13 @@
"@types/history" "*"
"@types/react" "*"
+"@types/react-transition-group@^4.2.0":
+ version "4.4.2"
+ resolved "https://registry.yarnpkg.com/@types/react-transition-group/-/react-transition-group-4.4.2.tgz#38890fd9db68bf1f2252b99a942998dc7877c5b3"
+ integrity sha512-KibDWL6nshuOJ0fu8ll7QnV/LVTo3PzQ9aCPnRUYPfX7eZohHwLIdNHj7pftanREzHNP4/nJa8oeM73uSiavMQ==
+ dependencies:
+ "@types/react" "*"
+
"@types/react-transition-group@^4.4.1":
version "4.4.1"
resolved "https://registry.npmjs.org/@types/react-transition-group/-/react-transition-group-4.4.1.tgz"
@@ -3314,6 +3397,11 @@ cliui@^6.0.0:
strip-ansi "^6.0.0"
wrap-ansi "^6.2.0"
+clsx@^1.0.4:
+ version "1.1.1"
+ resolved "https://registry.yarnpkg.com/clsx/-/clsx-1.1.1.tgz#98b3134f9abbdf23b2663491ace13c5c03a73188"
+ integrity sha512-6/bPho624p3S2pMyvP5kKBPXnI3ufHLObBFCfgx+LkeR5lg2XYy2hqZqUf45ypD8COn2bhgGJSUE+l5dhNBieA==
+
co@^4.6.0:
version "4.6.0"
resolved "https://registry.npmjs.org/co/-/co-4.6.0.tgz"
@@ -3753,6 +3841,14 @@ css-tree@^1.1.2:
mdn-data "2.0.14"
source-map "^0.6.1"
+css-vendor@^2.0.8:
+ version "2.0.8"
+ resolved "https://registry.yarnpkg.com/css-vendor/-/css-vendor-2.0.8.tgz#e47f91d3bd3117d49180a3c935e62e3d9f7f449d"
+ integrity sha512-x9Aq0XTInxrkuFeHKbYC7zWY8ai7qJ04Kxd9MnvbC1uO5DagxoHQjm4JvG+vCdXOoFtCjbL2XSZfxmoYa9uQVQ==
+ dependencies:
+ "@babel/runtime" "^7.8.3"
+ is-in-browser "^1.0.2"
+
css-what@^3.2.1:
version "3.4.2"
resolved "https://registry.npmjs.org/css-what/-/css-what-3.4.2.tgz"
@@ -3889,6 +3985,11 @@ cssstyle@^2.2.0:
dependencies:
cssom "~0.3.6"
+csstype@^2.5.2:
+ version "2.6.17"
+ resolved "https://registry.yarnpkg.com/csstype/-/csstype-2.6.17.tgz#4cf30eb87e1d1a005d8b6510f95292413f6a1c0e"
+ integrity sha512-u1wmTI1jJGzCJzWndZo8mk4wnPTZd1eOIYTYvuEyOQGfmDl3TrabCCfKnOC86FZwW/9djqTl933UF/cS425i9A==
+
csstype@^3.0.2:
version "3.0.7"
resolved "https://registry.npmjs.org/csstype/-/csstype-3.0.7.tgz"
@@ -5476,7 +5577,7 @@ hmac-drbg@^1.0.1:
minimalistic-assert "^1.0.0"
minimalistic-crypto-utils "^1.0.1"
-hoist-non-react-statics@^3.1.0:
+hoist-non-react-statics@^3.1.0, hoist-non-react-statics@^3.3.2:
version "3.3.2"
resolved "https://registry.npmjs.org/hoist-non-react-statics/-/hoist-non-react-statics-3.3.2.tgz"
integrity sha512-/gGivxi8JPKWNm/W0jSmzcMPpfpPLc3dY/6GxhX2hQ9iGj3aDfklV4ET7NjKpSinLpJ5vafa9iiGIEZg10SfBw==
@@ -5644,6 +5745,11 @@ human-signals@^1.1.1:
resolved "https://registry.npmjs.org/human-signals/-/human-signals-1.1.1.tgz"
integrity sha512-SEQu7vl8KjNL2eoGBLF3+wAjpsNfA9XMlXAYj/3EdaNfAlxKthD1xjEQfGOUhllCGGJVNY34bRr6lPINhNjyZw==
+hyphenate-style-name@^1.0.3:
+ version "1.0.4"
+ resolved "https://registry.yarnpkg.com/hyphenate-style-name/-/hyphenate-style-name-1.0.4.tgz#691879af8e220aea5750e8827db4ef62a54e361d"
+ integrity sha512-ygGZLjmXfPHj+ZWh6LwbC37l43MhfztxetbFCoYTM2VjkIUpeHgSNn7QIyVFj7YQ1Wl9Cbw5sholVJPzWvC2MQ==
+
iconv-lite@0.4.24:
version "0.4.24"
resolved "https://registry.npmjs.org/iconv-lite/-/iconv-lite-0.4.24.tgz"
@@ -6007,6 +6113,11 @@ is-glob@^4.0.0, is-glob@^4.0.1, is-glob@~4.0.1:
dependencies:
is-extglob "^2.1.1"
+is-in-browser@^1.0.2, is-in-browser@^1.1.3:
+ version "1.1.3"
+ resolved "https://registry.yarnpkg.com/is-in-browser/-/is-in-browser-1.1.3.tgz#56ff4db683a078c6082eb95dad7dc62e1d04f835"
+ integrity sha1-Vv9NtoOgeMYILrldrX3GLh0E+DU=
+
is-module@^1.0.0:
version "1.0.0"
resolved "https://registry.npmjs.org/is-module/-/is-module-1.0.0.tgz"
@@ -6797,6 +6908,76 @@ jsprim@^1.2.2:
json-schema "0.2.3"
verror "1.10.0"
+jss-plugin-camel-case@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-camel-case/-/jss-plugin-camel-case-10.7.1.tgz#e7f7097cf97e9deec599cef3275e213452318b93"
+ integrity sha512-+ioIyWvmAfgDCWXsQcW1NMnLBvRinOVFkSYJUgewQ6TynOcSj5F1bSU23B7z0p1iqK0PPHIU62xY1iNJD33WGA==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ hyphenate-style-name "^1.0.3"
+ jss "10.7.1"
+
+jss-plugin-default-unit@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-default-unit/-/jss-plugin-default-unit-10.7.1.tgz#826270e2ee38d7024a281ac67c30d6944f124786"
+ integrity sha512-tW+dfYVNARBQb/ONzBwd8uyImigyzMiAEDai+AbH5rcHg5h3TtqhAkxx06iuZiT/dZUiFdSKlbe3q9jZGAPIwA==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.7.1"
+
+jss-plugin-global@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-global/-/jss-plugin-global-10.7.1.tgz#9725c46d662aac2e596a0a8741944c060e2b90a1"
+ integrity sha512-FbxCnu44IkK/bw8X3CwZKmcAnJqjAb9LujlAc/aP0bMSdVa3/MugKQRyeQSu00uGL44feJJDoeXXiHOakBr/Zw==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.7.1"
+
+jss-plugin-nested@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-nested/-/jss-plugin-nested-10.7.1.tgz#35563a7a710a45307fd6b9742ffada1d72a62eb7"
+ integrity sha512-RNbICk7FlYKaJyv9tkMl7s6FFfeLA3ubNIFKvPqaWtADK0KUaPsPXVYBkAu4x1ItgsWx67xvReMrkcKA0jSXfA==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.7.1"
+ tiny-warning "^1.0.2"
+
+jss-plugin-props-sort@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-props-sort/-/jss-plugin-props-sort-10.7.1.tgz#1d12b26048541ed3a2ed1b69f7fc231605728362"
+ integrity sha512-eyd5FhA+J0QrpqXxO7YNF/HMSXXl4pB0EmUdY4vSJI4QG22F59vQ6AHtP6fSwhmBdQ98Qd9gjfO+RMxcE39P1A==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.7.1"
+
+jss-plugin-rule-value-function@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-rule-value-function/-/jss-plugin-rule-value-function-10.7.1.tgz#123eb796eb9982f8efa7a7e362daddd90c0c69fe"
+ integrity sha512-fGAAImlbaHD3fXAHI3ooX6aRESOl5iBt3LjpVjxs9II5u9tzam7pqFUmgTcrip9VpRqYHn8J3gA7kCtm8xKwHg==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ jss "10.7.1"
+ tiny-warning "^1.0.2"
+
+jss-plugin-vendor-prefixer@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss-plugin-vendor-prefixer/-/jss-plugin-vendor-prefixer-10.7.1.tgz#217821be2d6dacee31d2d464886760ba7742e19a"
+ integrity sha512-1UHFmBn7hZNsHXTkLLOL8abRl8vi+D1EVzWD4WmLFj55vawHZfnH1oEz6TUf5Y61XHv0smdHabdXds6BgOXe3A==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ css-vendor "^2.0.8"
+ jss "10.7.1"
+
+jss@10.7.1, jss@^10.5.1:
+ version "10.7.1"
+ resolved "https://registry.yarnpkg.com/jss/-/jss-10.7.1.tgz#16d846e1a22fb42e857b99f9c6a0c5a27341c804"
+ integrity sha512-5QN8JSVZR6cxpZNeGfzIjqPEP+ZJwJJfZbXmeABNdxiExyO+eJJDy6WDtqTf8SDKnbL5kZllEpAP71E/Lt7PXg==
+ dependencies:
+ "@babel/runtime" "^7.3.1"
+ csstype "^3.0.2"
+ is-in-browser "^1.1.3"
+ tiny-warning "^1.0.2"
+
"jsx-ast-utils@^2.4.1 || ^3.0.0", jsx-ast-utils@^3.1.0:
version "3.2.0"
resolved "https://registry.npmjs.org/jsx-ast-utils/-/jsx-ast-utils-3.2.0.tgz"
@@ -8082,6 +8263,11 @@ pnp-webpack-plugin@1.6.4:
dependencies:
ts-pnp "^1.1.6"
+popper.js@1.16.1-lts:
+ version "1.16.1-lts"
+ resolved "https://registry.yarnpkg.com/popper.js/-/popper.js-1.16.1-lts.tgz#cf6847b807da3799d80ee3d6d2f90df8a3f50b05"
+ integrity sha512-Kjw8nKRl1m+VrSFCoVGPph93W/qrSO7ZkqPpTf7F4bk/sqcfWK019dWBUpE/fBOsOQY1dks/Bmcbfn1heM/IsA==
+
portfinder@^1.0.26:
version "1.0.28"
resolved "https://registry.npmjs.org/portfinder/-/portfinder-1.0.28.tgz"
@@ -9097,6 +9283,11 @@ react-is@^16.3.2, react-is@^16.6.0, react-is@^16.7.0, react-is@^16.8.1:
resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"
integrity sha512-24e6ynE2H+OKt4kqsOvNd8kBpV65zoxbA4BVsEOB3ARVWQki/DHzaUoC5KuON/BiccDaCCTZBuOcfZs70kR8bQ==
+"react-is@^16.8.0 || ^17.0.0":
+ version "17.0.2"
+ resolved "https://registry.yarnpkg.com/react-is/-/react-is-17.0.2.tgz#e691d4a8e9c789365655539ab372762b0efb54f0"
+ integrity sha512-w2GsyukL62IJnlaff/nRegPQR94C/XXamvMWmSHRJ4y7Ts/4ocGRmTHvOs8PSE6pB3dWOrD/nueuU5sduBsQ4w==
+
react-is@^17.0.1:
version "17.0.1"
resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz"
@@ -9229,6 +9420,16 @@ react-scripts@4.0.3:
optionalDependencies:
fsevents "^2.1.3"
+react-transition-group@^4.4.0:
+ version "4.4.2"
+ resolved "https://registry.yarnpkg.com/react-transition-group/-/react-transition-group-4.4.2.tgz#8b59a56f09ced7b55cbd53c36768b922890d5470"
+ integrity sha512-/RNYfRAMlZwDSr6z4zNKV6xu53/e2BuaBbGhbyYIXTrmgu/bGHzmqOs7mJSJBHy9Ud+ApHx3QjrkKSp1pxvlFg==
+ dependencies:
+ "@babel/runtime" "^7.5.5"
+ dom-helpers "^5.0.1"
+ loose-envify "^1.4.0"
+ prop-types "^15.6.2"
+
react-transition-group@^4.4.1:
version "4.4.1"
resolved "https://registry.npmjs.org/react-transition-group/-/react-transition-group-4.4.1.tgz"
@@ -10627,7 +10828,7 @@ tiny-invariant@^1.0.2:
resolved "https://registry.npmjs.org/tiny-invariant/-/tiny-invariant-1.1.0.tgz"
integrity sha512-ytxQvrb1cPc9WBEI/HSeYYoGD0kWnGEOR8RY6KomWLBVhqz0RgTwVO9dLrGz7dC+nN9llyI7OKAgRq8Vq4ZBSw==
-tiny-warning@^1.0.0, tiny-warning@^1.0.3:
+tiny-warning@^1.0.0, tiny-warning@^1.0.2, tiny-warning@^1.0.3:
version "1.0.3"
resolved "https://registry.npmjs.org/tiny-warning/-/tiny-warning-1.0.3.tgz"
integrity sha512-lBN9zLN/oAf68o3zNXYrdCt1kP8WsiGW8Oo2ka41b2IM5JL/S1CTyX1rW0mb/zSuJun0ZUrDxx4sqvYS2FWzPA==