From 705279d958a5a4f1bfd274b1fafe0fb7f0e756f5 Mon Sep 17 00:00:00 2001
From: Joshua Hsueh <joshua12696@gmail.com>
Date: Sun, 11 Apr 2021 01:53:08 -0400
Subject: [PATCH] aesthetics

---
 src/components/CreatePool.tsx | 345 +++++++++++++++++-----------------
 1 file changed, 175 insertions(+), 170 deletions(-)

diff --git a/src/components/CreatePool.tsx b/src/components/CreatePool.tsx
index 5842236..4c52cdb 100644
--- a/src/components/CreatePool.tsx
+++ b/src/components/CreatePool.tsx
@@ -60,117 +60,121 @@ const CreatePool = () => {
 	};
 	useEffect(() => {}, []);
 	return (
-		<div className="container">
-			<Card
-				className={classes.root + 'd-inline-flex'}
-				style={{ margin: '0.5rem', background: '#F3F5F4' }}
-			>
-				<CardContent>
-					<div className="form-group">
-						<h1 className="form-title">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 carpool</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>
-					<div className="form-group">
-						<label className="" htmlFor="pool_start">
-							Group:
-						</label>
-						<input
-							type="text"
-							className="form-control"
-							placeholder=""
-							onChange={(event) => setGroup(event.target.value)}
-						></input>
-					</div>
-					<div className="form-group">
-						{/* <label className="" htmlFor="location">
+		<div
+			className=""
+			style={{ minHeight: '100vh', backgroundColor: '#F1EAE8' }}
+		>
+			<div className="container">
+				<Card
+					className={classes.root + 'd-inline-flex'}
+					style={{ margin: '0', background: '#F3F5F4' }}
+				>
+					<CardContent>
+						<div className="form-group">
+							<h1 className="form-title">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 carpool</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>
+						<div className="form-group">
+							<label className="" htmlFor="pool_start">
+								Group:
+							</label>
+							<input
+								type="text"
+								className="form-control"
+								placeholder=""
+								onChange={(event) => setGroup(event.target.value)}
+							></input>
+						</div>
+						<div className="form-group">
+							{/* <label className="" htmlFor="location">
 							Location:
 						</label>
 						<input
@@ -190,66 +194,67 @@ const CreatePool = () => {
 						>
 							Search
 						</button> */}
-						<PlacesAutocomplete
-							value={address}
-							onChange={handleChange}
-							onSelect={handleSelect}
-						>
-							{({
-								getInputProps,
-								suggestions,
-								getSuggestionItemProps,
-								loading,
-							}) => (
-								<div>
-									<label className="" htmlFor="address">
-										Address:
-									</label>
-									<input
-										name="address"
-										id="address"
-										{...getInputProps({
-											placeholder: 'Search Places ...',
-											className: 'location-search-input form-control',
-										})}
-									/>
-									<div className="autocomplete-dropdown-container">
-										{loading && <div>Loading...</div>}
-										{suggestions.map((suggestion) => {
-											const className = suggestion.active
-												? 'suggestion-item--active'
-												: 'suggestion-item';
-											// inline style for demonstration purpose
-											const style = suggestion.active
-												? { backgroundColor: '#fafafa', cursor: 'pointer' }
-												: { backgroundColor: '#ffffff', cursor: 'pointer' };
-											return (
-												<div
-													{...getSuggestionItemProps(suggestion, {
-														className,
-														style,
-													})}
-												>
-													<span>{suggestion.description}</span>
-												</div>
-											);
-										})}
+							<PlacesAutocomplete
+								value={address}
+								onChange={handleChange}
+								onSelect={handleSelect}
+							>
+								{({
+									getInputProps,
+									suggestions,
+									getSuggestionItemProps,
+									loading,
+								}) => (
+									<div>
+										<label className="" htmlFor="address">
+											Address:
+										</label>
+										<input
+											name="address"
+											id="address"
+											{...getInputProps({
+												placeholder: 'Search Places ...',
+												className: 'location-search-input form-control',
+											})}
+										/>
+										<div className="autocomplete-dropdown-container">
+											{loading && <div>Loading...</div>}
+											{suggestions.map((suggestion) => {
+												const className = suggestion.active
+													? 'suggestion-item--active'
+													: 'suggestion-item';
+												// inline style for demonstration purpose
+												const style = suggestion.active
+													? { backgroundColor: '#fafafa', cursor: 'pointer' }
+													: { backgroundColor: '#ffffff', cursor: 'pointer' };
+												return (
+													<div
+														{...getSuggestionItemProps(suggestion, {
+															className,
+															style,
+														})}
+													>
+														<span>{suggestion.description}</span>
+													</div>
+												);
+											})}
+										</div>
 									</div>
-								</div>
-							)}
-						</PlacesAutocomplete>
-					</div>
-					<Button
-						variant="contained"
-						color="primary"
-						className={classes.button}
-						onClick={onClick}
-						startIcon={<CloudUploadIcon />}
-					>
-						Submit
-					</Button>
-				</CardContent>
-			</Card>
+								)}
+							</PlacesAutocomplete>
+						</div>
+						<Button
+							variant="contained"
+							color="primary"
+							className={classes.button}
+							onClick={onClick}
+							startIcon={<CloudUploadIcon />}
+						>
+							Submit
+						</Button>
+					</CardContent>
+				</Card>
+			</div>
 		</div>
 	);
 };