@@ -10,6 +10,7 @@ import ReviewPage from './containers/Review'
1010import Button from '../../components/Button'
1111import ProcessMessages from '../../components/ProcessMessages'
1212import TestMessage from '../../components/TestMessage'
13+ import { Progress } from '@alifd/next'
1314import { DISPLAY_RUN_TEST_BUTTON } from '../../environment'
1415
1516const styles = {
@@ -39,16 +40,19 @@ const styles = {
3940backgroundColor :'black' ,
4041fontSize :'1rem' ,
4142lineHeight :'1rem' ,
42- padding :'10px1rem ' ,
43+ padding :'10px0rem ' ,
4344position :'fixed' as 'fixed' ,
4445bottom :0 ,
4546left :0 ,
4647right :0 ,
4748color :'white' ,
4849} ,
49- taskCount :{
50- fontSize :'0.8rem' ,
51- opacity :0.9 ,
50+ taskProgress :{
51+ display :'flex' as 'flex' ,
52+ justifyContent :'flex-end' as 'flex-end' ,
53+ alignItems :'center' as 'center' ,
54+ width :'10rem' ,
55+ color :'white' ,
5256} ,
5357processes :{
5458padding :'0 1rem' ,
@@ -147,23 +151,42 @@ const TutorialPage = (props: PageProps) => {
147151< TestMessage message = { testStatus . title } />
148152</ div >
149153) }
150-
154+ { /* Left */ }
151155{ DISPLAY_RUN_TEST_BUTTON && levelStatus !== 'COMPLETE' ?(
152- < Button type = "primary" onClick = { onRunTest } disabled = { processes . length > 0 } >
156+ < Button style = { { marginLeft : '1rem' } } type = "primary" onClick = { onRunTest } disabled = { processes . length > 0 } >
153157 Run
154158</ Button >
155- ) :null }
156- < span >
159+ ) :(
160+ < div />
161+ ) }
162+
163+ { /* Center */ }
164+ < div />
165+
166+ { /* Right */ }
167+ < div >
157168{ levelStatus === 'COMPLETE' || ! level . steps . length ?(
158169< Button type = "primary" onClick = { onContinue } >
159170 Continue
160171</ Button >
161172) :(
162- < span css = { styles . taskCount } >
163- { currentStep } of{ level . steps . length } tasks
164- </ span >
173+ < Progress
174+ state = "success"
175+ progressive
176+ percent = { ( currentStep / level . steps . length ) * 100 }
177+ shape = "line"
178+ color = "rgb(85, 132, 255)"
179+ css = { styles . taskProgress }
180+ textRender = { ( percent :number ) => {
181+ return (
182+ < span style = { { color :'white' } } >
183+ { currentStep } of{ level . steps . length }
184+ </ span >
185+ )
186+ } }
187+ />
165188) }
166- </ span >
189+ </ div >
167190</ div >
168191< SideMenu visible = { menuVisible } toggleVisible = { setMenuVisible } page = { page } setPage = { setPage } />
169192</ div >