From 5b08f4fb92c46b6048673764374441fef9b46aa9 Mon Sep 17 00:00:00 2001
From: Andrew Kingston <aptkingston@ssl-mail.com>
Date: Thu, 24 Sep 2020 15:31:29 +0100
Subject: [PATCH] Tidy backend styles and improve consistency

---
 .../nav/ModelNavigator/CreateTable.svelte     | 19 ++++----
 .../nav/ModelNavigator/EditTable.svelte       | 43 +++++++++++--------
 .../nav/ModelNavigator/EditView.svelte        | 43 +++++++++++--------
 .../nav/ModelNavigator/ListItem.svelte        | 15 +++----
 .../nav/ModelNavigator/ModelNavigator.svelte  | 16 +++----
 5 files changed, 73 insertions(+), 63 deletions(-)

diff --git a/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte b/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte
index 79612ea3ff..3b5d309f0f 100644
--- a/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte
@@ -50,24 +50,23 @@
 </DropdownMenu>
 
 <style>
+  .container {
+    padding: var(--spacing-xl);
+    display: grid;
+    grid-gap: var(--spacing-xl);
+  }
+
   h5 {
-    margin-bottom: var(--spacing-l);
+    margin: 0;
     font-weight: 500;
   }
 
-  .container {
-    padding: var(--spacing-l);
-    margin: 0;
-  }
-
   footer {
-    padding: 20px;
+    padding: var(--spacing-xl);
     display: grid;
     grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: 20px;
+    gap: var(--spacing-m);
     background: var(--grey-1);
-    border-bottom-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
   }
 
   .button-margin-3 {
diff --git a/packages/builder/src/components/nav/ModelNavigator/EditTable.svelte b/packages/builder/src/components/nav/ModelNavigator/EditTable.svelte
index e7926063dd..cdf386464c 100644
--- a/packages/builder/src/components/nav/ModelNavigator/EditTable.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/EditTable.svelte
@@ -41,13 +41,13 @@
   }
 </script>
 
