Merge pull request #328 from coderoad/fix/icons

Fix/icons

Author: ShMcK

Diff for: web-app/src/components/Checkbox/index.tsx

@@ -6,7 +6,7 @@
   background-color: rgba(27, 31, 35, 0.05);
   color: black;
   border-radius: 0.3rem;
-  padding: 0rem 0.15rem;
+  padding: 0.15rem 0.3rem;
   font-size: 80%;
   white-space: nowrap;
 }

Diff for: web-app/src/components/Markdown/style.css

@@ -1,7 +1,7 @@
 import * as React from 'react'
 import * as T from 'typings'
 import { css, jsx } from '@emotion/core'
-import Checkbox from '../../../components/Checkbox'
+import Icon from '../../../components/Icon'
 import Markdown from '../../../components/Markdown'
 
 interface Props {
@@ -20,8 +20,8 @@ const styles = {
   content: {
     margin: 0,
   },
-  checkboxContainer: {
-    paddingTop: 2,
+  statusContainer: {
+    paddingTop: 0,
     width: '1rem',
   },
   options: {
@@ -41,8 +41,9 @@ const Step = (props: Props) => {
   return (
     <div>
       <div css={styles.card}>
-        <div css={styles.checkboxContainer}>
-          <Checkbox status={props.status} />
+        <div css={styles.statusContainer}>
+          {props.status === 'ACTIVE' && <Icon type="success-filling" size="small" style={{ color: 'lightgrey' }} />}
+          {props.status === 'COMPLETE' && <Icon type="success-filling" size="small" style={{ color: '#37B809' }} />}
         </div>
         <div>
           <Markdown>{props.content || ''}</Markdown>