Merge pull request #1564 from Budibase/ak-fixes

Proper font support and multiple fixes

packages/bbui/src/ActionButton/ActionButton.svelte

@@ -11,6 +11,7 @@
   export let icon = ""
   export let dataCy = null
   export let size = "M"
+  export let active = false
 
   function longPress(element) {
     if (!longPressable) return
@@ -40,6 +41,7 @@
   class:spectrum-ActionButton--emphasized={emphasized}
   class:is-selected={selected}
   class="spectrum-ActionButton spectrum-ActionButton--size{size}"
+  class:active
   {disabled}
   on:longPress
   on:click|preventDefault
@@ -67,3 +69,10 @@
     <span class="spectrum-ActionButton-label"><slot /></span>
   {/if}
 </button>
+
+<style>
+  .active,
+  .active svg {
+    color: var(--spectrum-global-color-blue-600);
+  }
+</style>

packages/bbui/src/Avatar/Avatar.svelte

@@ -39,7 +39,7 @@
     color: white;
     display: grid;
     place-items: center;
-    font-weight: 500;
+    font-weight: 600;
     background: #3aab87;
     border-radius: 50%;
     overflow: hidden;

packages/bbui/src/DetailSummary/DetailSummary.svelte

@@ -50,7 +50,7 @@
   .name {
     text-align: left;
     font-size: 14px;
-    font-weight: 500;
+    font-weight: 600;
     letter-spacing: 0.14px;
     color: var(--ink);
     flex: 1 1 auto;

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

@@ -285,9 +285,6 @@
       --spectrum-global-dimension-font-size-400
     );
   }
-  .container * {
-    font-family: "Inter", sans-serif !important;
-  }
 
   .gallery,
   .spectrum-Dropzone {
@@ -346,7 +343,7 @@
   .extension {
     color: var(--spectrum-global-color-gray-600);
     text-transform: uppercase;
-    font-weight: 500;
+    font-weight: 600;
     margin-bottom: 5px;
   }
 

packages/bbui/src/Modal/ModalContent.svelte

@@ -95,7 +95,7 @@
     overflow: visible;
   }
   .spectrum-Dialog-heading {
-    font-family: var(--spectrum-alias-body-text-font-family);
+    font-family: var(--font-sans);
   }
 
   .spectrum-Dialog-buttonGroup {

packages/bbui/src/Table/AttachmentRenderer.svelte

@@ -49,7 +49,7 @@
     border: 1px solid var(--spectrum-global-color-gray-300);
     border-radius: 2px;
     text-transform: uppercase;
-    font-weight: 500;
+    font-weight: 600;
     font-size: 11px;
   }
 </style>

packages/bbui/src/bbui.css

@@ -40,11 +40,6 @@
   --rounded-medium: 8px;
   --rounded-large: 16px;
 
-  --font-normal: "Inter";
-  --font-black: "Inter Black";
-  --font-bold: "Inter Bold";
-  --font-medium: "Inter Medium";
-  --font-light: "Inter Light";
   --font-sans: Source Sans Pro, -apple-system, BlinkMacSystemFont, Segoe UI, "Inter",
     "Helvetica Neue", Arial, "Noto Sans", sans-serif, "Apple Color Emoji",
     "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";

packages/builder/assets/bb-logo.svg

