coderoad · ShMcK · Oct 31, 2021 · Oct 31, 2021 · Oct 31, 2021
diff --git a/web-app/src/containers/Tutorial/components/Reset.tsx b/web-app/src/containers/Tutorial/components/Reset.tsx
@@ -33,6 +33,7 @@ const Reset = (props: Props) => {
         disabled={props.disabled}
         warning={props.warning}
         style={props.style}
+        htmlType="reset"
       >
         Reset
       </Button>

diff --git a/web-app/src/containers/Tutorial/components/SideMenu.tsx b/web-app/src/containers/Tutorial/components/SideMenu.tsx
@@ -25,8 +25,8 @@ const styles = {
 interface Props {
   visible: boolean
   toggleVisible(visible: boolean): void
-  page: 'about' | 'level' | 'review' | 'settings'
-  setPage(page: 'about' | 'level' | 'review' | 'settings'): void
+  page: 'level' | 'review' | 'settings'
+  setPage(page: 'level' | 'review' | 'settings'): void
 }
 
 const SideMenu = (props: Props) => {
@@ -69,18 +69,6 @@ const SideMenu = (props: Props) => {
           <span style={styles.itemText}>Review</span>
         </Item>
         <Divider key="divider" />
-        <Item
-          key="about"
-          disabled={props.page === 'about'}
-          style={props.page === 'about' ? styles.active(theme) : {}}
-          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'}

diff --git a/web-app/src/containers/Tutorial/containers/Review.tsx b/web-app/src/containers/Tutorial/containers/Review.tsx
@@ -28,7 +28,7 @@ const styles = {
     backgroundColor: theme['$color-fill1-2'],
     fontSize: '1rem',
     lineHeight: '1rem',
-    padding: '10px 0.4rem',
+    padding: '10px 0.4rem 10px 1rem',
   }),
   title: {
     marginLeft: '0.5rem',

diff --git a/web-app/src/containers/Tutorial/containers/Settings.tsx b/web-app/src/containers/Tutorial/containers/Settings.tsx
@@ -1,10 +1,8 @@
-import Button from 'components/Button'
-import React, { useState, useEffect } from 'react'
+import React from 'react'
+import { Card } from '@alifd/next'
 import { Theme } from '../../../styles/theme'
 import Reset from '../components/Reset'
 
-import * as T from 'typings'
-
 const styles = {
   flexColumn: {
     display: 'flex' as 'flex',
@@ -24,24 +22,14 @@ const styles = {
     backgroundColor: theme['$color-fill1-2'],
     fontSize: '1rem',
     lineHeight: '1rem',
-    padding: '10px 0.4rem',
+    padding: '10px 0.4rem 10px 1rem',
+    marginBottom: '0.5rem',
   }),
   content: {
     padding: '0.5rem',
-  },
-  menu: {},
-  menuItem: {
     display: 'flex' as 'flex',
-    border: '1px solid rgb(173, 173, 173)',
-    borderRadius: '5px',
-    padding: '0.5rem',
-  },
-  menuItemHeader: {
-    fontWeight: 'bold' as 'bold',
-  },
-  menuItemContent: {},
-  menuItemButton: {
-    marginLeft: 'auto' as 'auto',
+    flexDirection: 'column' as 'column',
+    gap: '1rem',
   },
 }
 
@@ -56,20 +44,37 @@ const SettingsPage = (props: Props) => {
         <div>Settings</div>
       </div>
       <div css={styles.content}>
-        <div css={styles.menu}>
-          <div css={styles.menuItem}>
-            <div css={styles.flexColumn}>
-              <div css={styles.menuItemHeader}>Reset Tutorial</div>
-              <div css={styles.menuItemContent}>
-                This will reset the whole tutorial and change the source files back to the first level and first task
-                checkpoint. This will reset the whole tutorial and change the source files back to the first level and
-                first task checkpoint. This will reset the whole tutorial and change the source files back to the first
-                level and first task checkpoint.
-              </div>
+        <Card free>
+          <Card.Header title="About" />
+          <Card.Divider />
+          <Card.Content>
+            <div>
+              CodeRoad is an open source VSCode extension that allows you to <strong>create</strong> and{' '}
+              <strong>play</strong> interactive coding tutorials inside VSCode.
             </div>
-            <Reset style={styles.menuItemButton} warning onReset={props.onReset} />
-          </div>
-        </div>
+          </Card.Content>
+          <Card.Divider />
+          <Card.Actions>
+            <a href="https://github.com/coderoad/coderoad-vscode">GitHub</a>
+            <a href="mailto:coderoadapp@gmail.com" style={{ marginLeft: '0.5rem' }}>
+              Email
+            </a>
+          </Card.Actions>
+        </Card>
+        <Card free>
+          <Card.Header title="Reset Tutorial" />
+          <Card.Divider />
+          <Card.Content>
+            This will reset the whole tutorial and change the source files back to the first level and first task
+            checkpoint. This will reset the whole tutorial and change the source files back to the first level and first
+            task checkpoint. This will reset the whole tutorial and change the source files back to the first level and
+            first task checkpoint.
+          </Card.Content>
+          <Card.Divider />
+          <Card.Actions>
+            <Reset warning onReset={props.onReset} />
+          </Card.Actions>
+        </Card>
       </div>
     </div>
   )

diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx
@@ -4,7 +4,6 @@ import * as selectors from '../../services/selectors'
 import SideMenu from './components/SideMenu'
 import Level from './components/Level'
 import Icon from '../../components/Icon'
-import AboutPage from './containers/About'
 import ReviewPage from './containers/Review'
 import Button from '../../components/Button'
 import ProcessMessages from '../../components/ProcessMessages'
@@ -126,7 +125,7 @@ const TutorialPage = (props: PageProps) => {
 
   const [menuVisible, setMenuVisible] = React.useState(false)
 
-  const [page, setPage] = React.useState<'about' | 'level' | 'review' | 'settings'>('level')
+  const [page, setPage] = React.useState<'level' | 'review' | 'settings'>('level')
 
   const onSettingsReset = () => {
     //Reset to first level first step
@@ -159,8 +158,6 @@ const TutorialPage = (props: PageProps) => {
           <span css={styles.title}>{tutorial.summary.title}</span>
         </div>
 
-        {page === 'about' && <AboutPage />}
-
         {page === 'level' && (
           <ScrollContent item={level.id}>
             <Level level={level} />

diff --git a/web-app/stories/About.stories.tsx b/web-app/stories/About.stories.tsx