Merge branch 'spectrum-bbui' into spectrum/kevs-bits-and-bobs-the-sequel

packages/builder/src/components/design/PropertiesPanel/BindingPanel.svelte

@@ -141,15 +141,15 @@
   li {
     display: flex;
     font-family: var(--font-sans);
-    font-size: var(--font-size-xs);
+    font-size: var(--font-size-s);
     color: var(--grey-7);
     padding: var(--spacing-m);
     margin: auto 0px;
     align-items: center;
     cursor: pointer;
-    border-radius: var(--spacing-s);
+    border-top: var(--border-light);
-    border: var(--border-light);
     border-width: 1px 0 1px 0;
+    border-radius: 4px;
   }
 
   pre,

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

@@ -1,27 +1,23 @@
 <script>
-  import { Icon, Label, Popover } from "@budibase/bbui"
+  import { Icon, Label, Modal, ModalContent } from "@budibase/bbui"
   import ThemeEditor from "./ThemeEditor.svelte"
 
-  let anchor
+  let modal
-  let popover
 </script>
 
-<div class="topnavitemright" on:click={popover.show} bind:this={anchor}>
+<div class="topnavitemright" on:click={modal.show}>
   <Icon hoverable name="ColorFill" />
 </div>
-<div class="dropdown">
+<Modal bind:this={modal}>
-  <Popover bind:this={popover} {anchor} align="right">
+  <ModalContent
-    <div class="content">
+    title="Builder Theme"
-      <Label extraSmall grey>Theme</Label>
+    confirmText="Done"
-      <ThemeEditor />
+    showCancelButton={false}>
-    </div>
+    <ThemeEditor />
-  </Popover>
+  </ModalContent>
-</div>
+</Modal>
 
 <style>
-  .dropdown {
-    z-index: 2;
-  }
   .topnavitemright {
     cursor: pointer;
     color: var(--grey-7);
@@ -35,7 +31,4 @@
     height: 24px;
     width: 24px;
   }
-  .content {
-    padding: var(--spacing-xl);
-  }
 </style>

packages/builder/src/components/start/CreateAppModal.svelte

@@ -162,14 +162,14 @@
         <Button medium secondary on:click={() => $currentStep--}>Back</Button>
       {/if}
       {#if $currentStep < steps.length - 1}
-        <Button medium blue on:click={() => $currentStep++} disabled={!valid}>
+        <Button medium cta on:click={() => $currentStep++} disabled={!valid}>
           Next
         </Button>
       {/if}
       {#if $currentStep === steps.length - 1}
         <Button
           medium
-          blue
+          cta
           on:click={createNewApp}
           disabled={!valid || submitting}>
           {submitting ? 'Loading...' : 'Submit'}

packages/builder/src/pages/builder/[application]/data/_layout.svelte

@@ -20,7 +20,7 @@
   let selected = $isActive("./datasource") ? "External" : "Internal"
 
   function selectFirstTableOrSource({ detail }) {
-    const { key } = tabs.find((t) => t.title === detail)
+    const { key } = tabs.find(t => t.title === detail)
     if (key === "datasource") {
       $goto("./datasource")
     } else {
@@ -54,8 +54,7 @@
     </Tabs>
     <div
       class="add-button"
-      data-cy={`new-${selected === "External" ? "datasource" : "tabel"}`}
+      data-cy={`new-${selected === 'External' ? 'datasource' : 'tabel'}`}>
-    >
       <Icon hoverable name="AddCircle" on:click={modal.show} />
     </div>
   </div>
@@ -82,6 +81,10 @@
     align-items: stretch;
     gap: var(--spacing-l);
   }
+  .content :global(> span) {
+    display: contents;
+  }
+
   .tab-content-padding {
     padding: 0 var(--spacing-xl);
   }

packages/standard-components/manifest.json

@@ -101,8 +101,8 @@
     }
   },
   "stackedlist": {
-    "name": "TaskList",
+    "name": "Stacked List",
-    "icon": "ri-archive-drawer-line",
+    "icon": "TaskList",
     "description": "A basic card component that can contain content and actions.",
     "styleable": true,
     "settings": [