Add links to meetings on Dashboard

src/components/Dashboard/MeetingList.js

@@ -8,10 +8,14 @@ export default function MeetingList({ meetings, status }) {
 
 			<List hover>
 				{meetings.map((meeting) => (
+					<a href={`/meetings/${meeting.id}`}>
 						<List.Item key={meeting.id} bordered>
 							<FlexboxGrid>
 								{/* Icon */}
-							<FlexboxGrid.Item colspan={2} style={styleCenter}>
+								<FlexboxGrid.Item
+									colspan={2}
+									style={styleCenter}
+								>
 									<Icon
 										icon={
 											meeting.start_time !== null
@@ -25,7 +29,7 @@ export default function MeetingList({ meetings, status }) {
 									/>
 								</FlexboxGrid.Item>
 
-							{/*base info*/}
+								{/*Meeting info*/}
 								<FlexboxGrid.Item
 									colspan={6}
 									style={{
@@ -35,24 +39,16 @@ export default function MeetingList({ meetings, status }) {
 										overflow: 'hidden',
 									}}
 								>
-								<div style={titleStyle}>{meeting.title}</div>
+									<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>
+					</a>
 				))}
 			</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;