Merge pull request #431 from Budibase/feature/settings-modal-fixes

Feature/settings modal fixes

packages/builder/package.json

@@ -55,7 +55,7 @@
     ]
   },
   "dependencies": {
-    "@budibase/bbui": "^1.15.4",
+    "@budibase/bbui": "^1.15.8",
     "@budibase/client": "^0.1.1",
     "@nx-js/compiler-util": "^2.0.0",
     "codemirror": "^5.51.0",

packages/builder/src/components/settings/UserRow.svelte

@@ -39,4 +39,16 @@
     grid-gap: 18px;
     grid-template-columns: 1fr 1fr 1fr;
   }
+  .inputs :global(input) {
+    padding: 10px 12px;
+    border-radius: var(--rounded-small);
+  }
+  .inputs :global(select) {
+    padding: 9px 12px;
+    border-radius: var(--rounded-small);
+  }
+  .inputs :global(button) {
+    border-radius: var(--rounded-small);
+    height: initial;
+  }
 </style>

packages/builder/src/components/settings/tabs/DangerZone.svelte

@@ -30,7 +30,7 @@
     on:input={e => (value = e.target.value)}
     thin
     disabled={loading}
-    placeholder="Enter your name"
+    placeholder=""
     label="Type DELETE into the textbox, then click the following button to
     delete your web app:" />
 
@@ -46,7 +46,7 @@
 <style>
   .background {
     display: grid;
-    grid-gap: var(--space);
+    grid-gap: 16px;
     border-radius: 5px;
     background-color: var(--light-grey);
     padding: 12px 12px 18px 12px;

packages/builder/src/components/settings/tabs/General.svelte

@@ -40,11 +40,11 @@
 <style>
   .container {
     display: grid;
-    grid-gap: var(--space);
+    grid-gap: 16px;
   }
   .background {
     border-radius: 5px;
-    background-color: var(--light-grey);
+    background-color: var(--grey-1);
     padding: 12px 12px 18px 12px;
   }
 </style>

packages/builder/src/components/settings/tabs/Users.svelte

@@ -87,7 +87,8 @@
         {/each}
       </ul>
     {:catch error}
-      err0r
+      Something went wrong when trying to fetch users. Please refresh the page
+      and try again.
     {/await}
   </div>
 </div>
@@ -102,21 +103,22 @@
     display: grid;
     grid-gap: 12px;
     border-radius: 5px;
-    background-color: var(--grey-2);
+    background-color: var(--grey-1);
     padding: 12px 12px 18px 12px;
   }
   .background.create {
     background-color: var(--blue-light);
   }
-  .inputs :global(select) {
-    padding: 12px 9px;
-    height: initial;
-  }
   .create-button {
     position: absolute;
     top: 12px;
     right: 12px;
   }
+  .create-button :global(button) {
+    font-size: var(--font-size-sm);
+    min-width: 100px;
+    border-radius: var(--rounded-small);
+  }
   .title {
     font-size: 14px;
     font-weight: 500;
@@ -126,6 +128,14 @@
     grid-gap: 18px;
     grid-template-columns: 1fr 1fr 1fr;
   }
+  .inputs :global(input) {
+    padding: 10px 12px;
+    border-radius: var(--rounded-small);
+  }
+  .inputs :global(select) {
+    padding: 9px 12px;
+    border-radius: var(--rounded-small);
+  }
   ul {
     list-style: none;
     padding: 0;