cleanup continue page design

Author: ShMcK

web-app/src/containers/Continue/index.tsx

@@ -5,52 +5,61 @@ import * as CR from 'typings'
 import * as G from 'typings/graphql'
 
 const styles = {
-	page: {
-		position: 'relative' as 'relative',
-		width: '100%',
-	},
+  page: {
+    position: 'relative' as 'relative',
+    width: '100%',
+  },
+  header: {
+    height: '36px',
+    backgroundColor: '#EBEBEB',
+    fontSize: '16px',
+    lineHeight: '16px',
+    padding: '10px 1rem',
+  },
 }
 
 interface Props {
-	tutorial: G.Tutorial
-	onContinue(): void
-	onNew(): void
+  tutorial: G.Tutorial
+  onContinue(): void
+  onNew(): void
 }
 
 export const ContinuePage = (props: Props) => (
-	<div style={styles.page}>
-		<h3>Continue</h3>
-		<Card>
-			<div>
-				<h2>{props.tutorial.version.summary.title}</h2>
-				<p>{props.tutorial.version.summary.description}</p>
-				<Button onClick={props.onContinue}>Resume</Button>
-			</div>
-		</Card>
-		<Card>
-			<div>
-				<h2>Start a New Tutorial</h2>
-				<Button onClick={props.onNew}>Select New Tutorial</Button>
-			</div>
-		</Card>
-	</div>
+  <div style={styles.page}>
+    <div style={styles.header}>
+      <span>CodeRoad</span>
+    </div>
+    <Card>
+      <div>
+        <h2>{props.tutorial.version.summary.title}</h2>
+        <p>{props.tutorial.version.summary.description}</p>
+        <Button onClick={props.onContinue}>Resume</Button>
+      </div>
+    </Card>
+    <Card>
+      <div>
+        <h2>Start a New Tutorial</h2>
+        <Button onClick={props.onNew}>Select New Tutorial</Button>
+      </div>
+    </Card>
+  </div>
 )
 
 interface ContainerProps {
-	context: CR.MachineContext
-	send(action: CR.Action | string): void
+  context: CR.MachineContext
+  send(action: CR.Action | string): void
 }
 
 const ContinuePageContainer = ({ context, send }: ContainerProps) => {
-	const { tutorial } = context
+  const { tutorial } = context
 
-	if (!tutorial) {
-		throw new Error('Tutorial not found')
-	}
+  if (!tutorial) {
+    throw new Error('Tutorial not found')
+  }
 
-	return (
-		<ContinuePage tutorial={tutorial} onContinue={() => send('TUTORIAL_START')} onNew={() => send('TUTORIAL_SELECT')} />
-	)
+  return (
+    <ContinuePage tutorial={tutorial} onContinue={() => send('TUTORIAL_START')} onNew={() => send('TUTORIAL_SELECT')} />
+  )
 }
 
 export default ContinuePageContainer

web-app/src/containers/New/NewPage.tsx

@@ -3,38 +3,38 @@ import * as G from 'typings/graphql'
 import TutorialList from './TutorialList'
 
 const styles = {
-	page: {
-		position: 'relative' as 'relative',
-		width: '100%',
-	},
-	header: {
-		height: '36px',
-		backgroundColor: '#EBEBEB',
-		fontSize: '16px',
-		lineHeight: '16px',
-		padding: '10px 1rem',
-	},
-	banner: {
-		height: '50px',
-		fontSize: '1rem',
-		padding: '1rem',
-	},
+  page: {
+    position: 'relative' as 'relative',
+    width: '100%',
+  },
+  header: {
+    height: '36px',
+    backgroundColor: '#EBEBEB',
+    fontSize: '16px',
+    lineHeight: '16px',
+    padding: '10px 1rem',
+  },
+  banner: {
+    height: '50px',
+    fontSize: '1rem',
+    padding: '1rem',
+  },
 }
 
 interface Props {
-	tutorialList: G.Tutorial[]
+  tutorialList: G.Tutorial[]
 }
 
 const NewPage = (props: Props) => (
-	<div style={styles.page}>
-		<div style={styles.header}>
-			<span>CodeRoad</span>
-		</div>
-		<div style={styles.banner}>
-			<span>Select a Tutorial to Start</span>
-		</div>
-		<TutorialList tutorialList={props.tutorialList} />
-	</div>
+  <div style={styles.page}>
+    <div style={styles.header}>
+      <span>CodeRoad</span>
+    </div>
+    <div style={styles.banner}>
+      <span>Select a Tutorial to Start</span>
+    </div>
+    <TutorialList tutorialList={props.tutorialList} />
+  </div>
 )
 
 export default NewPage