From e1db937d62ee23fc4baef8c4ef0005f165b68d2e Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Mon, 12 Feb 2018 16:14:50 +0100
Subject: [PATCH 1/2] Dashboard integration work

---
 src/components/DashboardPage.js    | 8 ++++----
 src/components/GlobalSearch.js     | 2 +-
 src/components/TopBar.js           | 2 +-
 src/components/Wrapper.js          | 2 +-
 src/components/base/Pills/index.js | 8 +++++---
 src/components/base/Text.js        | 3 +++
 src/styles/theme.js                | 2 +-
 7 files changed, 16 insertions(+), 11 deletions(-)

diff --git a/src/components/DashboardPage.js b/src/components/DashboardPage.js
index 465f57a9..9396446a 100644
--- a/src/components/DashboardPage.js
+++ b/src/components/DashboardPage.js
@@ -116,13 +116,13 @@ class DashboardPage extends PureComponent<Props, State> {
     const totalAccounts = accounts.length
 
     return (
-      <Box flow={4}>
+      <Box flow={7}>
         <Box horizontal align="flex-end">
           <Box>
-            <Text color="black" fontSize={6}>
-              {'Hello Anonymous,'}
+            <Text color="dark" ff="Museo Sans|Regular" fontSize={7}>
+              {'Good morning, Khalil.'}
             </Text>
-            <Text color="grey" fontSize={3}>
+            <Text color="grey" fontSize={5} ff="Museo Sans|Light">
               {totalAccounts > 0
                 ? `here is the summary of your ${totalAccounts} accounts`
                 : 'no accounts'}
diff --git a/src/components/GlobalSearch.js b/src/components/GlobalSearch.js
index cadda611..3f5a791a 100644
--- a/src/components/GlobalSearch.js
+++ b/src/components/GlobalSearch.js
@@ -28,7 +28,7 @@ class GlobalSearch extends PureComponent<{}> {
 
   render() {
     return (
-      <Box grow horizontal>
+      <Box grow horizontal ff="Open Sans|SemiBold" fontSize={4}>
         <Box justify="center" onClick={this.focusInput} pr={2}>
           <Icon name="search" />
         </Box>
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
index 414f1493..890ef6d2 100644
--- a/src/components/TopBar.js
+++ b/src/components/TopBar.js
@@ -140,7 +140,7 @@ class TopBar extends PureComponent<Props, State> {
             </Box>
           </Box>
           <Box horizontal noShrink>
-            <Box justify="center" px={4}>
+            <Box justify="center" px={4} ff="Open Sans|SemiBold" fontSize={4}>
               {'Khalil Benihoud'}
             </Box>
           </Box>
diff --git a/src/components/Wrapper.js b/src/components/Wrapper.js
index 25fdba0e..5e1670be 100644
--- a/src/components/Wrapper.js
+++ b/src/components/Wrapper.js
@@ -50,7 +50,7 @@ class Wrapper extends Component<{}> {
             <Box shrink grow bg="cream" color="grey" relative>
               <TopBar />
               <UpdateNotifier />
-              <GrowScroll p={5} style={{ paddingTop: 80 }}>
+              <GrowScroll p={5} style={{ paddingTop: 100 }}>
                 <Route path="/" exact component={DashboardPage} />
                 <Route path="/settings" component={SettingsPage} />
                 <Route path="/account/:id" component={AccountPage} />
diff --git a/src/components/base/Pills/index.js b/src/components/base/Pills/index.js
index 4e0039eb..e86d7865 100644
--- a/src/components/base/Pills/index.js
+++ b/src/components/base/Pills/index.js
@@ -23,27 +23,29 @@ const Container = styled(Box).attrs({
 })``
 
 const Pill = styled(Tabbable).attrs({
+  ff: p => (p.isActive ? 'Open Sans|SemiBold' : 'Open Sans'),
   color: p => (p.isActive ? 'dodgerBlue' : 'warmGrey'),
   bg: p => (p.isActive ? rgba(p.theme.colors.dodgerBlue, 0.1) : ''),
   px: 2,
-  fontSize: 0,
+  fontSize: 4,
   align: 'center',
   justify: 'center',
 })`
   height: 30px;
   border-radius: 4px;
   outline: none;
-  cursor: pointer;
+  cursor: ${p => (p.isActive ? 'default' : 'pointer')};
 
   &:focus {
     color: ${p => p.theme.colors.dodgerBlue};
+    background-color: ${p => (p.isActive ? '' : rgba(p.theme.colors.black, 0.02))};
   }
 `
 
 function Pills(props: Props) {
   const { items, activeKey, onChange, ...p } = props
   return (
-    <Container {...p}>
+    <Container flow={1} {...p}>
       {items.map(item => {
         const isActive = item.key === activeKey
         return (
diff --git a/src/components/base/Text.js b/src/components/base/Text.js
index 461e54f7..d65791fb 100644
--- a/src/components/base/Text.js
+++ b/src/components/base/Text.js
@@ -3,7 +3,10 @@
 import styled from 'styled-components'
 import { fontSize, fontWeight, textAlign, color } from 'styled-system'
 
+import fontFamily from 'styles/styled/fontFamily'
+
 export default styled.span`
+  ${fontFamily};
   ${fontSize};
   ${textAlign};
   ${color};
diff --git a/src/styles/theme.js b/src/styles/theme.js
index bc3df347..f22c3727 100644
--- a/src/styles/theme.js
+++ b/src/styles/theme.js
@@ -1,7 +1,7 @@
 // @flow
 
 export const space = [0, 5, 10, 15, 20, 30, 40, 50, 70]
-export const fontSizes = [8, 9, 10, 11, 13, 16, 18, 32]
+export const fontSizes = [8, 9, 10, 11, 13, 16, 18, 22, 32]
 export const radii = [0, 4]
 
 export const fontFamilies = {

From 1ac4967b13da07b6ec7b8ab6902a1784377a2fc8 Mon Sep 17 00:00:00 2001
From: meriadec <meriadec.pillet@gmail.com>
Date: Mon, 12 Feb 2018 16:18:06 +0100
Subject: [PATCH 2/2] DashboardPage.js -> DashboardPage/index.js

---
 src/components/{DashboardPage.js => DashboardPage/index.js} | 0
 1 file changed, 0 insertions(+), 0 deletions(-)
 rename src/components/{DashboardPage.js => DashboardPage/index.js} (100%)

diff --git a/src/components/DashboardPage.js b/src/components/DashboardPage/index.js
similarity index 100%
rename from src/components/DashboardPage.js
rename to src/components/DashboardPage/index.js