coderoad · ShMcK · Jul 23, 2020 · Jul 23, 2020 · Jul 23, 2020 · Jul 23, 2020
diff --git a/web-app/src/Routes.tsx b/web-app/src/Routes.tsx
@@ -5,7 +5,6 @@ import ErrorView from './components/Error'
 import LoadingPage from './containers/Loading'
 import StartPage from './containers/Start'
 import SelectTutorialPage from './containers/SelectTutorial'
-import CompletedPage from './containers/Tutorial/CompletedPage'
 import TutorialPage from './containers/Tutorial'
 
 /*
@@ -39,12 +38,8 @@ const Routes = () => {
       <Route paths={{ Tutorial: { Level: { Load: true } } }}>
         <LoadingPage text="Loading Level..." processes={context.processes} />
       </Route>
-      <Route paths={{ Tutorial: { Level: true } }}>
-        <TutorialPage send={send} context={context} state={route.replace('Tutorial.Level.', '')} />
-      </Route>
-      {/* Completed */}
-      <Route paths={{ Tutorial: { Completed: true } }}>
-        <CompletedPage context={context} />
+      <Route paths={{ Tutorial: { Level: true, Completed: true } }}>
+        <TutorialPage send={send} context={context} state={route.replace('Tutorial.', '')} />
       </Route>
     </Router>
   )

