diff --git a/src/components/DashboardPage/AccountCard.js b/src/components/DashboardPage/AccountCard.js
index 1a788663..8ccad93e 100644
--- a/src/components/DashboardPage/AccountCard.js
+++ b/src/components/DashboardPage/AccountCard.js
@@ -6,10 +6,11 @@ import type { Account } from 'types/common'
import { formatBTC } from 'helpers/format'
+import IconCurrencyBitcoin from 'icons/currencies/Bitcoin'
+
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,
@@ -22,8 +23,8 @@ const AccountCard = ({
}) => (
-
-
+
+
@@ -45,7 +46,7 @@ const AccountCard = ({
height={52}
data={data}
strokeWidth={1}
- linearGradient={[[5, 0.4], [100, 0]]}
+ linearGradient={[[5, 0.4], [80, 0]]}
/>
)
diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js
index bdafe16d..bd9dc575 100644
--- a/src/components/DashboardPage/index.js
+++ b/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 {
-
+
{'Good morning, Khalil.'}
@@ -140,11 +141,17 @@ class DashboardPage extends PureComponent {
{totalAccounts > 0 && (
-
+
{formatBTC(totalBalance)}
{
/>
-
- {this.getAccountsChunk().map((accountsByLine, i) => (
-
- {accountsByLine.map(
- (account: any, j) =>
- account === null ? (
-
- ) : (
- push(`/account/${account.id}`)}
- />
- ),
- )}
-
- ))}
+
+
+ {'Accounts'}
+
+
+ {this.getAccountsChunk().map((accountsByLine, i) => (
+
+ {accountsByLine.map(
+ (account: any, j) =>
+ account === null ? (
+
+ ) : (
+ push(`/account/${account.id}`)}
+ />
+ ),
+ )}
+
+ ))}
+
)}
diff --git a/src/components/GlobalSearch.js b/src/components/GlobalSearch.js
index 3f5a791a..fe1fdcc7 100644
--- a/src/components/GlobalSearch.js
+++ b/src/components/GlobalSearch.js
@@ -3,8 +3,9 @@
import React, { PureComponent } from 'react'
import styled from 'styled-components'
+import IconSearch from 'icons/Search'
+
import Box from 'components/base/Box'
-import Icon from 'components/base/Icon'
const Input = styled.input`
border: none;
@@ -30,7 +31,7 @@ class GlobalSearch extends PureComponent<{}> {
return (
-
+
(this._input = input)} />
diff --git a/src/components/SideBar/Item.js b/src/components/SideBar/Item.js
index 9ab932e8..a3e00971 100644
--- a/src/components/SideBar/Item.js
+++ b/src/components/SideBar/Item.js
@@ -9,12 +9,12 @@ import { connect } from 'react-redux'
import { openModal } from 'reducers/modals'
+import type { Node } from 'react'
import type { MapStateToProps } from 'react-redux'
import type { Location } from 'react-router'
import Box, { Tabbable } from 'components/base/Box'
import Text from 'components/base/Text'
-import Icon from 'components/base/Icon'
const mapStateToProps: MapStateToProps<*, *, *> = (state: any) => ({
// connect router here only to make components re-render
@@ -49,18 +49,30 @@ const Container = styled(Tabbable).attrs({
`
type Props = {
+ iconActiveColor?: string,
children: string,
linkTo?: string | null,
modal?: string | null,
desc?: string | null,
- icon?: string | null,
+ icon?: Node | null,
big?: boolean,
location: Location,
push: Function,
openModal: Function,
}
-function Item({ big, children, desc, icon, linkTo, push, location, modal, openModal }: Props) {
+function Item({
+ big,
+ iconActiveColor,
+ children,
+ desc,
+ icon,
+ linkTo,
+ push,
+ location,
+ modal,
+ openModal,
+}: Props) {
const { pathname } = location
const isActive = pathname === linkTo
return (
@@ -73,7 +85,7 @@ function Item({ big, children, desc, icon, linkTo, push, location, modal, openMo
}
isActive={isActive}
>
- {icon && }
+ {icon && {icon}}
{children}
{desc && (
@@ -87,6 +99,7 @@ function Item({ big, children, desc, icon, linkTo, push, location, modal, openMo
}
Item.defaultProps = {
+ iconActiveColor: 'blue',
big: false,
desc: null,
icon: null,
diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js
index 8eeb3398..5ec3acdb 100644
--- a/src/components/SideBar/index.js
+++ b/src/components/SideBar/index.js
@@ -17,9 +17,15 @@ import { getVisibleAccounts } from 'reducers/accounts'
import { formatBTC } from 'helpers/format'
+import IconPieChart from 'icons/PieChart'
+import IconArrowDown from 'icons/ArrowDown'
+import IconArrowUp from 'icons/ArrowUp'
+import IconSettings from 'icons/Settings'
+import IconPlus from 'icons/Plus'
+import IconCurrencyBitcoin from 'icons/currencies/Bitcoin'
+
import Box, { Tabbable } from 'components/base/Box'
import GrowScroll from 'components/base/GrowScroll'
-import Icon from 'components/base/Icon'
import Text from 'components/base/Text'
import Item from './Item'
@@ -88,16 +94,16 @@ class SideBar extends PureComponent {
{t('sidebar.menu')}
- -
+
} linkTo="/">
{t('dashboard.title')}
- -
+
} modal={MODAL_SEND}>
{t('send.title')}
- -
+
} modal={MODAL_RECEIVE}>
{t('receive.title')}
- -
+
} linkTo="/settings">
{t('settings.title')}
@@ -106,7 +112,7 @@ class SideBar extends PureComponent {
{t('sidebar.accounts')}
openModal(MODAL_ADD_ACCOUNT)}>
-
+
@@ -114,7 +120,8 @@ class SideBar extends PureComponent {
}
key={account.id}
linkTo={`/account/${account.id}`}
>
diff --git a/src/components/TopBar.js b/src/components/TopBar.js
index 890ef6d2..a6dc5cfa 100644
--- a/src/components/TopBar.js
+++ b/src/components/TopBar.js
@@ -12,9 +12,11 @@ import { getAccounts } from 'reducers/accounts'
import { lock } from 'reducers/application'
import { hasPassword } from 'reducers/settings'
+import IconDevices from 'icons/Devices'
+import IconActivity from 'icons/Activity'
+
import Box from 'components/base/Box'
import GlobalSearch from 'components/GlobalSearch'
-import Icon from 'components/base/Icon'
const Container = styled(Box).attrs({
px: 5,
@@ -121,10 +123,10 @@ class TopBar extends PureComponent {
-
+
-
+
diff --git a/src/components/base/Chart/index.js b/src/components/base/Chart/index.js
index 9971f14a..4d33409c 100644
--- a/src/components/base/Chart/index.js
+++ b/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 && (
- {linearGradient.map(g => (
-
+ {linearGradient.map((g, i) => (
+
))}
)}
{!tiny && (
- {
+ tick={({ x, y, index, payload }) => {
const { value } = payload
- if (index !== 0 && index !== visibleTicksCount - 1) {
+ if (index !== 0) {
return (
-
- {value}
+
+ {value}k
)
@@ -118,8 +124,27 @@ export const AreaChart = ({
}}
/>
)}
+ {!tiny && (
+ {
+ const { value } = payload
+
+ return (
+
+
+ {value}
+
+
+ )
+ }}
+ />
+ )}
{!tiny && }
- {!tiny && }
+ {!tiny && }
(
+
+)
diff --git a/src/icons/ArrowDown.js b/src/icons/ArrowDown.js
new file mode 100644
index 00000000..5f61404b
--- /dev/null
+++ b/src/icons/ArrowDown.js
@@ -0,0 +1,13 @@
+// @flow
+
+import React from 'react'
+
+export default (props: Object) => (
+
+)
diff --git a/src/icons/ArrowUp.js b/src/icons/ArrowUp.js
new file mode 100644
index 00000000..8c47886e
--- /dev/null
+++ b/src/icons/ArrowUp.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default props => (
+
+)
diff --git a/src/icons/Devices.js b/src/icons/Devices.js
new file mode 100644
index 00000000..3702c353
--- /dev/null
+++ b/src/icons/Devices.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default props => (
+
+)
diff --git a/src/icons/PieChart.js b/src/icons/PieChart.js
new file mode 100644
index 00000000..f71778b4
--- /dev/null
+++ b/src/icons/PieChart.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default props => (
+
+)
diff --git a/src/icons/Plus.js b/src/icons/Plus.js
new file mode 100644
index 00000000..4a1a7bd0
--- /dev/null
+++ b/src/icons/Plus.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default props => (
+
+)
diff --git a/src/icons/Search.js b/src/icons/Search.js
new file mode 100644
index 00000000..a6705f5e
--- /dev/null
+++ b/src/icons/Search.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default props => (
+
+)
diff --git a/src/icons/Settings.js b/src/icons/Settings.js
new file mode 100644
index 00000000..34f84527
--- /dev/null
+++ b/src/icons/Settings.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default props => (
+
+)
diff --git a/src/icons/currencies/Bitcoin.js b/src/icons/currencies/Bitcoin.js
new file mode 100644
index 00000000..9da6bfb6
--- /dev/null
+++ b/src/icons/currencies/Bitcoin.js
@@ -0,0 +1,10 @@
+import React from 'react'
+
+export default props => (
+
+)