wonderful two column layouts

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>

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>
 							) : (
 								<>

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} />}

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>
 	);
 }

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>

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>
+			<UITwoColumns
-			<div
+				first={
-				style={{
+					<div
-					display: 'flex',
+						style={{
-					flexDirection: 'column',
+							display: 'flex',
-					width: '100%',
+							flexDirection: 'column',
-					alignItems: 'center',
+							minWidth: '10rem',
-				}}
+						}}
-			>
+					>
-				<UILink href="/">Home</UILink>
+						<h1>{group.name}</h1>
-				<br />
+						<UILink href="/">Home</UILink>
-				<GroupMembersLink />
-				<br />
-				{isAdmin && (
-					<>
-						<GroupSettingsLink />
 						<br />
-					</>
+						<GroupMembersLink />
-				)}
+						<br />
-				<EventCreatorLink />
+						{isAdmin && (
-			</div>
+							<>
-			<br />
+								<GroupSettingsLink />
-
+								<br />
-			{group.events?.length > 0 ? (
+							</>
-				<EventStream events={group.events} />
+						)}
-			) : (
+						<EventCreatorLink />
-				<span>
+					</div>
-					There are no events yet. Click 'create event' above to add one!
+				}
-				</span>
+				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>

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}>

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

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 && (

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>
 	);

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>

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>
+	);
+}

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 (
-		<>
+		<UITwoColumns
-			<div
+			firstFlex={1}
-				style={{
+			first={
-					display: 'flex',
+				<>
-					width: '60rem',
-					maxWidth: '100vw',
-					flexWrap: 'wrap',
-				}}
-			>
-				<div
-					style={{
-						display: 'flex',
-						flexDirection: 'column',
-						flex: 1,
-						padding: '1rem',
-						minWidth: '20rem',
-					}}
-				>
 					<ActiveCarpools />
 					<Groups />
-				</div>
+				</>
-				<div
+			}
-					style={{
+			secondFlex={2}
-						display: 'flex',
+			second={<ActiveEvents />}
-						flexDirection: 'column',
+		/>
-						flex: 1,
-						padding: '1rem',
-						minWidth: '20rem',
-					}}
-				>
-					<ActiveEvents />
-				</div>
-			</div>
-		</>
 	);
 }