Code review updates

2022-05-18 17:22:58 +01:00 · 2022-05-18 17:22:58 +01:00 · 3a0d1460b6
parent 346c5426eb
commit 3a0d1460b6
10 changed files with 426 additions and 234 deletions
--- a/packages/bbui/src/Layout/Layout.svelte
+++ b/packages/bbui/src/Layout/Layout.svelte
@ -40,6 +40,10 @@
    padding-left: var(--spacing-xl);
    padding-right: var(--spacing-xl);
  }
+  .paddingX-XXL {
+    padding-left: calc(var(--spacing-xl) * 2);
+    padding-right: calc(var(--spacing-xl) * 2);
+  }
  .paddingY-S {
    padding-top: var(--spacing-s);
    padding-bottom: var(--spacing-s);
@ -56,6 +60,10 @@
    padding-top: var(--spacing-xl);
    padding-bottom: var(--spacing-xl);
  }
+  .paddingY-XXL {
+    padding-top: calc(var(--spacing-xl) * 2);
+    padding-bottom: calc(var(--spacing-xl) * 2);
+  }
  .gap-XXS {
    grid-gap: var(--spacing-xs);
  }
--- a/packages/bbui/src/Layout/Page.svelte
+++ b/packages/bbui/src/Layout/Page.svelte
@ -1,9 +1,10 @@
 <script>
  export let wide = false
  export let maxWidth = "80ch"
+  export let noPadding = false
 </script>

-<div style="--max-width: {maxWidth}" class:wide>
+<div style="--max-width: {maxWidth}" class:wide class:noPadding>
  <slot />
 </div>

@ -23,4 +24,9 @@
    max-width: none;
    margin: 0;
  }
+
+  .noPadding {
+    padding: 0px;
+    margin: 0px;
+  }
 </style>
--- a/packages/builder/src/components/common/AppLockModal.svelte
+++ b/packages/builder/src/components/common/AppLockModal.svelte
@ -28,8 +28,6 @@
  $: lockedByHeading =
    lockedBy && lockedByYou ? "Locked by you" : `Locked by ${lockIdentifer}`

