Add links to meetings on Dashboard

src/components/Dashboard/MeetingList.js

@@ -8,51 +8,47 @@ export default function MeetingList({ meetings, status }) {
 
 			<List hover>
 				{meetings.map((meeting) => (
-					<List.Item key={meeting.id} bordered>
+					<a href={`/meetings/${meeting.id}`}>
-						<FlexboxGrid>
+						<List.Item key={meeting.id} bordered>
-							{/* Icon */}
+							<FlexboxGrid>
-							<FlexboxGrid.Item colspan={2} style={styleCenter}>
+								{/* Icon */}
-								<Icon
+								<FlexboxGrid.Item
-									icon={
+									colspan={2}
-										meeting.start_time !== null
+									style={styleCenter}
-											? 'calendar-check-o'
+								>
-											: 'calendar-o'
+									<Icon
-									}
+										icon={
+											meeting.start_time !== null
+												? 'calendar-check-o'
+												: 'calendar-o'
+										}
+										style={{
+											color: 'darkgrey',
+											fontSize: '1.5em',
+										}}
+									/>
+								</FlexboxGrid.Item>
+
+								{/*Meeting info*/}
+								<FlexboxGrid.Item
+									colspan={6}
 									style={{
-										color: 'darkgrey',
+										...styleCenter,
-										fontSize: '1.5em',
+										flexDirection: 'column',
+										alignItems: 'flex-start',
+										overflow: 'hidden',
 									}}
-								/>
+								>
-							</FlexboxGrid.Item>
+									<div style={titleStyle}>
-
+										{meeting.title}
-							{/*base info*/}
+									</div>
-							<FlexboxGrid.Item
+									{meeting.start_time !== null && (
-								colspan={6}
+										<>{meeting.start_time}</>
-								style={{
+									)}
-									...styleCenter,
+								</FlexboxGrid.Item>
-									flexDirection: 'column',
+							</FlexboxGrid>
-									alignItems: 'flex-start',
+						</List.Item>
-									overflow: 'hidden',
+					</a>
-								}}
-							>
-								<div style={titleStyle}>{meeting.title}</div>
-								{meeting.start_time !== null && (
-									<>{meeting.start_time}</>
-								)}
-							</FlexboxGrid.Item>
-
-							<FlexboxGrid.Item
-								colspan={4}
-								style={{
-									...alignRight,
-								}}
-							>
-								<a href='#'>View</a>
-								<span style={{ padding: 5 }}>|</span>
-								<a href='#'>Edit</a>
-							</FlexboxGrid.Item>
-						</FlexboxGrid>
-					</List.Item>
 				))}
 			</List>
 		</>
@@ -67,28 +63,8 @@ const styleCenter = {
 	height: '60px',
 };
 
-const alignRight = {
-	display: 'flex',
-	justifyContent: 'center',
-	alignItems: 'center',
-    height: '60px',
-    marginLeft: 'auto'
-};
-
-const slimText = {
-	fontSize: '0.666em',
-	color: '#97969B',
-	fontWeight: 'lighter',
-	paddingBottom: 5,
-};
-
 const titleStyle = {
 	paddingBottom: 5,
 	whiteSpace: 'nowrap',
 	fontWeight: 500,
 };
-
-const dataStyle = {
-	fontSize: '1.2em',
-	fontWeight: 500,
-};

src/screens/Dashboard.js

@@ -39,7 +39,7 @@ export default function Dashboard({ currentUser }) {
 		<>
 			<NavBar title='Dashboard' />
 			{loading ? (
-				<Panel className={'app-container'}>
+				<Panel className={'app-container-small'}>
 					<h2>Invitations</h2>
 					<h4>Confirmed</h4>
 					<Paragraph style={{ marginTop: 30 }} graph='square'>
@@ -51,7 +51,7 @@ export default function Dashboard({ currentUser }) {
 					</Paragraph>
 				</Panel>
 			) : (
-				<Panel className={'app-container'}>
+				<Panel className={'app-container-small'}>
 					<h2>Invitations</h2>
 					{confirmed && (
 						<MeetingList

src/screens/styles/layout.less

@@ -4,6 +4,12 @@
 	background-color: rgba(255, 255, 255, 0.6);
 }
 
+.app-container-small {
+	max-width: 760px;
+	margin: 30px auto;
+	background-color: rgba(255, 255, 255, 0.6);
+}
+
 .form-container {
 	max-width: 373px;
 	margin: 0 auto;