Merge pull request #105 from loeck/master

Add AccountCard

src/components/DashboardPage/AccountCard.js

@@ -0,0 +1,53 @@
+// @flow
+
+import React from 'react'
+
+import type { Account } from 'types/common'
+
+import { formatBTC } from 'helpers/format'
+
+import { AreaChart } from 'components/base/Chart'
+import Bar from 'components/base/Bar'
+import Box, { Card } from 'components/base/Box'
+import Icon from 'components/base/Icon'
+
+const AccountCard = ({
+  account,
+  data,
+  onClick,
+}: {
+  account: Account,
+  data: Array<Object>,
+  onClick: Function,
+}) => (
+  <Card p={4} flow={4} flex={1} style={{ cursor: 'pointer' }} onClick={onClick}>
+    <Box horizontal ff="Open Sans|SemiBold" flow={3} align="center">
+      <Box style={{ color: '#fcb653' }}>
+        <Icon fontSize="20px" name={{ iconName: 'btc', prefix: 'fab' }} />
+      </Box>
+      <Box>
+        <Box style={{ textTransform: 'uppercase' }} fontSize={0} color="warmGrey">
+          {account.type}
+        </Box>
+        <Box fontSize={4} color="dark">
+          {account.name}
+        </Box>
+      </Box>
+    </Box>
+    <Bar size={1} color="argile" />
+    <Box grow justify="center" color="dark">
+      {account.data && formatBTC(account.data.balance)}
+    </Box>
+    <AreaChart
+      tiny
+      id={`account-chart-${account.id}`}
+      color="#fcb653"
+      height={52}
+      data={data}
+      strokeWidth={1}
+      linearGradient={[[5, 0.4], [100, 0]]}
+    />
+  </Card>
+)
+
+export default AccountCard

src/components/DashboardPage/index.js

@@ -17,10 +17,12 @@ import { formatBTC } from 'helpers/format'
 
 import { getTotalBalance, getVisibleAccounts } from 'reducers/accounts'
 
+import { AreaChart } from 'components/base/Chart'
 import Box, { Card } from 'components/base/Box'
 import Pills from 'components/base/Pills'
 import Text from 'components/base/Text'
