use rems for font sizes (#81)

Author: ShMcK

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

@@ -10,7 +10,7 @@ const styles = {
     alignItems: 'center',
     width: 30,
     height: 30,
-    fontSize: 18,
+    fontSize: '1.2rem',
     color: 'grey',
   },
   balloonTitle: {

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

@@ -11,10 +11,10 @@ const styles = {
     width: '100%',
   },
   header: {
-    height: '36px',
+    height: '2rem',
     backgroundColor: '#EBEBEB',
-    fontSize: '16px',
-    lineHeight: '16px',
+    fontSize: '1rem',
+    lineHeight: '1rem',
     padding: '10px 1rem',
   },
 }

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

@@ -9,14 +9,14 @@ const styles = {
     width: '100%',
   },
   header: {
-    height: '36px',
+    height: '2rem',
     backgroundColor: '#EBEBEB',
-    fontSize: '16px',
-    lineHeight: '16px',
+    fontSize: '1rem',
+    lineHeight: '1rem',
     padding: '10px 1rem',
   },
   banner: {
-    height: '50px',
+    height: '3rem',
     fontSize: '1rem',
     padding: '1rem',
   },

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

@@ -3,7 +3,7 @@ import * as G from 'typings/graphql'
 import Button from '../../components/Button'
 import Markdown from '../../components/Markdown'
 
-const footerHeight = 50
+const footerHeight = '3rem'
 
 const styles = {
   page: {
@@ -23,10 +23,10 @@ const styles = {
     fontSize: '1rem',
   },
   header: {
-    height: '36px',
+    height: '2rem',
     backgroundColor: '#EBEBEB',
-    fontSize: '16px',
-    lineHeight: '16px',
+    fontSize: '1rem',
+    lineHeight: '1rem',
     padding: '10px 1rem',
   },
   levelList: {

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

@@ -14,15 +14,15 @@ const styles = {
     display: 'flex' as 'flex',
     flexDirection: 'column' as 'column',
     padding: 0,
-    paddingBottom: 72,
+    paddingBottom: '4.5rem',
     height: 'auto',
     width: '100%',
   },
   header: {
-    height: '36px',
+    height: '2rem',
     backgroundColor: '#EBEBEB',
-    fontSize: '16px',
-    lineHeight: '16px',
+    fontSize: '1rem',
+    lineHeight: '1rem',
     padding: '10px 1rem',
   },
   content: {
@@ -33,7 +33,7 @@ const styles = {
     paddingBottom: '5rem',
   },
   steps: {
-    padding: '1rem 16px',
+    padding: '1rem 1rem',
   },
   title: {
     fontSize: '1.2rem',
@@ -43,7 +43,7 @@ const styles = {
   processes: {
     padding: '0 1rem',
     position: 'fixed' as 'fixed',
-    bottom: 36,
+    bottom: '2rem',
     left: 0,
     right: 0,
   },
@@ -52,10 +52,10 @@ const styles = {
     flexDirection: 'row' as 'row',
     justifyContent: 'space-between',
     alignItems: 'center',
-    height: 36,
+    height: '2rem',
     backgroundColor: 'black',
-    fontSize: 16,
-    lineHeight: 16,
+    fontSize: '1rem',
+    lineHeight: '1rem',
     padding: '10px 1rem',
     position: 'fixed' as 'fixed',
     bottom: 0,