Update page button styles

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

@@ -21,7 +21,7 @@
   if (!$store.currentPageName)
     store.setCurrentPage($params.page ? $params.page : "main")
 
-  const changePage = id => {
+  const changePage = (id) => {
     store.setCurrentPage(id)
     $goto(`./${id}/page-layout`)
   }
@@ -43,20 +43,19 @@
 
   button {
     cursor: pointer;
-    padding: 0px 16px;
-    height: 36px;
+    padding: 0 var(--spacing-m);
+    height: 32px;
     text-align: center;
     background: #ffffff;
     color: var(--grey-7);
     border-radius: 5px;
-    font-family: inter;
-    font-size: 14px;
-    font-weight: 400;
+    font-size: var(--font-size-xs);
+    font-weight: 500;
     transition: all 0.3s;
     text-rendering: optimizeLegibility;
     border: none !important;
-    transition: 0.2s;
     outline: none;
+    font-family: var(--font-sans);
   }
 
   .active {

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

@@ -1,193 +0,0 @@
-<script>
-  import ComponentsHierarchy from "./ComponentsHierarchy.svelte"
-  import ComponentsHierarchyChildren from "./ComponentsHierarchyChildren.svelte"
-  import PageLayout from "./PageLayout.svelte"
-  import PagesList from "./PagesList.svelte"
-  import { store } from "builderStore"
-  import NewScreenModal from "./NewScreenModal.svelte"
-  import CurrentItemPreview from "./AppPreview/CurrentItemPreview.svelte"
-  import SettingsView from "./SettingsView.svelte"
-  import ComponentsPaneSwitcher from "./ComponentsPaneSwitcher.svelte"
-  import ConfirmDialog from "components/common/ConfirmDialog.svelte"
-  import { last } from "lodash/fp"
-  import { AddIcon } from "components/common/Icons"
-  import { Modal } from "@budibase/bbui"
-
-  let newScreenPicker
-  let confirmDeleteDialog
-  let componentToDelete = ""
-  let settingsView
-  let modal
-
-  const settings = () => {
-    settingsView.show()
-  }
-
-  const lastPartOfName = c => (c ? last(c.split("/")) : "")
-</script>
-
-<div class="root">
-  <div class="ui-nav">
-    <div class="pages-list-container">
-      <div class="nav-header">
-        <span class="navigator-title">Navigator</span>
-        <span class="components-nav-page">Pages</span>
-      </div>
-      <div class="nav-items-container">
-        <PagesList />
-      </div>
-    </div>
-    <PageLayout layout={$store.pages[$store.currentPageName]} />
-    <div class="components-list-container">
-      <div class="nav-group-header">
-        <span class="components-nav-header" style="margin-top: 0;">
-          Screens
-        </span>
-        <div>
-          <button on:click={modal.show}>
-            <AddIcon />
-          </button>
-        </div>
-      </div>
-      <div class="nav-items-container">
-        <ComponentsHierarchy screens={$store.screens} />
-      </div>
-    </div>
-  </div>
-  <div class="preview-pane">
-    <CurrentItemPreview />
-  </div>
-  {#if $store.currentFrontEndType === 'screen' || $store.currentFrontEndType === 'page'}
-    <div class="components-pane">
-      <ComponentsPaneSwitcher />
-    </div>
-  {/if}
-</div>
-
-<Modal bind:this={modal}>
-  <NewScreenModal />
-</Modal>
-
-<SettingsView bind:this={settingsView} />
-
-<style>
-  button {
-    cursor: pointer;
-    outline: none;
-    border: none;
-    border-radius: 5px;
-    width: 20px;
-    padding-bottom: 10px;
-    display: flex;
-    justify-content: center;
-    align-items: center;
-    padding: 0;
-  }
-
-  .root {
-    display: grid;
-    grid-template-columns: 300px 1fr 300px;
-    height: 100%;
-    width: 100%;
-    background: var(--grey-1);
-  }
-
-  .ui-nav {
-    grid-column: 1;
-    background-color: var(--white);
-    height: calc(100vh - 49px);
-    padding: 0;
-    display: flex;
-    flex-direction: column;
-  }
-
-  .preview-pane {
-    grid-column: 2;
-    margin: 40px;
-    background: #fff;
-    border-radius: 5px;
-    box-shadow: 0 0px 6px rgba(0, 0, 0, 0.05);
-  }
-
-  .components-pane {
-    grid-column: 3;
-    background-color: var(--white);
-    height: calc(100vh - 49px);
-  }
-
-  .components-nav-page {
-    font-size: 13px;
-    color: var(--ink);
-    text-transform: uppercase;
-    padding-left: 20px;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-  }
-
-  .components-nav-header {
-    font-size: 13px;
-    color: var(--ink);
-    text-transform: uppercase;
-    margin-top: 20px;
-    font-weight: 600;
-    opacity: 0.4;
-  }
-
-  .nav-header {
-    display: flex;
-    flex-direction: column;
-    margin-top: 20px;
-  }
-
-  .nav-items-container {
-    padding: 1rem 0rem 0rem 0rem;
-  }
-
-  .nav-group-header {
-    display: flex;
-    padding: 0px 20px 0px 20px;
-    font-size: 0.9rem;
-    font-weight: bold;
-    justify-content: space-between;
-    align-items: center;
-  }
-
-  .nav-group-header > div:nth-child(1) {
-    padding: 0rem 0.5rem 0rem 0rem;
-    vertical-align: bottom;
-    grid-column-start: icon;
-    margin-right: 5px;
-  }
-
-  .nav-group-header > span:nth-child(3) {
-    margin-left: 5px;
-    vertical-align: bottom;
-    grid-column-start: title;
-    margin-top: auto;
-  }
-
-  .nav-group-header > div:nth-child(3) {
-    vertical-align: bottom;
-    grid-column-start: button;
-    cursor: pointer;
-    color: var(--blue);
-  }
-
-  .nav-group-header > div:nth-child(3):hover {
-    color: var(--blue);
-  }
-
-  .navigator-title {
-    font-size: 14px;
-    color: var(--ink);
-    font-weight: 600;
-    text-transform: uppercase;
-    padding: 0 20px 20px 20px;
-    line-height: 1rem !important;
-  }
-
-  .components-list-container {
-    padding: 10px 0px 0 0;
-  }
-</style>