Dashboard integration work

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'}

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>

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>

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} />

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 (

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};

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 = {