diff --git a/src/components/DashboardPage/EmptyState.js b/src/components/DashboardPage/EmptyState.js new file mode 100644 index 00000000..cb1f2562 --- /dev/null +++ b/src/components/DashboardPage/EmptyState.js @@ -0,0 +1,80 @@ +// @flow + +import React, { PureComponent } from 'react' +import { i } from 'helpers/staticPath' +import styled from 'styled-components' +import { connect } from 'react-redux' +import { compose } from 'redux' +import { translate } from 'react-i18next' +import { push } from 'react-router-redux' + +import { openModal } from 'reducers/modals' +import type { T } from 'types/common' + +import Box from 'components/base/Box' +import Button from 'components/base/Button' + +const mapDispatchToProps = { + openModal, + push, +} + +type Props = { + t: T, + push: Function, + openModal: Function, +} + +class EmptyState extends PureComponent { + handleInstallApp = () => { + const { push } = this.props + const url = '/manager' + push(url) + } + render() { + const { t, openModal } = this.props + + return ( + + emptyState Dashboard logo + + {t('emptyState:dashboard.title')} + {t('emptyState:dashboard.desc')} + + + + + + + ) + } +} + +const Title = styled(Box).attrs({ + ff: 'Museo Sans|Regular', + fontSize: 6, + color: p => p.theme.colors.dark, +})`` + +const Description = styled(Box).attrs({ + ff: 'Open Sans|Regular', + fontSize: 4, + color: p => p.theme.colors.graphite, +})` + margin: 10px auto 25px; +` +export default compose(connect(null, mapDispatchToProps), translate())(EmptyState) diff --git a/src/components/DashboardPage/index.js b/src/components/DashboardPage/index.js index d2894086..34b9aef0 100644 --- a/src/components/DashboardPage/index.js +++ b/src/components/DashboardPage/index.js @@ -28,6 +28,7 @@ import OperationsList from 'components/OperationsList' import AccountCard from './AccountCard' import AccountsOrder from './AccountsOrder' +import EmptyState from './EmptyState' const mapStateToProps = state => ({ accounts: getVisibleAccounts(state), @@ -109,88 +110,93 @@ class DashboardPage extends PureComponent { return ( - - - - - {t(timeFrame)} - - - {totalAccounts > 0 - ? t('dashboard:summary', { count: totalAccounts }) - : t('dashboard:noAccounts')} - - + {totalAccounts > 0 ? ( - - - - {totalAccounts > 0 && ( - - ( - - )} - /> - - - - {t('sidebar:accounts')} + + + + + {t(timeFrame)} + + + {t('dashboard:summary', { count: totalAccounts })} - - - - - {accountsChunk.map((accountsByLine, i) => ( - - {accountsByLine.map( - (account: any, j) => - account === null ? ( - - ) : ( - push(`/account/${account.id}`)} - /> - ), - )} - - ))} + + - push(`/account/${account.id}`)} - accounts={accounts} - title={t('dashboard:recentActivity')} - withAccount - /> - + + ( + + )} + /> + + + + {t('sidebar:accounts')} + + + + + + + {accountsChunk.map((accountsByLine, i) => ( + + {accountsByLine.map( + (account: any, j) => + account === null ? ( + + ) : ( + push(`/account/${account.id}`)} + /> + ), + )} + + ))} + + + push(`/account/${account.id}`)} + accounts={accounts} + title={t('dashboard:recentActivity')} + withAccount + /> + + + ) : ( + )} ) diff --git a/src/components/SideBar/index.js b/src/components/SideBar/index.js index 53b16d26..34a6e2a3 100644 --- a/src/components/SideBar/index.js +++ b/src/components/SideBar/index.js @@ -58,6 +58,7 @@ type Props = { t: T, openModal: Function, updateStatus: UpdateStatus, + accounts: Account[], } const mapStateToProps = state => ({ @@ -71,7 +72,7 @@ const mapDispatchToProps: Object = { class SideBar extends PureComponent { render() { - const { t, openModal, updateStatus } = this.props + const { t, openModal, updateStatus, accounts } = this.props return ( @@ -110,7 +111,11 @@ class SideBar extends PureComponent { - + {accounts.length > 0 ? ( + + ) : ( + {t('emptyState:sidebar.text')} + )} @@ -153,3 +158,11 @@ export default compose( connect(mapStateToProps, mapDispatchToProps, null, { pure: false }), translate(), )(SideBar) + +export const NoAccountsText = styled(Box).attrs({ + ff: 'Open Sans|Regular', + fontSize: 3, + color: p => p.theme.colors.grey, + shrink: true, + mt: 3, +})`` diff --git a/static/i18n/en/emptyState.yml b/static/i18n/en/emptyState.yml new file mode 100644 index 00000000..301afbd5 --- /dev/null +++ b/static/i18n/en/emptyState.yml @@ -0,0 +1,8 @@ +sidebar: + text: You don’t have any account for the moment. Press the + button to create an account +dashboard: + title: This is a title, use it with caution + desc: Please create a new account or recover an old account from your Ledger device. + buttons: + addAccount: Add Account + installApp: Install App diff --git a/static/images/logos/emptyStateDashboard.png b/static/images/logos/emptyStateDashboard.png new file mode 100644 index 00000000..a82b2dd4 Binary files /dev/null and b/static/images/logos/emptyStateDashboard.png differ