added cards to profile

package-lock.json

@@ -1875,12 +1875,19 @@
 		"node_modules/@popperjs/core": {
 			"version": "2.9.2",
 			"resolved": "https://registry.npmjs.org/@popperjs/core/-/core-2.9.2.tgz",
-      "integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q=="
+			"integrity": "sha512-VZMYa7+fXHdwIq1TDhSXoVmSPEGM/aa+6Aiq3nVVJ9bXr24zScr+NlKFKC3iPljA7ho/GAZr+d2jOf5GIRC30Q==",
+			"funding": {
+				"type": "opencollective",
+				"url": "https://opencollective.com/popperjs"
+			}
 		},
 		"node_modules/@restart/context": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+			"integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==",
+			"peerDependencies": {
+				"react": ">=16.3.2"
+			}
 		},
 		"node_modules/@restart/hooks": {
 			"version": "0.3.26",
@@ -1889,6 +1896,9 @@
 			"dependencies": {
 				"lodash": "^4.17.20",
 				"lodash-es": "^4.17.20"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0"
 			}
 		},
 		"node_modules/@rollup/plugin-node-resolve": {
@@ -13403,6 +13413,9 @@
 			"dependencies": {
 				"react-is": "^16.3.2",
 				"warning": "^4.0.0"
+			},
+			"peerDependencies": {
+				"react": ">=0.14.0"
 			}
 		},
 		"node_modules/prop-types-extra/node_modules/react-is": {
@@ -13652,6 +13665,10 @@
 				"react-transition-group": "^4.4.1",
 				"uncontrollable": "^7.2.1",
 				"warning": "^4.0.3"
+			},
+			"peerDependencies": {
+				"react": ">=16.8.0",
+				"react-dom": ">=16.8.0"
 			}
 		},
 		"node_modules/react-dev-utils": {
@@ -13839,6 +13856,10 @@
 				"prop-types": "^15.7.2",
 				"uncontrollable": "^7.0.0",
 				"warning": "^4.0.3"
+			},
+			"peerDependencies": {
+				"react": ">=16.3.0",
+				"react-dom": ">=16.3.0"
 			}
 		},
 		"node_modules/react-refresh": {
@@ -16964,6 +16985,9 @@
 				"@types/react": ">=16.9.11",
 				"invariant": "^2.2.4",
 				"react-lifecycles-compat": "^3.0.4"
+			},
+			"peerDependencies": {
+				"react": ">=15.0.0"
 			}
 		},
 		"node_modules/unicode-canonical-property-names-ecmascript": {
@@ -20858,7 +20882,8 @@
 		"@restart/context": {
 			"version": "2.1.4",
 			"resolved": "https://registry.npmjs.org/@restart/context/-/context-2.1.4.tgz",
-      "integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q=="
+			"integrity": "sha512-INJYZQJP7g+IoDUh/475NlGiTeMfwTXUEr3tmRneckHIxNolGOW9CTq83S8cxq0CgJwwcMzMJFchxvlwe7Rk8Q==",
+			"requires": {}
 		},
 		"@restart/hooks": {
 			"version": "0.3.26",

src/components/MyPools.tsx

@@ -1,6 +1,22 @@
 import React, { useState, useEffect } from 'react';
 import { API_ENDPOINT } from '../api/api';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 
+const useStyles = makeStyles({
+	root: {
+		maxWidth: 345,
+	},
+	media: {
+		height: 140,
+	},
+});
 const MyPools = () => {
 	// const id = props.match.params.id;
 	const [pools, setPools] = useState([
@@ -67,6 +83,8 @@ const MyPools = () => {
 
 	const maybePluralize = (count: number, noun: string, suffix = 's') =>
 		`${count} ${noun}${count !== 1 ? suffix : ''}`;
+	const classes = useStyles();
+
 	return (
 		<div className="bg-dark" style={{ minHeight: '100vh' }}>
 			<h1
@@ -92,22 +110,32 @@ const MyPools = () => {
 						background = '#FFFFFF';
 					}
 					return (
-						<div
+						<Card className={classes.root + 'd-inline-flex'}>
-							className="card card-body text-left"
+							<CardActionArea>
-							style={{ backgroundColor: background }}
+								<CardContent>
-						>
+									<Typography gutterBottom variant="h5" component="h2">
-							<a href={'/Pool/' + pool.id} className="card-title">
 										{pool.pool_title}
-							</a>
+									</Typography>
-							<p className="text-left">
+									<Typography
-								Capacity: {pool.participants.length} / {pool.capacity}
+										variant="body2"
-							</p>
+										color="textSecondary"
-							<p className="text-left">Start Time: {pool.start_time}</p>
+										component="p"
-							<p className="text-left">End Time: {pool.end_time}</p>
+									>
-							<p className="text-warning">
+										Lizards are a widespread group of squamate reptiles, with
-								{maybePluralize(pool.comments.length, 'comment')}
+										over 6,000 species, ranging across all continents except
-							</p>
+										Antarctica
-						</div>
+									</Typography>
+								</CardContent>
+							</CardActionArea>
+							<CardActions>
+								<Button size="small" color="primary">
+									Share
+								</Button>
+								<Button size="small" color="primary">
+									Learn More
+								</Button>
+							</CardActions>
+						</Card>
 					);
 				})}
 			</div>

src/components/Profile.tsx

@@ -1,5 +1,22 @@
 import React, { useState, useEffect } from 'react';
+import { API_ENDPOINT } from '../api/api';
+import { makeStyles } from '@material-ui/core/styles';
+import Card from '@material-ui/core/Card';
+import CardActionArea from '@material-ui/core/CardActionArea';
+import CardActions from '@material-ui/core/CardActions';
+import CardContent from '@material-ui/core/CardContent';
+import CardMedia from '@material-ui/core/CardMedia';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
 
+const useStyles = makeStyles({
+	root: {
+		maxWidth: 345,
+	},
+	media: {
+		height: 140,
+	},
+});
 const Profile = () => {
 	const [state, setState] = useState({
 		user: {
@@ -45,6 +62,7 @@ const Profile = () => {
 		],
 		groups: [],
 	});
+	const classes = useStyles();
 
 	const callAPI = () => {
 		fetch(`${process.env.REACT_APP_API_ENDPOINT}/profile/`)
@@ -60,7 +78,10 @@ const Profile = () => {
 		callAPI();
 	}, []);
 	return (
-		<div className="" style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}>
+		<div
+			className=""
+			style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
+		>
 			<h1
 				className="d-flex justify-content-center p-4"
 				style={{ backgroundColor: '#F1EAE8', fontFamily: 'Courier New' }}
@@ -68,19 +89,52 @@ const Profile = () => {
 				Profile
 			</h1>
 			<div className="container" style={{ fontFamily: 'Courier New' }}>
-				<h2><u>{state.user.username}'s Pools</u></h2>
+				<h2>
+					<u>{state.user.username}'s Pools</u>
+				</h2>
 				<div className="">
 					{state.pools.map((pool) => {
 						return (
-							<div
+							<Card className={classes.root + 'd-inline-flex'}>
-								className="text-left m-2 p-1"
+								<CardActionArea href={'/pool/' + pool.id}>
-								style={{minHeight: 50, minWidth: '200px', maxWidth: '200px', border: '3px #000000 solid', verticalAlign: 'center', textAlign: 'center', padding: '10px 10px 5px 10px', margin: '0px 10px 0px 10px', display: 'inline'}}>
+									<CardContent>
-								<a href={'pool/' + pool.id}>{pool.title}</a>
+										<Typography gutterBottom variant="h5" component="h2">
-							</div>
+											{pool.title}
+										</Typography>
+										<Typography
+											variant="body2"
+											color="textSecondary"
+											component="p"
+										>
+											{pool.description}
+										</Typography>
+									</CardContent>
+								</CardActionArea>
+								<CardActions>
+									<Button
+										size="small"
+										color="primary"
+										onClick={() => {
+											let link: string = 'localhost:3000/pool/' + pool.id;
+											navigator.clipboard.writeText(link);
+										}}
+									>
+										Share
+									</Button>
+									<Button
+										href={'/pool/' + pool.id}
+										size="small"
+										color="primary"
+									>
+										Learn More
+									</Button>
+								</CardActions>
+							</Card>
 						);
 					})}
 				</div>
 			</div>
+			<script></script>
 		</div>
 	);
 };

yarn.lock

@@ -9460,7 +9460,7 @@
     "strip-ansi" "6.0.0"
     "text-table" "0.2.0"
 
-"react-dom@^17.0.2":
+"react-dom@^17.0.2", "react-dom@>=16.3.0", "react-dom@>=16.8.0":
   "integrity" "sha512-s4h96KtLDUQlsENhMn1ar8t2bEa+q/YAtj8pPPdIjPDGBDIVNsrD9aXNWqspUe6AzKCIG0C1HZZLqLV7qpOBGA=="
   "resolved" "https://registry.npmjs.org/react-dom/-/react-dom-17.0.2.tgz"
   "version" "17.0.2"
@@ -9628,7 +9628,7 @@
     "loose-envify" "^1.4.0"
     "prop-types" "^15.6.2"
 
-"react@^17.0.2":
+"react@^17.0.2", "react@>=0.14.0", "react@>=15.0.0", "react@>=16.3.0", "react@>=16.3.2", "react@>=16.8.0":
   "integrity" "sha512-gnhPt75i/dq/z3/6q/0asP78D0u592D5L1pd7M8P+dck6Fu/jJeL6iVVK23fptSUZj8Vjf++7wXA8UNclGQcbA=="
   "resolved" "https://registry.npmjs.org/react/-/react-17.0.2.tgz"
   "version" "17.0.2"