add emotion to styles

web-app/package.json

@@ -29,6 +29,7 @@
     "@alifd/next": "^1.19.8",
     "@alifd/theme-4": "^0.2.3",
     "@apollo/react-hooks": "^3.1.3",
+    "@emotion/core": "^10.0.27",
     "apollo-boost": "^0.4.7",
     "graphql": "^14.5.8",
     "markdown-it": "^10.0.0",

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

@@ -1,5 +1,6 @@
 import { Button as AlifdButton } from '@alifd/next'
 import * as React from 'react'
+import { css, jsx } from '@emotion/core'
 
 interface Props {
   style?: React.CSSProperties
@@ -10,7 +11,7 @@ interface Props {
 }
 
 const Button = (props: Props) => (
-  <AlifdButton onClick={props.onClick} type={props.type} disabled={props.disabled} style={props.style}>
+  <AlifdButton onClick={props.onClick} type={props.type} disabled={props.disabled} css={props.style}>
     {props.children}
   </AlifdButton>
 )

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

@@ -1,5 +1,6 @@
 import { Card as AlifdCard } from '@alifd/next'
 import * as React from 'react'
+import { css, jsx } from '@emotion/core'
 
 const styles = {
   card: {
@@ -19,7 +20,7 @@ const Card = (props: Props) => (
     showTitleBullet={false}
     contentHeight="auto"
     onClick={props.onClick}
-    style={{ ...styles.card, ...props.style }}
+    css={{ ...styles.card, ...props.style }}
   >
     {props.children}
   </AlifdCard>

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

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { css, jsx } from '@emotion/core'
 
 const styles = {
   box: {
@@ -26,9 +27,9 @@ const Checkbox = (props: Props) => {
   const checked = props.status === 'COMPLETE'
 
   return (
-    <div style={styles.box}>
+    <div css={styles.box}>
       <label>
-        <input style={styles.input} type="checkbox" checked={checked} onChange={onChange} />
+        <input css={styles.input} type="checkbox" checked={checked} onChange={onChange} />
       </label>
     </div>
   )

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

@@ -1,20 +1,21 @@
 import * as React from 'react'
 import * as T from 'typings'
+import { css, jsx } from '@emotion/core'
 
 interface Props extends T.MachineContext {
   state: string
   children: React.ReactElement
 }
 
 const Debugger = ({ state, children, env, position, progress, processes, tutorial }: Props) => (
-  <div style={{ backgroundColor: '#FFFF99', color: 'black', padding: '.5rem' }}>
+  <div css={{ backgroundColor: '#FFFF99', color: 'black', padding: '.5rem' }}>
     <h4>state: {state}</h4>
     <p>MachineId: {env.machineId}</p>
     <p>SessionId: {env.sessionId}</p>
     <p>tutorial: {tutorial ? tutorial.id : 'none'}</p>
-    <p style={{ backgroundColor: 'khaki', padding: '.5rem' }}>position: {JSON.stringify(position)}</p>
-    <p style={{ backgroundColor: 'moccasin', padding: '.5rem' }}>progress: {JSON.stringify(progress)}</p>
-    <p style={{ backgroundColor: 'beige', padding: '.5rem' }}>processes: {JSON.stringify(processes)}</p>
+    <p css={{ backgroundColor: 'khaki', padding: '.5rem' }}>position: {JSON.stringify(position)}</p>
+    <p css={{ backgroundColor: 'moccasin', padding: '.5rem' }}>progress: {JSON.stringify(progress)}</p>
+    <p css={{ backgroundColor: 'beige', padding: '.5rem' }}>processes: {JSON.stringify(processes)}</p>
     {children}
   </div>
 )

web-app/src/components/Divider.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { css, jsx } from '@emotion/core'
 
 const styles = {
   divider: {
@@ -7,6 +8,6 @@ const styles = {
   },
 }
 
-const Divider = () => <div style={styles.divider} />
+const Divider = () => <div css={styles.divider} />
 
 export default Divider

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

@@ -1,6 +1,7 @@
 import { ApolloError } from 'apollo-boost'
 import { GraphQLError } from 'graphql'
 import * as React from 'react'
+import { css, jsx } from '@emotion/core'
 
 const styles = {
   container: {
@@ -17,7 +18,7 @@ interface Props {
 const ErrorView = ({ error }: Props) => {
   console.log(error)
   return (
-    <div style={styles.container}>
+    <div css={styles.container}>
       <h1>Error</h1>
       {error.graphQLErrors && (
         <div>

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

@@ -1,5 +1,6 @@
 import { Icon as AlifdIcon } from '@alifd/next'
 import * as React from 'react'
+import { css, jsx } from '@emotion/core'
 
 interface Props {
   type: string
@@ -9,7 +10,7 @@ interface Props {
 }
 
 const Icon = (props: Props) => {
-  return <AlifdIcon type={props.type} role={props.role} size={props.size} style={props.style} />
+  return <AlifdIcon type={props.type} role={props.role} size={props.size} css={props.style} />
 }
 
 export default Icon

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

@@ -1,6 +1,7 @@
 import { Message as AlifdMessage } from '@alifd/next'
 import * as React from 'react'
 import * as T from 'typings'
+import { css, jsx } from '@emotion/core'
 
 interface Props {
   processes: T.ProcessEvent[]
@@ -19,7 +20,7 @@ const ProcessEvents = ({ processes }: Props) => {
     return null
   }
   return (
-    <div style={styles.container}>
+    <div css={styles.container}>
       {processes.map(process => (
         <AlifdMessage key={process.title} type="loading" size="medium" title={process.title}>
           {process.description}

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

@@ -1,5 +1,6 @@
 import { Balloon } from '@alifd/next'
 import * as React from 'react'
+import { css, jsx } from '@emotion/core'
 import Button from '../Button'
 
 const styles = {
@@ -35,12 +36,12 @@ const StepHelp = (props: Props) => {
       props.onLoadSolution()
     }
   }
-  const promptLeft = <Button style={styles.iconButton}>i</Button>
+  const promptLeft = <Button css={styles.iconButton}>i</Button>
   return (
-    <Balloon trigger={promptLeft} align="l" alignEdge triggerType="click" style={{ width: 150 }} closable={false}>
+    <Balloon trigger={promptLeft} align="l" alignEdge triggerType="click" css={{ width: 150 }} closable={false}>
       <div>
-        <h4 style={styles.balloonTitle}>Stuck?</h4>
-        <div style={styles.balloonOptions}>
+        <h4 css={styles.balloonTitle}>Stuck?</h4>
+        <div css={styles.balloonOptions}>
           <Button type="secondary" onClick={onClickHandler} disabled={loadedSolution}>
             Load Solution
           </Button>

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

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { css, jsx } from '@emotion/core'
 
 interface Props {
   children: React.ReactElement
@@ -26,7 +27,7 @@ const Workspace = ({ children }: Props) => {
     },
   }
 
-  return <div style={{ ...styles.page, ...dimensions }}>{children}</div>
+  return <div css={{ ...styles.page, ...dimensions }}>{children}</div>
 }
 
 export default Workspace

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

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as CR from 'typings'
 import * as G from 'typings/graphql'
+import { css, jsx } from '@emotion/core'
 import Button from '../../components/Button'
 import Card from '../../components/Card'
 
@@ -25,8 +26,8 @@ interface Props {
 }
 
 export const ContinuePage = (props: Props) => (
-  <div style={styles.page}>
-    <div style={styles.header}>
+  <div css={styles.page}>
+    <div css={styles.header}>
       <span>CodeRoad</span>
     </div>
     <Card>

web-app/src/containers/LoadingPage.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as T from 'typings'
+import { css, jsx } from '@emotion/core'
 import Loading from '../components/Loading'
 import Message from '../components/Message'
 
@@ -23,13 +24,13 @@ const LoadingPage = ({ text, context }: Props) => {
   const { error } = context
   if (error) {
     return (
-      <div style={styles.page}>
+      <div css={styles.page}>
         <Message type="error" title={error.title} description={error.description} />
       </div>
     )
   }
   return (
-    <div style={styles.page}>
+    <div css={styles.page}>
       <Loading text={text} />
     </div>
   )

web-app/src/containers/New/NewPage.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as G from 'typings/graphql'
+import { css, jsx } from '@emotion/core'
 import TutorialList from './TutorialList'
 
 const styles = {
@@ -26,11 +27,11 @@ interface Props {
 }
 
 const NewPage = (props: Props) => (
-  <div style={styles.page}>
-    <div style={styles.header}>
+  <div css={styles.page}>
+    <div css={styles.header}>
       <span>CodeRoad</span>
     </div>
-    <div style={styles.banner}>
+    <div css={styles.banner}>
       <span>Select a Tutorial to Start</span>
     </div>
     <TutorialList tutorialList={props.tutorialList} />

web-app/src/containers/New/TutorialList/TutorialItem.tsx

@@ -1,4 +1,5 @@
 import * as React from 'react'
+import { css, jsx } from '@emotion/core'
 import Card from '../../../components/Card'
 
 const styles = {
@@ -26,7 +27,7 @@ interface Props {
 
 // icons from https://konpa.github.io/devicon/
 const LanguageIcon = () => (
-  <svg viewBox="0 0 128 128" style={styles.languageIcon}>
+  <svg viewBox="0 0 128 128" css={styles.languageIcon}>
     <path fill="#F0DB4F" d="M1.408 1.408h125.184v125.185h-125.184z"></path>
     <path
       fill="#323330"
@@ -36,10 +37,10 @@ const LanguageIcon = () => (
 )
 
 const TutorialItem = (props: Props) => (
-  <Card onClick={props.onSelect} style={styles.card}>
+  <Card onClick={props.onSelect} css={styles.card}>
     <h3>{props.title || 'Title'}</h3>
     <p>{props.description || 'Description'}</p>
-    <div style={styles.languages}>
+    <div css={styles.languages}>
       <LanguageIcon />
     </div>
   </Card>

web-app/src/containers/Overview/OverviewPage.tsx

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as G from 'typings/graphql'
+import { css, jsx } from '@emotion/core'
 import Button from '../../components/Button'
 import Markdown from '../../components/Markdown'
 
@@ -52,20 +53,20 @@ interface Props {
 }
 
 const Summary = ({ title, description, levels, onNext }: Props) => (
-  <div style={styles.page}>
+  <div css={styles.page}>
     <div>
-      <div style={styles.header}>
+      <div css={styles.header}>
         <span>CodeRoad</span>
       </div>
-      <div style={styles.summary}>
-        <h2 style={styles.title}>{title}</h2>
+      <div css={styles.summary}>
+        <h2 css={styles.title}>{title}</h2>
         <Markdown>{description}</Markdown>
       </div>
       <div>
-        <div style={styles.header}>
+        <div css={styles.header}>
           <span>Levels</span>
         </div>
-        <div style={styles.levelList}>
+        <div css={styles.levelList}>
           {levels.map((level: G.Level, index: number) => (
             <div key={index}>
               <h4>
@@ -78,7 +79,7 @@ const Summary = ({ title, description, levels, onNext }: Props) => (
       </div>
     </div>
 
-    <div style={styles.options}>
+    <div css={styles.options}>
       {/* TODO Add back button */}
       <Button type="primary" onClick={() => onNext()}>
         Start

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

@@ -1,5 +1,6 @@
 import * as React from 'react'
 import * as CR from 'typings'
+import { css, jsx } from '@emotion/core'
 import Button from '../../components/Button'
 
 const styles = {
@@ -20,7 +21,7 @@ const CompletedPage = (props: Props) => {
   return (
     <div>
       <h3>Tutorial Complete</h3>
-      <div style={styles.options}>
+      <div css={styles.options}>
         <Button onClick={selectNewTutorial}>Continue</Button>
       </div>
     </div>

web-app/src/containers/Tutorial/LevelPage/Level.tsx

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as T from 'typings'
 import * as G from 'typings/graphql'
+import { css, jsx } from '@emotion/core'
 import Button from '../../../components/Button'
 import Markdown from '../../../components/Markdown'
 import ProcessEvents from '../../../components/ProcessEvents'
@@ -75,18 +76,18 @@ const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
   }
 
   return (
-    <div style={styles.page}>
-      <div style={styles.header}>
+    <div css={styles.page}>
+      <div css={styles.header}>
         <span>Learn</span>
       </div>
-      <div style={styles.content}>
-        <h2 style={styles.title}>{level.title}</h2>
+      <div css={styles.content}>
+        <h2 css={styles.title}>{level.title}</h2>
         <Markdown>{level.content || ''}</Markdown>
       </div>
 
-      <div style={styles.tasks}>
-        <div style={styles.header}>Tasks</div>
-        <div style={styles.steps}>
+      <div css={styles.tasks}>
+        <div css={styles.header}>Tasks</div>
+        <div css={styles.steps}>
           {level.steps.map((step: (G.Step & { status: T.ProgressStatus }) | null, index: number) => {
             if (!step) {
               return null
@@ -105,12 +106,12 @@ const Level = ({ level, onContinue, onLoadSolution, processes }: Props) => {
       </div>
 
       {processes.length > 0 && (
-        <div style={styles.processes}>
+        <div css={styles.processes}>
           <ProcessEvents processes={processes} />
         </div>
       )}
 
-      <div style={styles.footer}>
+      <div css={styles.footer}>
         <span>
           {typeof level.index === 'number' ? `${level.index + 1}. ` : ''}
           {level.title}