Update AccountCard, and Dasbhoard Chart

src/components/DashboardPage/AccountCard.js

@@ -45,7 +45,7 @@ const AccountCard = ({
       height={52}
       data={data}
       strokeWidth={1}
-      linearGradient={[[5, 0.4], [100, 0]]}
+      linearGradient={[[5, 0.4], [80, 0]]}
     />
   </Card>
 )

src/components/DashboardPage/index.js

@@ -14,6 +14,7 @@ import type { MapStateToProps } from 'react-redux'
 import type { Accounts } from 'types/common'
 
 import { formatBTC } from 'helpers/format'
+import { space } from 'styles/theme'
 
 import { getTotalBalance, getVisibleAccounts } from 'reducers/accounts'
 
@@ -121,7 +122,7 @@ class DashboardPage extends PureComponent<Props, State> {
       <Box flow={7}>
         <Box horizontal align="flex-end">
           <Box>
-            <Text color="dark" ff="Museo Sans|Regular" fontSize={7}>
+            <Text color="dark" ff="Museo Sans" fontSize={7}>
               {'Good morning, Khalil.'}
             </Text>
             <Text color="grey" fontSize={5} ff="Museo Sans|Light">
@@ -140,11 +141,17 @@ class DashboardPage extends PureComponent<Props, State> {
         </Box>
         {totalAccounts > 0 && (
           <Fragment>
-            <Card flow={3} p={6}>
+            <Card flow={3} p={0} py={6}>
               <Text>{formatBTC(totalBalance)}</Text>
               <Box ff="Open Sans" fontSize={4} color="warmGrey">
                 <AreaChart
                   id="dashboard-chart"
+                  margin={{
+                    top: space[6],
+                    bottom: 0,
+                    left: space[6] - 10,
+                    right: space[6],
+                  }}
                   color="#5286f7"
                   height={250}
                   data={takeRight(
@@ -162,19 +169,23 @@ class DashboardPage extends PureComponent<Props, State> {
                 />
               </Box>
             </Card>
-            <Box flow={3}>
+            <Box flow={4}>
+              <Text color="dark" ff="Museo Sans" fontSize={6}>
+                {'Accounts'}
+              </Text>
+              <Box flow={5}>
                 {this.getAccountsChunk().map((accountsByLine, i) => (
                   <Box
                     key={i} // eslint-disable-line react/no-array-index-key
                     horizontal
-                  flow={3}
+                    flow={5}
                   >
                     {accountsByLine.map(
                       (account: any, j) =>
                         account === null ? (
                           <Box
                             key={j} // eslint-disable-line react/no-array-index-key
-                          p={2}
+                            p={4}
                             flex={1}
                           />
                         ) : (
@@ -189,6 +200,7 @@ class DashboardPage extends PureComponent<Props, State> {
                   </Box>
                 ))}
               </Box>
+            </Box>
           </Fragment>
         )}
       </Box>

src/components/base/Chart/index.js

@@ -1,7 +1,7 @@
 // @flow
 
 import React, { PureComponent } from 'react'
-import { AreaChart as ReactAreaChart, Area, XAxis, CartesianGrid, Tooltip } from 'recharts'
+import { AreaChart as ReactAreaChart, Area, XAxis, YAxis, CartesianGrid, Tooltip } from 'recharts'
 
 import Box from 'components/base/Box'
 
@@ -89,37 +89,62 @@ export const AreaChart = ({
         {linearGradient && (
           <defs>
             <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
-              {linearGradient.map(g => (
-                <stop offset={`${g[0]}%`} stopColor={color} stopOpacity={g[1]} />
+              {linearGradient.map((g, i) => (
+                <stop
+                  key={i} // eslint-disable-line react/no-array-index-key
+                  offset={`${g[0]}%`}
+                  stopColor={color}
+                  stopOpacity={g[1]}
+                />
               ))}
             </linearGradient>
           </defs>
         )}
+        {!tiny && (
+          <YAxis
+            interval={0}
+            dataKey="value"
+            tickMargin={0}
+            stroke={false}
+            tickLine={false}
+            tick={({ x, y, index, payload }) => {
+              const { value } = payload
+
+              if (index !== 0) {
+                return (
+                  <g transform={`translate(${x}, ${y})`}>
+                    <text x={-30} y={0} dy={5} textAnchor="middle" fill="currentColor">
+                      {value}k
+                    </text>
+                  </g>
+                )
+              }
+
+              return null
+            }}
+          />
+        )}
         {!tiny && (
           <XAxis
             dataKey="name"
             stroke="#e9eff4"
             tickLine={false}
             interval={2}
-            tick={({ x, y, index, payload, visibleTicksCount }) => {
+            tick={({ x, y, payload }) => {
               const { value } = payload
 
-              if (index !== 0 && index !== visibleTicksCount - 1) {
               return (
                 <g transform={`translate(${x}, ${y})`}>
-                    <text x={0} y={0} dy={16} textAnchor="middle" fill="currentColor">
+                  <text x={0} y={0} dy={20} textAnchor="middle" fill="currentColor">
                     {value}
                   </text>
                 </g>
               )
-              }
-
-              return null
             }}
           />
         )}
         {!tiny && <CartesianGrid vertical={false} strokeDasharray="5" stroke="#e9eff4" />}
-        {!tiny && <Tooltip />}
+        {!tiny && <Tooltip isAnimationActive={false} />}
         <Area
           isAnimationActive={isAnimationActive}
           animationDuration={ANIMATION_DURATION}