update styles

Signed-off-by: shmck <[email protected]>

web-app/src/components/BetaBadge/index.tsx

@@ -5,7 +5,7 @@ import { Theme } from '../../styles/theme'
 
 const styles = {
   betaBadge: (theme: Theme) => ({
-    backgroundColor: theme['$color-brand1-9'], // '#6a67ce',
+    backgroundColor: theme['$color-brand1-9'],
     color: theme['$color-white'],
   }),
 }

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

@@ -8,7 +8,7 @@ import TutorialFile from './forms/TutorialFile'
 const styles = {
   formWrapper: {
     padding: '1rem',
-    width: '100wvw',
+    width: '100vw',
     height: 'auto',
   },
 }

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

@@ -9,7 +9,7 @@ const styles = {
   page: {
     position: 'relative' as 'relative',
     height: 'auto',
-    width: 'vw',
+    width: '100vw',
   },
   selectPage: {
     padding: '1rem',

web-app/src/containers/Start/index.tsx

@@ -10,8 +10,8 @@ const styles = {
     position: 'relative' as 'relative',
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
-    width: '100%',
-    height: window.innerHeight,
+    width: '100vw',
+    height: '100vh',
   },
   header: {
     flex: 1,

web-app/src/containers/Tutorial/components/CompletedBanner.tsx

@@ -1,18 +1,19 @@
 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',
+    width: '100vw',
+    backgroundColor: theme['$color-brand1-9'],
+    color: theme['$color-white'],
     padding: '0.5rem 1rem',
-  },
+  }),
   header: {
     position: 'relative' as 'relative',
-    width: '100%',
+    width: '100vw',
   },
   headerMessage: {
     marginLeft: '0.5rem',

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 {

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%',
-  },
+    width: '100vw',
+  }),
   content: {
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',

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 (
     <Drawer
       bodyStyle={styles.drawer}
@@ -44,7 +47,7 @@ const SideMenu = (props: Props) => {
         <Item
           key="level"
           disabled={props.page === 'level'}
-          style={props.page === 'level' ? styles.active : {}}
+          style={props.page === 'level' ? styles.active(theme) : {}}
           onClick={() => {
             onMenuClose()
             props.setPage('level')
@@ -56,7 +59,7 @@ const SideMenu = (props: Props) => {
         <Item
           key="review"
           disabled={props.page === 'review'}
-          style={props.page === 'review' ? styles.active : {}}
+          style={props.page === 'review' ? styles.active(theme) : {}}
           onClick={() => {
             onMenuClose()
             props.setPage('review')
@@ -69,7 +72,7 @@ const SideMenu = (props: Props) => {
         <Item
           key="about"
           disabled={props.page === 'about'}
-          style={props.page === 'about' ? styles.active : {}}
+          style={props.page === 'about' ? styles.active(theme) : {}}
           onClick={() => {
             onMenuClose()
             props.setPage('about')

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,30 +25,27 @@ interface Props {
 }
 
 const StepProgress = (props: Props) => {
-  const Text = (
-    <span style={styles.text}>
-      {props.current} of {props.max}
-    </span>
-  )
-
+  const theme: Theme = useTheme()
   const isWide = useMedia({ minWidth: '340px' })
 
+  const Text = `${props.current} of ${props.max}`
+
   if (isWide) {
     return (
       <Progress
         state="success"
         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
         }}
       />
     )
   }
-  return <div css={{ marginRight: '0.5rem', fontSize: '80%' }}>{Text}</div>
+  return <div css={styles.text}>{Text}</div>
 }
 
 export default StepProgress

web-app/src/containers/Tutorial/components/TestStatusIcon.tsx

@@ -1,33 +1,36 @@
 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'
   status: 'COMPLETE' | 'ACTIVE' | 'INCOMPLETE' | 'FAIL'
 }
 
 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 <Icon type={style.icon} size={props.size} style={{ color: style.color }} />
 }
 

web-app/src/containers/Tutorial/containers/About.tsx

@@ -1,21 +1,22 @@
 import * as React from 'react'
 import Markdown from '../../../components/Markdown'
+import { Theme } from '../../../styles/theme'
 
 const styles = {
   container: {
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
   },
-  header: {
+  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',
   },

web-app/src/containers/Tutorial/containers/Review.tsx

@@ -3,6 +3,7 @@ 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[]
@@ -14,16 +15,16 @@ const styles = {
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
   },
-  header: {
+  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',
   },