8000 outline styles of launch page · An0nCrypto/coderoad-vscode@cca8043 · GitHub
[go: up one dir, main page]
Skip to content

Commit cca8043

Browse files
ShMcKShMcK
committed
outline styles of launch page
1 parent 25ef45e commit cca8043

File tree

2 files changed

+95
-15
lines changed

2 files changed

+95
-15
lines changed

‎web-app/src/containers/Launch/index.tsx

Lines changed: 80 additions & 9 deletions
Original file line numberDiff line numberDiff line change
@@ -1,16 +1,87 @@
11
import * as React from 'react'
2+
import * as CR from 'typings'
3+
import * as G from 'typings/graphql'
4+
import { css, jsx } from '@emotion/core'
5+
import Button from '../../components/Button'
6+
import Card from '../../components/Card'
27

3-
const LaunchPage = () => {
4-
return (
5-
<div>
6-
<span>Welcome To</span>
7-
<h1>CodeRoad</h1>
8-
<div>
9-
<h3>New Tutorial</h3>
10-
<h3>Continue Tutorial</h3>
8+
const styles = {
9+
page: {
10+
position: 'relative' as 'relative',
11+
display: 'flex',
12+
flexDirection: 'column',
13+
width: '100%',
14+
height: window.innerHeight,
15+
},
16+
header: {
17+
flex: 1,
18+
display: 'flex' as 'flex',
19+
flexDirection: 'column',
20+
justifyContent: 'flex-end' as 'flex-end',
21+
alignItems: 'center' as 'center',
22+
backgroundColor: '#EBEBEB',
23+
fontSize: '1rem',
24+
lineHeight: '1rem',
25+
padding: '10px 1rem',
26+
},
27+
title: {
28+
fontSize: '4rem',
29+
},
30+
subtitle: {
31+
fontSize: '1.6rem',
32+
},
33+
options: {
34+
flex: 1,
35+
display: 'flex' as 'flex',
36+
flexDirection: 'column' as 'column',
37+
justifyContent: 'flex-start' as 'flex-start',
38+
alignItems: 'center' as 'center',
39+
},
40+
buttonContainer: {
41+
margin: '1rem',
42+
},
43+
}
44+
45+
interface Props {
46+
onContinue(): void
47+
onNew(): void
48+
tutorial?: G.Tutorial
49+
}
50+
51+
export const LaunchPage = (props: Props) => (
52+
<div css={styles.page}>
53+
<div css={styles.header}>
54+
<h1 css={styles.title}>CodeRoad</h1>
55+
<h3 css={styles.subtitle}>Play Interactive Coding Tutorials in VSCode</h3>
56+
</div>
57+
58+
<div css={styles.options}>
59+
<div css={styles.buttonContainer}>
60+
<Button size="large" type="primary" onClick={props.onNew} style={{ width: '8rem' }}>
61+
Start
62+
</Button>
1163
</div>
64+
{props.tutorial && (
65+
<div css={styles.buttonContainer}>
66+
<Button size="large" onClick={props.onContinue} style={{ width: '8rem' }}>
67+
Continue
68+
</Button>
69+
</div>
70+
)}
1271
</div>
72+
</div>
73+
)
74+
75+
interface ContainerProps {
76+
context: CR.MachineContext
77+
send(action: CR.Action | string): void
78+
}
79+
80+
const LaunchPageContainer = ({ context, send }: ContainerProps) => {
81+
const { tutorial } = context
82+
return (
83+
<LaunchPage onContinue={() => send('TUTORIAL_START')} onNew={() => send('TUTORIAL_SELECT')} tutorial={tutorial} />
1384
)
1485
}
1586

16-
export default LaunchPage
87+
export default LaunchPageContainer

‎web-app/stories/Launch.stories.tsx

Lines changed: 15 additions & 6 deletions
Original file line numberDiff line numberDiff line change
@@ -1,17 +1,26 @@
11
import { storiesOf } from '@storybook/react'
2+
import { action } from '@storybook/addon-actions'
23
import React from 'react'
34
import { css, jsx } from '@emotion/core'
45
import SideBarDecorator from './utils/SideBarDecorator'
5-
import Launch from '../src/containers/Launch'
6+
import LaunchPage from '../src/containers/Launch'
67

78
const styles = {
89
container: {},
910
}
1011

1112
storiesOf('Launch', module)
1213
.addDecorator(SideBarDecorator)
13-
.add('LaunchPage', () => (
14-
<div css={styles.container}>
15-
<Launch />
16-
</div>
17-
))
14+
.add('LaunchPage', () => {
15+
const tutorial = {
16+
summary: {
17+
title: 'Tutorial Title',
18+
summary: 'Tutorial Summary',
19+
},
20+
}
21+
return (
22+
<div css={styles.container}>
23+
<LaunchPage send={action('send')} context={{ tutorial }} />
24+
</div>
25+
)
26+
})

0 commit comments

Comments
 (0)
0