Merge pull request #6920 from Budibase/design-updates

Design updates

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -84,6 +84,7 @@
   }
   :global([dir="ltr"] .spectrum-ActionButton .spectrum-Icon) {
     margin-left: 0;
+    transition: color ease-out 130ms;
   }
   .is-selected:not(.spectrum-ActionButton--emphasized) {
     background: var(--spectrum-global-color-gray-300);
@@ -92,4 +93,10 @@
     padding: 0;
     min-width: 0;
   }
+  .spectrum-ActionButton--quiet {
+    padding: 0 8px;
+  }
+  .is-selected:not(.emphasized) .spectrum-Icon {
+    color: var(--spectrum-global-color-gray-900);
+  }
 </style>

packages/bbui/src/Form/Core/Picker.svelte

@@ -87,10 +87,15 @@
     on:mousedown={onClick}
   >
     {#if fieldIcon}
-      <span class="option-icon">
+      <span class="option-extra">
         <Icon name={fieldIcon} />
       </span>
     {/if}
+    {#if fieldColour}
+      <span class="option-extra">
+        <StatusLight square color={fieldColour} />
+      </span>
+    {/if}
     <span
       class="spectrum-Picker-label"
       class:is-placeholder={isPlaceholder}
@@ -108,11 +113,6 @@
         <use xlink:href="#spectrum-icon-18-Alert" />
       </svg>
     {/if}
-    {#if fieldColour}
-      <span class="option-colour">
-        <StatusLight size="L" color={fieldColour} />
-      </span>
-    {/if}
     <svg
       class="spectrum-Icon spectrum-UIIcon-ChevronDown100 spectrum-Picker-menuIcon"
       focusable="false"
@@ -166,10 +166,15 @@
               on:click={() => onSelectOption(getOptionValue(option, idx))}
             >
               {#if getOptionIcon(option, idx)}
-                <span class="option-icon">
+                <span class="option-extra">
                   <Icon name={getOptionIcon(option, idx)} />
                 </span>
               {/if}
+              {#if getOptionColour(option, idx)}
+                <span class="option-extra">
+                  <StatusLight square color={getOptionColour(option, idx)} />
+                </span>
+              {/if}
               <span class="spectrum-Menu-itemLabel">
                 {getOptionLabel(option, idx)}
               </span>
@@ -180,11 +185,6 @@
               >
                 <use xlink:href="#spectrum-css-icon-Checkmark100" />
               </svg>
-              {#if getOptionColour(option, idx)}
-                <span class="option-colour">
-                  <StatusLight size="L" color={getOptionColour(option, idx)} />
-                </span>
-              {/if}
             </li>
           {/each}
         {/if}
@@ -209,6 +209,9 @@
     width: 100%;
     box-shadow: none;
   }
+  .spectrum-Picker-label.auto-width {
+    margin-right: var(--spacing-xs);
+  }
   .spectrum-Picker-label:not(.auto-width) {
     overflow: hidden;
     text-overflow: ellipsis;
@@ -221,16 +224,16 @@
   .spectrum-Picker-label.auto-width.is-placeholder {
     padding-right: 2px;
   }
+  .auto-width .spectrum-Menu-item {
+    padding-right: var(--spacing-xl);
+  }
 
   /* Icon and colour alignment */
   .spectrum-Menu-checkmark {
     align-self: center;
     margin-top: 0;
   }
-  .option-colour {
+  .option-extra {
-    padding-left: 8px;
-  }
-  .option-icon {
     padding-right: 8px;
   }
 

packages/bbui/src/StatusLight/StatusLight.svelte

@@ -18,11 +18,16 @@
   export let disabled = false
   export let active = false
   export let color = null
+  export let square = false
+  export let hoverable = false
 </script>
 
 <div
+  on:click
   class="spectrum-StatusLight spectrum-StatusLight--size{size}"
   class:custom={!!color}
+  class:square
+  class:hoverable
   style={`--color: ${color};`}
   class:spectrum-StatusLight--celery={celery}
   class:spectrum-StatusLight--yellow={yellow}
@@ -54,6 +59,7 @@
     min-height: 0;
     padding-top: 0;
     padding-bottom: 0;
+    transition: color ease-out 130ms;
   }
   .spectrum-StatusLight.withText::before {
     margin-right: 10px;
@@ -61,4 +67,14 @@
   .custom::before {
     background: var(--color) !important;
   }
+  .square::before {
+    width: 14px;
+    height: 14px;
+    border-radius: 4px;
+    margin: 0;
+  }
+  .hoverable:hover {
+    cursor: pointer;
+    color: var(--spectrum-global-color-gray-900);
+  }
 </style>

packages/builder/src/builderStore/store/theme.js

@@ -16,16 +16,19 @@ export const getThemeStore = () => {
       return
     }
 
-    Constants.ThemeOptions.forEach(option => {
+    // Update global class names to use the new theme and remove others
+    Constants.Themes.forEach(option => {
       themeElement.classList.toggle(
-        `spectrum--${option}`,
+        `spectrum--${option.class}`,
-        option === state.theme
+        option.class === state.theme
       )
-
-      // Ensure darkest is always added as this is the base class for custom
-      // themes
-      themeElement.classList.add("spectrum--darkest")
     })
+
+    // Add base theme if required
+    const selectedTheme = Constants.Themes.find(x => x.class === state.theme)
+    if (selectedTheme?.base) {
+      themeElement.classList.add(`spectrum--${selectedTheme.base}`)
+    }
   })
 
   return store

packages/builder/src/components/common/NavItem.svelte

@@ -1,5 +1,5 @@
 <script>
-  import { Icon, StatusLight } from "@budibase/bbui"
+  import { Icon } from "@budibase/bbui"
   import { createEventDispatcher, getContext } from "svelte"
 
   export let icon
@@ -14,8 +14,8 @@
   export let iconText
   export let iconColor
   export let scrollable = false
-  export let color
   export let highlighted = false
+  export let rightAlignIcon = false
 
   const scrollApi = getContext("scroll")
   const dispatch = createEventDispatcher()
@@ -78,7 +78,7 @@
         {iconText}
       </div>
     {:else if icon}
-      <div class="icon">
+      <div class="icon" class:right={rightAlignIcon}>
         <Icon color={iconColor} size="S" name={icon} />
       </div>
     {/if}
@@ -88,9 +88,9 @@
         <slot />
       </div>
     {/if}
-    {#if color}
+    {#if $$slots.right}
-      <div class="light">
+      <div class="right">
-        <StatusLight size="L" {color} />
+        <slot name="right" />
       </div>
     {/if}
   </div>
@@ -107,7 +107,7 @@
     display: flex;
     flex-direction: row;
     justify-content: flex-start;
-    align-items: center;
+    align-items: stretch;
   }
   .nav-item.scrollable {
     flex-direction: column;
@@ -135,10 +135,8 @@
     align-items: center;
     gap: var(--spacing-xs);
     width: max-content;
-    overflow: hidden;
     position: relative;
     padding-left: var(--spacing-l);
-    pointer-events: none;
   }
 
   /* Needed to fully display the actions icon */
@@ -153,10 +151,15 @@
     justify-content: center;
     align-items: center;
     color: var(--spectrum-global-color-gray-600);
+    order: 1;
+  }
+  .icon.right {
+    order: 4;
   }
   .icon.arrow {
     flex: 0 0 20px;
     pointer-events: all;
+    order: 0;
   }
   .icon.arrow.absolute {
     position: absolute;
@@ -188,11 +191,14 @@
     overflow: hidden;
     text-overflow: ellipsis;
     flex: 1 1 auto;
-    color: var(--spectrum-global-color-gray-800);
+    color: var(--spectrum-global-color-gray-900);
+    order: 2;
+    width: 0;
   }
   .scrollable .text {
     flex: 0 0 auto;
     max-width: 160px;
+    width: auto;
   }
 
   .actions {
@@ -201,18 +207,17 @@
     display: grid;
     place-items: center;
     visibility: hidden;
-  }
+    order: 3;
-  .actions,
+    opacity: 0;
-  .light :global(.spectrum-StatusLight) {
     width: 20px;
     height: 20px;
-    margin-left: var(--spacing-s);
+    margin-left: var(--spacing-xs);
   }
-  .light {
+  .nav-item.withActions:hover .actions {
-    position: absolute;
+    opacity: 1;
-    right: 0;
   }
-  .nav-item.withActions:hover .light {
+
-    display: none;
+  .right {
+    order: 10;
   }
 </style>

packages/builder/src/components/deploy/DeployNavigation.svelte

@@ -56,6 +56,10 @@
     }
   }
 
+  const previewApp = () => {
+    window.open(`/${application}`)
+  }
+
   const viewApp = () => {
     analytics.captureEvent(Events.APP_VIEW_PUBLISHED, {
       appId: selectedApp.appId,
@@ -174,7 +178,10 @@
   Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
 </ConfirmDialog>
 
-<DeployModal onOk={completePublish} />
+<div class="buttons">
+  <Button on:click={previewApp} newStyles secondary>Preview</Button>
+  <DeployModal onOk={completePublish} />
+</div>
 
 <style>
   .publish-popover-actions :global([data-cy="publish-popover-action"]) {
@@ -183,4 +190,11 @@
   :global([data-cy="publish-popover-menu"]) {
     padding: 10px;
   }
+  .buttons {
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    align-items: center;
+    gap: var(--spacing-m);
+  }
 </style>

packages/builder/src/components/deploy/VersionModal.svelte

@@ -1,11 +1,11 @@
 <script>
   import {
-    Icon,
     Modal,
     notifications,
     ModalContent,
     Body,
     Button,
+    StatusLight,
   } from "@budibase/bbui"
   import { store } from "builderStore"
   import { API } from "api"
@@ -67,17 +67,10 @@
   }
 </script>
 
-{#if !hideIcon}
+{#if !hideIcon && updateAvailable}
-  <div class="icon-wrapper" class:highlight={updateAvailable}>
+  <StatusLight hoverable on:click={updateModal.show} notice>
-    <Icon
+    Update available
-      name="Refresh"
+  </StatusLight>
-      hoverable
-      on:click={updateModal.show}
-      tooltip={updateAvailable
-        ? "An update is available"
-        : "No updates are available"}
-    />
-  </div>
 {/if}
 <Modal bind:this={updateModal}>
   <ModalContent

packages/builder/src/components/design/Panel.svelte

@@ -3,11 +3,13 @@
 
   export let title
   export let icon
+  export let expandable = false
   export let showAddButton = false
   export let showBackButton = false
-  export let showExpandIcon = false
+  export let showCloseButton = false
   export let onClickAddButton
   export let onClickBackButton
+  export let onClickCloseButton
   export let borderLeft = false
   export let borderRight = false
 
@@ -25,7 +27,7 @@
     <div class="title">
       <Heading size="XXS">{title || ""}</Heading>
     </div>
-    {#if showExpandIcon}
+    {#if expandable}
       <Icon
         name={wide ? "Minimize" : "Maximize"}
         hoverable
@@ -37,6 +39,9 @@
         <Icon name="Add" />
       </div>
     {/if}
+    {#if showCloseButton}
+      <Icon name="Close" hoverable on:click={onClickCloseButton} />
+    {/if}
   </div>
   <div class="body">
     <slot />

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

@@ -23,10 +23,6 @@
     $layout.children.find(layout => $isActive(layout.path))?.title ?? "data"
   )
 
-  const previewApp = () => {
-    window.open(`/${application}`)
-  }
-
   async function getPackage() {
     try {
       store.actions.reset()
@@ -108,14 +104,10 @@
         </Tabs>
       </div>
       <div class="toprightnav">
-        <VersionModal />
+        <div class="version">
+          <VersionModal />
+        </div>
         <RevertModal />
-        <Icon
-          name="Visibility"
-          tooltip="Open app preview"
-          hoverable
-          on:click={previewApp}
-        />
         <DeployNavigation {application} />
       </div>
     </div>
@@ -183,4 +175,8 @@
     align-items: center;
     gap: var(--spacing-xl);
   }
+
+  .version {
+    margin-right: var(--spacing-s);
+  }
 </style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte

@@ -1,10 +1,9 @@
 <script>
   import DevicePreviewSelect from "./DevicePreviewSelect.svelte"
   import AppPreview from "./AppPreview.svelte"
-  import { store, selectedScreen, sortedScreens } from "builderStore"
+  import { store, sortedScreens } from "builderStore"
-  import { Button, Select } from "@budibase/bbui"
+  import { Select } from "@budibase/bbui"
   import { RoleUtils } from "@budibase/frontend-core"
-  import { goto } from "@roxi/routify"
 </script>
 
 <div class="app-panel">
@@ -15,24 +14,17 @@
         options={$sortedScreens}
         getOptionLabel={x => x.routing.route}
         getOptionValue={x => x._id}
-        getOptionIcon={x => (x.routing.homeScreen ? "Home" : "WebPage")}
         getOptionColour={x => RoleUtils.getRoleColour(x.routing.roleId)}
         value={$store.selectedScreenId}
         on:change={e => store.actions.screens.select(e.detail)}
+        quiet
+        autoWidth
       />
     </div>
     <div class="header-right">
       {#if $store.clientFeatures.devicePreview}
         <DevicePreviewSelect />
       {/if}
-      <Button
-        newStyles
-        secondary
-        icon="Add"
-        on:click={() => $goto(`../${$selectedScreen._id}/components/new`)}
-      >
-        Component
-      </Button>
     </div>
   </div>
   <div class="content">
@@ -59,6 +51,7 @@
     justify-content: space-between;
     align-items: flex-start;
     gap: var(--spacing-l);
+    margin: 0 2px;
   }
   .header-left,
   .header-right {
@@ -69,7 +62,8 @@
     gap: var(--spacing-l);
   }
   .header-left :global(.spectrum-Picker) {
-    width: 250px;
+    font-weight: 600;
+    color: var(--spectrum-global-color-gray-900);
   }
   .content {
     flex: 1 1 auto;

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte

@@ -3,6 +3,7 @@
   import { onMount, onDestroy } from "svelte"
   import {
     store,
+    selectedComponent,
     selectedScreen,
     selectedLayout,
     currentAsset,
@@ -14,6 +15,7 @@
     Layout,
     Heading,
     Body,
+    Icon,
     notifications,
   } from "@budibase/bbui"
   import ErrorSVG from "@budibase/frontend-core/assets/error.svg?raw"
@@ -96,6 +98,11 @@
   $: json = JSON.stringify(previewData)
   $: refreshContent(json)
 
+  // Determine if the add component menu is active
+  $: isAddingComponent = $isActive(
+    `./components/${$selectedComponent?._id}/new`
+  )
+
   // Update the iframe with the builder info to render the correct preview
   const refreshContent = message => {
     if (iframe) {
@@ -219,6 +226,16 @@
     idToDelete = null
   }
 
+  const toggleAddComponent = () => {
+    if (isAddingComponent) {
+      $goto(`../${$selectedScreen._id}/components/${$selectedComponent?._id}`)
+    } else {
+      $goto(
+        `../${$selectedScreen._id}/components/${$selectedComponent?._id}/new`
+      )
+    }
+  }
+
   onMount(() => {
     window.addEventListener("message", receiveMessage)
     if (!$store.clientFeatures.messagePassing) {
@@ -282,6 +299,13 @@
     class:tablet={$store.previewDevice === "tablet"}
     class:mobile={$store.previewDevice === "mobile"}
   />
+  <div
+    class="add-component"
+    class:active={isAddingComponent}
+    on:click={toggleAddComponent}
+  >
+    <Icon size="XL" name="Add">Component</Icon>
+  </div>
 </div>
 <ConfirmDialog
   bind:this={confirmDeleteDialog}
@@ -343,4 +367,26 @@
     width: 100%;
     height: 100%;
   }
+
+  .add-component {
+    position: absolute;
+    bottom: 20px;
+    right: 20px;
+    width: 60px;
+    height: 60px;
+    border-radius: 50%;
+    background: var(--spectrum-global-color-blue-500);
+    display: grid;
+    place-items: center;
+    color: white;
+    box-shadow: 1px 3px 8px 0 rgba(0, 0, 0, 0.3);
+    cursor: pointer;
+    transition: transform ease-out 300ms, background ease-out 130ms;
+  }
+  .add-component:hover {
+    background: var(--spectrum-global-color-blue-600);
+  }
+  .add-component.active {
+    transform: rotate(-45deg);
+  }
 </style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte

@@ -3,18 +3,21 @@
   import { store } from "builderStore"
 </script>
 
-<ActionGroup compact>
+<ActionGroup compact quiet>
   <ActionButton
+    quiet
     icon="DeviceDesktop"
     selected={$store.previewDevice === "desktop"}
     on:click={() => store.actions.preview.setDevice("desktop")}
   />
   <ActionButton
+    quiet
     icon="DeviceTablet"
     selected={$store.previewDevice === "tablet"}
     on:click={() => store.actions.preview.setDevice("tablet")}
   />
   <ActionButton
+    quiet
     icon="DevicePhone"
     selected={$store.previewDevice === "mobile"}
     on:click={() => store.actions.preview.setDevice("mobile")}

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte

@@ -9,6 +9,7 @@
   import { setContext } from "svelte"
   import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
   import { DropPosition } from "./dndStore"
+  import { Button } from "@budibase/bbui"
 
   let scrollRef
 
@@ -23,7 +24,7 @@
     let newOffsets = {}
 
     // Calculate left offset
-    const offsetX = bounds.left + bounds.width + scrollLeft - 58
+    const offsetX = bounds.left + bounds.width + scrollLeft - 36
     if (offsetX > sidebarWidth) {
       newOffsets.left = offsetX - sidebarWidth
     } else {
@@ -61,13 +62,10 @@
   })
 </script>
 
-<Panel
+<Panel title="Components" showExpandIcon borderRight>
-  title="Components"
+  <div class="add-component">
-  showAddButton
+    <Button on:click={() => $goto("./new")} cta>Add component</Button>
-  onClickAddButton={() => $goto("../new")}
+  </div>
-  showExpandIcon
-  borderRight
->
   <div class="nav-items-container" bind:this={scrollRef}>
     <ul>
       <li
@@ -110,6 +108,13 @@
 </Panel>
 
 <style>
+  .add-component {
+    padding: var(--spacing-xl) var(--spacing-l);
+    padding-bottom: 0;
+    display: flex;
+    flex-direction: column;
+    align-items: stretch;
+  }
   .nav-items-container {
     padding: var(--spacing-xl) 0;
     flex: 1 1 auto;

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte

@@ -4,6 +4,8 @@
   import * as routify from "@roxi/routify"
   import { onDestroy } from "svelte"
   import { findComponent } from "builderStore/componentUtils"
+  import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
+  import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
 
   // Keep URL and state in sync for selected component ID
   const stopSyncing = syncURLToState({
@@ -18,4 +20,6 @@
   onDestroy(stopSyncing)
 </script>
 
+<ComponentListPanel />
+<ComponentSettingsPanel />
 <slot />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte

@@ -1,7 +1,4 @@
-<script>
+<!--
-  import ComponentListPanel from "./_components/navigation/ComponentListPanel.svelte"
+  Placeholder file so that routify works.
-  import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
+  No unique content is needed in this index page.
-</script>
+-->
-
-<ComponentListPanel />
-<ComponentSettingsPanel />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte

@@ -6,15 +6,14 @@
     ActionGroup,
     ActionButton,
     Search,
-    DetailSummary,
     Icon,
     Body,
-    Divider,
     notifications,
   } from "@budibase/bbui"
   import structure from "./componentStructure.json"
   import { store, selectedComponent } from "builderStore"
   import { onMount } from "svelte"
+  import { fly } from "svelte/transition"
 
   let section = "components"
   let searchString
@@ -150,114 +149,116 @@
   })
 </script>
 
-<Panel
+<div class="container" transition:fly|local={{ x: 260, duration: 300 }}>
-  title="Add component"
+  <Panel
-  showBackButton
+    title="Add component"
-  onClickBackButton={() => $goto("../slot")}
+    showCloseButton
-  borderRight
+    onClickCloseButton={() => $goto("../")}
->
+    borderLeft
-  <Layout paddingX="L" paddingY="XL" gap="S">
+  >
-    <Search
+    <Layout paddingX="L" paddingY="XL" gap="S">
-      placeholder="Search"
+      <Search
-      value={searchString}
+        placeholder="Search"
-      on:change={e => (searchString = e.detail)}
+        value={searchString}
-      bind:inputRef={searchRef}
+        on:change={e => (searchString = e.detail)}
-    />
+        bind:inputRef={searchRef}
-    {#if !searchString}
+      />
-      <ActionGroup compact justified>
+      {#if !searchString}
-        <ActionButton
+        <ActionGroup compact justified>
-          fullWidth
+          <ActionButton
-          selected={section === "components"}
+            fullWidth
-          on:click={() => (section = "components")}>Components</ActionButton
+            selected={section === "components"}
-        >
+            on:click={() => (section = "components")}>Components</ActionButton
-        <ActionButton
+          >
-          fullWidth
+          <ActionButton
-          selected={section === "blocks"}
+            fullWidth
-          on:click={() => (section = "blocks")}>Blocks</ActionButton
+            selected={section === "blocks"}
-        >
+            on:click={() => (section = "blocks")}>Blocks</ActionButton
-      </ActionGroup>
+          >
-    {/if}
+        </ActionGroup>
-  </Layout>
+      {/if}
-  <div>
+      {#if searchString || section === "components"}
-    <Divider noMargin noGrid />
+        {#if filteredStructure.length}
-  </div>
+          {#each filteredStructure as category}
-  {#if searchString || section === "components"}
+            <Layout noPadding gap="XS">
-    {#each filteredStructure as category}
+              <div class="category-label">{category.name}</div>
-      <DetailSummary name={category.name} collapsible={false}>
+              {#each category.children as component}
-        <div class="component-grid">
+                <div
-          {#each category.children as component}
+                  class="component"
+                  class:selected={selectedIndex ===
+                    orderMap[component.component]}
+                  on:click={() => addComponent(component.component)}
+                  on:mouseover={() => (selectedIndex = null)}
+                >
+                  <Icon name={component.icon} />
+                  <Body size="XS">{component.name}</Body>
+                </div>
+              {/each}
+            </Layout>
+          {/each}
+        {:else}
+          <Body size="S">
+            There aren't any components matching the current filter
+          </Body>
+        {/if}
+      {:else}
+        <Body size="S">Blocks are collections of pre-built components</Body>
+        <Layout noPadding gap="XS">
+          {#each blocks as block}
             <div
               class="component"
-              class:wide={component.name?.length > 15}
+              on:click={() => addComponent(block.component)}
-              class:selected={selectedIndex === orderMap[component.component]}
-              on:click={() => addComponent(component.component)}
-              on:mouseover={() => (selectedIndex = null)}
             >
-              <Icon name={component.icon} />
+              <Icon name={block.icon} />
-              <Body size="XS">{component.name}</Body>
+              <Body size="XS">{block.name}</Body>
             </div>
           {/each}
-        </div>
+        </Layout>
-      </DetailSummary>
+      {/if}
-    {/each}
-  {:else}
-    <Layout paddingX="L" paddingY="XL" gap="S">
-      <Body size="S">Blocks are collections of pre-built components</Body>
-      <Layout noPadding gap="XS">
-        {#each blocks as block}
-          <div
-            class="component block"
-            on:click={() => addComponent(block.component)}
-          >
-            <Icon name={block.icon} />
-            <Body size="XS">{block.name}</Body>
-          </div>
-        {/each}
-      </Layout>
     </Layout>
-  {/if}
+  </Panel>
-</Panel>
+</div>
 
 <style>
-  .component-grid {
+  .container {
-    display: grid;
+    position: fixed;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
+    right: 0;
-    gap: var(--spacing-s);
+    z-index: 1;
+    height: 100%;
+    display: flex;
+    flex-direction: row;
+    align-items: stretch;
+  }
+  .category-label {
+    color: var(--spectrum-global-color-gray-600);
+    text-transform: uppercase;
+    font-size: 12px;
+    font-weight: 600;
+    margin-top: var(--spacing-xs);
   }
   .component {
-    background-color: var(--spectrum-global-color-gray-200);
+    background: var(--spectrum-global-color-gray-200);
     border-radius: 4px;
-    height: 76px;
     display: flex;
-    flex-direction: column;
-    justify-content: center;
     align-items: center;
-    text-align: center;
-    padding: 0 var(--spacing-s);
-    gap: var(--spacing-s);
-    padding-top: 4px;
     border: 1px solid var(--spectrum-global-color-gray-200);
-    transition: border-color 130ms ease-out;
+    transition: background 130ms ease-out, border-color 130ms ease-out;
+    flex-direction: row;
+    justify-content: flex-start;
+    padding: var(--spacing-s) var(--spacing-l);
+    gap: var(--spacing-m);
+    overflow: hidden;
   }
-  .component.wide {
+  .component.selected {
-    grid-column: span 2;
-  }
-  .component.selected,
-  .component:hover {
     border-color: var(--spectrum-global-color-blue-400);
   }
   .component:hover {
+    background: var(--spectrum-global-color-gray-300);
     cursor: pointer;
   }
   .component :global(.spectrum-Body) {
     line-height: 1.2 !important;
-  }
+    overflow: hidden;
-
+    text-overflow: ellipsis;
-  .block {
-    flex-direction: row;
-    justify-content: flex-start;
-    height: 48px;
-    padding: 0 var(--spacing-l);
-    gap: var(--spacing-m);
   }
 </style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/index.svelte

@@ -0,0 +1,5 @@
+<script>
+  import NewComponentPanel from "./_components/NewComponentPanel.svelte"
+</script>
+
+<NewComponentPanel />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentTargetPanel.svelte

@@ -1,21 +0,0 @@
-<script>
-  import Panel from "components/design/Panel.svelte"
-  import { Body, Layout } from "@budibase/bbui"
-  import { selectedComponent, selectedScreen, store } from "builderStore"
-
-  $: componentDefinition = store.actions.components.getDefinition(
-    $selectedComponent?._component
-  )
-  $: isScreen = $selectedComponent?._id === $selectedScreen?.props._id
-  $: title = isScreen ? "Screen" : $selectedComponent?._instanceName
-  $: position = componentDefinition?.hasChildren ? "inside" : "below"
-</script>
-
-<Panel {title} icon={componentDefinition?.icon} borderLeft>
-  <Layout paddingX="L" paddingY="XL">
-    <Body size="S">
-      Components that you add will be placed {position}
-      {title}
-    </Body>
-  </Layout>
-</Panel>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/index.svelte

@@ -1,26 +0,0 @@
-<script>
-  import NewComponentPanel from "./_components/NewComponentPanel.svelte"
-  import NewComponentTargetPanel from "./_components/NewComponentTargetPanel.svelte"
-  import { onMount } from "svelte"
-  import { store, selectedComponent, selectedScreen } from "builderStore"
-  import { redirect } from "@roxi/routify"
-
-  // Select the screen slot as the target to add to, if no component
-  // is selected
-  onMount(() => {
-    if (!$selectedComponent) {
-      if ($selectedScreen) {
-        store.update(state => {
-          state.selectedComponentId = $selectedScreen.props._id
-          return state
-        })
-      } else {
-        // Otherwise go back out of the add screen
-        $redirect("../")
-      }
-    }
-  })
-</script>
-
-<NewComponentPanel />
-<NewComponentTargetPanel />

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte

@@ -0,0 +1,58 @@
+<script>
+  import { RoleUtils } from "@budibase/frontend-core"
+  import { Tooltip, StatusLight } from "@budibase/bbui"
+  import { roles } from "stores/backend"
+  import { Roles } from "constants/backend"
+
+  export let roleId
+
+  let showTooltip = false
+
+  $: color = RoleUtils.getRoleColour(roleId)
+  $: role = $roles.find(role => role._id === roleId)
+  $: tooltip =
+    roleId === Roles.PUBLIC
+      ? "This screen is open to the public"
+      : `Requires at least ${role?.name} access`
+</script>
+
+<div
+  class="container"
+  on:mouseover={() => (showTooltip = true)}
+  on:mouseleave={() => (showTooltip = false)}
+  style="--color: {color};"
+>
+  <StatusLight square {color} />
+  {#if showTooltip}
+    <div class="tooltip">
+      <Tooltip textWrapping text={tooltip} direction="left" />
+    </div>
+  {/if}
+</div>
+
+<style>
+  .container {
+    position: relative;
+  }
+  .tooltip {
+    z-index: 1;
+    position: absolute;
+    top: 50%;
+    left: calc(50% - 8px);
+    transform: translateX(-100%) translateY(-50%);
+    display: flex;
+    flex-direction: row;
+    justify-content: flex-end;
+    width: 130px;
+    pointer-events: none;
+  }
+  .tooltip :global(.spectrum-Tooltip) {
+    background: var(--color);
+    color: white;
+    font-weight: 600;
+    max-width: 130px;
+  }
+  .tooltip :global(.spectrum-Tooltip-tip) {
+    border-top-color: var(--color);
+  }
+</style>

packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte

@@ -1,11 +1,12 @@
 <script>
-  import { Search, Layout, Select, Body } from "@budibase/bbui"
+  import { Search, Layout, Select, Body, Button } from "@budibase/bbui"
   import Panel from "components/design/Panel.svelte"
   import { roles } from "stores/backend"
   import { store, sortedScreens } from "builderStore"
   import NavItem from "components/common/NavItem.svelte"
   import ScreenDropdownMenu from "./ScreenDropdownMenu.svelte"
   import ScreenWizard from "./ScreenWizard.svelte"
+  import RoleIndicator from "./RoleIndicator.svelte"
   import { RoleUtils } from "@budibase/frontend-core"
 
   let searchString
@@ -28,13 +29,9 @@
   }
 </script>
 
-<Panel
+<Panel title="Screens" borderRight>
-  title="Screens"
-  showAddButton
-  onClickAddButton={showNewScreenModal}
-  borderRight
->
   <Layout paddingX="L" paddingY="XL" gap="S">
+    <Button on:click={showNewScreenModal} cta>Add screen</Button>
     <Search
       placeholder="Search"
       value={searchString}
@@ -56,14 +53,15 @@
   </Layout>
   {#each filteredScreens as screen (screen._id)}
     <NavItem
-      icon={screen.routing.homeScreen ? "Home" : "WebPage"}
+      icon={screen.routing.homeScreen ? "Home" : null}
       indentLevel={0}
       selected={$store.selectedScreenId === screen._id}
       text={screen.routing.route}
       on:click={() => store.actions.screens.select(screen._id)}
-      color={RoleUtils.getRoleColour(screen.routing.roleId)}
+      rightAlignIcon
     >
       <ScreenDropdownMenu screenId={screen._id} />
+      <RoleIndicator slot="right" roleId={screen.routing.roleId} />
     </NavItem>
   {/each}
   {#if !filteredScreens?.length}

packages/builder/src/pages/builder/portal/overview/_components/SettingsTab.svelte

@@ -66,21 +66,26 @@
               <Body>
                 The app is currently using version
                 <strong>{$store.version}</strong>
-                but version <strong>{clientPackage.version}</strong> is available.
+                but version <strong>{clientPackage.version}</strong> is
+                available.
+                <br />
+                Updates can contain new features, performance improvements and bug
+                fixes.
               </Body>
+              <div class="page-action">
+                <Button cta on:click={versionModal.show()}>Update app</Button>
+              </div>
             {:else}
-              <p class="version-status">
+              <div class="version-status">
                 The app is currently using version
                 <strong>{$store.version}</strong>. You're running the latest!
-              </p>
+              </div>
+              <div class="page-action">
+                <Button secondary on:click={versionModal.show()}>
+                  Revert app
+                </Button>
+              </div>
             {/if}
-
-            Updates can contain new features, performance improvements and bug
-            fixes.
-
-            <div class="page-action">
-              <Button cta on:click={versionModal.show()}>Update app</Button>
-            </div>
           </Body>
         </Layout>
       </span>

packages/builder/src/pages/builder/portal/settings/theming.svelte

@@ -1,7 +1,6 @@
 <script>
   import { Layout, Heading, Body, Divider, Label, Select } from "@budibase/bbui"
   import { themeStore } from "builderStore"
-  import { capitalise } from "helpers"
   import { Constants } from "@budibase/frontend-core"
 </script>
 
@@ -15,10 +14,11 @@
     <div class="field">
       <Label size="L">Builder theme</Label>
       <Select
-        options={Constants.ThemeOptions}
+        options={Constants.Themes}
         bind:value={$themeStore.theme}
         placeholder={null}
-        getOptionLabel={capitalise}
+        getOptionLabel={x => x.name}
+        getOptionValue={x => x.class}
       />
     </div>
   </div>

packages/client/manifest.json

@@ -2763,7 +2763,7 @@
   },
   "longformfield": {
     "name": "Long Form Field",
-    "icon": "AlignLeft",
+    "icon": "TextAlignLeft",
     "styles": [
       "size"
     ],
@@ -3736,7 +3736,7 @@
   "cardsblock": {
     "block": true,
     "name": "Cards block",
-    "icon": "Table",
+    "icon": "PersonalizationField",
     "styles": [
       "size"
     ],

packages/frontend-core/src/constants.js

@@ -99,11 +99,31 @@ export const SqlNumberTypeRangeMap = {
   },
 }
 
-export const ThemeOptions = [
+export const Themes = [
-  "lightest",
+  {
-  "light",
+    class: "lightest",
-  "dark",
+    name: "Lightest",
-  "darkest",
+  },
-  "nord",
+  {
-  "midnight",
+    class: "light",
+    name: "Light",
+  },
+  {
+    class: "dark",
+    name: "Dark",
+  },
+  {
+    class: "darkest",
+    name: "Darkest",
+  },
+  {
+    class: "nord",
+    name: "Nord",
+    base: "darkest",
+  },
+  {
+    class: "midnight",
+    name: "Midnight",
+    base: "darkest",
+  },
 ]

packages/frontend-core/src/themes/nord.css

@@ -32,7 +32,7 @@
   --spectrum-global-color-gray-50: #2e3440;
   --spectrum-global-color-gray-75: #353b4a;
   --spectrum-global-color-gray-100: #3b4252;
-  --spectrum-global-color-gray-200: #4a5367;
+  --spectrum-global-color-gray-200: #424a5c;
   --spectrum-global-color-gray-300: #4c566a;
   --spectrum-global-color-gray-400: #5a657d;
   --spectrum-global-color-gray-500: #677590;
@@ -41,6 +41,6 @@
   --spectrum-global-color-gray-800: #bac1cd;
   --spectrum-global-color-gray-900: #eceff4;
 
-  --spectrum-alias-highlight-hover: rgba(169, 177, 193, 0.06);
+  --spectrum-alias-highlight-hover: rgba(169, 177, 193, 0.1);
   --spectrum-alias-highlight-active: rgba(169, 177, 193, 0.1);
 }

packages/frontend-core/src/utils/roles.js

@@ -7,10 +7,10 @@ const RolePriorities = {
   [Roles.PUBLIC]: 1,
 }
 const RoleColours = {
-  [Roles.ADMIN]: "var(--spectrum-global-color-static-seafoam-400)",
+  [Roles.ADMIN]: "var(--spectrum-global-color-static-red-400)",
-  [Roles.POWER]: "var(--spectrum-global-color-static-purple-400)",
+  [Roles.POWER]: "var(--spectrum-global-color-static-orange-400)",
-  [Roles.BASIC]: "var(--spectrum-global-color-static-magenta-400)",
+  [Roles.BASIC]: "var(--spectrum-global-color-static-green-400)",
-  [Roles.PUBLIC]: "var(--spectrum-global-color-static-yellow-400)",
+  [Roles.PUBLIC]: "var(--spectrum-global-color-static-blue-400)",
 }
 
 export const getRolePriority = roleId => {
@@ -18,5 +18,7 @@ export const getRolePriority = roleId => {
 }
 
 export const getRoleColour = roleId => {
-  return RoleColours[roleId] ?? "rgb(20, 115, 230)"
+  return (
+    RoleColours[roleId] ?? "var(--spectrum-global-color-static-magenta-400)"
+  )
 }