Merge branch 'master' of github.com:Budibase/budibase into develop

2022-07-29 13:48:27 +01:00 · 2022-07-29 13:48:27 +01:00 · 3ebb2e193f
parent 8d9794df5c c42978109f
commit 3ebb2e193f
29 changed files with 411 additions and 282 deletions
--- a/packages/bbui/src/ActionButton/ActionButton.svelte
+++ b/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>
--- a/packages/bbui/src/Form/Core/Picker.svelte
+++ b/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 {
-    padding-left: 8px;
-  }
-  .option-icon {
+  .option-extra {
    padding-right: 8px;
  }

--- a/packages/bbui/src/StatusLight/StatusLight.svelte
+++ b/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>
--- a/packages/bbui/src/Table/AttachmentRenderer.svelte
+++ b/packages/bbui/src/Table/AttachmentRenderer.svelte
@ -1,5 +1,4 @@
 <script>
-  import Tooltip from "../Tooltip/Tooltip.svelte"
  import Link from "../Link/Link.svelte"

  export let value
@ -17,18 +16,16 @@
 {#each attachments as attachment}
  {#if isImage(attachment.extension)}
    <Link quiet target="_blank" href={attachment.url}>
-      <div class="center">
+      <div class="center" title={attachment.name}>
        <img src={attachment.url} alt={attachment.extension} />
      </div>
    </Link>
  {:else}
-    <Tooltip text={attachment.name} direction="right">
-      <div class="file">
-        <Link quiet target="_blank" href={attachment.url}>
-          {attachment.extension}
-        </Link>
-      </div>
-    </Tooltip>
+    <div class="file" title={attachment.name}>
+      <Link quiet target="_blank" href={attachment.url}>
+        {attachment.extension}
+      </Link>
+    </div>
  {/if}
 {/each}
 {#if leftover}
@ -52,7 +49,7 @@
    padding: 0 8px;
    color: var(--spectrum-global-color-gray-800);
    border: 1px solid var(--spectrum-global-color-gray-300);
-    border-radius: 2px;
+    border-radius: 4px;
    text-transform: uppercase;
    font-weight: 600;
    font-size: 11px;
--- a/packages/builder/src/builderStore/store/theme.js
+++ b/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}`,
-        option === state.theme
+        `spectrum--${option.class}`,
+        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
--- a/packages/builder/src/components/common/NavItem.svelte
+++ b/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}
-      <div class="light">
-        <StatusLight size="L" {color} />
+    {#if $$slots.right}
+      <div class="right">
+        <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;
-  }
-  .actions,
-  .light :global(.spectrum-StatusLight) {
+    order: 3;
+    opacity: 0;
    width: 20px;
    height: 20px;
-    margin-left: var(--spacing-s);
+    margin-left: var(--spacing-xs);
  }
-  .light {
-    position: absolute;
-    right: 0;
+  .nav-item.withActions:hover .actions {
+    opacity: 1;
  }
-  .nav-item.withActions:hover .light {
-    display: none;
+
+  .right {
+    order: 10;
  }
 </style>
--- a/packages/builder/src/components/deploy/DeployNavigation.svelte
+++ b/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>
--- a/packages/builder/src/components/deploy/VersionModal.svelte
+++ b/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}
-  <div class="icon-wrapper" class:highlight={updateAvailable}>
-    <Icon
-      name="Refresh"
-      hoverable
-      on:click={updateModal.show}
-      tooltip={updateAvailable
-        ? "An update is available"
-        : "No updates are available"}
-    />
-  </div>
+{#if !hideIcon && updateAvailable}
+  <StatusLight hoverable on:click={updateModal.show} notice>
+    Update available
+  </StatusLight>
 {/if}
 <Modal bind:this={updateModal}>
  <ModalContent
--- a/packages/builder/src/components/design/Panel.svelte
+++ b/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 />
--- a/packages/builder/src/pages/builder/app/[application]/_layout.svelte
+++ b/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>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPanel.svelte
+++ b/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 { Button, Select } from "@budibase/bbui"
+  import { store, sortedScreens } from "builderStore"
+  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;
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/AppPreview.svelte
+++ b/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>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/_components/DevicePreviewSelect.svelte
+++ b/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")}
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_components/navigation/ComponentListPanel.svelte
@ -9,7 +9,7 @@
  import { setContext } from "svelte"
  import DNDPositionIndicator from "./DNDPositionIndicator.svelte"
  import { DropPosition } from "./dndStore"
-  import { notifications } from "@budibase/bbui"
+  import { notifications, Button } from "@budibase/bbui"

  let scrollRef

@ -24,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 {
@ -71,13 +71,10 @@
  })
 </script>

-<Panel
-  title="Components"
-  showAddButton
-  onClickAddButton={() => $goto("../new")}
-  showExpandIcon
-  borderRight
->
+<Panel title="Components" showExpandIcon borderRight>
+  <div class="add-component">
+    <Button on:click={() => $goto("./new")} cta>Add component</Button>
+  </div>
  <div class="nav-items-container" bind:this={scrollRef}>
    <ul>
      <li
@ -121,6 +118,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;
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/_layout.svelte
+++ b/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 />
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/index.svelte
+++ b/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"
-  import ComponentSettingsPanel from "./_components/settings/ComponentSettingsPanel.svelte"
-</script>
-
-<ComponentListPanel />
-<ComponentSettingsPanel />
+<!--
+  Placeholder file so that routify works.
+  No unique content is needed in this index page.
+-->
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/NewComponentPanel.svelte
+++ b/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
-  title="Add component"
-  showBackButton
-  onClickBackButton={() => $goto("../slot")}
-  borderRight
->
-  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Search
-      placeholder="Search"
-      value={searchString}
-      on:change={e => (searchString = e.detail)}
-      bind:inputRef={searchRef}
-    />
-    {#if !searchString}
-      <ActionGroup compact justified>
-        <ActionButton
-          fullWidth
-          selected={section === "components"}
-          on:click={() => (section = "components")}>Components</ActionButton
-        >
-        <ActionButton
-          fullWidth
-          selected={section === "blocks"}
-          on:click={() => (section = "blocks")}>Blocks</ActionButton
-        >
-      </ActionGroup>
-    {/if}
-  </Layout>
-  <div>
-    <Divider noMargin noGrid />
-  </div>
-  {#if searchString || section === "components"}
-    {#each filteredStructure as category}
-      <DetailSummary name={category.name} collapsible={false}>
-        <div class="component-grid">
-          {#each category.children as component}
+<div class="container" transition:fly|local={{ x: 260, duration: 300 }}>
+  <Panel
+    title="Add component"
+    showCloseButton
+    onClickCloseButton={() => $goto("../")}
+    borderLeft
+  >
+    <Layout paddingX="L" paddingY="XL" gap="S">
+      <Search
+        placeholder="Search"
+        value={searchString}
+        on:change={e => (searchString = e.detail)}
+        bind:inputRef={searchRef}
+      />
+      {#if !searchString}
+        <ActionGroup compact justified>
+          <ActionButton
+            fullWidth
+            selected={section === "components"}
+            on:click={() => (section = "components")}>Components</ActionButton
+          >
+          <ActionButton
+            fullWidth
+            selected={section === "blocks"}
+            on:click={() => (section = "blocks")}>Blocks</ActionButton
+          >
+        </ActionGroup>
+      {/if}
+      {#if searchString || section === "components"}
+        {#if filteredStructure.length}
+          {#each filteredStructure as category}
+            <Layout noPadding gap="XS">
+              <div class="category-label">{category.name}</div>
+              {#each category.children as component}
+                <div
+                  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}
-              class:selected={selectedIndex === orderMap[component.component]}
-              on:click={() => addComponent(component.component)}
-              on:mouseover={() => (selectedIndex = null)}
+              on:click={() => addComponent(block.component)}
            >
-              <Icon name={component.icon} />
-              <Body size="XS">{component.name}</Body>
+              <Icon name={block.icon} />
+              <Body size="XS">{block.name}</Body>
            </div>
          {/each}
-        </div>
-      </DetailSummary>
-    {/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}
    </Layout>
-  {/if}
-</Panel>
+  </Panel>
+</div>

 <style>
-  .component-grid {
-    display: grid;
-    grid-template-columns: repeat(3, minmax(0, 1fr));
-    gap: var(--spacing-s);
+  .container {
+    position: fixed;
+    right: 0;
+    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 {
-    grid-column: span 2;
-  }
-  .component.selected,
-  .component:hover {
+  .component.selected {
    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;
-  }
-
-  .block {
-    flex-direction: row;
-    justify-content: flex-start;
-    height: 48px;
-    padding: 0 var(--spacing-l);
-    gap: var(--spacing-m);
+    overflow: hidden;
+    text-overflow: ellipsis;
  }
 </style>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
+++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/_components/componentStructure.json
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/[componentId]/new/index.svelte
+++ b/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 />
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentTargetPanel.svelte
+++ b/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>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/index.svelte
+++ b/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 />
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/RoleIndicator.svelte
+++ b/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>
--- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/screens/_components/ScreenListPanel.svelte
+++ b/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
-  title="Screens"
-  showAddButton
-  onClickAddButton={showNewScreenModal}
-  borderRight
->
+<Panel title="Screens" 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}
--- a/packages/builder/src/pages/builder/portal/overview/_components/SettingsTab.svelte
+++ b/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>
--- a/packages/builder/src/pages/builder/portal/settings/theming.svelte
+++ b/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>
--- a/packages/client/manifest.json
+++ b/packages/client/manifest.json
@ -2763,7 +2763,7 @@
  },
  "longformfield": {
    "name": "Long Form Field",
-    "icon": "AlignLeft",
+    "icon": "TextAlignLeft",
    "styles": [
      "size"
    ],
@ -3737,7 +3737,7 @@
  "cardsblock": {
    "block": true,
    "name": "Cards block",
-    "icon": "Table",
+    "icon": "PersonalizationField",
    "styles": [
      "size"
    ],
--- a/packages/frontend-core/src/constants.js
+++ b/packages/frontend-core/src/constants.js
@ -133,11 +133,31 @@ export const SqlNumberTypeRangeMap = {
  },
 }

-export const ThemeOptions = [
-  "lightest",
-  "light",
-  "dark",
-  "darkest",
-  "nord",
-  "midnight",
+export const Themes = [
+  {
+    class: "lightest",
+    name: "Lightest",
+  },
+  {
+    class: "light",
+    name: "Light",
+  },
+  {
+    class: "dark",
+    name: "Dark",
+  },
+  {
+    class: "darkest",
+    name: "Darkest",
+  },
+  {
+    class: "nord",
+    name: "Nord",
+    base: "darkest",
+  },
+  {
+    class: "midnight",
+    name: "Midnight",
+    base: "darkest",
+  },
 ]
--- a/packages/frontend-core/src/themes/nord.css
+++ b/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);
 }
--- a/packages/frontend-core/src/utils/roles.js
+++ b/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.POWER]: "var(--spectrum-global-color-static-purple-400)",
-  [Roles.BASIC]: "var(--spectrum-global-color-static-magenta-400)",
-  [Roles.PUBLIC]: "var(--spectrum-global-color-static-yellow-400)",
+  [Roles.ADMIN]: "var(--spectrum-global-color-static-red-400)",
+  [Roles.POWER]: "var(--spectrum-global-color-static-orange-400)",
+  [Roles.BASIC]: "var(--spectrum-global-color-static-green-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)"
+  )
 }