add new account button in empty tray (#1433)

* add new account button in empty tray * style no accounts, add account button --------- Co-authored-by: Jordan Muir <[email protected]>
floating · Feb 17, 2023 · 359277f · 359277f
1 parent 684939a
commit 359277f
Show file tree

Hide file tree

Showing 2 changed files with 39 additions and 2 deletions.
diff --git a/app/tray/AccountSelector/index.js b/app/tray/AccountSelector/index.js
@@ -7,6 +7,8 @@ import AccountController from './AccountController'
 import { accountSort as byCreation } from '../../../resources/domain/account'
 import { matchFilter } from '../../../resources/utils'
 
+import { Cluster, ClusterBox, ClusterValue, ClusterRow } from '../../../resources/Components/Cluster'
+
 import svg from '../../../resources/svg'
 import link from '../../../resources/link'
 
@@ -41,8 +43,10 @@ class AccountSelector extends React.Component {
   }
 
   renderAccountFilter() {
+    const accounts = this.store('main.accounts')
     const open = this.store('selected.open')
-    if (open) return null
+    if (Object.keys(accounts).length === 0 || open) return null
+
     return (
       <div className='panelFilterMain'>
         <div className='panelFilterIcon'>{svg.search(12)}</div>
@@ -102,7 +106,30 @@ class AccountSelector extends React.Component {
               />
             ))
           ) : Object.keys(accounts).length === 0 ? (
-            <div className='noSigners'>{'No Accounts Added'}</div>
+            <ClusterBox style={{ pointerEvents: 'auto' }}>
+              <Cluster>
+                <ClusterRow>
+                  <ClusterValue>
+                    <div className='noSigners'>{'No Accounts Added'}</div>
+                  </ClusterValue>
+                </ClusterRow>
+                <ClusterRow>
+                  <ClusterValue
+                    onClick={() => {
+                      link.send('tray:action', 'navDash', {
+                        view: 'accounts',
+                        data: { showAddAccounts: true }
+                      })
+                    }}
+                  >
+                    <div className='newAccountButton'>
+                      <div className='newAccountIcon'>{svg.accounts(16)}</div>
+                      <div className='newAccountText'>{'Add New Account'}</div>
+                    </div>
+                  </ClusterValue>
+                </ClusterRow>
+              </Cluster>
+            </ClusterBox>
           ) : (
             <div className='noSigners'>{'No Matching Accounts'}</div>
           )}

diff --git a/app/tray/AccountSelector/style/index.styl b/app/tray/AccountSelector/style/index.styl
@@ -43,6 +43,7 @@
         font-size 19px
         position relative
         z-index 100
+        padding 24px
 
         .introLogo
           padding-bottom 38px
@@ -186,3 +187,12 @@
   pointer-events none
   *
     pointer-events none
+
+.newAccountButton
+  display flex
+  padding 16px
+  color var(--good)
+  font-weight 400
+
+  .newAccountIcon
+    padding-right 10px