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