better form ui

src/components/CreateGroup.tsx

@@ -1,43 +1,76 @@
 import { useCallback } from 'react';
+import { makeAPIPostCall } from '../api/utils';
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import { useState, useEffect } from 'react';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
 
+const useStyles = makeStyles((theme) => ({
+	root: {
+		maxWidth: 345,
+	},
+	media: {
+		height: 140,
+	},
+	button: {
+		margin: theme.spacing(1),
+	},
+}));
 const CreateGroup = () => {
-	const onSubmit = useCallback<React.FormEventHandler<HTMLFormElement>>((e) => {
-		e.preventDefault();
-
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`)
-			.then((response) => response.json())
-			.then((data) => {
-				console.log(data);
-			});
-	}, []);
+	const [title, setTitle] = useState('No Title');
+	const classes = useStyles();
+	useEffect(() => {}, []);
+	const onClick = () => {
+		console.log({
+			title: title,
+		});
+		makeAPIPostCall('/group', {
+			title,
+		});
+	};
 
 	return (
-		<div
-			className="bg-dark"
-			style={{ minHeight: '100vh', fontFamily: 'Courier New' }}
-		>
-			<div
-				className="container card card-body text-left "
-				style={{ backgroundColor: '#F1EAE8' }}
+		<div className="container">
+			<Card
+				className={classes.root + 'd-inline-flex'}
+				style={{ margin: '0.5rem', background: '#F3F5F4' }}
 			>
-				<form onSubmit={onSubmit}>
-					<div className="form-group">
-						<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
-							Create Group
-						</h1>
-						<label className="" htmlFor="title">
-							Group Title:{' '}
-						</label>
-						<input
-							type="text"
-							id="title"
-							name="title"
-							className="form-control d-flex"
-							placeholder="Enter title here..."
-						/>
-					</div>
-				</form>
-			</div>
+				<CardContent>
+					<Typography gutterBottom variant="h5" component="h2"></Typography>
+					<Typography variant="body2" color="textSecondary" component="p">
+						<form>
+							<div className="form-group">
+								<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
+									Create Group
+								</h1>
+								<label className="" htmlFor="title">
+									Group Title:{' '}
+								</label>
+								<input
+									type="text"
+									id="title"
+									name="title"
+									className="form-control d-flex"
+									placeholder="Enter title here..."
+									onChange={(event) => setTitle(event.target.value)}
+								/>
+							</div>
+							<Button
+								variant="contained"
+								color="primary"
+								className={classes.button}
+								onClick={onClick}
+								startIcon={<CloudUploadIcon />}
+							>
+								Submit
+							</Button>
+						</form>
+					</Typography>
+				</CardContent>
+			</Card>
 		</div>
 	);
 };

src/components/CreatePool.tsx

@@ -1,7 +1,23 @@
 import { FormEventHandler } from 'react';
 import { makeAPIPostCall } from '../api/utils';
-import React, { useState, useEffect } from 'react';
-
+import Card from '@material-ui/core/Card';
+import CardContent from '@material-ui/core/CardContent';
+import { makeStyles } from '@material-ui/core/styles';
+import Button from '@material-ui/core/Button';
+import Typography from '@material-ui/core/Typography';
+import CloudUploadIcon from '@material-ui/icons/CloudUpload';
+import { useState, useEffect } from 'react';
+const useStyles = makeStyles((theme) => ({
+	root: {
+		maxWidth: 345,
+	},
+	media: {
+		height: 140,
+	},
+	button: {
+		margin: theme.spacing(1),
+	},
+}));
 const CreatePool = () => {
 	const [title, setTitle] = useState('No Title');
 	const [capacity, setCapacity] = useState(0);
@@ -10,16 +26,8 @@ const CreatePool = () => {
 	const [direction, setDirection] = useState('pickup');
 	const [type, setType] = useState('offer');
 	const [description, setDescription] = useState('');
+	const classes = useStyles();
 
-	const onSubmit: FormEventHandler<HTMLFormElement> = (e) => {
-		e.preventDefault();
-
-		fetch(`${process.env.REACT_APP_API_ENDPOINT}/createPool`)
-			.then((response) => response.json())
-			.then((data) => {
-				console.log(data);
-			});
-	};
 	const onClick = () => {
 		console.log({
 			title: title,
@@ -42,116 +50,126 @@ const CreatePool = () => {
 	};
 	useEffect(() => {}, []);
 	return (
-		<div
-			className="bg-dark"
-			style={{ minHeight: '100vh', fontFamily: 'Courier New' }}
-		>
-			<div
-				className="container card card-body text-left "
-				style={{ backgroundColor: '#F1EAE8' }}
+		<div className="container">
+			<Card
+				className={classes.root + 'd-inline-flex'}
+				style={{ margin: '0.5rem', background: '#F3F5F4' }}
 			>
-				<form onSubmit={onSubmit}>
-					<div className="form-group">
-						<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
-							Create Pool
-						</h1>
-						<label className="" htmlFor="title">
-							Pool Title:{' '}
-						</label>
-						<input
-							type="text"
-							id="title"
-							name="title"
-							className="form-control d-flex"
-							placeholder="Enter title here..."
-							onChange={(event) => setTitle(event.target.value)}
-						></input>
-					</div>
-					<div className="form-group">
-						<label className="" htmlFor="capacity">
-							Pool Capacity:
-						</label>
-						<input
-							type="number"
-							id="capacity"
-							name="capacity"
-							className="form-control d-flex"
-							placeholder="0"
-							onChange={(event) => setCapacity(parseInt(event.target.value))}
-						></input>
-					</div>
-					<div className="form-group">
-						<label className="" htmlFor="pool_start">
-							Start Time:
-						</label>
-						<input
-							type="datetime-local"
-							id="pool_start"
-							name="pool_start"
-							className="form-control"
-							placeholder=""
-							onChange={(event) => setStart(event.target.value)}
-						></input>
-					</div>
-					<div className="form-group">
-						<label className="" htmlFor="pool_end">
-							End Time:
-						</label>
-						<input
-							type="datetime-local"
-							id="pool_end"
-							name="pool_end"
-							className="form-control"
-							placeholder="Enter text here..."
-							onChange={(event) => setEnd(event.target.value)}
-						></input>
-					</div>
-					<div className="form-group">
-						<label className="" htmlFor="pool_direction">
-							Direction:
-						</label>
-						<select
-							id="direction"
-							name="direction"
-							onChange={(event) => setDirection(event.target.value)}
-						>
-							<option value="pickup">Picking Up</option>
-							<option value="dropoff">Dropping Off</option>
-						</select>
-					</div>
-					<div className="form-group">
-						<label className="" htmlFor="pool_type">
-							Type:
-						</label>
-						<select
-							id="type"
-							name="type"
-							onChange={(event) => setType(event.target.value)}
-						>
-							<option value="offer">Offering carpool</option>
-							<option value="request">Requesting carpooll</option>
-						</select>
-					</div>
-					<div className="form-group">
-						<label className="" htmlFor="title">
-							Pool Description:
-						</label>
-						<textarea
-							onChange={(event) => setDescription(event.target.value)}
-							id="Pool-text"
-							name="Pool-text"
-							style={{ height: '200px' }}
-							className="form-control"
-							placeholder="Enter text here..."
-						/>
-					</div>
+				<CardContent>
+					<Typography gutterBottom variant="h5" component="h2"></Typography>
+					<Typography variant="body2" color="textSecondary" component="p">
+						<form>
+							<div className="form-group">
+								<h1 className="form-title" style={{ fontFamily: 'Impact' }}>
+									Create Pool
+								</h1>
+								<label className="" htmlFor="title">
+									Pool Title:{' '}
+								</label>
+								<input
+									type="text"
+									id="title"
+									name="title"
+									className="form-control d-flex"
+									placeholder="Enter title here..."
+									onChange={(event) => setTitle(event.target.value)}
+								></input>
+							</div>
+							<div className="form-group">
+								<label className="" htmlFor="capacity">
+									Pool Capacity:
+								</label>
+								<input
+									type="number"
+									id="capacity"
+									name="capacity"
+									className="form-control d-flex"
+									placeholder="0"
+									onChange={(event) =>
+										setCapacity(parseInt(event.target.value))
+									}
+								></input>
+							</div>
+							<div className="form-group">
+								<label className="" htmlFor="pool_start">
+									Start Time:
+								</label>
+								<input
+									type="datetime-local"
+									id="pool_start"
+									name="pool_start"
+									className="form-control"
+									placeholder=""
+									onChange={(event) => setStart(event.target.value)}
+								></input>
+							</div>
+							<div className="form-group">
+								<label className="" htmlFor="pool_end">
+									End Time:
+								</label>
+								<input
+									type="datetime-local"
+									id="pool_end"
+									name="pool_end"
+									className="form-control"
+									placeholder="Enter text here..."
+									onChange={(event) => setEnd(event.target.value)}
+								></input>
+							</div>
+							<div className="form-group">
+								<label className="" htmlFor="pool_direction">
+									Direction:
+								</label>
+								<select
+									id="direction"
+									name="direction"
+									onChange={(event) => setDirection(event.target.value)}
+								>
+									<option value="pickup">Picking Up</option>
+									<option value="dropoff">Dropping Off</option>
+								</select>
+							</div>
+							<div className="form-group">
+								<label className="" htmlFor="pool_type">
+									Type:
+								</label>
+								<select
+									id="type"
+									name="type"
+									onChange={(event) => setType(event.target.value)}
+								>
+									<option value="offer">Offering carpool</option>
+									<option value="request">Requesting carpooll</option>
+								</select>
+							</div>
+							<div className="form-group">
+								<label className="" htmlFor="title">
+									Pool Description:
+								</label>
+								<textarea
+									onChange={(event) => setDescription(event.target.value)}
+									id="Pool-text"
+									name="Pool-text"
+									style={{ height: '200px' }}
+									className="form-control"
+									placeholder="Enter text here..."
+								/>
+							</div>
 
-					<button className="btn btn-success text-left" onClick={onClick}>
-						Submit
-					</button>
-					<br />
-				</form>
-			</div>
+							<Button
+								variant="contained"
+								color="primary"
+								className={classes.button}
+								onClick={onClick}
+								startIcon={<CloudUploadIcon />}
+							>
+								Submit
+							</Button>
+							<br />
+						</form>
+					</Typography>
+				</CardContent>
+			</Card>
 		</div>
 	);
 };