From 8ad8726780ebb33cc1d3b4ee45aa2e240426fef0 Mon Sep 17 00:00:00 2001
From: Michael Fatemi <myfatemi04@gmail.com>
Date: Wed, 11 Aug 2021 19:21:14 -0400
Subject: [PATCH] wonderful two column layouts

---
 .../ActiveCarpools/ActiveCarpools.tsx         |  3 +-
 src/components/App.tsx                        |  4 +-
 src/components/Event/Event.tsx                |  2 +-
 src/components/Event/EventPlaceholder.tsx     |  4 +-
 src/components/EventCreator/EventCreator.tsx  |  2 +-
 src/components/Group/Group.tsx                | 64 ++++++++++---------
 src/components/Group/GroupMembersLink.tsx     |  2 +-
 src/components/GroupCreator/GroupCreator.tsx  |  2 +-
 src/components/GroupJoinerLink.tsx            |  2 +-
 src/components/Groups/GroupList.tsx           |  2 +-
 src/components/Groups/Groups.tsx              |  1 +
 src/components/UI/UITwoColumns.tsx            | 47 ++++++++++++++
 src/components/WheelShare.tsx                 | 42 +++---------
 13 files changed, 106 insertions(+), 71 deletions(-)
 create mode 100644 src/components/UI/UITwoColumns.tsx

