11import * as React from 'react'
22import * as CR from 'typings'
33import * as G from 'typings/graphql'
4+ import { Badge } from '@alifd/next'
45import { css , jsx } from '@emotion/core'
56import Button from '../../components/Button'
67import Card from '../../components/Card'
@@ -22,7 +23,7 @@ const styles = {
2223backgroundColor :'#EBEBEB' ,
2324fontSize :'1rem' ,
2425lineHeight :'1rem' ,
25- padding :'10px 1rem' ,
26+ padding :'1rem' ,
2627} ,
2728title :{
2829fontSize :'4rem' ,
@@ -36,9 +37,14 @@ const styles = {
3637flexDirection :'column' as 'column' ,
3738justifyContent :'flex-start' as 'flex-start' ,
3839alignItems :'center' as 'center' ,
40+ padding :'1rem' ,
41+ } ,
42+ betaBadge :{
43+ backgroundColor :'#6a67ce' ,
44+ color :'#FFFFFF' ,
3945} ,
4046buttonContainer :{
41- margin :'1rem ' ,
47+ margin :'0.5rem ' ,
4248} ,
4349}
4450
@@ -51,19 +57,21 @@ interface Props {
5157export const LaunchPage = ( props :Props ) => (
5258< div css = { styles . page } >
5359< div css = { styles . header } >
54- < h1 css = { styles . title } > CodeRoad</ h1 >
60+ < Badge content = "beta" style = { styles . betaBadge } >
61+ < span css = { styles . title } > CodeRoad </ span >
62+ </ Badge >
5563< h3 css = { styles . subtitle } > Play Interactive Coding Tutorials in VSCode</ h3 >
5664</ div >
5765
5866< div css = { styles . options } >
5967< div css = { styles . buttonContainer } >
60- < Button size = "large" type = "primary" onClick = { props . onNew } style = { { width :'8rem ' } } >
68+ < Button size = "large" type = "primary" onClick = { props . onNew } style = { { width :'10rem ' } } >
6169 Start
6270</ Button >
6371</ div >
6472{ props . tutorial && (
6573< div css = { styles . buttonContainer } >
66- < Button size = "large" onClick = { props . onContinue } style = { { width :'8rem ' } } >
74+ < Button size = "large" onClick = { props . onContinue } style = { { width :'10rem ' } } >
6775 Continue
6876</ Button >
6977</ div >