From 72f0f13fc94a4b3cf0f519c5d9dd892460705e1d Mon Sep 17 00:00:00 2001
From: Joe <49767913+joebudi@users.noreply.github.com>
Date: Thu, 2 Apr 2020 12:25:42 +0100
Subject: [PATCH] database nav section updated

title change
spacing fixed
delete icon aligned right
---
 packages/builder/src/BackendRoot.svelte       |  2 +-
 .../src/components/nav/BackendNav.svelte      |  8 +++++-
 .../src/components/nav/DatabasesList.svelte   | 25 +++++++++++--------
 3 files changed, 22 insertions(+), 13 deletions(-)

diff --git a/packages/builder/src/BackendRoot.svelte b/packages/builder/src/BackendRoot.svelte
index 8dfd63e6bf..50dd713196 100644
--- a/packages/builder/src/BackendRoot.svelte
+++ b/packages/builder/src/BackendRoot.svelte
@@ -37,7 +37,7 @@
 
   .content {
     flex: 1 1 auto;
-    margin: 80px 60px;
+    margin: 40px 40px;
   }
 
   .nav {
diff --git a/packages/builder/src/components/nav/BackendNav.svelte b/packages/builder/src/components/nav/BackendNav.svelte
index 8c77a7c7e5..7509dcacd6 100644
--- a/packages/builder/src/components/nav/BackendNav.svelte
+++ b/packages/builder/src/components/nav/BackendNav.svelte
@@ -60,9 +60,15 @@
     padding: 2rem 1rem 1rem 1rem;
   }
 
+
   .hierarchy-title {
+    align-items: center;
     text-transform: uppercase;
-    font-size: 0.85em;
+    font-size: 12px;
+    font-weight: bold;
+    opacity: 0.6;
+    letter-spacing: 1px;
+    text-rendering: optimizeLegibility;
   }
 
   .hierarchy {
diff --git a/packages/builder/src/components/nav/DatabasesList.svelte b/packages/builder/src/components/nav/DatabasesList.svelte
index 702e433c9a..8d45cc3fa0 100644
--- a/packages/builder/src/components/nav/DatabasesList.svelte
+++ b/packages/builder/src/components/nav/DatabasesList.svelte
@@ -42,15 +42,14 @@
             <CheckIcon />
           {/if}
         </span>
-        <i
-          class="ri-delete-bin-7-line hoverable uk-margin-small-left"
-          on:click={() => deleteDatabase(database)} />
         <button
           class:active={database.id === $backendUiStore.selectedDatabase.id}
           on:click={() => selectDatabase(database)}>
           {database.name}
         </button>
-
+        <i
+          class="ri-delete-bin-7-line hoverable alignment"
+          on:click={() => deleteDatabase(database)} />
       </li>
     {/each}
   </ul>
@@ -58,12 +57,10 @@
 
 <style>
   .root {
-    padding-bottom: 10px;
-    font-size: 0.9rem;
-    color: var(--secondary50);
-    font-weight: bold;
+    font-size: 12px;
+    color: var(--secondary100);
     position: relative;
-    padding-left: 1.8rem;
+    padding-left: 20px;
   }
 
   ul {
@@ -72,8 +69,13 @@
     list-style: none;
   }
 
+  .alignment {
+    margin-left: auto;
+    padding-right: 21.5px;
+  }
+
   li {
-    margin: 0.5rem 0;
+    margin: 0px 0px 10px 0px;
     display: flex;
     align-items: center;
   }
@@ -83,10 +85,11 @@
     padding: 0;
     border: none;
     font-family: Roboto;
-    font-size: 0.8rem;
+    font-size: 12px;
     outline: none;
     cursor: pointer;
     background: rgba(0, 0, 0, 0);
+    text-rendering: optimizeLegibility;
   }
 
   .active {