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,32 +169,37 @@ class DashboardPage extends PureComponent<Props, State> {
                 />
               </Box>
             </Card>
-            <Box flow={3}>
+            <Box flow={4}>
-              {this.getAccountsChunk().map((accountsByLine, i) => (
+              <Text color="dark" ff="Museo Sans" fontSize={6}>
-                <Box
+                {'Accounts'}
-                  key={i} // eslint-disable-line react/no-array-index-key
+              </Text>
-                  horizontal
+              <Box flow={5}>
-                  flow={3}
+                {this.getAccountsChunk().map((accountsByLine, i) => (
-                >
+                  <Box
-                  {accountsByLine.map(
+                    key={i} // eslint-disable-line react/no-array-index-key
-                    (account: any, j) =>
+                    horizontal
-                      account === null ? (
+                    flow={5}
-                        <Box
+                  >
-                          key={j} // eslint-disable-line react/no-array-index-key
+                    {accountsByLine.map(
-                          p={2}
+                      (account: any, j) =>
-                          flex={1}
+                        account === null ? (
-                        />
+                          <Box
-                      ) : (
+                            key={j} // eslint-disable-line react/no-array-index-key
-                        <AccountCard
+                            p={4}
-                          key={account.id}
+                            flex={1}
-                          account={account}
+                          />
-                          data={takeRight(fakeDatas[j], 25)}
+                        ) : (
-                          onClick={() => push(`/account/${account.id}`)}
+                          <AccountCard
-                        />
+                            key={account.id}
-                      ),
+                            account={account}
-                  )}
+                            data={takeRight(fakeDatas[j], 25)}
-                </Box>
+                            onClick={() => push(`/account/${account.id}`)}
-              ))}
+                          />
+                        ),
+                    )}
+                  </Box>
+                ))}
+              </Box>
             </Box>
           </Fragment>
         )}

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,26 +89,32 @@ export const AreaChart = ({
         {linearGradient && (
           <defs>
             <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
-              {linearGradient.map(g => (
+              {linearGradient.map((g, i) => (
-                <stop offset={`${g[0]}%`} stopColor={color} stopOpacity={g[1]} />
+                <stop
+                  key={i} // eslint-disable-line react/no-array-index-key
+                  offset={`${g[0]}%`}
+                  stopColor={color}
+                  stopOpacity={g[1]}
+                />
               ))}
             </linearGradient>
           </defs>
         )}
         {!tiny && (
-          <XAxis
+          <YAxis
-            dataKey="name"
+            interval={0}
-            stroke="#e9eff4"
+            dataKey="value"
+            tickMargin={0}
+            stroke={false}
             tickLine={false}
-            interval={2}
+            tick={({ x, y, index, payload }) => {
-            tick={({ x, y, index, payload, visibleTicksCount }) => {
               const { value } = payload
 
-              if (index !== 0 && index !== visibleTicksCount - 1) {
+              if (index !== 0) {
                 return (
                   <g transform={`translate(${x}, ${y})`}>
-                    <text x={0} y={0} dy={16} textAnchor="middle" fill="currentColor">
+                    <text x={-30} y={0} dy={5} textAnchor="middle" fill="currentColor">
-                      {value}
+                      {value}k
                     </text>
                   </g>
                 )
@@ -118,8 +124,27 @@ export const AreaChart = ({
             }}
           />
         )}
+        {!tiny && (
+          <XAxis
+            dataKey="name"
+            stroke="#e9eff4"
+            tickLine={false}
+            interval={2}
+            tick={({ x, y, payload }) => {
+              const { value } = payload
+
+              return (
+                <g transform={`translate(${x}, ${y})`}>
+                  <text x={0} y={0} dy={20} textAnchor="middle" fill="currentColor">
+                    {value}
+                  </text>
+                </g>
+              )
+            }}
+          />
+        )}
         {!tiny && <CartesianGrid vertical={false} strokeDasharray="5" stroke="#e9eff4" />}
-        {!tiny && <Tooltip />}
+        {!tiny && <Tooltip isAnimationActive={false} />}
         <Area
           isAnimationActive={isAnimationActive}
           animationDuration={ANIMATION_DURATION}