Merge pull request #189 from Budibase/changes-to-backend-database-nav

Changes to backend database nav

packages/builder/src/BackendRoot.svelte

@@ -37,7 +37,7 @@
 
   .content {
     flex: 1 1 auto;
-    margin: 80px 60px;
+    margin: 40px 40px;
   }
 
   .nav {

packages/builder/src/components/nav/BackendNav.svelte

@@ -57,12 +57,17 @@
     display: flex;
     justify-content: space-between;
     align-items: center;
-    padding: 2rem 1rem 1rem 1rem;
+    padding: 20px 20px 10px 20px;
   }
 
   .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 {

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: 20px;
+  }
+
   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 {