diff --git a/web-app/src/containers/Tutorial/CompletedPage.tsx b/web-app/src/containers/Tutorial/CompletedPage.tsx
diff --git a/web-app/src/containers/Tutorial/components/CompletedBanner.tsx b/web-app/src/containers/Tutorial/components/CompletedBanner.tsx
@@ -0,0 +1,81 @@
+import * as React from 'react'
+import { css, jsx } from '@emotion/core'
+import { Button, Icon } from '@alifd/next'
+
+const styles = {
+  banner: {
+    height: 'auto',
+    width: '100%',
+    backgroundColor: 'rgb(85, 132, 255)',
+    color: 'white',
+    padding: '0.5rem 1rem',
+  },
+  header: {
+    position: 'relative' as 'relative',
+    width: '100%',
+  },
+  headerMessage: {
+    marginLeft: '0.5rem',
+  },
+  // close: {
+  //   position: 'absolute' as 'absolute',
+  //   right: '0.5rem',
+  //   top: '0.5rem',
+  //   padding: '2px',
+  // },
+  section: {
+    padding: '0rem 0.5rem 1rem 0.5rem',
+  },
+  options: {
+    display: 'flex' as 'flex',
+    flexDirection: 'row' as 'row',
+    flexWrap: 'wrap' as 'wrap',
+  },
+  optionsLeft: {
+    flex: 3,
+  },
+  optionsRight: {
+    flex: 1,
+    display: 'flex' as 'flex',
+    justifyContent: 'flex-end' as 'flex-end',
+    alignItems: 'flex-end' as 'flex-end',
+  },
+}
+
+interface Props {
+  title: string
+  onRequestWorkspace(): void
+}
+
+const CompletedBanner = (props: Props) => {
+  return (
+    <div css={styles.banner}>
+      <div css={styles.header}>
+        <h3>
+          <Icon type="success-filling" size="large" />
+          <span css={styles.headerMessage}>Congratulations on completing "{props.title}"!</span>
+        </h3>
+      </div>
+      <div css={styles.section}>
+        <h5>You've reached the end of the road...</h5>
+        <div css={styles.options}>
+          <div css={styles.optionsLeft}>
+            <p>To go down another path:</p>
+            <ul>
+              <li>- open a new VSCode workspace</li>
+              <li>- relaunch the CodeRoad app</li>
+              <li>- select a new tutorial</li>
+            </ul>
+          </div>
+          <div css={styles.optionsRight}>
+            <Button type="primary" ghost="dark" onClick={props.onRequestWorkspace}>
+              Open New Workspace
+            </Button>
+          </div>
+        </div>
+      </div>
+    </div>
+  )
+}
+
+export default CompletedBanner
diff --git a/web-app/src/containers/Tutorial/components/SideMenu.tsx b/web-app/src/containers/Tutorial/components/SideMenu.tsx
@@ -23,8 +23,8 @@ const styles = {
 interface Props {
   visible: boolean
   toggleVisible(visible: boolean): void
-  page: 'level' | 'settings' | 'review'
-  setPage(page: 'level' | 'settings' | 'review'): void
+  page: 'about' | 'level' | 'review' | 'settings'
+  setPage(page: 'about' | 'level' | 'review' | 'settings'): void
 }
 
 const SideMenu = (props: Props) => {
@@ -65,8 +65,20 @@ const SideMenu = (props: Props) => {
           <Icon type="list" size="small" color="#EBEBEB" />
           <span style={styles.itemText}>Review</span>
         </Item>
-        {/* <Divider key="divider" />
+        <Divider key="divider" />
         <Item
+          key="about"
+          disabled={props.page === 'about'}
+          style={props.page === 'about' ? styles.active : {}}
+          onClick={() => {
+            onMenuClose()
+            props.setPage('about')
+          }}
+        >
+          <Icon type="prompt" size="xs" color="#EBEBEB" />
+          <span style={styles.itemText}>About</span>
+        </Item>
+        {/* <Item
           key="settings"
           disabled={props.page === 'settings'}
           style={props.page === 'settings' ? styles.active : {}}
@@ -77,7 +89,8 @@ const SideMenu = (props: Props) => {
         >
           <Icon type="set" size="small" color="#EBEBEB" />
           <span style={styles.itemText}>Settings</span>
-        </Item> */}
+        </Item>{' '}
+        */}
       </Menu>
     </Drawer>
   )

diff --git a/web-app/src/containers/Tutorial/containers/About.tsx b/web-app/src/containers/Tutorial/containers/About.tsx
@@ -0,0 +1,68 @@
+import * as React from 'react'
+import Markdown from '../../../components/Markdown'
+
+const styles = {
+  container: {
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+  },
+  header: {
+    display: 'flex' as 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: '2rem',
+    backgroundColor: '#EBEBEB',
+    fontSize: '1rem',
+    lineHeight: '1rem',
+    padding: '10px 0.4rem',
+  },
+  content: {
+    padding: '0.5rem',
+  },
+}
+
+interface Props {}
+
+const AboutPage = (props: Props) => {
+  return (
+    <div css={styles.container}>
+      <div css={styles.header}>
+        <div>About CodeRoad</div>
+      </div>
+      <div css={styles.content}>
+        <Markdown>
+          {`
+CodeRoad is an open source VSCode extension that allows you to **create** and **play** interactive coding tutorials inside VSCode.
+
+Learn more or contribute at [https://github.com/coderoad/coderoad-vscode](https://github.com/coderoad/coderoad-vscode).
+
+##### Why CodeRoad?
+
+Interactive learning is the most effective way to gain new skills and knowledge. CodeRoad aims to help tutorial creators develop and share interactive content with the community.
+
+For learners, there are a number of advantages to running tutorials inside VSCode:
+
+a. Learn in a real world coding environment
+b. Get rapid feedback on save and helpful error messages
+c.Users own the code, and can build a Git timeline and deploy a portfolio
+
+##### Subscribe
+
+Join our [mailing list](https://tiny.cc/coderoad) to hear about new tutorials & features. 
+
+##### Contact
+
+We'd love to hear your feedback. 
+
+For bugs/feature requests, reach out on GitHub.
+
+Otherwise, email us at [coderoadapp@gmail.com](mailto:coderoadapp@gmail.com).
+
+`}
+        </Markdown>
+      </div>
+    </div>
+  )
+}
+
+export default AboutPage
diff --git a/web-app/src/containers/Tutorial/containers/Review.tsx b/web-app/src/containers/Tutorial/containers/Review.tsx
@@ -10,6 +10,8 @@ interface Props {
 
 const styles = {
   container: {
+    height: 'auto',
+    width: '100%',
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
   },