update styles

Signed-off-by: shmck <shawn.j.mckay@gmail.com>

Author: ShMcK

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/components/Divider.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/SelectTutorialForm.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/SelectTutorial/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/Start/index.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/CompletedBanner.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/Hints.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/Level.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/SideMenu.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/StepProgress.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/components/TestStatusIcon.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/About.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',
   },

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

@@ -16,30 +16,35 @@ 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',
     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',
   },
   learn: {
     textDecoration: 'none',
     color: 'inherit',
   },
-  footer: {
+  footer: (theme: Theme) => ({
     display: 'flex' as 'flex',
     flexDirection: 'row' as 'row',
     justifyContent: 'space-between',
@@ -53,9 +58,9 @@ const styles = {
     bottom: 0,
     left: 0,
     right: 0,
-    color: 'white',
+    color: theme['$color-white'],
     zIndex: 1000,
-  },
+  }),
   completeFooter: {
     position: 'fixed' as 'fixed',
     bottom: 0,
@@ -93,6 +98,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 +136,7 @@ const TutorialPage = (props: PageProps) => {
       <div css={styles.page}>
         <div css={styles.header}>
           <a onClick={() => setMenuVisible(!menuVisible)}>
-            <Icon type="toggle-left" size="small" style={{ color: '#333' }} />
+            <Icon type="toggle-left" size="small" style={styles.menuIcon(theme)} />
           </a>
           <span css={styles.title}>{tutorial.summary.title}</span>
         </div>

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

@@ -83,6 +83,7 @@ const theme = {
   '$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',
@@ -142,57 +143,6 @@ const theme = {
   '$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)',
-  '$s-zero': '0',
-  '$s-1': '4px',
-  '$s-2': '8px',
-  '$s-3': '12px',
-  '$s-4': '16px',
-  '$s-5': '20px',
-  '$s-6': '24px',
-  '$s-7': '28px',
-  '$s-8': '32px',
-  '$s-9': '36px',
-  '$s-10': '40px',
-  '$s-11': '44px',
-  '$s-12': '48px',
-  '$s-13': '52px',
-  '$s-14': '56px',
-  '$s-15': '60px',
-  '$s-16': '64px',
-  '$s-17': '68px',
-  '$s-18': '72px',
-  '$s-19': '76px',
-  '$s-20': '80px',
-  '$s-21': '84px',
-  '$s-22': '88px',
-  '$s-23': '92px',
-  '$s-24': '96px',
-  '$s-25': '100px',
-  '$s-26': '104px',
-  '$s-27': '108px',
-  '$s-28': '112px',
-  '$s-29': '116px',
-  '$s-30': '120px',
-  '$s-31': '124px',
-  '$s-32': '128px',
-  '$s-33': '132px',
-  '$s-34': '136px',
-  '$s-35': '140px',
-  '$s-36': '144px',
-  '$s-37': '148px',
-  '$s-38': '152px',
-  '$s-39': '156px',
-  '$s-40': '160px',
-  '$s-41': '164px',
-  '$s-42': '168px',
-  '$s-43': '172px',
-  '$s-44': '176px',
-  '$s-45': '180px',
-  '$s-46': '184px',
-  '$s-47': '188px',
-  '$s-48': '192px',
-  '$s-49': '196px',
-  '$s-50': '200px',
   '$footer-height': '3rem',
   '$nav-height': '2rem',
 }