cleanup button styles

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

@@ -7,10 +7,19 @@ interface Props {
   disabled?: boolean
   type?: 'primary' | 'secondary' | 'normal'
   onClick?: () => void
+  size?: 'small' | 'medium' | 'large'
+  iconSize?: 'xxs' | 'xs' | 'small' | 'medium' | 'large' | 'xl' | 'xxl' | 'xxxl'
 }
 
 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}
+    style={props.style}
+    size={props.size}
+    iconSize={props.iconSize}
+  >
     {props.children}
   </AlifdButton>
 )

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

@@ -1,6 +1,7 @@
 import * as React from 'react'
 import * as G from 'typings/graphql'
 import Button from '../../components/Button'
+import Icon from '../../components/Icon'
 import Markdown from '../../components/Markdown'
 
 const footerHeight = '3rem'
@@ -23,11 +24,13 @@ const styles = {
     fontSize: '1rem',
   },
   header: {
+    display: 'flex',
     height: '2rem',
     backgroundColor: '#EBEBEB',
     fontSize: '1rem',
     lineHeight: '1rem',
     padding: '10px 1rem',
+    alignItems: 'center',
   },
   levelList: {
     padding: '0rem 1rem',
@@ -61,7 +64,10 @@ const Summary = ({ title, description, levels, onNext, onBack }: Props) => (
   <div css={styles.page}>
     <div>
       <div css={styles.header}>
-        <button onClick={onBack}>Back</button>
+        <button onClick={onBack}>
+          <Icon type="arrow-left" size="xxs" />
+        </button>
+        <span>&nbsp;&nbsp;</span>
         <span>CodeRoad</span>
       </div>
       <div css={styles.summary}>