theme migration progress 2

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

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'

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

@@ -15,7 +15,7 @@ const styles = {
     flexDirection: 'column' as 'column',
     alignItems: 'center',
     justifyContent: 'center',
-    width: '100%',
+    width: '100vw',
   },
 }
 

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

@@ -17,7 +17,7 @@ const styles = {
     alignItems: 'center' as 'center',
     justifyContent: 'center' as 'center',
     height: '100%',
-    width: '100%',
+    width: '100vw',
   },
   processes: {
     padding: '0 1rem',

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

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

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

@@ -1,42 +1,35 @@
 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: {
     position: 'relative' as 'relative',
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
-    width: '100%',
+    width: '100vw',
   },
-  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 (
-    <div css={styles.page}>
-      <div css={styles.content}>
-        <div css={styles.header}>
-          <div css={styles.nav}>
-            <Breadcrumb separator="/">
-              <Breadcrumb.Item>
-                <div css={styles.navLink} onClick={props.onClear}>
-                  &lt; Back to Tutorials
-                </div>
-              </Breadcrumb.Item>
-            </Breadcrumb>
-          </div>
-          <Markdown css={styles.title}>{`# ${props.tutorial.summary.title}`}</Markdown>
-          <Markdown>{`### ${props.tutorial.summary.description}`}</Markdown>
-          {/* <h5 css={styles.meta}>
+const Summary = (props: Props) => (
+  <div css={styles.page}>
+    <div css={styles.content}>
+      <div css={styles.header}>
+        <div css={styles.nav}>
+          <Breadcrumb separator="/">
+            <Breadcrumb.Item>
+              <div css={styles.navLink} onClick={props.onClear}>
+                &lt; Back to Tutorials
+              </div>
+            </Breadcrumb.Item>
+          </Breadcrumb>
+        </div>
+        <Markdown>{`# ${props.tutorial.summary.title}`}</Markdown>
+        <Markdown>{`### ${props.tutorial.summary.description}`}</Markdown>
+        {/* <h5 css={styles.meta}>
           <div css={{ marginRight: '2rem' }}>Created by {props.createdBy.name}</div>
           <div>Last updated {moment(props.updatedAt).format('M/YYYY')}</div>
         </h5> */}
-        </div>
-        <div>
-          <div css={styles.levelList}>
-            <h2>Content</h2>
-            {props.tutorial.levels.map((level: TT.Level, index: number) => (
-              <div key={index}>
-                <Markdown>{`### ${index + 1}. ${level.title}`}</Markdown>
-                <div css={styles.levelSummary}>
-                  <Markdown>{level.summary}</Markdown>
-                </div>
+      </div>
+      <div>
+        <div css={styles.levelList}>
+          <h2>Content</h2>
+          {props.tutorial.levels.map((level: TT.Level, index: number) => (
+            <div key={index}>
+              <Markdown>{`### ${index + 1}. ${level.title}`}</Markdown>
+              <div css={styles.levelSummary}>
+                <Markdown>{level.summary}</Markdown>
               </div>
-            ))}
-          </div>
+            </div>
+          ))}
         </div>
       </div>
+    </div>
 
-      <div css={styles.footer}>
-        {/* TODO Add back button */}
-        <Button type="primary" onClick={props.onNext}>
-          Start
-        </Button>
-      </div>
+    <div css={styles.footer}>
+      {/* TODO Add back button */}
+      <Button type="primary" onClick={props.onNext}>
+        Start
+      </Button>
     </div>
-  )
-}
+  </div>
+)
 
 export default Summary

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 (
-    <Form style={{ maxWidth: '600px' }}>
+    <Form css={styles.form}>
       <FormItem label="Load coderoad config.json">
         <br />
-        <label style={styles.uploadFileButton}>
-          Upload
-          <input style={{ display: 'none' }} type="file" accept="application/json" onChange={onChange} />
+        <label css={styles.uploadLabel}>
+          <Icon type="upload" size="xs" />
+          &nbsp;&nbsp;Upload
+          <input css={styles.uploadButton} type="file" accept="application/json" onChange={onChange} />
         </label>
         <br />
       </FormItem>

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

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

web-app/src/styles/theme.tsx

@@ -193,6 +193,8 @@ const theme = {
   '$s-48': '192px',
   '$s-49': '196px',
   '$s-50': '200px',
+  '$footer-height': '3rem',
+  '$nav-height': '2rem',
 }
 
 export type Theme = typeof theme