8000 add NuxTutorial to Level page · An0nCrypto/coderoad-vscode@6b4cc8c · GitHub
[go: up one dir, main page]
Skip to content

Commit 6b4cc8c

Browse files
ShMcKShMcK
committed
add NuxTutorial to Level page
1 parent 5afca66 commit 6b4cc8c

File tree

2 files changed

+19
-4
lines changed

2 files changed

+19
-4
lines changed

‎web-app/src/components/NewUserExperience/NuxTutorial.tsx

Lines changed: 8 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -18,7 +18,7 @@ const styles = {
1818
},
1919
title: {
2020
marginLeft: '.6rem',
21-
fontSize: '1.1rem',
21+
fontSize: '1rem',
2222
},
2323
toggle: {
2424
display: 'flex',
@@ -101,16 +101,20 @@ const NewUserExperienceTutorialCollapsible = () => {
101101
)
102102
}
103103

104-
const NewUserExperienceTutorial = () => {
104+
interface Props {
105+
css?: React.CSSProperties
106+
}
107+
108+
const NewUserExperienceTutorial = (props: Props) => {
105109
const [isOpen, setIsOpen] = React.useState<boolean>(false)
106110
const onToggle = () => {
107111
setIsOpen(!isOpen)
108112
}
109113
return (
110-
<div css={styles.container}>
114+
<div css={{ ...styles.container, ...props.css }}>
111115
<div css={styles.header} onClick={onToggle} style={{ cursor: 'pointer' }}>
112116
<div css={styles.toggle}>
113-
<Icon type="help" />
117+
{isOpen ? <Icon type="close" size="xs" /> : <Icon type="help" size="small" />}
114118
<span css={styles.title}>Help</span>
115119
</div>
116120
</div>

‎web-app/src/containers/Tutorial/LevelPage/Level.tsx

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -5,6 +5,7 @@ import { css, jsx } from '@emotion/core'
55
import Button from '../../../components/Button'
66
import Markdown from '../../../components/Markdown'
77
import ProcessMessages from '../../../components/ProcessMessages'
8+
import NuxTutorial from '../../../components/NewUserExperience/NuxTutorial'
89
import Step from './Step'
910

1011
const styles = {
@@ -47,6 +48,12 @@ const styles = {
4748
left: 0,
4849
right: 0,
4950
},
51+
nux: {
52+
position: 'fixed' as 'fixed',
53+
bottom: '2rem',
54+
left: 0,
55+
right: 0,
56+
},
5057
footer: {
5158
display: 'flex' as 'flex',
5259
flexDirection: 'row' as 'row',
@@ -129,6 +136,10 @@ const Level = ({ level, onContinue, onLoadSolution, processes, testStatus }: Pro
129136
</div>
130137
)}
131138

139+
<div css={styles.nux}>
140+
<NuxTutorial />
141+
</div>
142+
132143
<div css={styles.footer}>
133144
<span>
134145
{typeof level.index === 'number' ? `${level.index + 1}. ` : ''}

0 commit comments

Comments
 (0)
0