Standardise sizing of all settings and design properties

packages/builder/src/components/userInterface/DesignView.svelte

@@ -48,7 +48,7 @@
         {/each}
       {:else}
         <div class="no-design">
-          This component does not have any design properties.
+          This component doesn't have any design properties.
         </div>
       {/if}
     </div>
@@ -61,13 +61,7 @@
     flex-direction: column;
     width: 100%;
     height: 100%;
-    gap: var(--spacing-m);
+    gap: var(--spacing-l);
-  }
-  .design-view-container :global(.property-group-name .name) {
-    font-size: var(--font-size-xs);
-  }
-  .design-view-container :global(.property-group-container) {
-    padding: 4px 0;
   }
 
   .design-view-state-categories {
@@ -85,10 +79,15 @@
     min-height: 0;
     margin: 0 -20px;
     padding: 0 20px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+    gap: var(--spacing-m);
   }
 
   .no-design {
-    font-size: var(--font-size-s);
+    font-size: var(--font-size-xs);
-    color: var(--grey-6);
+    color: var(--grey-5);
   }
 </style>

packages/builder/src/components/userInterface/DetailScreenSelect.svelte

@@ -15,11 +15,11 @@
     return [
       ...$store.screens
         .filter(
-          screen =>
+          (screen) =>
             screen.props._component.endsWith("/rowdetail") ||
             screen.route.endsWith(":id")
         )
-        .map(screen => ({
+        .map((screen) => ({
           name: screen.props._instanceName,
           url: screen.route,
           sort: screen.props._component,
@@ -29,7 +29,13 @@
 </script>
 
 <div>
-  <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
+  <DataList
+    editable
+    secondary
+    extraThin
+    on:blur={handleBlur}
+    on:change
+    bind:value>
     <option value="" />
     {#each urls as url}
       <option value={url.url}>{url.name}</option>

packages/builder/src/components/userInterface/IconSelect/IconSelect.svelte

@@ -50,7 +50,7 @@
 
   function findIconByTerm(term) {
     const r = new RegExp(`\^${term}`, "i")
-    return icons.filter(i => r.test(i.label))
+    return icons.filter((i) => r.test(i.label))
   }
 
   async function switchLetter(letter) {
@@ -65,7 +65,7 @@
 
   async function findIconOnPage() {
     loading = true
-    const iconIdx = filteredIcons.findIndex(i => i.value === value)
+    const iconIdx = filteredIcons.findIndex((i) => i.value === value)
     if (iconIdx !== -1) {
       currentPage = Math.ceil(iconIdx / maxIconsPerPage)
     }
@@ -110,7 +110,7 @@
 </script>
 
 <div bind:this={buttonAnchor}>
-  <Button secondary on:click={dropdown.show}>{displayValue}</Button>
+  <Button secondary small on:click={dropdown.show}>{displayValue}</Button>
 </div>
 <DropdownMenu
   bind:this={dropdown}

packages/builder/src/components/userInterface/OptionSelect.svelte

@@ -175,7 +175,7 @@
   .bb-select-anchor {
     cursor: pointer;
     display: flex;
-    padding: var(--spacing-m);
+    padding: var(--spacing-s) var(--spacing-m);
     background-color: var(--grey-2);
     border-radius: var(--border-radius-m);
     align-items: center;

packages/builder/src/components/userInterface/PropertyControl.svelte

@@ -147,7 +147,7 @@
     height: 90%;
     width: 2rem;
     background: var(--grey-2);
-    right: 10px;
+    right: 4px;
     --spacing-s: 0;
     border-left: 0.5px solid var(--grey-3);
     outline-color: var(--blue);

packages/builder/src/components/userInterface/PropertyGroup.svelte

@@ -13,7 +13,7 @@
   $: style = componentInstance["_styles"][styleCategory] || {}
 </script>
 
-<DetailSummary {name} on:open show={open}>
+<DetailSummary {name} on:open show={open} thin>
   <div>
     {#each properties as props}
       <PropertyControl
@@ -34,6 +34,5 @@
     justify-content: flex-start;
     align-items: stretch;
     gap: var(--spacing-s);
-    margin-top: var(--spacing-m);
   }
 </style>

packages/builder/src/components/userInterface/PropertyPanelControls/Input.svelte

@@ -8,4 +8,4 @@
   export let name, value, placeholder, type
 </script>
 
-<Input {name} {value} {placeholder} {type} thin on:change />
+<Input {name} {value} {placeholder} {type} extraThin on:change />

packages/builder/src/components/userInterface/ScreenSelect.svelte

@@ -18,8 +18,8 @@
   const getUrls = () => {
     const urls = [
       ...$store.screens
-        .filter(screen => !screen.props._component.endsWith("/rowdetail"))
+        .filter((screen) => !screen.props._component.endsWith("/rowdetail"))
-        .map(screen => ({
+        .map((screen) => ({
           name: screen.props._instanceName,
           url: screen.route,
           sort: screen.props._component,
@@ -33,12 +33,12 @@
       tables: $backendUiStore.tables,
     })
 
-    const detailScreens = $store.screens.filter(screen =>
+    const detailScreens = $store.screens.filter((screen) =>
       screen.props._component.endsWith("/rowdetail")
     )
 
     for (let detailScreen of detailScreens) {
-      const idBinding = bindableProperties.find(p => {
+      const idBinding = bindableProperties.find((p) => {
         if (
           p.type === "context" &&
           p.runtimeBinding.endsWith("._id") &&
@@ -68,7 +68,13 @@
 </script>
 
 <div>
-  <DataList editable secondary thin on:blur={handleBlur} on:change bind:value>
+  <DataList
+    editable
+    secondary
+    extraThin
+    on:blur={handleBlur}
+    on:change
+    bind:value>
     <option value="" />
     {#each urls as url}
       <option value={url.url}>{url.name}</option>

packages/builder/src/components/userInterface/SettingsView.svelte

@@ -125,7 +125,9 @@
       {/if}
     {/each}
   {:else}
-    <div class="empty">This component does not have any settings.</div>
+    <div class="empty">
+      This component doesn't have any additional settings.
+    </div>
   {/if}
 </div>
 
@@ -139,9 +141,9 @@
   }
 
   .empty {
-    font-size: var(--font-size-s);
+    font-size: var(--font-size-xs);
     margin-top: var(--spacing-m);
-    color: var(--grey-6);
+    color: var(--grey-5);
   }
 
   .duplicate-name {

packages/builder/src/components/userInterface/TableSelect.svelte

@@ -6,7 +6,7 @@
 </script>
 
 <div>
-  <Select thin secondary wide on:change {value}>
+  <Select extraThin secondary wide on:change {value}>
     <option value="">Choose a table</option>
     {#each $backendUiStore.tables as table}
       <option value={table._id}>{table.name}</option>

packages/builder/src/components/userInterface/TableViewSelect.svelte

@@ -14,7 +14,7 @@
     dropdownRight.hide()
   }
 
-  $: tables = $backendUiStore.tables.map(m => ({
+  $: tables = $backendUiStore.tables.map((m) => ({
     label: m.name,
     name: `all_${m._id}`,
     tableId: m._id,
@@ -39,8 +39,8 @@
   })
 
   $: links = bindableProperties
-    .filter(x => x.fieldSchema.type === "link")
+    .filter((x) => x.fieldSchema.type === "link")
-    .map(property => ({
+    .map((property) => ({
       label: property.readableBinding,
       fieldName: property.fieldSchema.name,
       name: `all_${property.fieldSchema.tableId}`,
@@ -103,7 +103,7 @@
   .dropdownbutton {
     background-color: var(--grey-2);
     border: var(--border-transparent);
-    padding: var(--spacing-m);
+    padding: var(--spacing-s) var(--spacing-m);
     border-radius: var(--border-radius-m);
     display: flex;
     flex-direction: row;