add beta badge

Author: ShMcK

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

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as CR from 'typings'
 import * as G from 'typings/graphql'
+import { Badge } from '@alifd/next'
 import { css, jsx } from '@emotion/core'
 import Button from '../../components/Button'
 import Card from '../../components/Card'
@@ -22,7 +23,7 @@ const styles = {
     backgroundColor: '#EBEBEB',
     fontSize: '1rem',
     lineHeight: '1rem',
-    padding: '10px 1rem',
+    padding: '1rem',
   },
   title: {
     fontSize: '4rem',
@@ -36,9 +37,14 @@ const styles = {
     flexDirection: 'column' as 'column',
     justifyContent: 'flex-start' as 'flex-start',
     alignItems: 'center' as 'center',
+    padding: '1rem',
+  },
+  betaBadge: {
+    backgroundColor: '#6a67ce',
+    color: '#FFFFFF',
   },
   buttonContainer: {
-    margin: '1rem',
+    margin: '0.5rem',
   },
 }
 
@@ -51,19 +57,21 @@ interface Props {
 export const LaunchPage = (props: Props) => (
   <div css={styles.page}>
     <div css={styles.header}>
-      <h1 css={styles.title}>CodeRoad</h1>
+      <Badge content="beta" style={styles.betaBadge}>
+        <span css={styles.title}>CodeRoad&nbsp;</span>
+      </Badge>
       <h3 css={styles.subtitle}>Play Interactive Coding Tutorials in VSCode</h3>
     </div>
 
     <div css={styles.options}>
       <div css={styles.buttonContainer}>
-        <Button size="large" type="primary" onClick={props.onNew} style={{ width: '8rem' }}>
+        <Button size="large" type="primary" onClick={props.onNew} style={{ width: '10rem' }}>
           Start
         </Button>
       </div>
       {props.tutorial && (
         <div css={styles.buttonContainer}>
-          <Button size="large" onClick={props.onContinue} style={{ width: '8rem' }}>
+          <Button size="large" onClick={props.onContinue} style={{ width: '10rem' }}>
             Continue
           </Button>
         </div>