Add a settings page

Signed-off-by: Shubham Shah <shubhamshahrising@gmail.com>

Author: SavvyShah

web-app/src/containers/Tutorial/components/SideMenu.tsx

@@ -81,19 +81,18 @@ const SideMenu = (props: Props) => {
           <Icon type="prompt" size="xs" color="#EBEBEB" />
           <span style={styles.itemText}>About</span>
         </Item>
-        {/* <Item
+        <Item
           key="settings"
           disabled={props.page === 'settings'}
-          style={props.page === 'settings' ? styles.active : {}}
+          style={props.page === 'settings' ? styles.active(theme) : {}}
           onClick={() => {
             onMenuClose()
             props.setPage('settings')
           }}
         >
           <Icon type="set" size="small" color="#EBEBEB" />
           <span style={styles.itemText}>Settings</span>
-        </Item>{' '}
-        */}
+        </Item>
       </Menu>
     </Drawer>
   )

web-app/src/containers/Tutorial/containers/Settings.tsx

@@ -1,15 +1,75 @@
-import * as React from 'react'
+import Button from 'components/Button'
+import React, { useState } from 'react'
+import { Theme } from '../../../styles/theme'
+import Reset from '../components/Reset'
 
 const styles = {
-  container: {
+  flexColumn: {
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
-    padding: '1rem',
+  },
+  container: (theme: Theme) => ({
+    display: 'flex' as 'flex',
+    flexDirection: 'column' as 'column',
+    backgroundColor: theme['$color-white'],
+    height: 'auto',
+  }),
+  header: (theme: Theme) => ({
+    display: 'flex' as 'flex',
+    alignItems: 'center',
+    justifyContent: 'space-between',
+    height: '2rem',
+    backgroundColor: theme['$color-fill1-2'],
+    fontSize: '1rem',
+    lineHeight: '1rem',
+    padding: '10px 0.4rem',
+  }),
+  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',
   },
 }
 
-const SettingsPage = () => {
-  return <div css={styles.container}>Settings coming soon...</div>
+interface Props {}
+
+const SettingsPage = (props: Props) => {
+  const onReset = () => {
+    console.log('Trigger a reset event here')
+  }
+  return (
+    <div css={styles.container}>
+      <div css={styles.header}>
+        <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.
+              </div>
+            </div>
+            <Reset style={styles.menuItemButton} warning onReset={onReset} />
+          </div>
+        </div>
+      </div>
+    </div>
+  )
 }
 
 export default SettingsPage

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

@@ -18,6 +18,7 @@ import ScrollContent from './components/ScrollContent'
 import CompletedBanner from './components/CompletedBanner'
 import { Theme } from '../../styles/theme'
 import { useTheme } from 'emotion-theming'
+import SettingsPage from './containers/Settings'
 
 const styles = {
   page: {
@@ -155,7 +156,7 @@ const TutorialPage = (props: PageProps) => {
         )}
         {page === 'review' && <ReviewPage levels={levels} onResetToPosition={onResetToPosition} />}
 
-        {/* {page === 'settings' && <SettingsPage />} */}
+        {page === 'settings' && <SettingsPage />}
       </div>
 
       {props.state === 'Completed' ? (

web-app/stories/Settings.stories.tsx

@@ -0,0 +1,10 @@
+import * as React from 'react'
+import { storiesOf } from '@storybook/react'
+import SideBarDecorator from './utils/SideBarDecorator'
+import Settings from '../src/containers/Tutorial/containers/Settings'
+
+storiesOf('Settings', module)
+  .addDecorator(SideBarDecorator)
+  .add('Settings Page', () => {
+    return <Settings />
+  })