@@ -9,6 +9,13 @@ const styles = {
99card :{
1010padding :0 ,
1111} ,
12+ header :{
13+ height :'36px' ,
14+ backgroundColor :'#EBEBEB' ,
15+ fontSize :'16px' ,
16+ lineHeight :'16px' ,
17+ padding :'10px 1rem' ,
18+ } ,
1219content :{
1320padding :'0rem 1rem' ,
1421paddingBottom :'1rem' ,
@@ -17,9 +24,24 @@ const styles = {
1724padding :'0rem 1rem' ,
1825} ,
1926steps :{
20- padding :'1rem 0rem' ,
27+ padding :'1rem 16px' ,
28+ } ,
29+ title :{
30+ fontSize :'1.2rem' ,
31+ fontWeight :'bold' as 'bold' ,
32+ lineHeight :'1.2rem' ,
33+ } ,
34+ footer :{
35+ height :'36px' ,
36+ backgroundColor :'black' ,
37+ fontSize :'16px' ,
38+ lineHeight :'16px' ,
39+ padding :'10px 1rem' ,
40+ color :'white' ,
41+ position :'absolute' as 'absolute' ,
42+ bottom :0 ,
43+ width :'100%' ,
2144} ,
22- title :{ } ,
2345}
2446
2547interface Props {
@@ -40,32 +62,46 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
4062
4163return (
4264< div style = { styles . card } >
43- < div style = { styles . content } >
44- < h2 style = { styles . title } > { level . title } </ h2 >
45- < Markdown > { level . description || '' } </ Markdown >
65+ < div >
66+ < div style = { styles . header } >
67+ < span > Learn</ span >
68+ </ div >
69+ < div style = { styles . content } >
70+ < h2 style = { styles . title } > { level . title } </ h2 >
71+ < Markdown > { level . description || '' } </ Markdown >
72+ </ div >
4673</ div >
47- < div style = { styles . steps } >
48- < Step current = { activeIndex } direction = "ver" shape = "dot" animation readOnly >
49- { level . steps . map ( ( step :G . Step | null , index :number ) => {
50- if ( ! step ) {
51- return null
52- }
53- return (
54- < Step . Item
55- key = { step . id }
56- title = { step . title || `Step${ index + 1 } }
57- content = { < StepDescription text = { step . description } mode = { step . status } onLoadSolution = { onLoadSolution } /> }
58- />
59- )
60- } ) }
61- </ Step >
74+
75+ < div >
76+ < div style = { styles . header } > Tasks</ div >
77+ < div style = { styles . steps } >
78+ < Step current = { activeIndex } direction = "ver" shape = "dot" animation readOnly >
79+ { level . steps . map ( ( step :G . Step | null , index :number ) => {
80+ if ( ! step ) {
81+ return null
82+ }
83+ return (
84+ < Step . Item
85+ key = { step . id }
86+ title = { step . title || `Step${ index + 1 } }
87+ content = {
88+ < StepDescription text = { step . description } mode = { step . status } onLoadSolution = { onLoadSolution } />
89+ }
90+ />
91+ )
92+ } ) }
93+ </ Step >
94+ </ div >
6295</ div >
6396
6497{ level . status === 'COMPLETE' && (
6598< div style = { styles . options } >
6699< Button onClick = { onContinue } > Continue</ Button >
67100</ div >
68101) }
102+ < div >
103+ < div style = { styles . footer } > { level . title } </ div >
104+ </ div >
69105</ div >
70106)
71107}