-<div bind:this={anchor} on:click={dropdown.show}>
+<div class="icon" bind:this={anchor} on:click={dropdown.show}>
   <i class="ri-more-line" />
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
   {#if editing}
-    <h5>Edit Table</h5>
     <div class="container">
+      <h5>Edit Table</h5>
       <Input placeholder="Table Name" thin bind:value={table.name} />
     </div>
     <footer>
@@ -73,20 +73,37 @@
 </DropdownMenu>
 
 <style>
-  h5 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
-    margin: 0;
-    font-weight: 500;
+  div.icon {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  div.icon i {
+    font-size: 16px;
   }
 
   .container {
     padding: var(--spacing-xl);
+    display: grid;
+    grid-gap: var(--spacing-xl);
+  }
+
+  h5 {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  footer {
+    padding: var(--spacing-xl);
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: var(--spacing-m);
+    background: var(--grey-1);
   }
 
   ul {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
     list-style: none;
-    padding-left: 0;
     margin: 0;
     padding: var(--spacing-s) 0;
   }
@@ -110,16 +127,6 @@
     color: var(--blue);
   }
 
-  footer {
-    padding: 20px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: 20px;
-    background: var(--grey-1);
-    border-bottom-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
-  }
-
   .button-margin-1 {
     grid-column-start: 1;
     display: grid;
diff --git a/packages/builder/src/components/nav/ModelNavigator/EditView.svelte b/packages/builder/src/components/nav/ModelNavigator/EditView.svelte
index 7faf9b980e..7f1f0e5dfd 100644
--- a/packages/builder/src/components/nav/ModelNavigator/EditView.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/EditView.svelte
@@ -47,13 +47,13 @@
   }
 </script>
 
-<div bind:this={anchor} on:click={dropdown.show}>
+<div class="icon" bind:this={anchor} on:click={dropdown.show}>
   <i class="ri-more-line" />
 </div>
 <DropdownMenu bind:this={dropdown} {anchor} align="left">
   {#if editing}
-    <h5>Edit View</h5>
     <div class="container">
+      <h5>Edit View</h5>
       <Input placeholder="View Name" thin bind:value={view.name} />
     </div>
     <footer>
@@ -79,20 +79,37 @@
 </DropdownMenu>
 
 <style>
-  h5 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
-    margin: 0;
-    font-weight: 500;
+  div.icon {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+  }
+  div.icon i {
+    font-size: 16px;
   }
 
   .container {
     padding: var(--spacing-xl);
+    display: grid;
+    grid-gap: var(--spacing-xl);
+  }
+
+  h5 {
+    margin: 0;
+    font-weight: 500;
+  }
+
+  footer {
+    padding: var(--spacing-xl);
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr 1fr;
+    gap: var(--spacing-m);
+    background: var(--grey-1);
   }
 
   ul {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
     list-style: none;
-    padding-left: 0;
     margin: 0;
     padding: var(--spacing-s) 0;
   }
@@ -116,16 +133,6 @@
     color: var(--blue);
   }
 
-  footer {
-    padding: 20px;
-    display: grid;
-    grid-template-columns: 1fr 1fr 1fr 1fr;
-    gap: 20px;
-    background: var(--grey-1);
-    border-bottom-left-radius: 0.5rem;
-    border-bottom-left-radius: 0.5rem;
-  }
-
   .button-margin-1 {
     grid-column-start: 1;
     display: grid;
diff --git a/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte b/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
index 54d9eef0e9..31dd5b5ac4 100644
--- a/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/ListItem.svelte
@@ -19,26 +19,24 @@
 
 <style>
   .indented {
-    grid-template-columns: 50px 1fr 20px;
+    grid-template-columns: 46px 1fr 20px;
   }
-
   .indented i {
     justify-self: end;
   }
 
   div {
-    padding: 0 10px 0 10px;
-    height: 36px;
-    border-radius: 5px;
+    padding: var(--spacing-s) var(--spacing-m);
+    border-radius: var(--border-radius-m);
     display: grid;
-    grid-template-columns: 30px 1fr 20px;
+    grid-template-columns: 20px 1fr 20px;
     align-items: center;
     transition: 0.3s background-color;
     color: var(--ink);
     font-weight: 400;
     font-size: 14px;
-    margin-top: 4px;
-    margin-bottom: 4px;
+    margin-bottom: var(--spacing-xs);
+    grid-gap: var(--spacing-s);
   }
 
   .selected {
@@ -53,6 +51,5 @@
   i {
     color: var(--grey-7);
     font-size: 20px;
-    margin-right: 8px;
   }
 </style>
diff --git a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
index a055c0dc67..8caea51905 100644
--- a/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
+++ b/packages/builder/src/components/nav/ModelNavigator/ModelNavigator.svelte
@@ -30,7 +30,7 @@
   {#if $backendUiStore.selectedDatabase && $backendUiStore.selectedDatabase._id}
     <div class="hierarchy">
       <div class="components-list-container">
-        <h4>Tables</h4>
+        <div class="title">Tables</div>
         <CreateTablePopover />
         <div class="hierarchy-items-container">
           {#each $backendUiStore.models as model}
@@ -63,17 +63,17 @@
 </div>
 
 <style>
-  h4 {
-    font-weight: 500;
+  .title {
+    font-size: 18px;
+    font-weight: 600;
+    margin-bottom: var(--spacing-xl);
   }
 
   .items-root {
     display: flex;
     flex-direction: column;
-    max-height: 100%;
-    height: 100%;
-    background: var(--white);
-    padding: 20px;
+    justify-content: flex-start;
+    align-items: stretch;
   }
 
   .hierarchy {
@@ -82,7 +82,7 @@
   }
 
   .hierarchy-items-container {
-    margin-top: 20px;
+    margin-top: var(--spacing-xl);
     flex: 1 1 auto;
   }
 </style>