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,6 +110,8 @@ class DashboardPage extends PureComponent<Props, State> {
 
     return (
       <Box flow={7}>
+        {totalAccounts > 0 ? (
+          <Box>
             <UpdateNotifier mt={-5} />
             <Box horizontal alignItems="flex-end">
               <Box grow>
@@ -116,16 +119,16 @@ class DashboardPage extends PureComponent<Props, State> {
                   {t(timeFrame)}
                 </Text>
                 <Text color="grey" fontSize={5} ff="Museo Sans|Light">
-              {totalAccounts > 0
+                  {t('dashboard:summary', { count: totalAccounts })}
-                ? t('dashboard:summary', { count: totalAccounts })
-                : t('dashboard:noAccounts')}
                 </Text>
               </Box>
               <Box>
-            <PillsDaysCount selectedTime={selectedTime} onChange={this.handleChangeSelectedTime} />
+                <PillsDaysCount
+                  selectedTime={selectedTime}
+                  onChange={this.handleChangeSelectedTime}
+                />
               </Box>
             </Box>
-        {totalAccounts > 0 && (
             <Fragment>
               <BalanceSummary
                 counterValue={counterValue}
@@ -191,6 +194,9 @@ class DashboardPage extends PureComponent<Props, State> {
                 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}>
+              {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