add NuxTutorial to Level page

ShMcK · ShMcK · commit 6b4cc8cd5b3c · 2020-03-07T15:11:43.000-08:00
diff --git a/web-app/src/components/NewUserExperience/NuxTutorial.tsx b/web-app/src/components/NewUserExperience/NuxTutorial.tsx
@@ -18,7 +18,7 @@ const styles = {
   },
   title: {
     marginLeft: '.6rem',
-    fontSize: '1.1rem',
+    fontSize: '1rem',
   },
   toggle: {
     display: 'flex',
@@ -101,16 +101,20 @@ const NewUserExperienceTutorialCollapsible = () => {
   )
 }
 
-const NewUserExperienceTutorial = () => {
+interface Props {
+  css?: React.CSSProperties
+}
+
+const NewUserExperienceTutorial = (props: Props) => {
   const [isOpen, setIsOpen] = React.useState<boolean>(false)
   const onToggle = () => {
     setIsOpen(!isOpen)
   }
   return (
-    <div css={styles.container}>
+    <div css={{ ...styles.container, ...props.css }}>
       <div css={styles.header} onClick={onToggle} style={{ cursor: 'pointer' }}>
         <div css={styles.toggle}>
-          <Icon type="help" />
+          {isOpen ? <Icon type="close" size="xs" /> : <Icon type="help" size="small" />}
           <span css={styles.title}>Help</span>
         </div>
       </div>
diff --git a/web-app/src/containers/Tutorial/LevelPage/Level.tsx b/web-app/src/containers/Tutorial/LevelPage/Level.tsx
@@ -5,6 +5,7 @@ import { css, jsx } from '@emotion/core'
 import Button from '../../../components/Button'
 import Markdown from '../../../components/Markdown'
 import ProcessMessages from '../../../components/ProcessMessages'
+import NuxTutorial from '../../../components/NewUserExperience/NuxTutorial'
 import Step from './Step'
 
 const styles = {
@@ -47,6 +48,12 @@ const styles = {
     left: 0,
     right: 0,
   },
+  nux: {
+    position: 'fixed' as 'fixed',
+    bottom: '2rem',
+    left: 0,
+    right: 0,
+  },
   footer: {
     display: 'flex' as 'flex',
     flexDirection: 'row' as 'row',
@@ -129,6 +136,10 @@ const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Pro
         </div>
       )}
 
+      <div css={styles.nux}>
+        <NuxTutorial />
+      </div>
+
       <div css={styles.footer}>
         <span>
           {typeof level.index === 'number' ? `${level.index + 1}. ` : ''}
