Fix font sizes and padding on various places

src/components/AccountPage.js

@@ -52,36 +52,31 @@ class AccountPage extends PureComponent<Props> {
       <Box flow={3}>
         <Box horizontal>
           <Box>
-            <Text fontSize={4}>{account.name}</Text>
+            <Text fontSize={8}>{account.name}</Text>
           </Box>
-          <Box horizontal align="center" justify="flex-end" grow flow={20}>
+          <Box horizontal align="center" justify="flex-end" grow flow={2}>
-            <Box>
+            <Button primary onClick={() => openModal(MODAL_SEND, { account })}>
-              <Button primary onClick={() => openModal(MODAL_SEND, { account })}>
+              <Box horizontal flow={2} align="center">
-                <Box horizontal flow={2} align="center">
+                <Box>
-                  <Box>
+                  <Icon name="upload" />
-                    <Icon name="upload" />
-                  </Box>
-                  <Box>{t('send.title')}</Box>
                 </Box>
-              </Button>
+                <Box>{t('send.title')}</Box>
-            </Box>
+              </Box>
-            <Box>
+            </Button>
-              <Button primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
+            <Button primary onClick={() => openModal(MODAL_RECEIVE, { account })}>
-                <Box horizontal flow={2} align="center">
+              <Box horizontal flow={2} align="center">
-                  <Box>
+                <Box>
-                    <Icon name="download" />
+                  <Icon name="download" />
-                  </Box>
-                  <Box>{t('receive.title')}</Box>
                 </Box>
-              </Button>
+                <Box>{t('receive.title')}</Box>
-            </Box>
+              </Box>
-            <Box>
+            </Button>
-              <Button
+            <Button
-                icon="sliders-h"
+              style={{ width: 50 }}
-                color="mouse"
+              icon="sliders-h"
-                onClick={() => openModal(MODAL_SETTINGS_ACCOUNT, { account })}
+              color="mouse"
-              />
+              onClick={() => openModal(MODAL_SETTINGS_ACCOUNT, { account })}
-            </Box>
+            />
           </Box>
         </Box>
         {accountData && (

src/components/Breadcrumb/index.js

@@ -10,6 +10,7 @@ const BreadcrumbWrapper = styled(Box).attrs({
   align: 'center',
   relative: true,
 })``
+
 const BreadcrumbStep = styled(({ start, active, end, ...props }) => (
   <Box start={start} end={end} active={active} {...props} />
 )).attrs({
@@ -84,7 +85,7 @@ const Breadcrumb = ({ items, currentStep }: Props) => (
             <BreadcrumbNumberWrapper>
               <BreadcrumbNumber active={active}>{i + 1}</BreadcrumbNumber>
             </BreadcrumbNumberWrapper>
-            <Box fontSize={0}>{item.label}</Box>
+            <Box fontSize={3}>{item.label}</Box>
           </BreadcrumbStep>
         </Fragment>
       )

src/components/SettingsPage/Profile.js

@@ -90,7 +90,7 @@ class TabProfile extends PureComponent<Props, State> {
             <Box
               horizontal
               align="center"
-              flow={1}
+              flow={2}
               style={{ cursor: 'pointer' }}
               onClick={() => this.handleChangeInput('password.state')(!isPasswordChecked)}
             >

src/components/SettingsPage/index.js

@@ -64,8 +64,8 @@ class SettingsPage extends PureComponent<Props, State> {
     }
 
     return (
-      <Box flow={4}>
+      <Box flow={6}>
-        <Text fontSize={5}>{t('settings.title')}</Text>
+        <Text fontSize={7}>{t('settings.title')}</Text>
         <Tabs
           index={tab}
           onTabClick={this.handleChangeTab}

src/components/base/Button/index.js

@@ -41,7 +41,7 @@ function getProps({ disabled, icon, primary }: Object) {
         px: 1,
       },
       {
-        fontSize: 1,
+        fontSize: 4,
         px: 3,
       },
     ),

src/components/base/Label.js

@@ -2,7 +2,7 @@ import styled from 'styled-components'
 import { fontSize } from 'styled-system'
 
 export default styled.label.attrs({
-  fontSize: 0,
+  fontSize: 3,
 })`
   ${fontSize};
   display: block;

src/components/base/Modal/index.js

@@ -72,7 +72,7 @@ const Backdrop = styled(Box).attrs({
 
 const Wrapper = styled(Tabbable).attrs({
   bg: 'transparent',
-  flow: 20,
+  flow: 4,
   mt: 100,
   mb: 100,
   style: p => ({
@@ -93,7 +93,7 @@ const Body = styled(Box).attrs({
 `
 
 const CloseContainer = styled(Box).attrs({
-  p: 2,
+  p: 4,
   color: 'mouse',
 })`
   cursor: pointer;
@@ -214,10 +214,10 @@ export const ModalBody = ({
   <Body>
     {onClose && (
       <CloseContainer onClick={onClose}>
-        <Icon fontSize={3} name="times" />
+        <Icon fontSize={6} name="times" />
       </CloseContainer>
     )}
-    <Box p={3} {...props}>
+    <Box p={5} {...props}>
       {children}
     </Box>
   </Body>

src/components/base/Tabs/index.js

@@ -12,7 +12,7 @@ const Tab = styled(Tabbable).attrs({
   pb: 2,
   align: 'center',
   justify: 'center',
-  fontSize: 1,
+  fontSize: 3,
 })`
   border-bottom: 2px solid transparent;
   border-bottom-color: ${p => (p.isActive ? p.theme.colors.blue : '')};

src/components/modals/AddAccount/index.js

@@ -304,7 +304,7 @@ class AddAccountModal extends PureComponent<Props, State> {
 
           return (
             <ModalBody onClose={onClose} flow={3}>
-              <Text fontSize={4} color="steel">
+              <Text fontSize={6} color="steel">
                 {t('addAccount.title')}
               </Text>
               <Step {...this.getStepProps()} />

src/components/modals/Send.js

@@ -30,7 +30,7 @@ const Steps = {
       }}
     >
       <Box flow={3}>
-        <Text fontSize={4} color="steel">
+        <Text fontSize={6} color="steel">
           {t('send.title')}
         </Text>
         <Box flow={1}>
@@ -157,7 +157,7 @@ class Send extends PureComponent<Props, State> {
 
           return (
             <Fragment>
-              <ModalBody p={2}>
+              <ModalBody p={3}>
                 <Breadcrumb
                   currentStep={step}
                   items={[