empty state screen

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<Props, *> {
+  handleInstallApp = () => {
+    const { push } = this.props
+    const url = '/manager'
+    push(url)
+  }
+  render() {
+    const { t, openModal } = this.props
+
+    return (
+      <Box mt={7} alignItems="center">
+        <img
+          alt="emptyState Dashboard logo"
+          src={i('logos/emptyStateDashboard.png')}
+          width="413"
+          height="157"
+        />
+        <Box mt={5} alignItems="center">
+          <Title>{t('emptyState:dashboard.title')}</Title>
+          <Description>{t('emptyState:dashboard.desc')}</Description>
+          <Box mt={3} horizontal justifyContent="space-around" style={{ width: 300 }}>
+            <Button
+              padded
+              primary
+              style={{ width: 120 }}
+              onClick={() => openModal('importAccounts')}
+            >
+              {t('emptyState:dashboard.buttons.addAccount')}
+            </Button>
+            <Button padded primary style={{ width: 120 }} onClick={this.handleInstallApp}>
+              {t('emptyState:dashboard.buttons.installApp')}
+            </Button>
+          </Box>
+        </Box>
+      </Box>
+    )
+  }
+}
+
+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)

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<Props, State> {
 
     return (
       <Box flow={7}>
-        <UpdateNotifier mt={-5} />
-        <Box horizontal alignItems="flex-end">
-          <Box grow>
-            <Text color="dark" ff="Museo Sans" fontSize={7}>
-              {t(timeFrame)}
-            </Text>
-            <Text color="grey" fontSize={5} ff="Museo Sans|Light">
-              {totalAccounts > 0
-                ? t('dashboard:summary', { count: totalAccounts })
-                : t('dashboard:noAccounts')}
-            </Text>
-          </Box>
+        {totalAccounts > 0 ? (
           <Box>
-            <PillsDaysCount selectedTime={selectedTime} onChange={this.handleChangeSelectedTime} />
-          </Box>
-        </Box>
-        {totalAccounts > 0 && (
-          <Fragment>
-            <BalanceSummary
-              counterValue={counterValue}
-              chartId="dashboard-chart"
-              chartColor={colors.wallet}
-              accounts={accounts}
-              selectedTime={selectedTime}
-              daysCount={daysCount}
-              renderHeader={({ totalBalance, selectedTime, sinceBalance, refBalance }) => (
-                <BalanceInfos
-                  t={t}
-                  counterValue={counterValue}
-                  totalBalance={totalBalance}
-                  since={selectedTime}
-                  sinceBalance={sinceBalance}
-                  refBalance={refBalance}
-                />
-              )}
-            />
-            <Box flow={4}>
-              <Box horizontal alignItems="flex-end">
-                <Text color="dark" ff="Museo Sans" fontSize={6}>
-                  {t('sidebar:accounts')}
+            <UpdateNotifier mt={-5} />
+            <Box horizontal alignItems="flex-end">
+              <Box grow>
+                <Text color="dark" ff="Museo Sans" fontSize={7}>
+                  {t(timeFrame)}
+                </Text>
+                <Text color="grey" fontSize={5} ff="Museo Sans|Light">
+                  {t('dashboard:summary', { count: totalAccounts })}
                 </Text>
-                <Box ml="auto" horizontal flow={1}>
-                  <AccountsOrder />
-                </Box>
               </Box>
-              <Box flow={5}>
-                {accountsChunk.map((accountsByLine, i) => (
-                  <Box
-                    key={i} // eslint-disable-line react/no-array-index-key
-                    horizontal
-                    flow={5}
-                  >
-                    {accountsByLine.map(
-                      (account: any, j) =>
-                        account === null ? (
-                          <Box
-                            key={j} // eslint-disable-line react/no-array-index-key
-                            p={4}
-                            flex={1}
-                          />
-                        ) : (
-                          <AccountCard
-                            counterValue={counterValue}
-                            account={account}
-                            daysCount={daysCount}
-                            key={account.id}
-                            onClick={() => push(`/account/${account.id}`)}
-                          />
-                        ),
-                    )}
-                  </Box>
-                ))}
+              <Box>
+                <PillsDaysCount
+                  selectedTime={selectedTime}
+                  onChange={this.handleChangeSelectedTime}
+                />
               </Box>
             </Box>
-            <OperationsList
-              canShowMore
-              onAccountClick={account => push(`/account/${account.id}`)}
-              accounts={accounts}
-              title={t('dashboard:recentActivity')}
-              withAccount
-            />
-          </Fragment>
+            <Fragment>
+              <BalanceSummary
+                counterValue={counterValue}
+                chartId="dashboard-chart"
+                chartColor={colors.wallet}
+                accounts={accounts}
+                selectedTime={selectedTime}
+                daysCount={daysCount}
+                renderHeader={({ totalBalance, selectedTime, sinceBalance, refBalance }) => (
+                  <BalanceInfos
+                    t={t}
+                    counterValue={counterValue}
+                    totalBalance={totalBalance}
+                    since={selectedTime}
+                    sinceBalance={sinceBalance}
+                    refBalance={refBalance}
+                  />
+                )}
+              />
+              <Box flow={4}>
+                <Box horizontal alignItems="flex-end">
+                  <Text color="dark" ff="Museo Sans" fontSize={6}>
+                    {t('sidebar:accounts')}
+                  </Text>
+                  <Box ml="auto" horizontal flow={1}>
+                    <AccountsOrder />
+                  </Box>
+                </Box>
+                <Box flow={5}>
+                  {accountsChunk.map((accountsByLine, i) => (
+                    <Box
+                      key={i} // eslint-disable-line react/no-array-index-key
+                      horizontal
+                      flow={5}
+                    >
+                      {accountsByLine.map(
+                        (account: any, j) =>
+                          account === null ? (
+                            <Box
+                              key={j} // eslint-disable-line react/no-array-index-key
+                              p={4}
+                              flex={1}
+                            />
+                          ) : (
+                            <AccountCard
+                              counterValue={counterValue}
+                              account={account}
+                              daysCount={daysCount}
+                              key={account.id}
+                              onClick={() => push(`/account/${account.id}`)}
+                            />
+                          ),
+                      )}
+                    </Box>
+                  ))}
+                </Box>
+              </Box>
+              <OperationsList
+                canShowMore
+                onAccountClick={account => push(`/account/${account.id}`)}
+                accounts={accounts}
+                title={t('dashboard:recentActivity')}
+                withAccount
+              />
+            </Fragment>
+          </Box>
+        ) : (
+          <EmptyState />
         )}
       </Box>
     )

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<Props> {
   render() {
-    const { t, openModal, updateStatus } = this.props
+    const { t, openModal, updateStatus, accounts } = this.props
 
     return (
       <Container bg="white">
@@ -110,7 +111,11 @@ class SideBar extends PureComponent<Props> {
               </Tooltip>
             </CapsSubtitle>
             <GrowScroll pb={4} px={4} flow={2}>
-              <AccountsList />
+              {accounts.length > 0 ? (
+                <AccountsList />
+              ) : (
+                <NoAccountsText>{t('emptyState:sidebar.text')}</NoAccountsText>
+              )}
             </GrowScroll>
           </Box>
         </Box>
@@ -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,
+})``

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