From 42198c63cf7c6a9c1920ba76bc6a5da70c17223a Mon Sep 17 00:00:00 2001
From: Matt Holtzman <matt.holtzman@gmail.com>
Date: Thu, 16 Feb 2023 16:35:11 -0500
Subject: [PATCH 1/2] add new account button in empty tray

---
 app/tray/AccountSelector/index.js | 13 ++++++++++++-
 1 file changed, 12 insertions(+), 1 deletion(-)

diff --git a/app/tray/AccountSelector/index.js b/app/tray/AccountSelector/index.js
index abb50c72f..779600045 100644
--- a/app/tray/AccountSelector/index.js
+++ b/app/tray/AccountSelector/index.js
@@ -102,7 +102,18 @@ class AccountSelector extends React.Component {
               />
             ))
           ) : Object.keys(accounts).length === 0 ? (
-            <div className='noSigners'>{'No Accounts Added'}</div>
+            <div>
+              <div className='noSigners'>{'No Accounts Added'}</div>
+              <div
+                role='button'
+                onClick={() =>
+                  link.send('tray:action', 'navDash', { view: 'accounts', data: { showAddAccounts: true } })
+                }
+              >
+                <div className='newAccountIcon'>{svg.plus(16)}</div>
+                Add New Account
+              </div>
+            </div>
           ) : (
             <div className='noSigners'>{'No Matching Accounts'}</div>
           )}

From dc9e9256c753ee8960bbc53f560ba099aba290f6 Mon Sep 17 00:00:00 2001
From: Jordan Muir <jordan@frame.sh>
Date: Fri, 17 Feb 2023 09:50:02 -0500
Subject: [PATCH 2/2] style no accounts, add account button

---
 app/tray/AccountSelector/index.js         | 42 ++++++++++++++++-------
 app/tray/AccountSelector/style/index.styl | 10 ++++++
 2 files changed, 39 insertions(+), 13 deletions(-)

diff --git a/app/tray/AccountSelector/index.js b/app/tray/AccountSelector/index.js
index 779600045..ae6eabebb 100644
--- 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,18 +106,30 @@ class AccountSelector extends React.Component {
               />
             ))
           ) : Object.keys(accounts).length === 0 ? (
-            <div>
-              <div className='noSigners'>{'No Accounts Added'}</div>
-              <div
-                role='button'
-                onClick={() =>
-                  link.send('tray:action', 'navDash', { view: 'accounts', data: { showAddAccounts: true } })
-                }
-              >
-                <div className='newAccountIcon'>{svg.plus(16)}</div>
-                Add New Account
-              </div>
-            </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
index 71a310abc..5384a28b1 100644
--- 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