-import { AreaChart, BarChart } from 'components/base/Chart'
+
+import AccountCard from './AccountCard'
 
 const mapStateToProps: MapStateToProps<*, *, *> = state => ({
   accounts: getVisibleAccounts(state),
@@ -138,9 +140,12 @@ class DashboardPage extends PureComponent<Props, State> {
         </Box>
         {totalAccounts > 0 && (
           <Fragment>
-            <Card flow={3} p={4}>
+            <Card flow={3} p={6}>
               <Text>{formatBTC(totalBalance)}</Text>
+              <Box ff="Open Sans" fontSize={4} color="warmGrey">
                 <AreaChart
+                  id="dashboard-chart"
+                  color="#5286f7"
                   height={250}
                   data={takeRight(
                     fakeDatas.reduce((res, data) => {
@@ -155,6 +160,7 @@ class DashboardPage extends PureComponent<Props, State> {
                     25,
                   )}
                 />
+              </Box>
             </Card>
             <Box flow={3}>
               {this.getAccountsChunk().map((accountsByLine, i) => (
@@ -172,21 +178,12 @@ class DashboardPage extends PureComponent<Props, State> {
                           flex={1}
                         />
                       ) : (
-                        <Card
+                        <AccountCard
                           key={account.id}
-                          p={2}
+                          account={account}
-                          flex={1}
+                          data={takeRight(fakeDatas[j], 25)}
-                          style={{ cursor: 'pointer' }}
                           onClick={() => push(`/account/${account.id}`)}
-                        >
+                        />
-                          <Box>
-                            <Text fontWeight="bold">{account.name}</Text>
-                          </Box>
-                          <Box grow align="center" justify="center">
-                            {account.data && formatBTC(account.data.balance)}
-                          </Box>
-                          <BarChart height={100} data={takeRight(fakeDatas[j], 25)} />
-                        </Card>
                       ),
                   )}
                 </Box>

src/components/base/Box/index.js

@@ -7,6 +7,7 @@ import {
   borderColor,
   borderRadius,
   borderWidth,
+  boxShadow,
   color,
   flex,
   fontSize,
@@ -23,6 +24,7 @@ const Box = styled.div`
   ${borderColor};
   ${borderRadius};
   ${borderWidth};
+  ${boxShadow};
   ${color};
   ${flex};
   ${fontFamily};
@@ -53,10 +55,7 @@ const Box = styled.div`
   }
 `
 
-const RawCard = styled(Box).attrs({ bg: 'white', p: 3 })`
+const RawCard = styled(Box).attrs({ bg: 'white', p: 3, boxShadow: 0, borderRadius: 1 })``
-  box-shadow: rgba(0, 0, 0, 0.06) 0 8px 30px;
-  border-radius: 5px;
-`
 
 export const Card = ({ title, ...props }: { title?: string }) => {
   if (title) {

src/components/base/Chart/index.js

@@ -1,15 +1,7 @@
 // @flow
 
 import React, { PureComponent } from 'react'
-import {
+import { AreaChart as ReactAreaChart, Area, XAxis, CartesianGrid, Tooltip } from 'recharts'
-  AreaChart as ReactAreaChart,
-  BarChart as ReactBarChart,
-  Bar,
-  Area,
-  XAxis,
-  CartesianGrid,
-  Tooltip,
-} from 'recharts'
 
 import Box from 'components/base/Box'
 
@@ -72,24 +64,41 @@ class Container extends PureComponent<Props, State> {
   }
 }
 
-export const AreaChart = ({ height, data }: { height: number, data: Array<Object> }) => (
+export const AreaChart = ({
+  id,
+  linearGradient,
+  strokeWidth,
+  height,
+  color,
+  data,
+  margin,
+  tiny,
+}: {
+  id: string,
+  linearGradient?: Array<Array<*>>,
+  strokeWidth?: number,
+  height: number,
+  color: string,
+  data: Array<Object>,
+  margin?: Object,
+  tiny?: boolean,
+}) => (
   <Container
-    render={({ width }) => (
+    render={({ width, isAnimationActive }) => (
-      <ReactAreaChart
+      <ReactAreaChart width={width} height={height} data={data} margin={margin}>
-        width={width}
+        {linearGradient && (
-        height={height}
-        data={data}
-        margin={{ top: 10, right: 0, left: 0, bottom: 10 }}
-      >
           <defs>
-          <linearGradient id="colorUv" x1="0" y1="0" x2="0" y2="1">
+            <linearGradient id={id} x1="0" y1="0" x2="0" y2="1">
-            <stop offset="5%" stopColor="#5286f7" stopOpacity={0.3} />
+              {linearGradient.map(g => (
-            <stop offset="65%" stopColor="#5286f7" stopOpacity={0} />
+                <stop offset={`${g[0]}%`} stopColor={color} stopOpacity={g[1]} />
+              ))}
             </linearGradient>
           </defs>
+        )}
+        {!tiny && (
           <XAxis
             dataKey="name"
-          stroke="#d2d3d5"
+            stroke="#e9eff4"
             tickLine={false}
             interval={2}
             tick={({ x, y, index, payload, visibleTicksCount }) => {
@@ -98,7 +107,7 @@ export const AreaChart = ({ height, data }: { height: number, data: Array<Object
               if (index !== 0 && index !== visibleTicksCount - 1) {
                 return (
                   <g transform={`translate(${x}, ${y})`}>
-                  <text x={0} y={0} dy={16} textAnchor="middle" fill="#666">
+                    <text x={0} y={0} dy={16} textAnchor="middle" fill="currentColor">
                       {value}
                     </text>
                   </g>
@@ -108,32 +117,26 @@ export const AreaChart = ({ height, data }: { height: number, data: Array<Object
               return null
             }}
           />
-        <CartesianGrid vertical={false} strokeDasharray="5" stroke="#d2d3d5" />
+        )}
-        <Tooltip />
+        {!tiny && <CartesianGrid vertical={false} strokeDasharray="5" stroke="#e9eff4" />}
+        {!tiny && <Tooltip />}
         <Area
+          isAnimationActive={isAnimationActive}
           animationDuration={ANIMATION_DURATION}
           animationEasing="ease-in-out"
           dataKey="value"
-          fill="url(#colorUv)"
+          fill={`url(#${id})`}
-          stroke="#5286f7"
+          stroke={color}
-          strokeWidth={3}
+          strokeWidth={strokeWidth}
         />
       </ReactAreaChart>
     )}
   />
 )
 
-export const BarChart = ({ height, data }: { height: number, data: Array<Object> }) => (
+AreaChart.defaultProps = {
-  <Container
+  linearGradient: [[5, 0.3], [65, 0]],
-    render={({ width }) => (
+  margin: undefined,
-      <ReactBarChart width={width} height={height} data={data}>
+  strokeWidth: 2,
-        <Bar
+  tiny: false,
-          animationDuration={ANIMATION_DURATION}
+}
-          animationEasing="ease-in-out"
-          dataKey="value"
-          fill="#8884d8"
-        />
-      </ReactBarChart>
-    )}
-  />
-)

src/components/base/Icon/index.js

@@ -12,7 +12,7 @@ const Container = styled.span`
   position: relative;
 `
 
-export default ({ name, ...props }: { name: string }) => (
+export default ({ name, ...props }: { name: string | Object }) => (
   <Container {...props}>
     <FontAwesomeIcon icon={name} />
   </Container>

src/styles/theme.js

@@ -3,6 +3,7 @@
 export const space = [0, 5, 10, 15, 20, 30, 40, 50, 70]
 export const fontSizes = [8, 9, 10, 11, 13, 16, 18, 22, 32]
 export const radii = [0, 4]
+export const shadows = ['0 4px 8px 0 rgba(0, 0, 0, 0.03)']
 
 export const fontFamilies = {
   'Open Sans': {
@@ -60,6 +61,7 @@ export default {
   fontFamilies,
   fontSizes,
   space,
+  shadows,
   colors: {
     transparent: 'transparent',