@@ -9,6 +9,13 @@ const styles = {
9
9
card :{
10
10
padding :0 ,
11
11
} ,
12
+ header :{
13
+ height :'36px' ,
14
+ backgroundColor :'#EBEBEB' ,
15
+ fontSize :'16px' ,
16
+ lineHeight :'16px' ,
17
+ padding :'10px 1rem' ,
18
+ } ,
12
19
content :{
13
20
padding :'0rem 1rem' ,
14
21
paddingBottom :'1rem' ,
@@ -17,9 +24,24 @@ const styles = {
17
24
padding :'0rem 1rem' ,
18
25
} ,
19
26
steps :{
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%' ,
21
44
} ,
22
- title :{ } ,
23
45
}
24
46
25
47
interface Props {
@@ -40,32 +62,46 @@ const Level = ({ level, onContinue, onLoadSolution }: Props) => {
40
62
41
63
return (
42
64
< 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 >
46
73
</ 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 >
62
95
</ div >
63
96
64
97
{ level . status === 'COMPLETE' && (
65
98
< div style = { styles . options } >
66
99
< Button onClick = { onContinue } > Continue</ Button >
67
100
</ div >
68
101
) }
102
+ < div >
103
+ < div style = { styles . footer } > { level . title } </ div >
104
+ </ div >
69
105
</ div >
70
106
)
71
107
}