-  $: lockExpiry = getExpiryDuration(app)
-
  const getExpiryDuration = app => {
    if (!app?.lockedBy?.lockedAt) {
      return -1
@ -86,12 +84,12 @@
      between your team.
    </p>

-    {#if lockedByYou && lockExpiry > 0}
+    {#if lockedByYou && getExpiryDuration(app) > 0}
      <span class="lock-expiry-body">
        {processStringSync(
          "This lock will expire in {{ duration time 'millisecond' }} from now",
          {
-            time: lockExpiry,
+            time: getExpiryDuration(app),
          }
        )}
      </span>
--- a/packages/builder/src/components/common/DashCard.svelte
+++ b/packages/builder/src/components/common/DashCard.svelte
@ -10,20 +10,13 @@
 </script>

 <div class="dash-card" data-cy={dataCy}>
-  <div
-    class={actionDefined ? "dash-card-header active" : "dash-card-header"}
-    on:click={() => {
-      if (actionDefined) {
-        action()
-      }
-    }}
-  >
+  <div class="dash-card-header" class:active={actionDefined} on:click={action}>
    <span class="dash-card-title">
      <Detail size="M">{title}</Detail>
    </span>
    <span class="dash-card-action">
      {#if actionDefined}
-        <Icon name={actionIcon ? actionIcon : "ChevronRight"} />
+        <Icon name={actionIcon || "ChevronRight"} />
      {/if}
    </span>
  </div>
@ -36,7 +29,6 @@
  .dash-card {
    background: var(--spectrum-alias-background-color-primary);
    border-radius: var(--border-radius-s);
-    border: 1px solid var(--spectrum-global-color-gray-300);
    overflow: hidden;
    min-height: 150px;
  }
--- a/packages/builder/src/pages/builder/portal/_layout.svelte
+++ b/packages/builder/src/pages/builder/portal/_layout.svelte
@ -321,7 +321,7 @@

    .mobile-toggle,
    .user-dropdown {
-      flex: 1 1 0;
+      flex: 0 1 0;
    }

    /* Reduce BBUI page padding */
--- a/packages/builder/src/pages/builder/portal/apps/index.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/index.svelte
@ -10,7 +10,6 @@
    notifications,
    Body,
    Search,
-    Divider,
    Helpers,
  } from "@budibase/bbui"
  import TemplateDisplay from "components/common/TemplateDisplay.svelte"
@ -66,6 +65,9 @@
    app?.name?.toLowerCase().includes(searchTerm.toLowerCase())
  )

+  $: lockedApps = filteredApps.filter(app => app?.lockedYou || app?.lockedOther)
+  $: unlocked = lockedApps?.length == 0
+
  const enrichApps = (apps, user, sortBy) => {
    const enrichedApps = apps.map(app => ({
      ...app,
@ -178,10 +180,6 @@
    }
  }

-  const previewApp = app => {
-    window.open(`/${app.devId}`)
-  }
-
  const appOverview = app => {
    $goto(`../overview/${app.devId}`)
  }
@ -348,7 +346,7 @@
      {/if}

      {#if enrichedApps.length}
-        <Layout noPadding gap="S">
+        <Layout noPadding gap="L">
          <div class="title">
            <div class="buttons">
              <Button
@ -414,8 +412,8 @@
              </div>
            {/if}
          </div>
-          <Divider size="S" />
-          <div class="appTable">
+
+          <div class="appTable" class:unlocked>
            {#each filteredApps as app (app.appId)}
              <AppRow
                {copyAppId}
@ -428,7 +426,6 @@
                {exportApp}
                {deleteApp}
                {updateApp}
-                {previewApp}
                {appOverview}
              />
            {/each}
@ -490,6 +487,9 @@
 <ChooseIconModal app={selectedApp} bind:this={iconModal} />

 <style>
+  .appTable {
+    border-top: var(--border-light);
+  }
  .app-actions {
    display: flex;
  }
@ -533,6 +533,11 @@
    grid-template-columns: 1fr 1fr 1fr 1fr auto;
    align-items: center;
  }
+
+  .appTable.unlocked {
+    grid-template-columns: 1fr 1fr auto 1fr auto;
+  }
+
  .appTable :global(> div) {
    height: 70px;
    display: grid;
--- a/packages/builder/src/pages/builder/portal/apps/templates.svelte
+++ b/packages/builder/src/pages/builder/portal/apps/templates.svelte
@ -1,6 +1,6 @@
 <script>
  import { goto } from "@roxi/routify"
-  import { Layout, Page, notifications, Button } from "@budibase/bbui"
+  import { Layout, Page, notifications, ActionButton } from "@budibase/bbui"
  import TemplateDisplay from "components/common/TemplateDisplay.svelte"
  import { onMount } from "svelte"
  import { templates } from "stores/portal"
@ -25,16 +25,15 @@
 <Page wide>
  <Layout noPadding gap="XL">
    <span>
-      <Button
-        quiet
+      <ActionButton
        secondary
-        icon={"ChevronLeft"}
+        icon={"ArrowLeft"}
        on:click={() => {
          $goto("../")
        }}
      >
        Back
-      </Button>
+      </ActionButton>
    </span>
    {#if loaded && $templates?.length}
      <TemplateDisplay templates={$templates} />
--- a/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/[application]/index.svelte
@ -4,12 +4,18 @@
    Layout,
    Page,
    Button,
+    ActionButton,
    ButtonGroup,
    Heading,
    Tab,
    Tabs,
    notifications,
    ProgressCircle,
+    Input,
+    ActionMenu,
+    MenuItem,
+    Icon,
+    Helpers,
  } from "@budibase/bbui"
  import OverviewTab from "../_components/OverviewTab.svelte"
  import SettingsTab from "../_components/SettingsTab.svelte"
@ -20,12 +26,17 @@
  import { AppStatus } from "constants"
  import AppLockModal from "components/common/AppLockModal.svelte"
  import EditableIcon from "components/common/EditableIcon.svelte"
+  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
  import { checkIncomingDeploymentStatus } from "components/deploy/utils"
  import { onDestroy, onMount } from "svelte"

  export let application

  let promise = getPackage()
+  let loaded = false
+  let deletionModal
+  let unpublishModal
+  let appName = ""

  // App
  $: filteredApps = $apps.filter(app => app.devId === application)
@ -74,6 +85,7 @@
    try {
      const pkg = await API.fetchAppPackage(application)
      await store.actions.initialise(pkg)
+      loaded = true
      return pkg
    } catch (error) {
      notifications.error(`Error initialising app: ${error?.message}`)
@ -121,6 +133,58 @@
    $goto(`../../../app/${app.devId}`)
  }

+  const copyAppId = async app => {
+    await Helpers.copyToClipboard(app.prodId)
+    notifications.success("App ID copied to clipboard.")
+  }
+
+  const exportApp = app => {
+    const id = isPublished ? app.prodId : app.devId
+    const appName = encodeURIComponent(app.name)
+    window.location = `/api/backups/export?appId=${id}&appname=${appName}`
+  }
+
+  const unpublishApp = app => {
+    selectedApp = app
+    unpublishModal.show()
+  }
+
+  const confirmUnpublishApp = async () => {
+    if (!selectedApp) {
+      return
+    }
+    try {
+      analytics.captureEvent(Events.APP.UNPUBLISHED, {
+        appId: selectedApp.appId,
+      })
+      await API.unpublishApp(selectedApp.prodId)
+      await apps.load()
+      notifications.success("App unpublished successfully")
+    } catch (err) {
+      notifications.error("Error unpublishing app")
+    }
+  }
+
+  const deleteApp = app => {
+    selectedApp = app
+    deletionModal.show()
+  }
+
+  const confirmDeleteApp = async () => {
+    if (!selectedApp) {
+      return
+    }
+    try {
+      await API.deleteApp(selectedApp?.devId)
+      backToAppList()
+      notifications.success("App deleted successfully")
+    } catch (err) {
+      notifications.error("Error deleting app")
+    }
+    selectedApp = null
+    appName = null
+  }
+
  onDestroy(() => {
    store.actions.reset()
  })
@ -130,6 +194,7 @@
      if (!apps.length) {
        await apps.load()
      }
+      await API.syncApp(application)
      deployments = await fetchDeployments()
    } catch (error) {
      notifications.error("Error initialising app overview")
@ -137,95 +202,155 @@
  })
 </script>

-<Page wide>
-  <Layout noPadding gap="XL">
-    <span>
-      <Button quiet secondary icon={"ChevronLeft"} on:click={backToAppList}>
-        Back
-      </Button>
-    </span>
+<span class="overview-wrap">
+  <Page wide noPadding>
    {#await promise}
+      <span class="page-header">
+        <ActionButton secondary icon={"ArrowLeft"} on:click={backToAppList}>
+          Back
+        </ActionButton>
+      </span>
      <div class="loading">
        <ProgressCircle size="XL" />
      </div>
    {:then _}
-      <div class="overview-header">
-        <div class="app-title">
-          <div class="app-logo">
-            <div
-              class="app-icon"
-              style="color: {selectedApp?.icon?.color || ''}"
-            >
-              <EditableIcon
-                app={selectedApp}
-                size="XL"
-                name={selectedApp?.icon?.name || "Apps"}
-              />
+      <Layout paddingX="XXL" paddingY="XXL" gap="XL">
+        <span class="page-header" class:loaded>
+          <ActionButton secondary icon={"ArrowLeft"} on:click={backToAppList}>
+            Back
+          </ActionButton>
+        </span>
+        <div class="overview-header">
+          <div class="app-title">
+            <div class="app-logo">
+              <div
+                class="app-icon"
+                style="color: {selectedApp?.icon?.color || ''}"
+              >
+                <EditableIcon
+                  app={selectedApp}
+                  size="XL"
+                  name={selectedApp?.icon?.name || "Apps"}
+                />
+              </div>
+            </div>
+            <div class="app-details">
+              <Heading size="M">{selectedApp?.name}</Heading>
+              <div class="app-url">{appUrl}</div>
            </div>
          </div>
-          <div class="app-details">
-            <Heading size="M">{selectedApp?.name}</Heading>
-            <div class="app-url">{appUrl}</div>
+          <div class="header-right">
+            <AppLockModal app={selectedApp} />
+            <ButtonGroup gap="XS">
+              <Button
+                size="M"
+                quiet
+                secondary
+                icon="Globe"
+                disabled={!isPublished}
+                on:click={viewApp}
+                dataCy="view-app"
+              >
+                View app
+              </Button>
+              <Button
+                size="M"
+                cta
+                icon="Edit"
+                disabled={lockedBy && !lockedByYou}
+                on:click={() => {
+                  editApp(selectedApp)
+                }}
+              >
+                <span>Edit</span>
+              </Button>
+            </ButtonGroup>
+            <ActionMenu align="right" dataCy="app-overview-menu-popover">
+              <span slot="control" class="app-overview-actions-icon">
+                <Icon hoverable name="More" />
+              </span>
+              <MenuItem on:click={() => exportApp(selectedApp)} icon="Download">
+                Export
+              </MenuItem>
+              {#if isPublished}
+                <MenuItem
+                  on:click={() => unpublishApp(selectedApp)}
+                  icon="GlobeRemove"
+                >
+                  Unpublish
+                </MenuItem>
+                <MenuItem on:click={() => copyAppId(selectedApp)} icon="Copy">
+                  Copy App ID
+                </MenuItem>
+              {/if}
+              {#if !isPublished}
+                <MenuItem on:click={() => deleteApp(selectedApp)} icon="Delete">
+                  Delete
+                </MenuItem>
+              {/if}
+            </ActionMenu>
          </div>
        </div>
-        <div class="header-right">
-          <AppLockModal app={selectedApp} />
-          <ButtonGroup gap="XS">
-            <Button
-              size="M"
-              secondary
-              icon="Globe"
-              disabled={!isPublished}
-              on:click={viewApp}
-              dataCy="view-app"
-            >
-              View app
-            </Button>
-            <Button
-              size="M"
-              cta
-              icon="Edit"
-              disabled={lockedBy && !lockedByYou}
-              on:click={() => {
-                editApp(selectedApp)
-              }}
-            >
-              <span>Edit</span>
-            </Button>
-          </ButtonGroup>
-        </div>
+      </Layout>
+      <div class="tab-wrap">
+        <Tabs
+          selected={selectedTab}
+          noPadding
+          on:select={e => {
+            selectedTab = e.detail
+          }}
+        >
+          <Tab title="Overview">
+            <OverviewTab
+              app={selectedApp}
+              deployments={latestDeployments}
+              navigateTab={handleTabChange}
+            />
+          </Tab>
+          {#if false}
+            <Tab title="Automation History">
+              <div class="container">Automation History contents</div>
+            </Tab>
+            <Tab title="Backups">
+              <div class="container">Backups contents</div>
+            </Tab>
+          {/if}
+          <Tab title="Settings">
+            <SettingsTab app={selectedApp} />
+          </Tab>
+        </Tabs>
      </div>
-      <Tabs
-        selected={selectedTab}
-        noPadding
-        on:select={e => {
-          selectedTab = e.detail
-        }}
+      <ConfirmDialog
+        bind:this={deletionModal}
+        title="Confirm deletion"
+        okText="Delete app"
+        onOk={confirmDeleteApp}
+        onCancel={() => (appName = null)}
+        disabled={appName !== selectedApp?.name}
      >
-        <Tab title="Overview">
-          <OverviewTab
-            app={selectedApp}
-            deployments={latestDeployments}
-            navigateTab={handleTabChange}
-          />
-        </Tab>
-        {#if false}
-          <Tab title="Automation History">
-            <div class="container">Automation History contents</div>
-          </Tab>
-          <Tab title="Backups">
-            <div class="container">Backups contents</div>
-          </Tab>
-        {/if}
-        <Tab title="Settings">
-          <SettingsTab app={selectedApp} />
-        </Tab>
-      </Tabs>
+        Are you sure you want to delete the app <b>{selectedApp?.name}</b>?
+
+        <p>Please enter the app name below to confirm.</p>
+        <Input
+          bind:value={appName}
+          data-cy="delete-app-confirmation"
+          placeholder={selectedApp?.name}
+        />
+      </ConfirmDialog>
+      <ConfirmDialog
+        bind:this={unpublishModal}
+        title="Confirm unpublish"
+        okText="Unpublish app"
+        onOk={confirmUnpublishApp}
+        dataCy={"unpublish-modal"}
+      >
+        Are you sure you want to unpublish the app <b>{selectedApp?.name}</b>?
+      </ConfirmDialog>
    {:catch error}
      <p>Something went wrong: {error.message}</p>
    {/await}
-  </Layout>
-</Page>
+  </Page>
+</span>

 <style>
  .app-url {
@ -234,11 +359,35 @@
  .loading {
    display: flex;
    justify-content: center;
+    align-items: center;
+    flex: 1;
  }
  .overview-header {
    display: flex;
    justify-content: space-between;
  }
+
+  .page-header.loaded {
+    padding: 0px;
+  }
+
+  .overview-wrap :global(> div > .container),
+  .tab-wrap :global(.spectrum-Tabs) {
+    background-color: var(--background);
+    background-clip: padding-box;
+  }
+
+  @media (max-width: 1000px) {
+    .overview-header {
+      flex-direction: column;
+      gap: var(--spacing-l);
+    }
+  }
+  @media (max-width: 640px) {
+    .overview-wrap :global(.content > *) {
+      padding: calc(var(--spacing-xl) * 1.5) !important;
+    }
+  }
  .app-title {
    display: flex;
    gap: var(--spacing-m);
@ -252,4 +401,13 @@
    line-height: 1em;
    margin-bottom: var(--spacing-s);
  }
+  .tab-wrap :global(.spectrum-Tabs) {
+    padding-left: calc(var(--spacing-xl) * 2);
+    padding-right: calc(var(--spacing-xl) * 2);
+  }
+  .page-header {
+    padding-left: calc(var(--spacing-xl) * 2);
+    padding-right: calc(var(--spacing-xl) * 2);
+    padding-top: calc(var(--spacing-xl) * 2);
+  }
 </style>
--- a/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/OverviewTab.svelte
@ -1,7 +1,14 @@
 <script>
  import DashCard from "components/common/DashCard.svelte"
  import { AppStatus } from "constants"
-  import { Icon, Heading, Link, Avatar, notifications } from "@budibase/bbui"
+  import {
+    Icon,
+    Heading,
+    Link,
+    Avatar,
+    notifications,
+    Layout,
+  } from "@budibase/bbui"
  import { store } from "builderStore"
  import clientPackage from "@budibase/client/package.json"
  import { processStringSync } from "@budibase/string-templates"
@ -41,132 +48,136 @@
 </script>

 <div class="overview-tab">
-  <div class="top">
-    <DashCard title={"App Status"} dataCy={"app-status"}>
-      <div class="status-content">
-        <div class="status-display">
-          {#if isPublished}
-            <Icon name="GlobeCheck" size="XL" disabled={false} />
-            <span>Published</span>
-          {:else}
-            <Icon name="GlobeStrike" size="XL" disabled={true} />
-            <span class="disabled"> Unpublished </span>
-          {/if}
-        </div>
-
-        <p class="status-text">
-          {#if deployments?.length}
-            {processStringSync(
-              "Last published {{ duration time 'millisecond' }} ago",
-              {
-                time:
-                  new Date().getTime() -
-                  new Date(deployments[0].updatedAt).getTime(),
-              }
-            )}
-          {/if}
-          {#if !deployments?.length}
-            -
-          {/if}
-        </p>
-      </div>
-    </DashCard>
-    <DashCard title={"Last Edited"} dataCy={"edited-by"}>
-      <div class="last-edited-content">
-        {#await userPromise}
-          <Avatar size="M" initials={"-"} />
-        {:then _}
-          <div class="updated-by">
-            {#if appEditor}
-              <Avatar size="M" initials={getInitials(appEditor)} />
-              <div class="editor-name">
-                {appEditor._id === $auth.user._id ? "You" : appEditorText}
-              </div>
+  <Layout paddingX="XXL" paddingY="XXL">
+    <div class="top">
+      <DashCard title={"App Status"} dataCy={"app-status"}>
+        <div class="status-content">
+          <div class="status-display">
+            {#if isPublished}
+              <Icon name="GlobeCheck" size="XL" disabled={false} />
+              <span>Published</span>
+            {:else}
+              <Icon name="GlobeStrike" size="XL" disabled={true} />
+              <span class="disabled"> Unpublished </span>
            {/if}
          </div>
-        {:catch error}
-          <p>Could not fetch user: {error.message}</p>
-        {/await}
-        <p class="last-edit-text">
-          {#if app}
-            {processStringSync(
-              "Last edited {{ duration time 'millisecond' }} ago",
-              {
-                time: new Date().getTime() - new Date(app?.updatedAt).getTime(),
-              }
-            )}
-          {/if}
-        </p>
-      </div>
-    </DashCard>
-    <DashCard
-      title={"App Version"}
-      showIcon={true}
-      action={() => {
-        navigateTab("Settings")
-      }}
-      dataCy={"app-version"}
-    >
-      <div class="version-content" data-cy={$store.version}>
-        <Heading size="XS">{$store.version}</Heading>
-        {#if updateAvailable}
-          <p class="version-status">
-            New version <strong>{clientPackage.version}</strong> is available -
-            <Link
-              on:click={() => {
-                if (typeof navigateTab === "function") {
-                  navigateTab("Settings")
+
+          <p class="status-text">
+            {#if deployments?.length}
+              {processStringSync(
+                "Last published {{ duration time 'millisecond' }} ago",
+                {
+                  time:
+                    new Date().getTime() -
+                    new Date(deployments[0].updatedAt).getTime(),
                }
-              }}
-            >
-              Update
-            </Link>
+              )}
+            {/if}
+            {#if !deployments?.length}
+              -
+            {/if}
          </p>
-        {:else}
-          <p class="version-status">You're running the latest!</p>
-        {/if}
-      </div>
-    </DashCard>
-  </div>
-  {#if false}
-    <div class="bottom">
-      <DashCard
-        title={"Automation History"}
-        action={() => {
-          navigateTab("Automation History")
-        }}
-        dataCy={"automation-history"}
-      >
-        <div class="automation-content">
-          <div class="automation-metrics">
-            <div class="succeeded">
-              <Heading size="XL">0</Heading>
-              <div class="metric-info">
-                <Icon name="CheckmarkCircle" />
-                Success
-              </div>
+        </div>
+      </DashCard>
+      <DashCard title={"Last Edited"} dataCy={"edited-by"}>
+        <div class="last-edited-content">
+          {#await userPromise}
+            <Avatar size="M" initials={"-"} />
+          {:then _}
+            <div class="updated-by">
+              {#if appEditor}
+                <Avatar size="M" initials={getInitials(appEditor)} />
+                <div class="editor-name">
+                  {appEditor._id === $auth.user._id ? "You" : appEditorText}
+                </div>
+              {/if}
            </div>
-            <div class="failed">
-              <Heading size="XL">0</Heading>
-              <div class="metric-info">
-                <Icon name="Alert" />
-                Error
-              </div>
-            </div>
-          </div>
+          {:catch error}
+            <p>Could not fetch user: {error.message}</p>
+          {/await}
+          <p class="last-edit-text">
+            {#if app}
+              {processStringSync(
+                "Last edited {{ duration time 'millisecond' }} ago",
+                {
+                  time:
+                    new Date().getTime() - new Date(app?.updatedAt).getTime(),
+                }
+              )}
+            {/if}
+          </p>
        </div>
      </DashCard>
      <DashCard
-        title={"Backups"}
+        title={"App Version"}
+        showIcon={true}
        action={() => {
-          navigateTab("Backups")
+          navigateTab("Settings")
        }}
-        dataCy={"backups"}
+        dataCy={"app-version"}
      >
-        <div class="backups-content">test</div>
+        <div class="version-content" data-cy={$store.version}>
+          <Heading size="XS">{$store.version}</Heading>
+          {#if updateAvailable}
+            <p class="version-status">
+              New version <strong>{clientPackage.version}</strong> is available
+              -
+              <Link
+                on:click={() => {
+                  if (typeof navigateTab === "function") {
+                    navigateTab("Settings")
+                  }
+                }}
+              >
+                Update
+              </Link>
+            </p>
+          {:else}
+            <p class="version-status">You're running the latest!</p>
+          {/if}
+        </div>
      </DashCard>
    </div>
-  {/if}
+    {#if false}
+      <div class="bottom">
+        <DashCard
+          title={"Automation History"}
+          action={() => {
+            navigateTab("Automation History")
+          }}
+          dataCy={"automation-history"}
+        >
+          <div class="automation-content">
+            <div class="automation-metrics">
+              <div class="succeeded">
+                <Heading size="XL">0</Heading>
+                <div class="metric-info">
+                  <Icon name="CheckmarkCircle" />
+                  Success
+                </div>
+              </div>
+              <div class="failed">
+                <Heading size="XL">0</Heading>
+                <div class="metric-info">
+                  <Icon name="Alert" />
+                  Error
+                </div>
+              </div>
+            </div>
+          </div>
+        </DashCard>
+        <DashCard
+          title={"Backups"}
+          action={() => {
+            navigateTab("Backups")
+          }}
+          dataCy={"backups"}
+        >
+          <div class="backups-content">test</div>
+        </DashCard>
+      </div>
+    {/if}
+  </Layout>
 </div>

 <style>
@ -180,6 +191,23 @@
    grid-gap: var(--spacing-xl);
    grid-template-columns: repeat(auto-fill, minmax(30%, 1fr));
  }
+
+  @media (max-width: 1000px) {
+    .overview-tab .top {
+      display: grid;
+      grid-gap: var(--spacing-xl);
+      grid-template-columns: 1fr 1fr;
+    }
+  }
+
+  @media (max-width: 800px) {
+    .overview-tab .top {
+      display: grid;
+      grid-gap: var(--spacing-xl);
+      grid-template-columns: 1fr;
+    }
+  }
+
  .overview-tab .bottom,
  .automation-metrics {
    display: grid;
--- a/packages/builder/src/pages/builder/portal/overview/_components/SettingsTab.svelte
+++ b/packages/builder/src/pages/builder/portal/overview/_components/SettingsTab.svelte
@ -28,10 +28,10 @@

 <div class="settings-tab">
  <Page wide={false}>
-    <Layout gap="XL" noPadding>
+    <Layout gap="XL" paddingY="XXL" paddingX="">
      <span class="details-section">
        <Layout gap="XS" noPadding>
-          <Heading size="S">Name and Url</Heading>
+          <Heading size="S">Name and URL</Heading>
          <Divider />
          <Body>
            <div class="app-details">
@ -60,8 +60,8 @@
        </Layout>
      </span>
      <span class="version-section">
-        <Layout gap="XS" noPadding>
-          <Heading size="S">App Version</Heading>
+        <Layout gap="XS" paddingY="XXL" paddingX="">
+          <Heading size="S">App version</Heading>
          <Divider />
          <Body>
            {#if updateAvailable}
@ -76,28 +76,26 @@
                <strong>{$store.version}</strong>. You're running the latest!
              </p>
            {/if}
-            <p>
-              Updates can contain new features, performance improvements and bug
-              fixes.
-            </p>
+
+            Updates can contain new features, performance improvements and bug
+            fixes.
+
            <div class="page-action">
-              <Button cta on:click={versionModal.show()}>Update App</Button>
+              <Button cta on:click={versionModal.show()}>Update app</Button>
            </div>
          </Body>
        </Layout>
      </span>
      <span class="selfhost-section">
-        <Layout gap="XS" noPadding>
+        <Layout gap="XS" paddingY="XXL" paddingX="">
          <Heading size="S">Self-host Budibase</Heading>
          <Divider />
          <Body>
-            <p>
-              Self-host Budibase for free to get unlimited apps and more - and
-              it only takes a few minutes!
-            </p>
+            Self-host Budibase for free to get unlimited apps and more - and it
+            only takes a few minutes!
            <div class="page-action">
              <Button
-                cta
+                secondary
                on:click={() => {
                  window.open(selfHostPath, "_blank")
                }}>Self-host Budibase</Button