diff --git a/src/commands.ts b/src/commands.ts index 00fde32c..613b1d0b 100644 --- a/src/commands.ts +++ b/src/commands.ts @@ -28,7 +28,6 @@ export const createCommands = ({ extensionPath, workspaceState }: CreateCommandP return { // initialize [COMMANDS.START]: async () => { - console.log('start') if (webview && webview.state.loaded) { webview.createOrShow() } else { diff --git a/web-app/.storybook/config.ts b/web-app/.storybook/config.ts index 88f910a1..a495fa19 100644 --- a/web-app/.storybook/config.ts +++ b/web-app/.storybook/config.ts @@ -1,5 +1,5 @@ import { configure } from '@storybook/react' -import '../src/styles/index.css' +import '../src/styles/reset.css' // setup acquireVsCodeApi mock // @ts-ignore diff --git a/web-app/package.json b/web-app/package.json index dab9b3bf..bc1a3f56 100644 --- a/web-app/package.json +++ b/web-app/package.json @@ -26,7 +26,6 @@ }, "dependencies": { "@alifd/next": "^1.20.20", - "@alifd/theme-4": "^0.3.1", "@emotion/babel-preset-css-prop": "^10.0.27", "@emotion/core": "^10.0.28", "babel-jest": "^26.1.0", diff --git a/web-app/src/App.tsx b/web-app/src/App.tsx index 361221bf..617cbef8 100644 --- a/web-app/src/App.tsx +++ b/web-app/src/App.tsx @@ -3,16 +3,20 @@ import { ConfigProvider } from '@alifd/next' import enUS from '@alifd/next/lib/locale/en-us' import ErrorBoundary from './components/ErrorBoundary' import Workspace from './components/Workspace' +import { ThemeProvider } from 'emotion-theming' +import theme from './styles/theme' import Routes from './Routes' const App = () => ( /* @ts-ignore invalid in enUS locale typings for @alifd/next@1.20.20 https://github.com/alibaba-fusion/next/commit/e3b934b */ - - - - - + + + + + + + ) diff --git a/web-app/src/components/BetaBadge/index.tsx b/web-app/src/components/BetaBadge/index.tsx index 59145062..a9d3b3f1 100644 --- a/web-app/src/components/BetaBadge/index.tsx +++ b/web-app/src/components/BetaBadge/index.tsx @@ -1,11 +1,13 @@ import * as React from 'react' +import { useTheme } from 'emotion-theming' import { Badge } from '@alifd/next' +import { Theme } from '../../styles/theme' const styles = { - betaBadge: { - backgroundColor: '#6a67ce', - color: '#FFFFFF', - }, + betaBadge: (theme: Theme) => ({ + backgroundColor: theme['$color-brand1-9'], + color: theme['$color-white'], + }), } type Props = { @@ -13,8 +15,9 @@ type Props = { } const BetaBadge = ({ children }: Props) => { + const theme: Theme = useTheme() return ( - + {children}   ) diff --git a/web-app/src/components/Card/index.tsx b/web-app/src/components/Card/index.tsx deleted file mode 100644 index f3c2bc25..00000000 --- a/web-app/src/components/Card/index.tsx +++ /dev/null @@ -1,29 +0,0 @@ -import { Card as AlifdCard } from '@alifd/next' -import * as React from 'react' -import { css, jsx } from '@emotion/core' - -const styles = { - card: { - display: 'flex', - width: '100%', - }, -} - -interface Props { - children: React.ReactNode - onClick?: () => void - style?: React.CSSProperties -} - -const Card = (props: Props) => ( - - {props.children} - -) - -export default Card diff --git a/web-app/src/components/Divider.tsx b/web-app/src/components/Divider.tsx deleted file mode 100644 index 2ca12ba1..00000000 --- a/web-app/src/components/Divider.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import * as React from 'react' -import { css, jsx } from '@emotion/core' - -const styles = { - divider: { - width: '100%', - backgroundColor: '#e8e8e8', - height: '0.1rem', - }, -} - -const Divider = () =>
- -export default Divider diff --git a/web-app/src/components/Error/index.tsx b/web-app/src/components/Error/index.tsx index 1c6fabea..2a9278c2 100644 --- a/web-app/src/components/Error/index.tsx +++ b/web-app/src/components/Error/index.tsx @@ -4,22 +4,24 @@ import * as T from 'typings' import { css, jsx } from '@emotion/core' import Markdown from '../Markdown' import Button from '../../components/Button' +import { Theme } from '../../styles/theme' const styles = { - container: { + container: (theme: Theme) => ({ display: 'flex' as 'flex', flexDirection: 'column' as 'column', justifyContent: 'center' as 'center', alignItems: 'center' as 'center', - border: '0.5rem solid #FFBABA', + border: `0.5rem solid ${theme['$color-error-2']}`, padding: '1rem', width: '100%', + maxWidth: '100%', height: '100%', - }, - content: { + }), + content: (theme: Theme) => ({ textAlign: 'center' as 'center', - color: 'rgb(40, 40, 40);', - }, + color: theme['$color-text1-3'], + }), options: { display: 'flex' as 'flex', flexDirection: 'column' as 'column', diff --git a/web-app/src/components/Markdown/index.tsx b/web-app/src/components/Markdown/index.tsx index 89cff862..ac5fcf70 100644 --- a/web-app/src/components/Markdown/index.tsx +++ b/web-app/src/components/Markdown/index.tsx @@ -1,5 +1,6 @@ import MarkdownIt from 'markdown-it' import Prism from 'prismjs' +import { css, jsx, InterpolationWithTheme } from '@emotion/core' // @ts-ignore no types for package import markdownEmoji from 'markdown-it-emoji' import * as React from 'react' diff --git a/web-app/src/components/NewUserExperience/NuxTutorial.tsx b/web-app/src/components/NewUserExperience/NuxTutorial.tsx deleted file mode 100644 index 68129c5f..00000000 --- a/web-app/src/components/NewUserExperience/NuxTutorial.tsx +++ /dev/null @@ -1,134 +0,0 @@ -import React from 'react' -import { Collapse, Icon } from '@alifd/next' -import ReactCSSTransitionGroup from 'react-addons-css-transition-group' -import './transition.css' - -const Panel = Collapse.Panel - -const styles = { - container: { - position: 'relative' as 'relative', - transition: 'all .35s', - }, - header: { - display: 'flex' as 'flex', - backgroundColor: '#6a67ce', - color: 'white', - padding: '0.5rem', - }, - title: { - fontSize: '1rem', - }, - toggle: { - display: 'flex' as 'flex', - alignItems: 'center' as 'center', - width: '1.5rem', - }, -} - -type NuxProps = { - onClose: () => void - onLoadSolution: () => void -} - -const NewUserExperienceTutorialCollapsible = (props: NuxProps) => { - const [expandedKeys, setExpandedKeys] = React.useState([]) - return ( - - -
-

Update the editor code and press save to to complete the list of "Tasks".

-
- - -
-

- When you press save in the editor, CodeRoad runs tests to check if you completed the current task and can - continue to the next task. -

-
-

- Progress is tracked and advanced by using Git in the background. On startup, CodeRoad launches a new local - Git repo. New tasks are loaded as new commits, and your task solution code is automatically saved as the - next Git commit. -

-
- - -

You can debug a tutorial in a number of ways:

-
-
    -
  1. - 1. Press save in the editor and use the feedback from failed test messages in the console output. The output - can be found by opening the integrated VSCode terminal, and selecting the tab "Output". Learn more about the - integrated terminal in VSCode at {' '} - - https://code.visualstudio.com/docs/editor/integrated-terminal - - . -
    2. -
    -
  2. - 2. Run the VSCode Debugger located in the left hand icon panel. To start debugging, press the green arrow - button at the top labelled "RUN AND DEBUG". Learn more about debugging with the VSCode Debugger at  - - https://code.visualstudio.com/docs/editor/debugging - - . -
    3. -
    -
  3. - 3. Run the tests in the command line (eg. `npm run test`) and use the output from the tests to debug. Feel - free to use the integrated VScode terminal noted above or another terminal with the project working - directory open. . -
    4. -
- - -

A few tips to help you if you get stuck.

-
    -
  1. - Read the tests. The tests can be found in the test directory and can be read in detail to help you - understand what's failing. -
    2. -
- - -

- Find a bug? Want to request a feature? Post an issue at{' '} - https://github.com/coderoad/coderoad-vscode -

- - - ) -} - -interface Props { - css?: React.CSSProperties - onLoadSolution: () => void -} - -const NewUserExperienceTutorial = (props: Props) => { - const [isOpen, setIsOpen] = React.useState(false) - const onToggle = () => { - setIsOpen(!isOpen) - } - return ( -
-
- {isOpen ? : } - Help -
- - {isOpen && ( - setIsOpen(false)} - /> - )} - -
- ) -} - -export default NewUserExperienceTutorial diff --git a/web-app/src/components/NewUserExperience/transition.css b/web-app/src/components/NewUserExperience/transition.css deleted file mode 100644 index b2fae318..00000000 --- a/web-app/src/components/NewUserExperience/transition.css +++ /dev/null @@ -1,21 +0,0 @@ -.slide-enter { - max-height: 0; - overflow: hidden; -} - -.slide-enter.slide-enter-active { - max-height: 100rem; - overflow: auto; - transition: max-height 500ms ease-in; -} - -.slide-leave { - max-height: 100rem; - overflow: auto; -} - -.slide-leave.slide-leave-active { - max-height: 0; - overflow: hidden; - transition: max-height 300ms ease-out; -} diff --git a/web-app/src/components/Tag/index.tsx b/web-app/src/components/Tag/index.tsx deleted file mode 100644 index b9d05b48..00000000 --- a/web-app/src/components/Tag/index.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import * as React from 'react' -import { css, jsx } from '@emotion/core' - -const styles = { - tag: { - padding: '3px', - backgroundColor: 'rgb(225, 236, 244)', - color: 'rgb(57, 115, 157)', - }, -} - -type Props = { - children: string -} - -const Tag = (props: Props) =>
{props.children}
- -export default Tag diff --git a/web-app/src/components/TestMessage/index.tsx b/web-app/src/components/TestMessage/index.tsx index 300382c3..27e54c0a 100644 --- a/web-app/src/components/TestMessage/index.tsx +++ b/web-app/src/components/TestMessage/index.tsx @@ -1,23 +1,25 @@ import * as React from 'react' import Icon from '../Icon' import { css, jsx } from '@emotion/core' +import { useTheme } from 'emotion-theming' +import { Theme } from '../../styles/theme' const styles = { - container: { - backgroundColor: '#fff3e0', + container: (theme: Theme) => ({ + backgroundColor: theme['$color-warning-1'], padding: '0.5rem', animationDuration: '0.3s', animationTimingFunction: 'ease-in-out', - borderTopLeftRadius: '4px', - borderTopRightRadius: '4px', - color: 'rgb(51, 51, 51)', - fontSize: '0.8rem', - }, - icon: { - color: '#ff9300', - }, + borderTopLeftRadius: theme['$corner-1'], + borderTopRightRadius: theme['$corner-1'], + color: theme['$color-text1-3'], + fontSize: theme['$font-size-caption'], + }), + icon: (theme: Theme) => ({ + color: theme['$color-warning-3'], + }), content: { - marginLeft: '0.5rem', + padding: '0 0.5rem', }, } @@ -38,9 +40,10 @@ const TestMessage = (props: Props) => { } }, [props.message]) + const theme: Theme = useTheme() return visible && props.message ? (
- + {props.message}
) : null diff --git a/web-app/src/components/Workspace/index.tsx b/web-app/src/components/Workspace/index.tsx index 660cadcb..468ef680 100644 --- a/web-app/src/components/Workspace/index.tsx +++ b/web-app/src/components/Workspace/index.tsx @@ -1,23 +1,25 @@ import * as React from 'react' import { css, jsx } from '@emotion/core' -import { useWindowResize } from './resize' +import { Theme } from '../../styles/theme' interface Props { children: React.ReactElement } const styles = { - page: { + page: (theme: Theme) => ({ display: 'flex' as 'flex', position: 'relative' as 'relative', margin: 0, - backgroundColor: 'white', - }, + width: '100vw', + maxWidth: '100%', + backgroundColor: theme['$color-white'], + overflow: 'auto', + }), } const Workspace = ({ children }: Props) => { - const dimensions = useWindowResize() - return
{children}
+ return
{children}
} export default Workspace diff --git a/web-app/src/components/Workspace/resize.ts b/web-app/src/components/Workspace/resize.ts deleted file mode 100644 index dec5f878..00000000 --- a/web-app/src/components/Workspace/resize.ts +++ /dev/null @@ -1,26 +0,0 @@ -import * as React from 'react' - -export const useWindowResize = () => { - const resize = () => ({ - width: window.innerWidth, - height: window.innerHeight, - }) - - const [dimensions, setDimensions] = React.useState(resize()) - - // solution for windows getting off size - React.useEffect(() => { - // timeoutId for debounce mechanism - let timeoutId: any - const handleResize = () => { - if (timeoutId) { - // prevent execution of previous setTimeout - clearTimeout(timeoutId) - } - timeoutId = setTimeout(() => setDimensions(resize()), 50) - } - window.addEventListener('resize', handleResize) - return () => window.removeEventListener('resize', handleResize) - }, [window.innerWidth, window.innerHeight]) - return dimensions -} diff --git a/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx b/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx index 08c5967c..8abccb55 100644 --- a/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx +++ b/web-app/src/containers/SelectTutorial/TutorialOverview/index.tsx @@ -1,11 +1,9 @@ import * as React from 'react' import * as TT from 'typings/tutorial' -// import moment from 'moment' +import { Breadcrumb } from '@alifd/next' import Button from '../../../components/Button' import Markdown from '../../../components/Markdown' -import { Breadcrumb } from '@alifd/next' - -const footerHeight = '3rem' +import { Theme } from '../../../styles/theme' const styles = { page: { @@ -14,29 +12,24 @@ const styles = { flexDirection: 'column' as 'column', width: '100%', }, - nav: { - display: 'flex', - height: '2rem', - fontSize: '1rem', - lineHeight: '1rem', - alignItems: 'center', - }, - navLink: { - fontSize: '14px', + nav: (theme: Theme) => ({ + height: theme['$nav-height'], + }), + navLink: (theme: Theme) => ({ + fontSize: theme['$font-size-caption'], + lineHeight: theme['$font-lineheight-1'], color: 'white', cursor: 'pointer', - }, + }), content: { paddingBottom: '5rem', }, - header: { - color: 'white', - backgroundColor: '#0066B8', + header: (theme: Theme) => ({ + color: theme['$color-white'], + backgroundColor: theme['$color-brand1-9'], padding: '1rem 1rem 1.5rem 1rem', - }, - title: { - fontWeight: 'bold' as 'bold', - }, + }), + title: {}, description: { fontSize: '1rem', }, @@ -51,7 +44,7 @@ const styles = { levelSummary: { paddingLeft: '1.1rem', }, - footer: { + footer: (theme: Theme) => ({ position: 'fixed' as 'fixed', bottom: 0, left: 0, @@ -60,12 +53,12 @@ const styles = { flexDirection: 'row' as 'row', alignItems: 'center' as 'center', justifyContent: 'flex-end' as 'flex-end', - height: footerHeight, + height: theme['$footer-height'], padding: '1rem', paddingRight: '2rem', - backgroundColor: 'black', + backgroundColor: theme['$color-black'], width: '100%', - }, + }), } interface Props { @@ -74,50 +67,48 @@ interface Props { onClear(): void } -const Summary = (props: Props) => { - return ( -
-
-
-
- - -
- < Back to Tutorials -
- - -
- {`# ${props.tutorial.summary.title}`} - {`### ${props.tutorial.summary.description}`} - {/*
+const Summary = (props: Props) => ( +
+
+
+
+ + +
+ < Back to Tutorials +
+ + +
+ {`# ${props.tutorial.summary.title}`} + {`### ${props.tutorial.summary.description}`} + {/*
Created by {props.createdBy.name}
Last updated {moment(props.updatedAt).format('M/YYYY')}
*/} -
-
-
-

Content

- {props.tutorial.levels.map((level: TT.Level, index: number) => ( -
- {`### ${index + 1}. ${level.title}`} -
- {level.summary} -
+
+
+
+

Content

+ {props.tutorial.levels.map((level: TT.Level, index: number) => ( +
+ {`### ${index + 1}. ${level.title}`} +
+ {level.summary}
- ))} -
+
+ ))}
- -
- {/* TODO Add back button */} - -
- ) -} + +
+ {/* TODO Add back button */} + +
+
+) export default Summary diff --git a/web-app/src/containers/SelectTutorial/forms/TutorialFile.tsx b/web-app/src/containers/SelectTutorial/forms/TutorialFile.tsx index da257446..e0930e64 100644 --- a/web-app/src/containers/SelectTutorial/forms/TutorialFile.tsx +++ b/web-app/src/containers/SelectTutorial/forms/TutorialFile.tsx @@ -1,6 +1,8 @@ import * as React from 'react' import * as TT from 'typings/tutorial' -import { Form } from '@alifd/next' +import { css, jsx } from '@emotion/core' +import { Icon, Form } from '@alifd/next' +import { Theme } from '../../../styles/theme' const FormItem = Form.Item @@ -9,13 +11,19 @@ interface Props { } const styles = { - uploadFileButton: { + form: { + maxWidth: '600px', + padding: '0 0.3rem', + }, + uploadLabel: (theme: Theme) => ({ padding: '0.3rem 0.5rem', - outline: '1px dotted rgb(51, 51, 51)', - borderRadius: '0.2rem', - fontWeight: 400, - fontFamily: - '-apple-system, system-ui, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Fira Sans", "Droid Sans", "Helvetica Neue", sans-serif;', + outline: `1.5px solid ${theme['$color-line1-3']}`, + fontSize: theme['$form-element-medium-font-size'], + fontFamily: theme['$font-family-base'], + color: theme['$color-text1-3'], + }), + uploadButton: { + display: 'none', }, } @@ -39,12 +47,13 @@ const TutorialFile = (props: Props) => { } return ( -
+
- diff --git a/web-app/src/containers/Start/index.tsx b/web-app/src/containers/Start/index.tsx index 922bfed7..4a61b839 100644 --- a/web-app/src/containers/Start/index.tsx +++ b/web-app/src/containers/Start/index.tsx @@ -4,15 +4,18 @@ import * as TT from 'typings/tutorial' import BetaBadge from '../../components/BetaBadge' import { css, jsx } from '@emotion/core' import Button from '../../components/Button' +import { Theme } from '../../styles/theme' const styles = { - page: { + page: (theme: Theme) => ({ position: 'relative' as 'relative', display: 'flex' as 'flex', flexDirection: 'column' as 'column', width: '100%', - height: window.innerHeight, - }, + maxWidth: '100%', + height: '100vh', + backgroundColor: theme['$color-white'], + }), header: { flex: 1, display: 'flex' as 'flex', diff --git a/web-app/src/containers/Tutorial/components/CompletedBanner.tsx b/web-app/src/containers/Tutorial/components/CompletedBanner.tsx index 31bc23ce..c744fbec 100644 --- a/web-app/src/containers/Tutorial/components/CompletedBanner.tsx +++ b/web-app/src/containers/Tutorial/components/CompletedBanner.tsx @@ -1,15 +1,16 @@ import * as React from 'react' import { css, jsx } from '@emotion/core' import { Button, Icon } from '@alifd/next' +import { Theme } from '../../../styles/theme' const styles = { - banner: { + banner: (theme: Theme) => ({ height: 'auto', width: '100%', - backgroundColor: 'rgb(85, 132, 255)', - color: 'white', + backgroundColor: theme['$color-brand1-9'], + color: theme['$color-white'], padding: '0.5rem 1rem', - }, + }), header: { position: 'relative' as 'relative', width: '100%', diff --git a/web-app/src/containers/Tutorial/components/Content.tsx b/web-app/src/containers/Tutorial/components/Content.tsx index 7b7a36d2..0e07efb9 100644 --- a/web-app/src/containers/Tutorial/components/Content.tsx +++ b/web-app/src/containers/Tutorial/components/Content.tsx @@ -5,6 +5,7 @@ const styles = { text: { padding: '0rem 1rem', paddingBottom: '1rem', + width: '100%', }, title: { fontSize: '1.2rem', diff --git a/web-app/src/containers/Tutorial/components/Hints.tsx b/web-app/src/containers/Tutorial/components/Hints.tsx index dfff3ff0..0cc085ab 100644 --- a/web-app/src/containers/Tutorial/components/Hints.tsx +++ b/web-app/src/containers/Tutorial/components/Hints.tsx @@ -2,6 +2,7 @@ import * as React from 'react' import { css, jsx } from '@emotion/core' import Markdown from '../../../components/Markdown' import Button from '../../../components/Button' +import { Theme } from '../../../styles/theme' const styles = { hints: { @@ -10,13 +11,11 @@ const styles = { hintList: { marginBottom: '0.5rem', }, - hint: { + hint: (theme: Theme) => ({ marginBottom: '0.5rem', - backgroundColor: 'rgba(255,229,100,0.3)', - borderLeft: '#ffe564', - borderRadius: '2px', + backgroundColor: theme['$color-warning-1'], padding: '0 0.5rem', - }, + }), } interface Props { diff --git a/web-app/src/containers/Tutorial/components/Level.tsx b/web-app/src/containers/Tutorial/components/Level.tsx index 452001c3..7d6be3a2 100644 --- a/web-app/src/containers/Tutorial/components/Level.tsx +++ b/web-app/src/containers/Tutorial/components/Level.tsx @@ -3,14 +3,15 @@ import * as T from 'typings' import { css, jsx } from '@emotion/core' import Content from './Content' import Steps from './Steps' +import { Theme } from '../../../styles/theme' const styles = { - page: { - backgroundColor: 'white', + page: (theme: Theme) => ({ + backgroundColor: theme['$color-white'], position: 'relative' as 'relative', height: 'auto', width: '100%', - }, + }), content: { display: 'flex' as 'flex', flexDirection: 'column' as 'column', diff --git a/web-app/src/containers/Tutorial/components/SideMenu.tsx b/web-app/src/containers/Tutorial/components/SideMenu.tsx index fbf21b37..68b15b05 100644 --- a/web-app/src/containers/Tutorial/components/SideMenu.tsx +++ b/web-app/src/containers/Tutorial/components/SideMenu.tsx @@ -1,5 +1,7 @@ import * as React from 'react' import { Menu, Icon, Drawer } from '@alifd/next' +import { useTheme } from 'emotion-theming' +import { Theme } from '../../../styles/theme' const { Item, Divider } = Menu @@ -11,10 +13,10 @@ const styles = { margin: 0, height: '100%', }, - active: { - color: 'white', - backgroundColor: 'rgb(85, 132, 255)', - }, + active: (theme: Theme) => ({ + color: theme['$color-white'], + backgroundColor: theme['$color-brand1-9'], + }), itemText: { marginLeft: '0.5rem', }, @@ -31,6 +33,7 @@ const SideMenu = (props: Props) => { const onMenuClose = () => { props.toggleVisible(false) } + const theme: Theme = useTheme() return ( { { onMenuClose() props.setPage('level') @@ -56,7 +59,7 @@ const SideMenu = (props: Props) => { { onMenuClose() props.setPage('review') @@ -69,7 +72,7 @@ const SideMenu = (props: Props) => { { onMenuClose() props.setPage('about') diff --git a/web-app/src/containers/Tutorial/components/Step.tsx b/web-app/src/containers/Tutorial/components/Step.tsx index ebeaf9cd..5e4e3696 100644 --- a/web-app/src/containers/Tutorial/components/Step.tsx +++ b/web-app/src/containers/Tutorial/components/Step.tsx @@ -8,7 +8,7 @@ interface Props { content: string status: T.ProgressStatus subtasks?: T.SubtaskUI[] - displayAll: boolean + displayAll?: boolean } const styles = { diff --git a/web-app/src/containers/Tutorial/components/StepProgress.tsx b/web-app/src/containers/Tutorial/components/StepProgress.tsx index 5cb67012..fdc7037d 100644 --- a/web-app/src/containers/Tutorial/components/StepProgress.tsx +++ b/web-app/src/containers/Tutorial/components/StepProgress.tsx @@ -1,16 +1,22 @@ import * as React from 'react' import { Progress } from '@alifd/next' import useMedia from 'use-media' +import { useTheme } from 'emotion-theming' +import { Theme } from '../../../styles/theme' const styles = { - progress: { + progress: (theme: Theme) => ({ display: 'flex' as 'flex', justifyContent: 'flex-end' as 'flex-end', alignItems: 'center' as 'center', width: '10rem', - color: 'white', - }, - text: { color: 'white' }, + color: theme['$color-white'], + }), + text: (theme: Theme) => ({ + color: theme['$color-white'], + marginRight: '0.5rem', + fontSize: '80%', + }), } interface Props { @@ -19,14 +25,11 @@ interface Props { } const StepProgress = (props: Props) => { - const Text = ( - - {props.current} of {props.max} - - ) - + const theme: Theme = useTheme() const isWide = useMedia({ minWidth: '340px' }) + const Text = `${props.current} of ${props.max}` + if (isWide) { return ( { progressive percent={(props.current / props.max) * 100} shape="line" - color="rgb(85, 132, 255)" + color={theme['$color-brand1-9']} css={styles.progress} textRender={() => { return Text @@ -42,7 +45,7 @@ const StepProgress = (props: Props) => { /> ) } - return
{Text}
+ return
{Text}
} export default StepProgress diff --git a/web-app/src/containers/Tutorial/components/TestStatusIcon.tsx b/web-app/src/containers/Tutorial/components/TestStatusIcon.tsx index c62be991..80f1a3c8 100644 --- a/web-app/src/containers/Tutorial/components/TestStatusIcon.tsx +++ b/web-app/src/containers/Tutorial/components/TestStatusIcon.tsx @@ -1,5 +1,7 @@ import * as React from 'react' +import { useTheme } from 'emotion-theming' import Icon from '../../../components/Icon' +import { Theme } from '../../../styles/theme' interface Props { size: 'small' | 'xs' @@ -7,27 +9,28 @@ interface Props { } const styles = { - complete: { + complete: (theme: Theme) => ({ icon: 'success-filling', - color: '#37B809', - }, - active: { + color: theme['$color-success-3'], + }), + active: (theme: Theme) => ({ icon: 'success-filling', - color: 'lightgrey', - }, - fail: { + color: theme['$color-disabled-1'], + }), + fail: (theme: Theme) => ({ icon: 'warning', - color: '#ff9300', - }, - incomplete: { + color: theme['$color-warning-3'], + }), + incomplete: (theme: Theme) => ({ icon: 'lock', - color: 'lightgrey', - }, + color: theme['$color-disabled-1'], + }), } const TestStatusIcon = (props: Props) => { - // @ts-ignore - const style: { icon: string; color: string } = styles[props.status.toLowerCase()] + const theme: Theme = useTheme() + // @ts-ignore( + const style: { icon: string; color: string } = styles[props.status.toLowerCase()](theme) return } diff --git a/web-app/src/containers/Tutorial/containers/About.tsx b/web-app/src/containers/Tutorial/containers/About.tsx index f28e1d96..4284983d 100644 --- a/web-app/src/containers/Tutorial/containers/About.tsx +++ b/web-app/src/containers/Tutorial/containers/About.tsx @@ -1,21 +1,24 @@ import * as React from 'react' import Markdown from '../../../components/Markdown' +import { Theme } from '../../../styles/theme' const styles = { - container: { + container: (theme: Theme) => ({ display: 'flex' as 'flex', flexDirection: 'column' as 'column', - }, - header: { + backgroundColor: theme['$color-white'], + height: 'auto', + }), + header: (theme: Theme) => ({ display: 'flex' as 'flex', alignItems: 'center', justifyContent: 'space-between', height: '2rem', - backgroundColor: '#EBEBEB', + backgroundColor: theme['$color-fill1-2'], fontSize: '1rem', lineHeight: '1rem', padding: '10px 0.4rem', - }, + }), content: { padding: '0.5rem', }, diff --git a/web-app/src/containers/Tutorial/containers/Review.tsx b/web-app/src/containers/Tutorial/containers/Review.tsx index 7a0b5ba9..c07bbcd5 100644 --- a/web-app/src/containers/Tutorial/containers/Review.tsx +++ b/web-app/src/containers/Tutorial/containers/Review.tsx @@ -3,27 +3,30 @@ import * as T from 'typings' import { Switch } from '@alifd/next' import Steps from '../components/Steps' import Content from '../components/Content' +import { Theme } from '../../../styles/theme' interface Props { levels: T.LevelUI[] } const styles = { - container: { - height: 'auto', + container: (theme: Theme) => ({ display: 'flex' as 'flex', flexDirection: 'column' as 'column', - }, - header: { + height: 'auto', + backgroundColor: theme['$color-white'], + paddingBottom: '2rem', + }), + header: (theme: Theme) => ({ display: 'flex' as 'flex', alignItems: 'center', justifyContent: 'space-between', height: '2rem', - backgroundColor: '#EBEBEB', + backgroundColor: theme['$color-fill1-2'], fontSize: '1rem', lineHeight: '1rem', padding: '10px 0.4rem', - }, + }), title: { marginLeft: '0.5rem', }, @@ -32,13 +35,11 @@ const styles = { alignItems: 'center', fontSize: '70%', }, - levels: { - paddingBottom: '2rem', - }, + levels: {}, } const ReviewPage = (props: Props) => { - const [stepVisibility, setStepVisibility] = React.useState(false) + const [stepVisibility, setStepVisibility] = React.useState(true) return (
@@ -48,16 +49,14 @@ const ReviewPage = (props: Props) => { setStepVisibility(checked)} />
+
{props.levels.map((level: T.LevelUI, index: number) => ( -
-
- - {stepVisibility ? : null} -
- {/* divider */} + <> + + {stepVisibility ? : null} {index < props.levels.length - 1 ?
: null} -
+ ))}
diff --git a/web-app/src/containers/Tutorial/index.tsx b/web-app/src/containers/Tutorial/index.tsx index 1dd51469..2c5ddace 100644 --- a/web-app/src/containers/Tutorial/index.tsx +++ b/web-app/src/containers/Tutorial/index.tsx @@ -16,22 +16,29 @@ import Reset from './components/Reset' import Continue from './components/Continue' import ScrollContent from './components/ScrollContent' import CompletedBanner from './components/CompletedBanner' +import { Theme } from '../../styles/theme' +import { useTheme } from 'emotion-theming' const styles = { page: { - width: '100vw', + width: '100%', + maxWidth: '100%', + height: 'auto', paddingBottom: '5rem', }, - header: { + header: (theme: Theme) => ({ display: 'flex' as 'flex', alignItems: 'center', justifyContent: 'flex-start', height: '2rem', - backgroundColor: '#EBEBEB', + backgroundColor: theme['$color-fill1-4'], fontSize: '1rem', lineHeight: '1rem', padding: '10px 0.4rem', - }, + }), + menuIcon: (theme: Theme) => ({ + color: theme['$color-text1-4'], + }), title: { marginLeft: '0.5rem', }, @@ -39,12 +46,12 @@ const styles = { textDecoration: 'none', color: 'inherit', }, - footer: { + footer: (theme: Theme) => ({ display: 'flex' as 'flex', flexDirection: 'row' as 'row', justifyContent: 'space-between', alignItems: 'center', - height: '2rem', + height: theme['$footer-height'], backgroundColor: 'black', fontSize: '1rem', lineHeight: '1rem', @@ -53,9 +60,9 @@ const styles = { bottom: 0, left: 0, right: 0, - color: 'white', + color: theme['$color-white'], zIndex: 1000, - }, + }), completeFooter: { position: 'fixed' as 'fixed', bottom: 0, @@ -63,21 +70,21 @@ const styles = { right: 0, zIndex: 1000, }, - processes: { + processes: (theme: Theme) => ({ padding: '0 1rem', position: 'fixed' as 'fixed', - bottom: '2rem', + bottom: theme['$footer-height'], left: 0, right: 0, top: 'auto', - }, - testMessage: { + }), + testMessage: (theme: Theme) => ({ position: 'absolute' as 'absolute', top: 'auto', - bottom: '2rem', + bottom: theme['$footer-height'], left: '5px', right: '5px', - }, + }), } interface PageProps { @@ -93,6 +100,7 @@ interface PageProps { */ const TutorialPage = (props: PageProps) => { + const theme: Theme = useTheme() const { position, progress, processes, testStatus } = props.context const tutorial = selectors.currentTutorial(props.context) @@ -130,7 +138,7 @@ const TutorialPage = (props: PageProps) => {
setMenuVisible(!menuVisible)}> - + {tutorial.summary.title}
@@ -155,7 +163,7 @@ const TutorialPage = (props: PageProps) => { />
) : ( -
+
{/* Process Modal */} {processes.length > 0 && (
@@ -208,7 +216,7 @@ const TutorialPage = (props: PageProps) => { ) : null}
-
+ )}
diff --git a/web-app/src/index.tsx b/web-app/src/index.tsx index 50f95a64..52b9e790 100644 --- a/web-app/src/index.tsx +++ b/web-app/src/index.tsx @@ -7,7 +7,7 @@ import './mock' import App from './App' // init initial styles -import './styles/index.css' +import './styles/reset.css' // init listeners import './services/listeners' diff --git a/web-app/src/styles/index.css b/web-app/src/styles/reset.css similarity index 92% rename from web-app/src/styles/index.css rename to web-app/src/styles/reset.css index de51430e..802f81bc 100644 --- a/web-app/src/styles/index.css +++ b/web-app/src/styles/reset.css @@ -1,5 +1,4 @@ @import 'https://github.com/~@alifd/next/dist/next.min.css'; -/* @import 'https://github.com/~@alifd/theme-4/dist/next.css'; */ @import 'https://github.com/font.css'; html { diff --git a/web-app/src/styles/theme.tsx b/web-app/src/styles/theme.tsx new file mode 100644 index 00000000..7e8bd5d6 --- /dev/null +++ b/web-app/src/styles/theme.tsx @@ -0,0 +1,152 @@ +// import variables from '@alifd/theme-1/variables' + +const theme = { + '$form-element-small-height': '20px', + '$form-element-medium-height': '28px', + '$form-element-large-height': '40px', + '$form-element-small-font-size': '12px', + '$form-element-medium-font-size': '12px', + '$form-element-large-font-size': '14px', + '$form-element-small-preview-height': '20px', + '$form-element-medium-preview-height': '28px', + '$form-element-large-preview-height': '40px', + '$form-element-small-preview-font-size': '12px', + '$form-element-medium-preview-font-size': '12px', + '$form-element-large-preview-font-size': '16px', + '$form-element-small-icon-size': '12px', + '$form-element-medium-icon-size': '12px', + '$form-element-large-icon-size': '16px', + '$form-element-small-corner': '30px', + '$form-element-medium-corner': '30px', + '$form-element-large-corner': '30px', + '$mask-background': '#000000', + '$mask-opacity': '0.45', + '$popup-local-border-width': '1px', + '$popup-local-border-style': 'solid', + '$popup-local-border-color': '#DCDEE3', + '$popup-local-corner': '5px', + '$popup-local-shadow': 'none', + '$popup-global-border-width': '0', + '$popup-global-border-style': 'solid', + '$popup-global-border-color': '#DCDEE3', + '$popup-global-corner': '5px', + '$popup-global-shadow': '0px 2px 6px 0px rgba(255, 106, 0, 0.3)', + '$color-brand1-1': '#DEE8FF', + '$color-brand1-6': '#5584FF', + '$color-brand1-9': '#3E71F7', + '$color-data1-1': '#00DCCD', + '$color-data1-2': '#506FED', + '$color-data1-3': '#AE66FC', + '$color-data1-4': '#FF445F', + '$color-data1-5': '#FF934D', + '$color-data1-6': '#FFD74D', + '$color-data1-7': '#4DDE6D', + '$color-data1-8': '#18B1F7', + '$color-white': '#FFFFFF', + '$color-black': '#000000', + '$color-transparent': 'transparent', + '$color-success-1': '#E4FDDA', + '$color-success-2': '#CDF2BE', + '$color-success-3': '#46BC15', + '$color-success-4': '#41A716', + '$color-notice-1': '#E3F2FD', + '$color-notice-2': '#BAD9FF', + '$color-notice-3': '#4494F9', + '$color-notice-4': '#2E7DE0', + '$color-warning-1': '#FFF3E0', + '$color-warning-2': '#FFE6BD', + '$color-warning-3': '#FF9300', + '$color-warning-4': '#EB7E10', + '$color-error-1': '#FFECE4', + '$color-error-2': '#FFC8B2', + '$color-error-3': '#FF3000', + '$color-error-4': '#E72B00', + '$color-help-1': '#E3FFF8', + '$color-help-2': '#C0ECE2', + '$color-help-3': '#01C1B2', + '$color-help-4': '#01A79A', + '$color-link-1': '#5584FF', + '$color-link-2': '#5584FF', + '$color-link-3': '#3E71F7', + '$color-other-1': '#FFEB3B', + '$color-other-2': '#FCCC12', + '$color-other-3': '#EABB06', + '$color-line1-1': '#E6E7EB', + '$color-line1-2': '#DCDEE3', + '$color-line1-3': '#C4C6CF', + '$color-line1-4': '#A0A2AD', + '$color-fill1-1': '#F7F8FA', + '$color-fill1-2': '#F2F3F7', + '$color-fill1-3': '#EBECF0', + '$color-fill1-4': '#E2E4E8', + '$color-text1-1': '#CCCCCC', + '$color-text1-2': '#999999', + '$color-text1-3': '#666666', + '$color-text1-4': '#000000', + '$color-disabled-1': 'lightgrey', + '$corner-1': '3px', + '$corner-2': '6px', + '$corner-3': '20px', + '$corner-circle': '50%', + '$corner-semicircle': '500px', + '$corner-zero': '0', + '$font-family-base': 'Roboto, "Helvetica Neue", Helvetica, Tahoma, Arial, "PingFang SC", "Microsoft YaHei"', + '$font-lineheight-1': '1.3', + '$font-lineheight-2': '1.5', + '$font-lineheight-3': '1.7', + '$font-size-display-3': '56px', + '$font-size-display-2': '48px', + '$font-size-display-1': '36px', + '$font-size-headline': '24px', + '$font-size-title': '20px', + '$font-size-subhead': '16px', + '$font-size-body-2': '14px', + '$font-size-body-1': '12px', + '$font-size-caption': '12px', + '$font-weight-1': 'lighter', + '$font-weight-thin': '200', + '$font-weight-light': '300', + '$font-weight-2': 'normal', + '$font-weight-medium': '500', + '$font-weight-semi-bold': '600', + '$font-weight-3': 'bold', + '$font-weight-extra-bold': '800', + '$font-weight-ultra-bold': '900', + '$icon-xxs': '8px', + '$icon-xs': '12px', + '$icon-s': '16px', + '$icon-m': '20px', + '$icon-l': '24px', + '$icon-xl': '32px', + '$icon-xxl': '48px', + '$icon-xxxl': '64px', + '$line-zero': '0', + '$line-1': '1px', + '$line-2': '2px', + '$line-3': '3px', + '$line-solid': 'solid', + '$line-dashed': 'dashed', + '$line-dotted': 'dotted', + '$shadow-zero': 'none', + '$shadow-1': '1px 1px 2px 0px rgba(0, 0, 0, 0.1)', + '$shadow-1-up': '0px -1px 2px 0px rgba(0, 0, 0, 0.1)', + '$shadow-1-right': '1px 0px 2px 0px rgba(0, 0, 0, 0.1)', + '$shadow-1-down': '0px 1px 2px 0px rgba(0, 0, 0, 0.1)', + '$shadow-1-left': '-1px 0px 2px 0px rgba(0, 0, 0, 0.1)', + '$shadow-2': '2px 2px 6px 0px rgba(255, 106, 0, 0.3)', + '$shadow-2-up': '0px -2px 6px 0px rgba(255, 106, 0, 0.3)', + '$shadow-2-right': '2px 0px 6px 0px rgba(255, 106, 0, 0.3)', + '$shadow-2-down': '0px 2px 6px 0px rgba(255, 106, 0, 0.3)', + '$shadow-2-left': '-2px 0px 6px 0px rgba(255, 106, 0, 0.3)', + '$shadow-3': '4px 4px 10px 0px rgba(0, 0, 0, 0.1)', + '$shadow-3-up': '0px -4px 10px 0px rgba(0, 0, 0, 0.1)', + '$shadow-3-right': '4px 0px 10px 0px rgba(0, 0, 0, 0.1)', + '$shadow-3-down': '0px 4px 10px 0px rgba(0, 0, 0, 0.1)', + '$shadow-3-left': '-4px 0px 10px 0px rgba(0, 0, 0, 0.1)', + '$footer-height': '2.2rem', + '$nav-height': '2rem', +} + +export type Theme = typeof theme + +export default theme diff --git a/web-app/stories/NewUserExperience.stories.tsx b/web-app/stories/NewUserExperience.stories.tsx deleted file mode 100644 index b3402e9a..00000000 --- a/web-app/stories/NewUserExperience.stories.tsx +++ /dev/null @@ -1,23 +0,0 @@ -import { storiesOf } from '@storybook/react' -import { action } from '@storybook/addon-actions' -import React from 'react' -import { css, jsx } from '@emotion/core' -import SideBarDecorator from './utils/SideBarDecorator' -import NewUserExperienceTutorial from '../src/components/NewUserExperience/NuxTutorial' - -const styles = { - container: { - position: 'absolute', - bottom: 0, - left: 0, - right: 0, - }, -} - -storiesOf('NewUserExperience', module) - .addDecorator(SideBarDecorator) - .add('NUXTutorial', () => ( -
- -
- )) diff --git a/web-app/stories/Step.stories.tsx b/web-app/stories/Step.stories.tsx index 0ff50789..417d6438 100644 --- a/web-app/stories/Step.stories.tsx +++ b/web-app/stories/Step.stories.tsx @@ -75,15 +75,15 @@ storiesOf('Step', module) subtasks={[ { name: 'First Test', - pass: false, + status: 'ACTIVE', }, { name: 'Second Test', - pass: true, + status: 'COMPLETE', }, { name: 'Third Test', - pass: false, + status: 'ACTIVE', }, ]} /> @@ -91,6 +91,6 @@ storiesOf('Step', module) .add('Hints', () => ( <> - + )) diff --git a/web-app/stories/utils/SideBarDecorator.tsx b/web-app/stories/utils/SideBarDecorator.tsx index 318a6494..86e43863 100644 --- a/web-app/stories/utils/SideBarDecorator.tsx +++ b/web-app/stories/utils/SideBarDecorator.tsx @@ -1,6 +1,8 @@ import * as React from 'react' import { css, jsx } from '@emotion/core' import { Provider } from './ProviderDecorator' +import { ThemeProvider } from 'emotion-theming' +import theme from '../../src/styles/theme' const styles = { container: { @@ -17,7 +19,9 @@ const styles = { const SideBarDecorator = (storyFn) => ( -
{storyFn()}
+ +
{storyFn()}
+ ) diff --git a/web-app/yarn.lock b/web-app/yarn.lock index 1a122fb9..8588f3cc 100644 --- a/web-app/yarn.lock +++ b/web-app/yarn.lock @@ -40,6 +40,13 @@ react-transition-group "^2.2.1" shallow-element-equals "^1.0.1" +"@alifd/theme-1@^0.3.1": + version "0.3.1" + resolved "https://registry.yarnpkg.com/@alifd/theme-1/-/theme-1-0.3.1.tgz#da3ddf986775b5c70ebf5111f5d6f11b6fac69bb" + integrity sha512-VdSsTifO5nvc0gl1yMkVv3XZsI5FNyg8Vv2+sb3C+ApIl7AL6FwKs8Ljc4AAlpfurT1Ke5tQpzgMV1ejrinAww== + dependencies: + "@alifd/next" "~1.20.4" + "@alifd/theme-4@^0.3.1": version "0.3.1" resolved "https://registry.yarnpkg.com/@alifd/theme-4/-/theme-4-0.3.1.tgz#be5f26f777a11122ab1def8d1f1333c0e7942d7e"