From bb3486f559f5d50f0c73b622942ebd70fde5fb58 Mon Sep 17 00:00:00 2001
From: Dane Everitt <dane@daneeveritt.com>
Date: Tue, 9 Jul 2019 22:06:42 -0700
Subject: [PATCH] More style cleanup for database listing

---
 .../components/server/databases/DatabaseRow.tsx       |  4 ++--
 .../server/databases/DatabasesContainer.tsx           | 11 +++++++++--
 2 files changed, 11 insertions(+), 4 deletions(-)

diff --git a/resources/scripts/components/server/databases/DatabaseRow.tsx b/resources/scripts/components/server/databases/DatabaseRow.tsx
index 5638839b9..7e5150e97 100644
--- a/resources/scripts/components/server/databases/DatabaseRow.tsx
+++ b/resources/scripts/components/server/databases/DatabaseRow.tsx
@@ -28,10 +28,10 @@ export default ({ database }: { database: ServerDatabase }) => {
             </div>
             <div className={'ml-6'}>
                 <button className={'btn btn-sm btn-secondary mr-2'}>
-                    <FontAwesomeIcon icon={faEye}/>
+                    <FontAwesomeIcon icon={faEye} fixedWidth={true}/>
                 </button>
                 <button className={'btn btn-sm btn-secondary btn-red'}>
-                    <FontAwesomeIcon icon={faTrashAlt}/>
+                    <FontAwesomeIcon icon={faTrashAlt} fixedWidth={true}/>
                 </button>
             </div>
         </div>
diff --git a/resources/scripts/components/server/databases/DatabasesContainer.tsx b/resources/scripts/components/server/databases/DatabasesContainer.tsx
index a4843cc80..1f16b5a69 100644
--- a/resources/scripts/components/server/databases/DatabasesContainer.tsx
+++ b/resources/scripts/components/server/databases/DatabasesContainer.tsx
@@ -31,7 +31,7 @@ export default () => {
     }, []);
 
     return (
-        <div className={'my-10'}>
+        <div className={'my-10 mb-6'}>
             <FlashMessageRender byKey={'databases'}/>
             {loading ?
                 <Spinner large={true} centered={true}/>
@@ -41,8 +41,15 @@ export default () => {
                         {databases.length > 0 ?
                             databases.map(database => <DatabaseRow key={database.id} database={database}/>)
                             :
-                            <p className={'text-sm text-neutral-200'}>No databases. :(</p>
+                            <p className={'text-center text-sm text-neutral-200'}>
+                                It looks like you have no databases. Click the button below to create one now.
+                            </p>
                         }
+                        <div className={'mt-6 text-right'}>
+                            <button className={'btn btn-primary btn-lg'}>
+                                Create Database
+                            </button>
+                        </div>
                     </React.Fragment>
                 </CSSTransition>
             }