diff --git a/src/components/ActiveCarpools/ActiveCarpools.tsx b/src/components/ActiveCarpools/ActiveCarpools.tsx
index e064c69..ccc24f3 100644
--- a/src/components/ActiveCarpools/ActiveCarpools.tsx
+++ b/src/components/ActiveCarpools/ActiveCarpools.tsx
@@ -7,7 +7,7 @@ import UISecondaryBox from '../UI/UISecondaryBox';
 function ActiveCarpoolListItem({ carpool }: { carpool: ICarpool }) {
 	return (
 		<div>
-			<h2>{carpool.name}</h2>
+			<h4>{carpool.name}</h4>
 			<UILink href={`/carpools/${carpool.id}`}>View carpool</UILink>
 		</div>
 	);
@@ -25,6 +25,7 @@ export default function ActiveCarpools() {
 			style={{
 				display: 'flex',
 				flexDirection: 'column',
+				width: '19rem',
 			}}
 		>
 			<h1 style={{ textAlign: 'center' }}>Carpools</h1>
diff --git a/src/components/App.tsx b/src/components/App.tsx
index 7700f7f..d5956a8 100644
--- a/src/components/App.tsx
+++ b/src/components/App.tsx
@@ -14,7 +14,7 @@ import WheelShareLoggedOut from './WheelShareLoggedOut';
 const Authenticator = lazy(() => import('./Authentication/Authenticator'));
 const CarpoolPage = lazy(() => import('./Carpool/CarpoolPage'));
 const EventPage = lazy(() => import('./Event/EventPage'));
-const Group = lazy(() => import('./Group/GroupPage'));
+const GroupPage = lazy(() => import('./Group/GroupPage'));
 
 const style: CSSProperties = {
 	display: 'flex',
@@ -53,7 +53,7 @@ export default function App() {
 									<Route path="/" exact component={WheelShare} />
 									<Route path="/carpools/:id" component={CarpoolPage} />
 									<Route path="/events/:id" component={EventPage} />
-									<Route path="/groups/:id" component={Group} />
+									<Route path="/groups/:id" component={GroupPage} />
 								</NotificationsProvider>
 							) : (
 								<>
diff --git a/src/components/Event/Event.tsx b/src/components/Event/Event.tsx
index d90da4b..6295d5d 100644
--- a/src/components/Event/Event.tsx
+++ b/src/components/Event/Event.tsx
@@ -53,7 +53,7 @@ export default function Event({
 				tentativeInvites,
 			}}
 		>
-			<UISecondaryBox style={{}}>
+			<UISecondaryBox style={{ minWidth: '15rem' }}>
 				<div style={{ textAlign: 'center' }}>
 					<UISecondaryHeader>{name}</UISecondaryHeader>
 					{group && <GroupName group={group} />}
diff --git a/src/components/Event/EventPlaceholder.tsx b/src/components/Event/EventPlaceholder.tsx
index f108f7d..c144251 100644
--- a/src/components/Event/EventPlaceholder.tsx
+++ b/src/components/Event/EventPlaceholder.tsx
@@ -2,6 +2,8 @@ import UISecondaryBox from '../UI/UISecondaryBox';
 
 export default function EventPlaceholder() {
 	return (
-		<UISecondaryBox style={{ height: '10rem' }}>Loading...</UISecondaryBox>
+		<UISecondaryBox style={{ height: '10rem', width: '15rem' }}>
+			Loading...
+		</UISecondaryBox>
 	);
 }
diff --git a/src/components/EventCreator/EventCreator.tsx b/src/components/EventCreator/EventCreator.tsx
index 7133d71..6becab4 100644
--- a/src/components/EventCreator/EventCreator.tsx
+++ b/src/components/EventCreator/EventCreator.tsx
@@ -84,7 +84,7 @@ export default function EventCreator({ group }: { group: IGroup }) {
 	]);
 
 	return (
-		<UISecondaryBox style={{ width: '100%', textAlign: 'center' }}>
+		<UISecondaryBox style={{ textAlign: 'center' }}>
 			<h1 style={{ textAlign: 'center', marginBottom: '0.5rem' }}>
 				Create Event
 			</h1>
diff --git a/src/components/Group/Group.tsx b/src/components/Group/Group.tsx
index 9ff5aff..4650344 100644
--- a/src/components/Group/Group.tsx
+++ b/src/components/Group/Group.tsx
@@ -6,6 +6,7 @@ import EventStream from '../EventStream';
 import { useMe } from '../hooks';
 import { IGroup } from '../types';
 import UILink from '../UI/UILink';
+import UITwoColumns from '../UI/UITwoColumns';
 import useImmutable from '../useImmutable';
 import GroupMembersLink from './GroupMembersLink';
 import GroupSettingsLink from './GroupSettingsLink';
@@ -47,36 +48,41 @@ export default function Group({ id }: { id: number }) {
 
 	return group ? (
 		<GroupContext.Provider value={{ group }}>
-			<h1>{group.name}</h1>
-			<div
-				style={{
-					display: 'flex',
-					flexDirection: 'column',
-					width: '100%',
-					alignItems: 'center',
-				}}
-			>
-				<UILink href="/">Home</UILink>
-				<br />
-				<GroupMembersLink />
-				<br />
-				{isAdmin && (
-					<>
-						<GroupSettingsLink />
+			<UITwoColumns
+				first={
+					<div
+						style={{
+							display: 'flex',
+							flexDirection: 'column',
+							minWidth: '10rem',
+						}}
+					>
+						<h1>{group.name}</h1>
+						<UILink href="/">Home</UILink>
 						<br />
-					</>
-				)}
-				<EventCreatorLink />
-			</div>
-			<br />
-
-			{group.events?.length > 0 ? (
-				<EventStream events={group.events} />
-			) : (
-				<span>
-					There are no events yet. Click 'create event' above to add one!
-				</span>
-			)}
+						<GroupMembersLink />
+						<br />
+						{isAdmin && (
+							<>
+								<GroupSettingsLink />
+								<br />
+							</>
+						)}
+						<EventCreatorLink />
+					</div>
+				}
+				firstFlex={1}
+				second={
+					group.events?.length > 0 ? (
+						<EventStream events={group.events} />
+					) : (
+						<span>
+							There are no events yet. Click 'create event' above to add one!
+						</span>
+					)
+				}
+				secondFlex={2}
+			/>
 		</GroupContext.Provider>
 	) : (
 		<h1>Group not found</h1>
diff --git a/src/components/Group/GroupMembersLink.tsx b/src/components/Group/GroupMembersLink.tsx
index fc135b9..1b17f4c 100644
--- a/src/components/Group/GroupMembersLink.tsx
+++ b/src/components/Group/GroupMembersLink.tsx
@@ -50,7 +50,7 @@ export default function GroupMembersLink() {
 				<>
 					<br />
 					<UISecondaryBox style={{ width: '100%', textAlign: 'center' }}>
-						<h1>Members</h1>
+						<h3>Members</h3>
 
 						{group.users.map(({ name, id }) => (
 							<span key={id}>
diff --git a/src/components/GroupCreator/GroupCreator.tsx b/src/components/GroupCreator/GroupCreator.tsx
index 51a2566..199814b 100644
--- a/src/components/GroupCreator/GroupCreator.tsx
+++ b/src/components/GroupCreator/GroupCreator.tsx
@@ -29,7 +29,7 @@ export default function GroupCreator() {
 
 	return (
 		<UISecondaryBox style={{ width: '100%', boxSizing: 'border-box' }}>
-			<h1 style={{ textAlign: 'center' }}>Create Group</h1>
+			<h3 style={{ textAlign: 'center' }}>Create Group</h3>
 			Name
 			<UITextInput onChangeText={setName} value={name} />
 			<UIButton
diff --git a/src/components/GroupJoinerLink.tsx b/src/components/GroupJoinerLink.tsx
index 3e32796..aa1764d 100644
--- a/src/components/GroupJoinerLink.tsx
+++ b/src/components/GroupJoinerLink.tsx
@@ -45,7 +45,7 @@ function GroupJoiner() {
 
 	return (
 		<UISecondaryBox style={{ width: '100%', textAlign: 'center' }}>
-			<h1>Join Group</h1>
+			<h3>Join Group</h3>
 			Code
 			<UITextInput value={code} onChangeText={setCode} />
 			{group && (
diff --git a/src/components/Groups/GroupList.tsx b/src/components/Groups/GroupList.tsx
index 94bc8ba..9771608 100644
--- a/src/components/Groups/GroupList.tsx
+++ b/src/components/Groups/GroupList.tsx
@@ -5,7 +5,7 @@ import UISecondaryBox from '../UI/UISecondaryBox';
 function GroupListItem({ group }: { group: IGroup }) {
 	return (
 		<div>
-			<h2>{group.name}</h2>
+			<h4>{group.name}</h4>
 			<UILink href={`/groups/${group.id}`}>View group</UILink>
 		</div>
 	);
diff --git a/src/components/Groups/Groups.tsx b/src/components/Groups/Groups.tsx
index 714f80e..76b3aac 100644
--- a/src/components/Groups/Groups.tsx
+++ b/src/components/Groups/Groups.tsx
@@ -17,6 +17,7 @@ export default function Groups() {
 			style={{
 				display: 'flex',
 				flexDirection: 'column',
+				width: '19rem',
 			}}
 		>
 			<h1 style={{ textAlign: 'center' }}>Groups</h1>
diff --git a/src/components/UI/UITwoColumns.tsx b/src/components/UI/UITwoColumns.tsx
new file mode 100644
index 0000000..53f14a3
--- /dev/null
+++ b/src/components/UI/UITwoColumns.tsx
@@ -0,0 +1,47 @@
+import { ReactNode } from 'react';
+
+export default function UITwoColumns({
+	first,
+	second,
+	firstFlex,
+	secondFlex,
+}: {
+	first: ReactNode;
+	second: ReactNode;
+	firstFlex: number;
+	secondFlex: number;
+}) {
+	return (
+		<div
+			style={{
+				display: 'flex',
+				width: '60rem',
+				maxWidth: '100vw',
+				flexWrap: 'wrap',
+			}}
+		>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					flex: firstFlex,
+					padding: '1rem',
+					alignItems: 'center',
+				}}
+			>
+				{first}
+			</div>
+			<div
+				style={{
+					display: 'flex',
+					flexDirection: 'column',
+					flex: secondFlex,
+					padding: '1rem',
+					alignItems: 'center',
+				}}
+			>
+				{second}
+			</div>
+		</div>
+	);
+}
diff --git a/src/components/WheelShare.tsx b/src/components/WheelShare.tsx
index 8d722f1..0181754 100644
--- a/src/components/WheelShare.tsx
+++ b/src/components/WheelShare.tsx
@@ -1,42 +1,20 @@
 import ActiveCarpools from './ActiveCarpools/ActiveCarpools';
 import ActiveEvents from './ActiveEvents/Events';
 import Groups from './Groups/Groups';
+import UITwoColumns from './UI/UITwoColumns';
 
 export default function WheelShare() {
 	return (
-		<>
-			<div
-				style={{
-					display: 'flex',
-					width: '60rem',
-					maxWidth: '100vw',
-					flexWrap: 'wrap',
-				}}
-			>
-				<div
-					style={{
-						display: 'flex',
-						flexDirection: 'column',
-						flex: 1,
-						padding: '1rem',
-						minWidth: '20rem',
-					}}
-				>
+		<UITwoColumns
+			firstFlex={1}
+			first={
+				<>
 					<ActiveCarpools />
 					<Groups />
-				</div>
-				<div
-					style={{
-						display: 'flex',
-						flexDirection: 'column',
-						flex: 1,
-						padding: '1rem',
-						minWidth: '20rem',
-					}}
-				>
-					<ActiveEvents />
-				</div>
-			</div>
-		</>
+				</>
+			}
+			secondFlex={2}
+			second={<ActiveEvents />}
+		/>
 	);
 }