@@ -1,31 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.1.2, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 128 128" style="enable-background:new 0 0 128 128;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#393C44;}
-	.st1{fill:#FFFFFF;}
-</style>
-<g>
-	<path class="st0" d="M117.33,128H10.67C4.78,128,0,123.22,0,117.33V10.67C0,4.78,4.78,0,10.67,0h106.67
-		C123.22,0,128,4.78,128,10.67v106.67C128,123.22,123.22,128,117.33,128z"/>
-	<g>
-		<path class="st1" d="M75.94,32v27.84c3.14-3.38,7.07-5.07,11.79-5.07c2.8,0,5.37,0.54,7.7,1.63c2.33,1.09,4.32,2.55,5.97,4.39
-			c1.65,1.84,2.93,4.01,3.87,6.51c0.93,2.5,1.4,5.16,1.4,7.98c0,2.87-0.48,5.57-1.44,8.09c-0.96,2.52-2.3,4.72-4.02,6.58
-			c-1.72,1.87-3.75,3.34-6.08,4.43C92.8,95.46,90.28,96,87.58,96c-4.91,0-8.79-1.84-11.64-5.52v4.31H62.6V32H75.94z M92.74,75.5
-			c0-1.21-0.22-2.36-0.66-3.44c-0.44-1.08-1.06-2.03-1.84-2.84c-0.79-0.81-1.7-1.45-2.73-1.93c-1.03-0.48-2.16-0.72-3.39-0.72
-			c-1.18,0-2.28,0.23-3.32,0.68c-1.03,0.45-1.93,1.09-2.69,1.89c-0.76,0.81-1.38,1.75-1.84,2.84c-0.47,1.09-0.7,2.23-0.7,3.44
-			s0.22,2.34,0.66,3.4c0.44,1.06,1.06,1.98,1.84,2.76c0.79,0.78,1.71,1.41,2.76,1.89c1.06,0.48,2.17,0.72,3.35,0.72
-			c1.18,0,2.28-0.23,3.32-0.68c1.03-0.45,1.93-1.08,2.69-1.89c0.76-0.81,1.37-1.74,1.84-2.8C92.51,77.77,92.74,76.66,92.74,75.5z"/>
-	</g>
-	<g>
-		<path class="st1" d="M34.67,32v27.84c3.14-3.38,7.07-5.07,11.79-5.07c2.8,0,5.37,0.54,7.7,1.63c2.33,1.09,4.32,2.55,5.97,4.39
-			c1.65,1.84,2.93,4.01,3.87,6.51c0.93,2.5,1.4,5.16,1.4,7.98c0,2.87-0.48,5.57-1.44,8.09c-0.96,2.52-2.3,4.72-4.02,6.58
-			c-1.72,1.87-3.75,3.34-6.08,4.43C51.53,95.46,49.01,96,46.31,96c-4.91,0-8.79-1.84-11.64-5.52v4.31H21.33V32H34.67z M51.47,75.5
-			c0-1.21-0.22-2.36-0.66-3.44c-0.44-1.08-1.06-2.03-1.84-2.84c-0.79-0.81-1.7-1.45-2.73-1.93c-1.03-0.48-2.16-0.72-3.39-0.72
-			c-1.18,0-2.28,0.23-3.32,0.68c-1.03,0.45-1.93,1.09-2.69,1.89c-0.76,0.81-1.38,1.75-1.84,2.84c-0.47,1.09-0.7,2.23-0.7,3.44
-			s0.22,2.34,0.66,3.4c0.44,1.06,1.06,1.98,1.84,2.76c0.79,0.78,1.71,1.41,2.76,1.89c1.06,0.48,2.17,0.72,3.35,0.72
-			c1.18,0,2.28-0.23,3.32-0.68c1.03-0.45,1.93-1.08,2.69-1.89c0.76-0.81,1.37-1.74,1.84-2.8C51.24,77.77,51.47,76.66,51.47,75.5z"/>
-	</g>
-</g>
-</svg>

packages/builder/assets/budibase-logo.svg

@@ -1,44 +0,0 @@
-<?xml version="1.0" encoding="utf-8"?>
-<!-- Generator: Adobe Illustrator 24.1.3, SVG Export Plug-In . SVG Version: 6.00 Build 0)  -->
-<svg version="1.1" id="Layer_1" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
-	 viewBox="0 0 115 40" style="enable-background:new 0 0 115 40;" xml:space="preserve">
-<style type="text/css">
-	.st0{fill:#393C44;}
-	.st1{fill:#FFFFFF;}
-</style>
-<path class="st0" d="M111.16,40H3.91c-2.15,0-3.89-1.74-3.89-3.89V4.04c0-2.15,1.74-3.89,3.89-3.89h107.25
-	c2.15,0,3.89,1.74,3.89,3.89v32.07C115.05,38.26,113.31,40,111.16,40z"/>
-<path class="st1" d="M10.37,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
-	c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39H6.63V10.03H10.37z M10.97,20.98
-	c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
-	c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C12.26,20.14,11.56,20.37,10.97,20.98z"/>
-<path class="st1" d="M25.08,17.35v6.32c0,0.51,0.05,1.31,0.64,1.85c0.26,0.23,0.72,0.54,1.54,0.54c0.69,0,1.23-0.23,1.56-0.54
-	c0.54-0.51,0.62-1.28,0.62-1.85v-6.32h3.74v6.68c0,1.31-0.13,2.54-1.28,3.67c-1.31,1.28-3.23,1.49-4.59,1.49
-	c-1.41,0-3.31-0.21-4.62-1.49c-1.05-1.03-1.26-2.18-1.26-3.44v-6.91H25.08z"/>
-<path class="st1" d="M47.88,28.79h-3.74V27.4c-0.57,0.82-1.61,1.78-3.66,1.78c-1.71,0-2.96-0.54-3.97-1.57
-	c-1.19-1.18-1.82-2.83-1.82-4.61c0-1.9,0.7-3.47,1.82-4.53c1.01-0.95,2.44-1.54,4.02-1.54c1.27,0,2.67,0.41,3.61,1.67v-8.57h3.74
-	V28.79z M39.53,20.91c-0.54,0.51-0.9,1.26-0.9,2.18c0,0.85,0.36,1.59,0.9,2.11c0.57,0.54,1.28,0.8,1.93,0.8
-	c0.69,0,1.52-0.28,2.11-0.85c0.44-0.41,0.85-1.1,0.85-2.05c0-0.98-0.39-1.64-0.82-2.11c-0.59-0.62-1.28-0.85-2.08-0.85
-	C40.77,20.14,40.12,20.34,39.53,20.91z"/>
-<path class="st1" d="M52.32,10.3c1.21,0,2.16,0.95,2.16,2.16c0,1.21-0.95,2.16-2.16,2.16c-1.21,0-2.16-0.95-2.16-2.16
-	C50.17,11.25,51.12,10.3,52.32,10.3z M54.19,17.35v11.44h-3.74V17.35H54.19z"/>
-<path class="st1" d="M60.49,10.03v8.57c0.93-1.26,2.33-1.67,3.61-1.67c1.58,0,3.01,0.59,4.02,1.54c1.12,1.05,1.82,2.62,1.82,4.53
-	c0,1.78-0.62,3.42-1.82,4.61c-1.01,1.03-2.26,1.57-3.97,1.57c-2.05,0-3.09-0.95-3.66-1.78v1.39h-3.74V10.03H60.49z M61.06,20.98
-	c-0.44,0.46-0.82,1.13-0.82,2.11c0,0.95,0.41,1.64,0.85,2.05c0.59,0.57,1.41,0.85,2.11,0.85c0.64,0,1.36-0.26,1.93-0.8
-	c0.54-0.51,0.9-1.26,0.9-2.11c0-0.92-0.36-1.67-0.9-2.18c-0.59-0.57-1.23-0.77-1.98-0.77C62.34,20.14,61.65,20.37,61.06,20.98z"/>
-<path class="st1" d="M80.26,17.35H84v11.44h-3.74v-1.39c-1.01,1.54-2.46,1.77-3.42,1.77c-1.66,0-3.06-0.41-4.33-1.74
-	c-1.22-1.28-1.69-2.77-1.69-4.28c0-1.92,0.73-3.57,1.79-4.62c1.01-1,2.41-1.56,4.02-1.56c0.99,0,2.57,0.23,3.63,1.67V17.35z
-	 M75.57,20.96c-0.39,0.39-0.85,1.05-0.85,2.08c0,1.03,0.44,1.7,0.77,2.05c0.51,0.54,1.31,0.9,2.18,0.9c0.74,0,1.44-0.31,1.93-0.8
-	c0.49-0.46,0.9-1.18,0.9-2.16c0-0.82-0.31-1.59-0.85-2.11c-0.57-0.54-1.39-0.8-2.05-0.8C76.8,20.14,76.06,20.47,75.57,20.96z"/>
-<path class="st1" d="M93.21,20.26c-0.57-0.33-1.31-0.64-2.03-0.64c-0.39,0-0.82,0.1-1.05,0.33c-0.13,0.13-0.23,0.33-0.23,0.51
-	c0,0.26,0.18,0.41,0.36,0.51c0.26,0.15,0.64,0.23,1.1,0.39l0.98,0.31c0.64,0.21,1.31,0.46,1.9,1c0.67,0.62,0.9,1.31,0.9,2.18
-	c0,1.52-0.67,2.49-1.18,3.01c-1.13,1.13-2.52,1.31-3.72,1.31c-1.54,0-3.21-0.33-4.7-1.64l1.57-2.49c0.36,0.31,0.87,0.67,1.26,0.85
-	c0.51,0.26,1.05,0.36,1.54,0.36c0.23,0,0.82,0,1.16-0.26c0.23-0.18,0.39-0.46,0.39-0.74c0-0.21-0.08-0.46-0.41-0.67
-	c-0.26-0.15-0.59-0.26-1.13-0.41l-0.92-0.28c-0.67-0.21-1.36-0.57-1.85-1.05c-0.54-0.57-0.82-1.21-0.82-2.08
-	c0-1.1,0.44-2.03,1.1-2.65c1.03-0.95,2.41-1.16,3.47-1.16c1.7,0,2.88,0.44,3.8,0.98L93.21,20.26z"/>
-<path class="st1" d="M108.43,23.73h-8.55c0,0.62,0.23,1.44,0.69,1.95c0.57,0.62,1.34,0.72,1.9,0.72c0.54,0,1.1-0.1,1.49-0.33
-	c0.05-0.03,0.49-0.31,0.8-0.95l3.49,0.36c-0.51,1.62-1.54,2.47-2.21,2.88c-1.1,0.67-2.34,0.85-3.62,0.85
-	c-1.72,0-3.24-0.31-4.57-1.64c-1-1-1.72-2.52-1.72-4.42c0-1.64,0.59-3.34,1.75-4.52c1.39-1.39,3.11-1.64,4.39-1.64
-	c1.28,0,3.13,0.23,4.55,1.72c1.36,1.44,1.62,3.24,1.62,4.65V23.73z M105.03,21.48c-0.03-0.1-0.21-0.82-0.74-1.34
-	c-0.41-0.39-1-0.64-1.75-0.64c-0.95,0-1.52,0.39-1.87,0.74c-0.28,0.31-0.54,0.72-0.64,1.23H105.03z"/>
-</svg>

packages/builder/index.html

@@ -4,7 +4,12 @@
 	<meta charset='utf8'>
 	<meta name='viewport' content='width=device-width'>
 	<title>Budibase</title>
-	<link rel='icon' href='./src/favicon.ico'>
+	<link rel='icon' href='/src/favicon.ico'>
+	<link rel="preconnect" href="https://fonts.gstatic.com" />
+	<link
+		href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
+		rel="stylesheet"
+	/>
 </head>
 <body id="app">
 	<script type="module" src='/src/main.js'></script>

packages/builder/src/budibase.css

@@ -1,157 +0,0 @@
-/* Budibase Component Styles */
-
-
-.budibase__title {
-    font-weight: 900;
-    font-size: 42px;
-}
-
-.budibase__title--2 {
-    font-weight: 700;
-    font-size: 32px;
-}
-
-.budibase__title--3 {
-    font-weight: 700;
-    font-size: 24px;
-}
-
-.budibase__title--4 {
-    font-weight: 700;
-    font-size: 18px;
-}
-
-.budibase__label--big {
-    font-weight: 400;
-    font-size: 14px;
-    opacity: 0.6;
-    text-transform: uppercase;
-}
-
-.budibase__label--medium {
-    font-weight: 500;
-    font-size: 13px;
-    opacity: 0.6;
-    text-transform: uppercase;
-}
-
-.budibase__label--small {
-    font-weight: 500;
-    font-size: 10px;
-    opacity: 0.6;
-    text-transform: uppercase;
-}
-
-.budibase__sub-heading {
-    font-weight: 500;
-    font-size: 16px;
-    opacity: 0.6;
-}
-
-.budibase__nav-item {
-    cursor: pointer;
-    padding: 0 4px 0 2px;
-    height: 36px;
-    margin: 0px 0px 0px 0px;
-    border-radius: 5px;
-    display: flex;
-    align-items: center;
-    font-size: 14px;
-    transition: 0.2s;
-    border-top: var(--grey-1) .5px solid;
-}
-
-.budibase__nav-item.selected {
-    color: var(--ink);
-    background: var(--grey-2);
-}
-
-.budibase__nav-item:hover {
-    background: var(--grey-1);
-}
-
-.budibase__input {
-    height: 36px;
-    background-color: var(--grey-2);
-    border: none;
-    border-radius: 5px;
-    width: 100%;
-    text-align: left;
-    color: var(--ink);
-    font-size: 14px;
-    padding-left: 8px;
-    -moz-box-sizing: border-box; 
-    -webkit-box-sizing: border-box; 
-     box-sizing: border-box; 
-}
-
-.budibase__table {
-    border: 1px solid var(--grey-4);
-    background: #fff;
-    border-radius: 2px;
-}
-
-.budibase__table thead {
-    background: var(--blue-light);
-}
-
-.budibase__table thead > tr > th {
-    color: var(--ink);
-    text-transform: capitalize;
-    font-weight: 500;
-}
-
-.budibase__table tr {
-    border-bottom: 1px solid var(--grey-1);
-}
-
-.button--toggled {
-    background: var(--blue-light);
-    color: var(--grey-7);
-    width: 40px;
-    height: 40px;
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    font-size: 20px;
-}
-
-/* Table styles */
-.bb-table {
-    border-collapse: collapse;
-    border-spacing: 0;
-    width: 100%;
-    margin-bottom: var(--spacing-xl);
-}
-
-* + .bb-table { 
-    margin-top: var(--spacing-xl)
-}
-
-.bb-table th {
-    padding: var(--spacing-l) var(--spacing-m);
-    text-align: left;
-    vertical-align: bottom;
-}
-
-.bb-table td {
-    padding: var(--spacing-l) var(--spacing-m);
-    vertical-align: top;
-}
-
-.bb-table td > :last-child { margin-bottom: 0; }
-
-.bb__alert {
-    position: relative;
-    margin-bottom: var(--spacing-m);
-    padding: var(--spacing-l);
-}
-
-.bb__alert--danger {
-    background: #fef4f6;
-    color: #f0506e;
-}
-
-a {
-    text-decoration: none;
-}

packages/builder/src/builderStore/store/screenTemplates/rowDetailScreen.js

@@ -32,8 +32,7 @@ function generateTitleContainer(table, title, formId, repeaterId) {
     "border-width": "0",
     "border-style": "None",
     color: "#fff",
-    "font-family": "Inter",
+    "font-weight": "600",
-    "font-weight": "500",
     "font-size": "14px",
   })
 
@@ -43,8 +42,7 @@ function generateTitleContainer(table, title, formId, repeaterId) {
       "border-width": "0",
       "border-style": "None",
       color: "#9e9e9e",
-      "font-family": "Inter",
+      "font-weight": "600",
-      "font-weight": "500",
       "font-size": "14px",
       "margin-right": "8px",
       "margin-left": "16px",

packages/builder/src/builderStore/store/screenTemplates/rowListScreen.js

@@ -24,8 +24,7 @@ function generateTitleContainer(table) {
       "border-width": "0",
       "border-style": "None",
       color: "#fff",
-      "font-family": "Inter",
+      "font-weight": "600",
-      "font-weight": "500",
       "font-size": "14px",
     })
     .hoverStyle({
@@ -52,7 +51,7 @@ function generateTitleContainer(table) {
       flex: "1 1 auto",
       "text-transform": "capitalize",
     })
-    .type("h3")
+    .type("h2")
     .instanceName("Title")
     .text(table.name)
 
@@ -111,8 +110,7 @@ const createScreen = table => {
     .instanceName("View Button")
     .normalStyle({
       background: "transparent",
-      "font-family": "Inter, sans-serif",
+      "font-weight": "600",
-      "font-weight": "500",
       color: "#888",
       "border-width": "0",
     })

packages/builder/src/builderStore/store/screenTemplates/utils/commonComponents.js

@@ -97,8 +97,7 @@ export function makeSaveButton(table, formId) {
       "border-width": "0",
       "border-style": "None",
       color: "#fff",
-      "font-family": "Inter",
+      "font-weight": "600",
-      "font-weight": "500",
       "font-size": "14px",
       "margin-left": "16px",
     })
@@ -145,7 +144,7 @@ export function makeTitleContainer(title) {
       flex: "1 1 auto",
     })
     .customStyle(spectrumColor(900))
-    .type("h3")
+    .type("h2")
     .instanceName("Title")
     .text(title)
 

packages/builder/src/components/automation/AutomationBuilder/FlowChart/FlowItem.svelte

@@ -67,7 +67,7 @@
 
   header {
     font-size: 16px;
-    font-weight: 500;
+    font-weight: 600;
     display: flex;
     flex-direction: row;
     justify-content: flex-start;

packages/builder/src/components/automation/SetupPanel/AutomationBlockSetup.svelte

@@ -130,7 +130,7 @@
   }
 
   .block-label {
-    font-weight: 500;
+    font-weight: 600;
     font-size: var(--font-size-s);
     color: var(--grey-7);
   }

packages/builder/src/components/automation/SetupPanel/QueryParamSelector.svelte

@@ -16,12 +16,13 @@
 </script>
 
 <div class="block-field">
-  <Select bind:value={value.queryId} extraThin secondary>
+  <Select
-    <option value="">Choose an option</option>
+    label="Query"
-    {#each $queries.list as query}
+    bind:value={value.queryId}
-      <option value={query._id}>{query.name}</option>
+    options={$queries.list}
-    {/each}
+    getOptionValue={query => query._id}
-  </Select>
+    getOptionLabel={query => query.name}
+  />
 </div>
 
 {#if parameters.length}

packages/builder/src/components/automation/SetupPanel/SetupPanel.svelte

@@ -99,7 +99,7 @@
 
   .block-label {
     font-size: var(--spectrum-global-dimension-font-size-75);
-    font-weight: 500;
+    font-weight: 600;
     color: var(--grey-7);
   }
 </style>

packages/builder/src/components/automation/Shared/CreateWebhookModal.svelte

@@ -88,7 +88,7 @@
     text-align: justify;
   }
   .finished-text {
-    font-weight: 500;
+    font-weight: 600;
     text-align: center;
     color: var(--blue);
   }

packages/builder/src/components/backend/DataTable/Table.svelte

@@ -143,7 +143,7 @@
   }
   .table-title h1 {
     font-size: var(--font-size-m);
-    font-weight: 500;
+    font-weight: 600;
     margin: 0;
   }
   .table-title > div {
@@ -158,7 +158,7 @@
     gap: var(--spacing-s);
   }
   .popovers :global(button) {
-    font-weight: 500;
+    font-weight: 600;
     margin-top: var(--spacing-l);
   }
   .popovers :global(button svg) {

packages/builder/src/components/backend/DataTable/buttons/EditRolesButton.svelte

@@ -7,7 +7,7 @@
 
 <div>
   <Button icon="UsersLock" primary size="S" quiet on:click={modal.show}>
-    Edit Roles
+    Edit roles
   </Button>
 </div>
 <Modal bind:this={modal}>

packages/builder/src/components/backend/DataTable/buttons/GroupByButton.svelte

@@ -15,7 +15,7 @@
   active={!!view.groupBy}
   on:click={modal.show}
 >
-  Group By
+  Group by
 </Button>
 <Modal bind:this={modal}>
   <GroupByModal {view} />

packages/builder/src/components/backend/TableNavigator/TableDataImport.svelte

@@ -170,7 +170,7 @@
   .field-status {
     color: var(--green);
     justify-self: center;
-    font-weight: 500;
+    font-weight: 600;
   }
 
   .error {
@@ -192,7 +192,7 @@
   label {
     font-family: var(--font-sans);
     cursor: pointer;
-    font-weight: 500;
+    font-weight: 600;
     box-sizing: border-box;
     overflow: hidden;
     border-radius: var(--border-radius-s);

packages/builder/src/components/backend/TableNavigator/popovers/EditTablePopover.svelte

@@ -115,7 +115,7 @@
 
   div.delete-items div {
     margin-top: 4px;
-    font-weight: 500;
+    font-weight: 600;
   }
 
   .actions {
@@ -127,7 +127,7 @@
 
   h5 {
     margin: 0;
-    font-weight: 500;
+    font-weight: 600;
   }
 
   footer {

packages/builder/src/components/common/Dropdowns/DropdownItem.svelte

@@ -48,7 +48,7 @@
   }
 
   .title {
-    font-weight: 500;
+    font-weight: 600;
   }
 
   .subtitle {

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

@@ -23,7 +23,7 @@
 
   .error {
     font-size: var(--font-size-xs);
-    font-weight: 500;
+    font-weight: 600;
   }
   .error:first-letter {
     text-transform: uppercase;

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

@@ -98,7 +98,7 @@
 
   .text {
     flex: 1 1 auto;
-    font-weight: 500;
+    font-weight: 600;
     font-size: var(--spectrum-global-dimension-font-size-75);
     overflow: hidden;
     text-overflow: ellipsis;

packages/builder/src/components/common/bindings/ServerBindingPanel.svelte

@@ -141,7 +141,7 @@
     cursor: pointer;
   }
   .binding__label {
-    font-weight: 500;
+    font-weight: 600;
     text-transform: capitalize;
   }
   .binding__description {
@@ -160,7 +160,7 @@
     border-radius: var(--border-radius-m);
     padding: 2px;
     margin-left: 2px;
-    font-weight: 500;
+    font-weight: 600;
   }
 
   .syntax-error {

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

@@ -209,7 +209,7 @@
 
   .deploy-time {
     color: var(--grey-7);
-    font-weight: 500;
+    font-weight: 600;
     font-size: var(--font-size-s);
   }
 
@@ -224,7 +224,7 @@
     font-size: var(--font-size-s);
     padding: var(--spacing-s);
     border-radius: var(--border-radius-s);
-    font-weight: 500;
+    font-weight: 600;
     text-transform: lowercase;
     width: 80px;
     text-align: center;
@@ -235,7 +235,7 @@
 
   a {
     color: var(--blue);
-    font-weight: 500;
+    font-weight: 600;
     font-size: var(--font-size-s);
   }
 

packages/builder/src/components/design/AppPreview/componentStructure.json

@@ -61,8 +61,7 @@
     "icon": "More",
     "children": [
       "screenslot",
-      "navigation",
+      "navigation"
-      "login"
     ]
   }
 ]

packages/builder/src/components/design/AppPreview/iframeTemplate.js

@@ -1,15 +1,28 @@
 export default `
 <html>
   <head>
-    <link rel="stylesheet" href="https://rsms.me/inter/inter.css">
+    <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
-    <link href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css" rel="stylesheet">
+    <link rel="preconnect" href="https://fonts.gstatic.com" />
+    <link
+      href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
+      rel="stylesheet"
+    />
+    <link
+      href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
+      rel="stylesheet"
+    />
     <style>
-      body, html {
+      html,
-        height: 100% !important;
+      body {
-        font-family: Inter, sans-serif !important;
+        height: 100%;
-        margin: 0 !important;
+        width: 100%;
+        margin: 0;
+        padding: 0;
       }
-      *, *:before, *:after {
+  
+      *,
+      *:before,
+      *:after {
         box-sizing: border-box;
       }
     </style>

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

@@ -24,7 +24,7 @@
     align-items: center;
     list-style: none;
     font-size: var(--font-size-m);
-    font-weight: 500;
+    font-weight: 600;
     height: 24px;
   }
 

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

@@ -87,7 +87,7 @@
     font-size: var(--spectrum-global-dimension-font-size-75);
     margin-bottom: var(--spacing-m);
     margin-top: var(--spacing-xs);
-    font-weight: 500;
+    font-weight: 600;
     color: var(--grey-7);
   }
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/DataSourceSelect.svelte

@@ -252,7 +252,7 @@
 
   i:hover {
     transform: scale(1.1);
-    font-weight: 500;
+    font-weight: 600;
     cursor: pointer;
   }
 </style>

packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte

@@ -144,7 +144,7 @@
     margin-bottom: var(--spacing-m);
     font-size: var(--font-size-s);
     color: var(--grey-7);
-    font-weight: 500;
+    font-weight: 600;
   }
 
   .action-header:hover,

packages/builder/src/components/design/PropertiesPanel/PropertyControls/FlatButtonGroup/FlatButton.svelte

@@ -30,7 +30,7 @@
     color: var(--grey-7);
     border-radius: var(--border-radius-m);
     font-size: var(--spectrum-global-dimension-font-size-75);
-    font-weight: 500;
+    font-weight: 600;
     transition: all 0.3s;
     text-rendering: optimizeLegibility;
   }

packages/builder/src/components/design/PropertiesPanel/componentStyles.js

@@ -386,8 +386,7 @@ export const typography = [
       { label: "Impact", value: "Impact" },
       { label: "Inter", value: "Inter" },
       { label: "Lucida Sans Unicode", value: "Lucida Sans Unicode" },
-      { label: "Roboto", value: "Roboto" },
+      { label: "Source Sans Pro", value: "Source Sans Pro" },
-      { label: "Roboto Mono", value: "Roboto Mono" },
       { label: "Times New Roman", value: "Times New Roman" },
       { label: "Verdana", value: "Verdana" },
     ],

packages/builder/src/components/feedback/FeedbackNavLink.svelte

@@ -36,7 +36,7 @@
     cursor: pointer;
     color: var(--grey-7);
     margin: 0 12px 0 0;
-    font-weight: 500;
+    font-weight: 600;
     font-size: 1rem;
     display: flex;
     flex-direction: row;

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

@@ -25,7 +25,7 @@
     cursor: pointer;
     color: var(--grey-7);
     margin: 0 12px 0 0;
-    font-weight: 500;
+    font-weight: 600;
     font-size: 1rem;
     display: flex;
     flex-direction: row;

packages/builder/src/components/settings/tabs/APIKeys.svelte

@@ -57,6 +57,6 @@
 
   span {
     font-size: var(--font-size-xs);
-    font-weight: 500;
+    font-weight: 600;
   }
 </style>

packages/builder/src/fonts.css

@@ -1,56 +0,0 @@
-/* latin-ext */
-/* Inter-regular - latin-ext_latin */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 400;
-  src: local('Inter'), local('Inter-Regular'),
-       url('/assets/Inter-Regular.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/assets/Inter-Regular.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* Inter-500 - latin-ext_latin */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 500;
-  src: local('Inter Medium'), local('Inter-Medium'),
-       url('/assets/Inter-Medium.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/assets/Inter-Medium.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* Inter-600 - latin-ext_latin */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 600;
-  src: local('Inter SemiBold'), local('Inter-SemiBold'),
-       url('/assets/Inter-SemiBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/assets/Inter-SemiBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* Inter-700 - latin-ext_latin */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Inter Bold'), local('Inter-Bold'),
-       url('/assets/Inter-Bold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/assets/Inter-Bold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* Inter-800 - latin-ext_latin */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 700;
-  src: local('Inter ExtraBold'), local('Inter-ExtraBold'),
-       url('/assets/Inter-ExtraBold.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/assets/Inter-ExtraBold.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-/* Inter-900 - latin-ext_latin */
-@font-face {
-  font-family: 'Inter';
-  font-style: normal;
-  font-weight: 900;
-  src: local('Inter Black'), local('Inter-Black'),
-       url('/assets/Inter-Black.woff2') format('woff2'), /* Chrome 26+, Opera 23+, Firefox 39+ */
-       url('/assets/Inter-Black.woff') format('woff'); /* Chrome 6+, Firefox 3.6+, IE 9+, Safari 5.1+ */
-}
-  

packages/builder/src/global.css

@@ -36,6 +36,9 @@ body {
 .hoverable:hover {
     cursor: pointer;
 }
+a {
+    text-decoration: none;
+}
 
 /* Top bottom spacing */
 .bb-margin-m {
@@ -44,11 +47,9 @@ body {
 * + .bb-margin-m {
     margin-top: var(--spacing-m);
 }
-
 .bb-margin-xl {
     margin-bottom: var(--spacing-xl);
 }
-
 * + .bb-margin-xl {
     margin-top: var(--spacing-xl);
 }

packages/builder/src/main.js

@@ -7,9 +7,6 @@ import "@spectrum-css/vars/dist/spectrum-light.css"
 import "@spectrum-css/vars/dist/spectrum-lightest.css"
 import "@spectrum-css/page/dist/index-vars.css"
 import "./global.css"
-import "./fonts.css"
-import "./budibase.css"
-import "./fonts.css"
 
 import loadSpectrumIcons from "@budibase/bbui/spectrum-icons-vite.js"
 loadSpectrumIcons()

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

@@ -164,7 +164,7 @@
 
   .topnavitemright a:hover {
     color: var(--ink);
-    font-weight: 500;
+    font-weight: 600;
   }
 
   .home-logo {

packages/builder/src/pages/builder/auth/_components/GoogleButton.svelte

@@ -1,7 +1,6 @@
 <script>
-  import { onMount } from "svelte"
   import { ActionButton } from "@budibase/bbui"
-  import GoogleLogo from "/assets/google-logo.png"
+  import GoogleLogo from "assets/google-logo.png"
   import { admin } from "stores/portal"
 
   let show = false

packages/builder/src/pages/builder/portal/_layout.svelte

@@ -186,7 +186,7 @@
   span {
     overflow: hidden;
     text-overflow: ellipsis;
-    font-weight: 500;
+    font-weight: 600;
   }
   .content {
     overflow: auto;

packages/client/src/components/NotificationDisplay.svelte

@@ -55,6 +55,6 @@
     padding: 10px;
     display: block;
     color: white;
-    font-weight: 500;
+    font-weight: 600;
   }
 </style>

packages/server/src/api/controllers/static/templates/BudibaseApp.svelte

@@ -14,6 +14,11 @@
   <title>{title}</title>
   <link rel="icon" type="image/png" href={favicon} />
   <link rel="stylesheet" href="https://rsms.me/inter/inter.css" />
+  <link rel="preconnect" href="https://fonts.gstatic.com" />
+  <link
+    href="https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600;700&display=swap"
+    rel="stylesheet"
+  />
   <link
     href="https://cdn.jsdelivr.net/npm/remixicon@2.5.0/fonts/remixicon.css"
     rel="stylesheet"
@@ -21,11 +26,10 @@
   <style>
     html,
     body {
-      font-family: Inter;
       height: 100%;
       width: 100%;
-      margin: 0px;
+      margin: 0;
-      padding: 0px;
+      padding: 0;
     }
 
     *,

packages/server/src/constants/index.js

@@ -2,8 +2,6 @@ const { BUILTIN_ROLE_IDS } = require("@budibase/auth/roles")
 const { UserStatus } = require("@budibase/auth").constants
 const { ObjectStoreBuckets } = require("@budibase/auth").objectStore
 
-exports.LOGO_URL = "https://i.imgur.com/ycNeYTy.png"
-
 exports.JobQueues = {
   AUTOMATIONS: "automationQueue",
 }

packages/server/src/constants/layouts.js

@@ -1,5 +1,3 @@
-const { LOGO_URL } = require("../constants")
-
 const BASE_LAYOUT_PROP_IDS = {
   PRIVATE: "layout_private_master",
   PUBLIC: "layout_public_master",
@@ -100,7 +98,6 @@ const BASE_LAYOUTS = [
                   "margin-left": "auto",
                   "margin-right": "auto",
                   padding: "20px",
-                  color: "#757575",
                   "font-weight": "400",
                   "font-size": "16px",
                   flex: "1 1 auto",
@@ -109,7 +106,6 @@ const BASE_LAYOUTS = [
                 active: {},
                 selected: {},
               },
-              logoUrl: LOGO_URL,
               title: "",
               backgroundColor: "",
               color: "",
@@ -123,9 +119,7 @@ const BASE_LAYOUTS = [
                   _component: "@budibase/standard-components/link",
                   _styles: {
                     normal: {
-                      "font-family": "Inter",
+                      "font-weight": "600",
-                      "font-weight": "500",
-                      color: "#000000",
                       "text-decoration-line": "none",
                       "font-size": "16px",
                     },

packages/standard-components/manifest.json

@@ -304,29 +304,6 @@
       }
     ]
   },
-  "login": {
-    "name": "Login Form",
-    "description": "A component that automatically generates a login screen for your app.",
-    "icon": "Login",
-    "styleable": true,
-    "settings": [
-      {
-        "type": "text",
-        "label": "Logo",
-        "key": "logo"
-      },
-      {
-        "type": "text",
-        "label": "Title",
-        "key": "title"
-      },
-      {
-        "type": "text",
-        "label": "Button Text",
-        "key": "buttonText"
-      }
-    ]
-  },
   "navigation": {
     "name": "Nav Bar",
     "description": "A component for handling the navigation within your app.",
@@ -338,6 +315,12 @@
         "type": "text",
         "label": "Logo URL",
         "key": "logoUrl"
+      },
+      {
+        "type": "boolean",
+        "label": "Hide logo",
+        "key": "hideLogo",
+        "defaultValue": false
       }
     ]
   },

packages/standard-components/src/Button.svelte

@@ -33,5 +33,6 @@
     user-select: none;
     white-space: nowrap;
     text-align: center;
+    font-family: var(--font-sans);
   }
 </style>

packages/standard-components/src/CardStat.svelte

@@ -28,14 +28,14 @@
   .title {
     font-size: 0.85rem;
     color: #9e9e9e;
-    font-weight: 500;
+    font-weight: 600;
     margin: 1rem 1.5rem 0.5rem 1.5rem;
     white-space: pre-wrap;
   }
 
   .value {
     font-size: 2rem;
-    font-weight: 500;
+    font-weight: 600;
     margin: 0 1.5rem 1.5rem 1.5rem;
     color: inherit;
     white-space: pre-wrap;

packages/standard-components/src/ErrorsBox.svelte

@@ -22,7 +22,7 @@
 
   .error {
     font-size: var(--font-size-xs);
-    font-weight: 500;
+    font-weight: 600;
     color: var(--red-dark);
   }
   .error:first-letter {

packages/standard-components/src/Link.svelte

@@ -23,3 +23,9 @@
     <slot />
   </a>
 {/if}
+
+<style>
+  a {
+    color: var(--spectrum-alias-text-color);
+  }
+</style>

packages/standard-components/src/Login.svelte

@@ -1,194 +0,0 @@
-<script>
-  import { getContext } from "svelte"
-
-  const { authStore, styleable, builderStore } = getContext("sdk")
-  const component = getContext("component")
-
-  export let buttonText = "Log In"
-  export let logo = ""
-  export let title = ""
-  export let buttonClass = ""
-  export let inputClass = ""
-
-  let email = ""
-  let password = ""
-  let loading = false
-  let error = false
-  let _buttonClass = ""
-  let _inputClass = ""
-
-  $: {
-    _buttonClass = buttonClass || "default-button"
-    _inputClass = inputClass || "default-input"
-  }
-
-  const login = async () => {
-    if ($builderStore.inBuilder) {
-      return
-    }
-    loading = true
-    await authStore.actions.logIn({ email, password })
-    loading = false
-  }
-
-  function handleKeydown(evt) {
-    if (evt.key === "Enter") {
-      login()
-    }
-  }
-</script>
-
-<svelte:window on:keydown={handleKeydown} />
-<div class="root" use:styleable={$component.styles}>
-  <div class="content">
-    {#if logo}
-      <div class="logo-container"><img src={logo} alt="logo" /></div>
-    {/if}
-
-    {#if title}
-      <h2 class="header-content">{title}</h2>
-    {/if}
-
-    <div class="form-root">
-      <div class="control">
-        <input
-          bind:value={email}
-          type="email"
-          placeholder="Email"
-          class={_inputClass}
-        />
-      </div>
-
-      <div class="control">
-        <input
-          bind:value={password}
-          type="password"
-          placeholder="Password"
-          class={_inputClass}
-        />
-      </div>
-
-      <button disabled={loading} on:click={login} class={_buttonClass}>
-        {buttonText || "Log In"}
-      </button>
-    </div>
-
-    {#if error}
-      <div class="incorrect-details-panel">Incorrect email or password</div>
-    {/if}
-  </div>
-</div>
-
-<style>
-  .root {
-    height: 100%;
-    display: flex;
-    flex-direction: column;
-    align-items: center;
-    justify-content: center;
-  }
-
-  .content {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    justify-content: center;
-  }
-
-  .logo-container {
-    margin-bottom: 10px;
-    display: flex;
-    flex-direction: row;
-    justify-content: center;
-    align-items: center;
-  }
-
-  .logo-container > img {
-    max-height: 80px;
-    max-width: 200px;
-    margin-bottom: 20px;
-  }
-
-  .header-content {
-    font-family: Inter;
-    font-weight: 700;
-    color: #1f1f1f;
-    font-size: 32px;
-    text-rendering: optimizeLegibility;
-    -webkit-font-smoothing: antialiased;
-    font-feature-settings: "case" "rlig" "calt" 0;
-    margin: 0 0 20px 0;
-  }
-
-  .incorrect-details-panel {
-    margin-top: 26px;
-    padding: 10px;
-    border-style: solid;
-    border-width: 1px;
-    border-color: maroon;
-    border-radius: 4px;
-    text-align: center;
-    color: maroon;
-    background-color: mistyrose;
-    align-self: stretch;
-  }
-
-  .form-root {
-    display: flex;
-    flex-direction: column;
-    align-items: stretch;
-    width: 300px;
-    margin: auto;
-    gap: 8px;
-  }
-
-  .control {
-    width: 100%;
-  }
-
-  .default-input {
-    font-family: Inter;
-    font-size: 14px;
-    color: #393c44;
-    padding: 2px 6px 2px 12px;
-    margin: 0 0 0.5em 0;
-    box-sizing: border-box;
-    border: 0.5px solid #d8d8d8;
-    border-radius: 4px;
-    width: 100%;
-    height: 40px;
-    transition: border-color 100ms ease-in 0s;
-    outline-color: #797979;
-  }
-
-  .default-button {
-    font-family: Inter;
-    font-size: 16px;
-    padding: 0.4em;
-    box-sizing: border-box;
-    border-radius: 4px;
-    color: white;
-    background-color: #393c44;
-    outline: none;
-    width: 300px;
-    height: 40px;
-    cursor: pointer;
-    transition: all 0.2s ease 0s;
-    overflow: hidden;
-    outline: none;
-    user-select: none;
-    white-space: nowrap;
-    text-align: center;
-  }
-
-  .default-button:hover {
-    background-color: white;
-    border-color: #393c44;
-    color: #393c44;
-  }
-
-  h2 {
-    text-align: center;
-    margin-bottom: 10px;
-  }
-</style>

packages/standard-components/src/Navigation.svelte

@@ -5,16 +5,22 @@
   const component = getContext("component")
 
   export let logoUrl
+  export let hideLogo
 </script>
 
 <div class="nav" use:styleable={$component.styles}>
-  <div class="nav__top">
+  {#if !hideLogo}
-    <a href="/" use:linkable>
+    <div class="nav__top">
-      {#if logoUrl}
+      <a href="/" use:linkable>
-        <img class="logo" alt="logo" src={logoUrl} height="48" />
+        <img
-      {/if}
+          class="logo"
-    </a>
+          alt="logo"
-  </div>
+          src={logoUrl || "https://i.imgur.com/Dn7Xt1G.png"}
+          height="48"
+        />
+      </a>
+    </div>
+  {/if}
   <div class="nav__menu">
     <slot />
   </div>
@@ -33,6 +39,7 @@
     flex-direction: row;
     justify-content: space-between;
     align-items: center;
+    margin-bottom: 40px;
   }
   .nav__top img {
     margin-right: 16px;
@@ -52,7 +59,6 @@
 
   .nav__menu {
     display: flex;
-    margin-top: 40px;
     flex-direction: row;
     justify-content: flex-start;
     align-items: center;

packages/standard-components/src/index.js

@@ -18,7 +18,6 @@ export { default as repeater } from "./Repeater.svelte"
 export { default as stackedlist } from "./StackedList.svelte"
 export { default as card } from "./Card.svelte"
 export { default as text } from "./Text.svelte"
-export { default as login } from "./Login.svelte"
 export { default as navigation } from "./Navigation.svelte"
 export { default as link } from "./Link.svelte"
 export { default as heading } from "./Heading.svelte"