Add arrow for add account empty state

src/components/MainSideBar/index.js

@@ -15,6 +15,7 @@ import type { UpdateStatus } from 'reducers/update'
 
 import { MODAL_RECEIVE, MODAL_SEND, MODAL_ADD_ACCOUNTS } from 'config/constants'
 
+import { i } from 'helpers/staticPath'
 import { accountsSelector } from 'reducers/accounts'
 import { openModal } from 'reducers/modals'
 import { getUpdateStatus } from 'reducers/update'
@@ -65,6 +66,13 @@ class MainSideBar extends PureComponent<Props> {
     push(to)
   }
 
+  ADD_ACCOUNT_EMPTY_STATE = (
+    <Box relative>
+      <img style={{ position: 'absolute', top: 0, right: 5 }} alt="" src={i('arrow-add.svg')} />
+      {this.props.t('app:emptyState.sidebar.text')}
+    </Box>
+  )
+
   handleClickDashboard = () => this.push('/')
   handleOpenSendModal = () => this.props.openModal(MODAL_SEND)
   handleOpenReceiveModal = () => this.props.openModal(MODAL_RECEIVE)
@@ -130,7 +138,7 @@ class MainSideBar extends PureComponent<Props> {
           <SideBarList
             title={t('app:sidebar.accounts', { count: accounts.length })}
             titleRight={addAccountButton}
-            emptyText={t('app:emptyState.sidebar.text')}
+            emptyState={this.ADD_ACCOUNT_EMPTY_STATE}
           >
             {accounts.map(account => (
               <AccountListItem

src/components/base/SideBar/SideBarList.js

@@ -11,13 +11,13 @@ type Props = {
   children: any,
   title?: Node | string,
   scroll?: boolean,
-  titleRight?: any, // TODO: type should be more precise, but, eh ¯\_(ツ)_/¯
-  emptyText?: string,
+  titleRight?: any,
+  emptyState?: any,
 }
 
 class SideBarList extends Component<Props> {
   render() {
-    const { children, title, scroll, titleRight, emptyText, ...props } = this.props
+    const { children, title, scroll, titleRight, emptyState, ...props } = this.props
     const ListWrapper = scroll ? GrowScroll : Box
     return (
       <Fragment>
@@ -34,9 +34,9 @@ class SideBarList extends Component<Props> {
           <ListWrapper flow={2} px={3} fontSize={3} {...props}>
             {children}
           </ListWrapper>
-        ) : emptyText ? (
+        ) : emptyState ? (
           <Box px={4} ff="Open Sans|Regular" fontSize={3} color="grey">
-            {emptyText}
+            {emptyState}
           </Box>
         ) : null}
       </Fragment>

static/images/arrow-add.svg

@@ -0,0 +1,14 @@
+<?xml version="1.0" encoding="UTF-8"?>
+<svg width="32px" height="32px" viewBox="0 0 32 32" version="1.1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink">
+    <!-- Generator: Sketch 50.2 (55047) - http://www.bohemiancoding.com/sketch -->
+    <title>fleche</title>
+    <desc>Created with Sketch.</desc>
+    <defs></defs>
+    <g id="Empty-State" stroke="none" stroke-width="1" fill="none" fill-rule="evenodd">
+        <g id="Desktop/EmptyState/Dashboard" transform="translate(-177.000000, -396.000000)" fill="#D8D8D8" fill-rule="nonzero">
+            <g id="fleche" transform="translate(193.000000, 412.000000) scale(-1, 1) translate(-193.000000, -412.000000) translate(177.000000, 396.000000)">
+                <path d="M31.6933648,8.09651084 L31.6943649,8.09551085 C31.6953649,8.09401085 31.6963649,8.09251085 31.6973649,8.09051085 C31.7833657,7.99301089 31.8463663,7.87551095 31.8968668,7.751511 C31.9128669,7.71351102 31.923367,7.67751103 31.9348671,7.63901105 C31.9638674,7.5435111 31.9818676,7.44451114 31.9878677,7.34101119 C31.9908677,7.3030112 31.9968677,7.26701122 31.9958677,7.22801124 C31.9958677,7.20801125 32.0008678,7.19001126 31.9998678,7.17051126 C31.9928677,7.05101132 31.9688675,6.93551137 31.9318671,6.82701142 C31.9288671,6.81551143 31.920867,6.80651143 31.916867,6.79501144 C31.8728666,6.67551149 31.809866,6.56951154 31.7353652,6.47251158 C31.7248651,6.45901159 31.7213651,6.4410116 31.710365,6.4275116 L26.5548159,0.354514357 C26.1603121,-0.110485432 25.5128059,-0.119485428 25.1078021,0.336014366 C24.7037982,0.791014159 24.6962982,1.53701382 25.0918019,2.00301361 L27.8708284,5.27751212 C23.8102897,4.73951237 19.8187517,5.59401198 19.6302499,5.63601196 C7.30713242,7.86951095 -1.41345069,19.2495058 0.19006459,31.0040005 C0.269565348,31.5860002 0.704069489,32 1.19957421,32 C1.25257472,32 1.30557522,31.9955 1.35957574,31.9865 C1.91758106,31.8850001 2.29858469,31.2820003 2.21158386,30.6385006 C0.783070242,20.1685054 8.73964608,9.99750998 19.9802532,7.95951091 C20.0317537,7.94751091 24.155793,7.06251131 28.03883,7.67251104 L23.7502891,10.2190099 C23.2477844,10.5180097 23.0512825,11.2290094 23.3097849,11.8075092 C23.5677874,12.3870089 24.1837933,12.6115088 24.6877981,12.3160089 L31.4478625,8.30201075 C31.5393634,8.24651078 31.6213642,8.17701081 31.6933648,8.09651084 Z" id="Shape" transform="translate(16.000000, 16.000000) rotate(-90.000000) translate(-16.000000, -16.000000) "></path>
+            </g>
+        </g>
+    </g>
+</svg>