Skip to content

Commit 4c59200

Browse files
ShMcKShMcK
committed
theme migration progress 2
Signed-off-by: shmck <shawn.j.mckay@gmail.com>
1 parent d59b0e1 commit 4c59200

File tree

9 files changed

+81
-101
lines changed

9 files changed

+81
-101
lines changed

‎web-app/src/components/Markdown/index.tsx‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,6 @@
11
import MarkdownIt from 'markdown-it'
22
import Prism from 'prismjs'
3+
import { css, jsx, InterpolationWithTheme } from '@emotion/core'
34
// @ts-ignore no types for package
45
import markdownEmoji from 'markdown-it-emoji'
56
import * as React from 'react'

‎web-app/src/containers/Loading/LoadingPage.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -15,7 +15,7 @@ const styles = {
1515
flexDirection: 'column' as 'column',
1616
alignItems: 'center',
1717
justifyContent: 'center',
18-
width: '100%',
18+
width: '100vw',
1919
},
2020
}
2121

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -17,7 +17,7 @@ const styles = {
1717
alignItems: 'center' as 'center',
1818
justifyContent: 'center' as 'center',
1919
height: '100%',
20-
width: '100%',
20+
width: '100vw',
2121
},
2222
processes: {
2323
padding: '0 1rem',

‎web-app/src/containers/SelectTutorial/SelectTutorialForm.tsx‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -8,7 +8,7 @@ import TutorialFile from './forms/TutorialFile'
88
const styles = {
99
formWrapper: {
1010
padding: '1rem',
11-
width: '100%',
11+
width: '100vw',
1212
height: 'auto',
1313
},
1414
}

‎web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx‎

Lines changed: 54 additions & 63 deletions
Original file line numberDiff line numberDiff line change
@@ -1,42 +1,35 @@
11
import * as React from 'react'
22
import * as TT from 'typings/tutorial'
3-
// import moment from 'moment'
3+
import { Breadcrumb } from '@alifd/next'
44
import Button from '../../../components/Button'
55
import Markdown from '../../../components/Markdown'
6-
import { Breadcrumb } from '@alifd/next'
7-
8-
const footerHeight = '3rem'
6+
import { Theme } from '../../../styles/theme'
97

108
const styles = {
119
page: {
1210
position: 'relative' as 'relative',
1311
display: 'flex' as 'flex',
1412
flexDirection: 'column' as 'column',
15-
width: '100%',
13+
width: '100vw',
1614
},
17-
nav: {
18-
display: 'flex',
19-
height: '2rem',
20-
fontSize: '1rem',
21-
lineHeight: '1rem',
22-
alignItems: 'center',
23-
},
24-
navLink: {
25-
fontSize: '14px',
15+
nav: (theme: Theme) => ({
16+
height: theme['$nav-height'],
17+
}),
18+
navLink: (theme: Theme) => ({
19+
fontSize: theme['$font-size-caption'],
20+
lineHeight: theme['$font-lineheight-1'],
2621
color: 'white',
2722
cursor: 'pointer',
28-
},
23+
}),
2924
content: {
3025
paddingBottom: '5rem',
3126
},
32-
header: {
33-
color: 'white',
34-
backgroundColor: '#0066B8',
27+
header: (theme: Theme) => ({
28+
color: theme['$color-white'],
29+
backgroundColor: theme['$color-brand1-9'],
3530
padding: '1rem 1rem 1.5rem 1rem',
36-
},
37-
title: {
38-
fontWeight: 'bold' as 'bold',
39-
},
31+
}),
32+
title: {},
4033
description: {
4134
fontSize: '1rem',
4235
},
@@ -51,7 +44,7 @@ const styles = {
5144
levelSummary: {
5245
paddingLeft: '1.1rem',
5346
},
54-
footer: {
47+
footer: (theme: Theme) => ({
5548
position: 'fixed' as 'fixed',
5649
bottom: 0,
5750
left: 0,
@@ -60,12 +53,12 @@ const styles = {
6053
flexDirection: 'row' as 'row',
6154
alignItems: 'center' as 'center',
6255
justifyContent: 'flex-end' as 'flex-end',
63-
height: footerHeight,
56+
height: theme['$footer-height'],
6457
padding: '1rem',
6558
paddingRight: '2rem',
66-
backgroundColor: 'black',
59+
backgroundColor: theme['$color-black'],
6760
width: '100%',
68-
},
61+
}),
6962
}
7063

7164
interface Props {
@@ -74,50 +67,48 @@ interface Props {
7467
onClear(): void
7568
}
7669

77-
const Summary = (props: Props) => {
78-
return (
79-
<div css={styles.page}>
80-
<div css={styles.content}>
81-
<div css={styles.header}>
82-
<div css={styles.nav}>
83-
<Breadcrumb separator="/">
84-
<Breadcrumb.Item>
85-
<div css={styles.navLink} onClick={props.onClear}>
86-
&lt; Back to Tutorials
87-
</div>
88-
</Breadcrumb.Item>
89-
</Breadcrumb>
90-
</div>
91-
<Markdown css={styles.title}>{`# ${props.tutorial.summary.title}`}</Markdown>
92-
<Markdown>{`### ${props.tutorial.summary.description}`}</Markdown>
93-
{/* <h5 css={styles.meta}>
70+
const Summary = (props: Props) => (
71+
<div css={styles.page}>
72+
<div css={styles.content}>
73+
<div css={styles.header}>
74+
<div css={styles.nav}>
75+
<Breadcrumb separator="/">
76+
<Breadcrumb.Item>
77+
<div css={styles.navLink} onClick={props.onClear}>
78+
&lt; Back to Tutorials
79+
</div>
80+
</Breadcrumb.Item>
81+
</Breadcrumb>
82+
</div>
83+
<Markdown>{`# ${props.tutorial.summary.title}`}</Markdown>
84+
<Markdown>{`### ${props.tutorial.summary.description}`}</Markdown>
85+
{/* <h5 css={styles.meta}>
9486
<div css={{ marginRight: '2rem' }}>Created by {props.createdBy.name}</div>
9587
<div>Last updated {moment(props.updatedAt).format('M/YYYY')}</div>
9688
</h5> */}
97-
</div>
98-
<div>
99-
<div css={styles.levelList}>
100-
<h2>Content</h2>
101-
{props.tutorial.levels.map((level: TT.Level, index: number) => (
102-
<div key={index}>
103-
<Markdown>{`### ${index + 1}. ${level.title}`}</Markdown>
104-
<div css={styles.levelSummary}>
105-
<Markdown>{level.summary}</Markdown>
106-
</div>
89+
</div>
90+
<div>
91+
<div css={styles.levelList}>
92+
<h2>Content</h2>
93+
{props.tutorial.levels.map((level: TT.Level, index: number) => (
94+
<div key={index}>
95+
<Markdown>{`### ${index + 1}. ${level.title}`}</Markdown>
96+
<div css={styles.levelSummary}>
97+
<Markdown>{level.summary}</Markdown>
10798
</div>
108-
))}
109-
</div>
99+
</div>
100+
))}
110101
</div>
111102
</div>
103+
</div>
112104

113-
<div css={styles.footer}>
114-
{/* TODO Add back button */}
115-
<Button type="primary" onClick={props.onNext}>
116-
Start
117-
</Button>
118-
</div>
105+
<div css={styles.footer}>
106+
{/* TODO Add back button */}
107+
<Button type="primary" onClick={props.onNext}>
108+
Start
109+
</Button>
119110
</div>
120-
)
121-
}
111+
</div>
112+
)
122113

123114
export default Summary

‎web-app/src/containers/SelectTutorial/forms/TutorialFile.tsx‎

Lines changed: 20 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,8 @@
11
import * as React from 'react'
22
import * as TT from 'typings/tutorial'
3-
import { Form } from '@alifd/next'
3+
import { css, jsx } from '@emotion/core'
4+
import { Icon, Form } from '@alifd/next'
5+
import { Theme } from '../../../styles/theme'
46

57
const FormItem = Form.Item
68

@@ -9,13 +11,19 @@ interface Props {
911
}
1012

1113
const styles = {
12-
uploadFileButton: {
14+
form: {
15+
maxWidth: '600px',
16+
padding: '0 0.3rem',
17+
},
18+
uploadLabel: (theme: Theme) => ({
1319
padding: '0.3rem 0.5rem',
14-
outline: '1px dotted rgb(51, 51, 51)',
15-
borderRadius: '0.2rem',
16-
fontWeight: 400,
17-
fontFamily:
18-
'-apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;',
20+
outline: `1.5px solid ${theme['$color-line1-3']}`,
21+
fontSize: theme['$form-element-medium-font-size'],
22+
fontFamily: theme['$font-family-base'],
23+
color: theme['$color-text1-3'],
24+
}),
25+
uploadButton: {
26+
display: 'none',
1927
},
2028
}
2129

@@ -39,12 +47,13 @@ const TutorialFile = (props: Props) => {
3947
}
4048

4149
return (
42-
<Form style={{ maxWidth: '600px' }}>
50+
<Form css={styles.form}>
4351
<FormItem label="Load coderoad config.json">
4452
<br />
45-
<label style={styles.uploadFileButton}>
46-
Upload
47-
<input style={{ display: 'none' }} type="file" accept="application/json" onChange={onChange} />
53+
<label css={styles.uploadLabel}>
54+
<Icon type="upload" size="xs" />
55+
&nbsp;&nbsp;Upload
56+
<input css={styles.uploadButton} type="file" accept="application/json" onChange={onChange} />
4857
</label>
4958
<br />
5059
</FormItem>

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

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -9,7 +9,7 @@ const styles = {
99
page: {
1010
position: 'relative' as 'relative',
1111
height: 'auto',
12-
width: '100%',
12+
width: 'vw',
1313
},
1414
selectPage: {
1515
padding: '1rem',

‎web-app/src/styles/theme.tsx‎

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -193,6 +193,8 @@ const theme = {
193193
'$s-48': '192px',
194194
'$s-49': '196px',
195195
'$s-50': '200px',
196+
'$footer-height': '3rem',
197+
'$nav-height': '2rem',
196198
}
197199

198200
export type Theme = typeof theme

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

Lines changed: 0 additions & 23 deletions
This file was deleted.

0 commit comments

Comments
 (0)