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

Navigation Menu

Sign in
Appearance settings

Search code, repositories, users, issues, pull requests...

Provide feedback

We read every piece of feedback, and take your input very seriously.

Saved searches

Use saved searches to filter your results more quickly
Appearance settings

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