Tidy backend styles and improve consistency

packages/builder/src/components/nav/ModelNavigator/CreateTable.svelte

@@ -50,24 +50,23 @@
 </DropdownMenu>
 
 <style>
-  h5 {
-    margin-bottom: var(--spacing-l);
-    font-weight: 500;
+  .container {
+    padding: var(--spacing-xl);
+    display: grid;
+    grid-gap: var(--spacing-xl);
   }
 
-  .container {
-    padding: var(--spacing-l);
+  h5 {
     margin: 0;
+    font-weight: 500;
   }
 
   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 {

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>
+  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 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
     margin: 0;
     font-weight: 500;
   }
 
-  .container {
+  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;

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>
+  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 {
-    padding: var(--spacing-xl) 0 0 var(--spacing-xl);
     margin: 0;
     font-weight: 500;
   }
 
-  .container {
+  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;

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>

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>