theme progress

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

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

@@ -1,9 +1,10 @@
 import * as React from 'react'
 import { useTheme } from 'emotion-theming'
 import { Badge } from '@alifd/next'
+import { Theme } from '../../styles/theme'
 
 const styles = {
-  betaBadge: (theme: any) => ({
+  betaBadge: (theme: Theme) => ({
     backgroundColor: theme['$color-brand1-9'], // '#6a67ce',
     color: theme['$color-white'],
   }),
@@ -14,7 +15,7 @@ type Props = {
 }
 
 const BetaBadge = ({ children }: Props) => {
-  const theme = useTheme()
+  const theme: Theme = useTheme()
   return (
     <Badge content="beta" style={styles.betaBadge(theme)}>
       {children}&nbsp;&nbsp;

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

@@ -4,22 +4,23 @@ 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%',
+    width: '100vw',
     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',

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 ? (
     <div css={styles.container}>
-      <Icon type="warning" style={styles.icon} size="xs" />
+      <Icon type="warning" style={styles.icon(theme)} size="xs" />
       <span css={styles.content}>{props.message}</span>
     </div>
   ) : null

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

@@ -1,18 +1,20 @@
 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',
+    backgroundColor: theme['$color-white'],
+  }),
 }
 
 const Workspace = ({ children }: Props) => {

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 = {