diff --git a/LICENSE b/LICENSE
index a6bd926020..e4721dea64 100644
--- a/LICENSE
+++ b/LICENSE
@@ -5,7 +5,6 @@ Each Budibase package has its own license:
builder: GPLv3
server: GPLv3
client: MPLv2.0
-standard-components: MPLv2.0
You can consider Budibase to be GPLv3 licensed.
diff --git a/packages/bbui/src/Form/Core/DatePicker.svelte b/packages/bbui/src/Form/Core/DatePicker.svelte
index 44b77e0bbe..18c93b6c5c 100644
--- a/packages/bbui/src/Form/Core/DatePicker.svelte
+++ b/packages/bbui/src/Form/Core/DatePicker.svelte
@@ -13,6 +13,7 @@
export let enableTime = true
export let value = null
export let placeholder = null
+ export let appendTo = null
const dispatch = createEventDispatcher()
const flatpickrId = `${generateID()}-wrapper`
@@ -24,6 +25,7 @@
altInput: true,
altFormat: enableTime ? "F j Y, H:i" : "F j, Y",
wrap: true,
+ appendTo,
}
const handleChange = event => {
diff --git a/packages/bbui/src/Form/DatePicker.svelte b/packages/bbui/src/Form/DatePicker.svelte
index 9e0c40b11d..aff7ddc1c5 100644
--- a/packages/bbui/src/Form/DatePicker.svelte
+++ b/packages/bbui/src/Form/DatePicker.svelte
@@ -10,6 +10,7 @@
export let error = null
export let enableTime = true
export let placeholder = null
+ export let appendTo = null
const dispatch = createEventDispatcher()
const onChange = e => {
@@ -26,6 +27,7 @@
{value}
{placeholder}
{enableTime}
+ {appendTo}
on:change={onChange}
/>
diff --git a/packages/bbui/src/Icon/Icon.svelte b/packages/bbui/src/Icon/Icon.svelte
index ffaa99cb79..2f39fde0d9 100644
--- a/packages/bbui/src/Icon/Icon.svelte
+++ b/packages/bbui/src/Icon/Icon.svelte
@@ -36,7 +36,7 @@
transition: color var(--spectrum-global-animation-duration-100, 130ms);
}
svg.hoverable:hover {
- color: var(--spectrum-alias-icon-color-selected);
+ color: var(--spectrum-alias-icon-color-selected-hover);
cursor: pointer;
}
diff --git a/packages/builder/src/builderStore/dataBinding.js b/packages/builder/src/builderStore/dataBinding.js
index 887695d41e..903512d0fb 100644
--- a/packages/builder/src/builderStore/dataBinding.js
+++ b/packages/builder/src/builderStore/dataBinding.js
@@ -266,12 +266,16 @@ const getDeviceBindings = () => {
* Gets all state bindings that are globally available.
*/
const getStateBindings = () => {
- const safeState = makePropSafe("state")
- return getAllStateVariables().map(key => ({
- type: "context",
- runtimeBinding: `${safeState}.${makePropSafe(key)}`,
- readableBinding: `State.${key}`,
- }))
+ let bindings = []
+ if (get(store).clientFeatures?.state) {
+ const safeState = makePropSafe("state")
+ bindings = getAllStateVariables().map(key => ({
+ type: "context",
+ runtimeBinding: `${safeState}.${makePropSafe(key)}`,
+ readableBinding: `State.${key}`,
+ }))
+ }
+ return bindings
}
/**
diff --git a/packages/builder/src/builderStore/store/frontend.js b/packages/builder/src/builderStore/store/frontend.js
index 192ade9e5d..7d0b9d0547 100644
--- a/packages/builder/src/builderStore/store/frontend.js
+++ b/packages/builder/src/builderStore/store/frontend.js
@@ -41,6 +41,8 @@ const INITIAL_FRONTEND_STATE = {
spectrumThemes: false,
intelligentLoading: false,
deviceAwareness: false,
+ state: false,
+ customThemes: false,
},
currentFrontEndType: "none",
selectedScreenId: "",
@@ -53,6 +55,7 @@ const INITIAL_FRONTEND_STATE = {
routes: {},
clientLibPath: "",
theme: "",
+ customTheme: {},
}
export const getFrontendStore = () => {
@@ -77,6 +80,7 @@ export const getFrontendStore = () => {
layouts,
screens,
theme: application.theme || "spectrum--light",
+ customTheme: application.customTheme,
hasAppPackage: true,
appInstance: application.instance,
clientLibPath,
@@ -110,6 +114,22 @@ export const getFrontendStore = () => {
}
},
},
+ customTheme: {
+ save: async customTheme => {
+ const appId = get(store).appId
+ const response = await api.put(`/api/applications/${appId}`, {
+ customTheme,
+ })
+ if (response.status === 200) {
+ store.update(state => {
+ state.customTheme = customTheme
+ return state
+ })
+ } else {
+ throw new Error("Error updating theme")
+ }
+ },
+ },
routing: {
fetch: async () => {
const response = await api.get("/api/routing")
diff --git a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
index 21dae25708..ec51688219 100644
--- a/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
+++ b/packages/builder/src/components/design/AppPreview/AppThemeSelect.svelte
@@ -33,6 +33,6 @@
diff --git a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
index 38441d4323..85fb086b59 100644
--- a/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
+++ b/packages/builder/src/components/design/AppPreview/CurrentItemPreview.svelte
@@ -49,6 +49,7 @@
selectedComponentId,
previewType: $store.currentFrontEndType,
theme: $store.theme,
+ customTheme: $store.customTheme,
}
// Saving pages and screens to the DB causes them to have _revs.
diff --git a/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte b/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte
new file mode 100644
index 0000000000..c5c85fad46
--- /dev/null
+++ b/packages/builder/src/components/design/AppPreview/ThemeEditor.svelte
@@ -0,0 +1,140 @@
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
+
diff --git a/packages/builder/src/components/design/AppPreview/iframeTemplate.js b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
index 1e3ff7c856..85f008df08 100644
--- a/packages/builder/src/components/design/AppPreview/iframeTemplate.js
+++ b/packages/builder/src/components/design/AppPreview/iframeTemplate.js
@@ -66,7 +66,8 @@ export default `
screen,
previewType,
appId,
- theme
+ theme,
+ customTheme
} = parsed
// Set some flags so the app knows we're in the builder
@@ -78,6 +79,7 @@ export default `
window["##BUDIBASE_PREVIEW_ID##"] = Math.random()
window["##BUDIBASE_PREVIEW_TYPE##"] = previewType
window["##BUDIBASE_PREVIEW_THEME##"] = theme
+ window["##BUDIBASE_PREVIEW_CUSTOM_THEME##"] = customTheme
// Initialise app
try {
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
index 4ff746a034..d0c561546f 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/EventEditor.svelte
@@ -9,11 +9,12 @@
ActionMenu,
MenuItem,
} from "@budibase/bbui"
- import actionTypes from "./actions"
+ import { getAvailableActions } from "./actions"
import { generate } from "shortid"
const flipDurationMs = 150
const EVENT_TYPE_KEY = "##eventHandlerType"
+ const actionTypes = getAvailableActions()
export let actions
export let bindings = []
diff --git a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
index 6c285939ac..eaab22d89d 100644
--- a/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
+++ b/packages/builder/src/components/design/PropertiesPanel/PropertyControls/EventsEditor/actions/index.js
@@ -1,3 +1,6 @@
+import { store } from "builderStore"
+import { get } from "svelte/store"
+
import NavigateTo from "./NavigateTo.svelte"
import SaveRow from "./SaveRow.svelte"
import DeleteRow from "./DeleteRow.svelte"
@@ -17,49 +20,56 @@ import UpdateStateStep from "./UpdateState.svelte"
// be considered as camel case too.
// There is technical debt here to sanitize all these and standardise them
// across the packages but it's a breaking change to existing apps.
-export default [
- {
- name: "Save Row",
- component: SaveRow,
- },
- {
- name: "Delete Row",
- component: DeleteRow,
- },
- {
- name: "Navigate To",
- component: NavigateTo,
- },
- {
- name: "Execute Query",
- component: ExecuteQuery,
- },
- {
- name: "Trigger Automation",
- component: TriggerAutomation,
- },
- {
- name: "Validate Form",
- component: ValidateForm,
- },
- {
- name: "Log Out",
- component: LogOut,
- },
- {
- name: "Clear Form",
- component: ClearForm,
- },
- {
- name: "Close Screen Modal",
- component: CloseScreenModal,
- },
- {
- name: "Change Form Step",
- component: ChangeFormStep,
- },
- {
- name: "Update State",
- component: UpdateStateStep,
- },
-]
+export const getAvailableActions = () => {
+ let actions = [
+ {
+ name: "Save Row",
+ component: SaveRow,
+ },
+ {
+ name: "Delete Row",
+ component: DeleteRow,
+ },
+ {
+ name: "Navigate To",
+ component: NavigateTo,
+ },
+ {
+ name: "Execute Query",
+ component: ExecuteQuery,
+ },
+ {
+ name: "Trigger Automation",
+ component: TriggerAutomation,
+ },
+ {
+ name: "Validate Form",
+ component: ValidateForm,
+ },
+ {
+ name: "Log Out",
+ component: LogOut,
+ },
+ {
+ name: "Clear Form",
+ component: ClearForm,
+ },
+ {
+ name: "Close Screen Modal",
+ component: CloseScreenModal,
+ },
+ {
+ name: "Change Form Step",
+ component: ChangeFormStep,
+ },
+ ]
+
+ if (get(store).clientFeatures?.state) {
+ actions.push({
+ name: "Update State",
+ component: UpdateStateStep,
+ })
+ }
+
+ return actions
+}
diff --git a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
index 207daae84a..fb9cdf885c 100644
--- a/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/[assetType]/_layout.svelte
@@ -14,6 +14,7 @@
import { findComponent, findComponentPath } from "builderStore/storeUtils"
import { get } from "svelte/store"
import AppThemeSelect from "components/design/AppPreview/AppThemeSelect.svelte"
+ import ThemeEditor from "components/design/AppPreview/ThemeEditor.svelte"
// Cache previous values so we don't update the URL more than necessary
let previousType
@@ -150,7 +151,9 @@
{#if $currentAsset}
@@ -202,9 +205,18 @@
padding: var(--spacing-xl) 40px;
}
.preview-header {
- display: grid;
- grid-template-columns: 1fr 100px;
+ display: flex;
+ flex-direction: row;
+ justify-content: flex-start;
+ align-items: center;
}
+ .preview-header > :global(*) {
+ flex: 0 0 auto;
+ }
+ .preview-header > :global(*:first-child) {
+ flex: 1 1 auto;
+ }
+
.preview-content {
flex: 1 1 auto;
}
diff --git a/packages/standard-components/README.md b/packages/client/README.md
similarity index 100%
rename from packages/standard-components/README.md
rename to packages/client/README.md
diff --git a/packages/standard-components/manifest.json b/packages/client/manifest.json
similarity index 99%
rename from packages/standard-components/manifest.json
rename to packages/client/manifest.json
index 194706744d..51ae1cf30d 100644
--- a/packages/standard-components/manifest.json
+++ b/packages/client/manifest.json
@@ -2,7 +2,9 @@
"features": {
"spectrumThemes": true,
"intelligentLoading": true,
- "deviceAwareness": true
+ "deviceAwareness": true,
+ "state": true,
+ "customThemes": true
},
"layout": {
"name": "Layout",
diff --git a/packages/client/package.json b/packages/client/package.json
index dbd5594be9..8abe1eda42 100644
--- a/packages/client/package.json
+++ b/packages/client/package.json
@@ -11,7 +11,8 @@
"import": "./dist/budibase-client.js",
"require": "./dist/budibase-client.js"
},
- "./package.json": "./package.json"
+ "./package.json": "./package.json",
+ "./manifest.json": "./manifest.json"
},
"scripts": {
"build": "rollup -c",
@@ -19,15 +20,24 @@
},
"dependencies": {
"@budibase/bbui": "^0.9.123-alpha.1",
- "@budibase/standard-components": "^0.9.123-alpha.1",
"@budibase/string-templates": "^0.9.123-alpha.1",
"regexparam": "^1.3.0",
"shortid": "^2.2.15",
"svelte-spa-router": "^3.0.5"
},
"devDependencies": {
+ "@rollup/plugin-alias": "^3.1.5",
"@rollup/plugin-commonjs": "^18.0.0",
"@rollup/plugin-node-resolve": "^11.2.1",
+ "@spectrum-css/button": "^3.0.3",
+ "@spectrum-css/card": "^3.0.3",
+ "@spectrum-css/divider": "^1.0.3",
+ "@spectrum-css/link": "^3.1.3",
+ "@spectrum-css/page": "^3.0.1",
+ "@spectrum-css/typography": "^3.0.2",
+ "@spectrum-css/vars": "^3.0.1",
+ "apexcharts": "^3.22.1",
+ "dayjs": "^1.10.5",
"fs-extra": "^8.1.0",
"jsdom": "^16.0.1",
"postcss": "^8.2.10",
@@ -39,7 +49,9 @@
"rollup-plugin-svelte": "^7.1.0",
"rollup-plugin-svg": "^2.0.0",
"rollup-plugin-terser": "^7.0.2",
- "svelte": "^3.38.2"
+ "svelte": "^3.38.2",
+ "svelte-apexcharts": "^1.0.2",
+ "svelte-flatpickr": "^3.1.0"
},
"gitHead": "d1836a898cab3f8ab80ee6d8f42be1a9eed7dcdc"
}
diff --git a/packages/client/rollup.config.js b/packages/client/rollup.config.js
index 3d8812087e..f404f93c4c 100644
--- a/packages/client/rollup.config.js
+++ b/packages/client/rollup.config.js
@@ -1,5 +1,6 @@
import commonjs from "@rollup/plugin-commonjs"
import resolve from "@rollup/plugin-node-resolve"
+import alias from "@rollup/plugin-alias"
import svelte from "rollup-plugin-svelte"
import { terser } from "rollup-plugin-terser"
import postcss from "rollup-plugin-postcss"
@@ -7,6 +8,7 @@ import svg from "rollup-plugin-svg"
import json from "rollup-plugin-json"
import builtins from "rollup-plugin-node-builtins"
import globals from "rollup-plugin-node-globals"
+import path from "path"
const production = !process.env.ROLLUP_WATCH
const ignoredWarnings = [
@@ -26,6 +28,38 @@ export default {
},
],
plugins: [
+ alias({
+ entries: [
+ {
+ find: "manifest.json",
+ replacement: path.resolve("./manifest.json"),
+ },
+ {
+ find: "api",
+ replacement: path.resolve("./src/api"),
+ },
+ {
+ find: "components",
+ replacement: path.resolve("./src/components"),
+ },
+ {
+ find: "stores",
+ replacement: path.resolve("./src/stores"),
+ },
+ {
+ find: "utils",
+ replacement: path.resolve("./src/utils"),
+ },
+ {
+ find: "constants",
+ replacement: path.resolve("./src/constants"),
+ },
+ {
+ find: "sdk",
+ replacement: path.resolve("./src/sdk"),
+ },
+ ],
+ }),
svelte({
emitCss: true,
onwarn: (warning, handler) => {
diff --git a/packages/client/src/api/api.js b/packages/client/src/api/api.js
index 5449c3f219..2476030eb0 100644
--- a/packages/client/src/api/api.js
+++ b/packages/client/src/api/api.js
@@ -1,5 +1,5 @@
-import { notificationStore } from "../store"
-import { ApiVersion } from "../constants"
+import { notificationStore } from "stores"
+import { ApiVersion } from "constants"
/**
* API cache for cached request responses.
diff --git a/packages/client/src/api/automations.js b/packages/client/src/api/automations.js
index 2b989f85ae..cb3e4623ad 100644
--- a/packages/client/src/api/automations.js
+++ b/packages/client/src/api/automations.js
@@ -1,5 +1,6 @@
-import { notificationStore } from "../store/notification"
+import { notificationStore } from "stores/notification"
import API from "./api"
+
/**
* Executes an automation. Must have "App Action" trigger.
*/
diff --git a/packages/client/src/api/queries.js b/packages/client/src/api/queries.js
index a6ef1a763f..8db41ecf5c 100644
--- a/packages/client/src/api/queries.js
+++ b/packages/client/src/api/queries.js
@@ -1,4 +1,4 @@
-import { notificationStore, dataSourceStore } from "../store"
+import { notificationStore, dataSourceStore } from "stores"
import API from "./api"
/**
diff --git a/packages/client/src/api/rows.js b/packages/client/src/api/rows.js
index e3557927aa..6e1ac31279 100644
--- a/packages/client/src/api/rows.js
+++ b/packages/client/src/api/rows.js
@@ -1,4 +1,4 @@
-import { notificationStore, dataSourceStore } from "../store"
+import { notificationStore, dataSourceStore } from "stores"
import API from "./api"
import { fetchTableDefinition } from "./tables"
diff --git a/packages/client/src/components/ClientApp.svelte b/packages/client/src/components/ClientApp.svelte
index d46199dbdd..3a704e36a2 100644
--- a/packages/client/src/components/ClientApp.svelte
+++ b/packages/client/src/components/ClientApp.svelte
@@ -1,11 +1,9 @@
{#if dataLoaded}
@@ -73,7 +71,7 @@
id="spectrum-root"
lang="en"
dir="ltr"
- class="spectrum spectrum--medium {themeClass}"
+ class="spectrum spectrum--medium {$themeStore.theme}"
>
{#if permissionError}
@@ -87,11 +85,13 @@
-
- {#key $screenStore.activeLayout._id}
-
- {/key}
-
+
+
+ {#key $screenStore.activeLayout._id}
+
+ {/key}
+
+
@@ -131,28 +131,6 @@
#app-root.preview {
border: 1px solid var(--spectrum-global-color-gray-300);
}
-
- /* Custom scrollbars */
- :global(::-webkit-scrollbar) {
- width: 8px;
- height: 8px;
- }
- :global(::-webkit-scrollbar-track) {
- background: var(--spectrum-alias-background-color-default);
- }
- :global(::-webkit-scrollbar-thumb) {
- background-color: var(--spectrum-global-color-gray-400);
- border-radius: 4px;
- }
- :global(::-webkit-scrollbar-corner) {
- background: var(--spectrum-alias-background-color-default);
- }
- :global(*) {
- scrollbar-width: thin;
- scrollbar-color: var(--spectrum-global-color-gray-400)
- var(--spectrum-alias-background-color-default);
- }
-
.error {
position: absolute;
width: 100%;
diff --git a/packages/client/src/components/Component.svelte b/packages/client/src/components/Component.svelte
index a10c88f410..785b989754 100644
--- a/packages/client/src/components/Component.svelte
+++ b/packages/client/src/components/Component.svelte
@@ -1,17 +1,14 @@
+
+
+
+
+
+
diff --git a/packages/client/src/components/Router.svelte b/packages/client/src/components/Router.svelte
index 5632d812b5..95f52236a4 100644
--- a/packages/client/src/components/Router.svelte
+++ b/packages/client/src/components/Router.svelte
@@ -1,7 +1,7 @@
{#if icon}
-
+
{:else if $builderStore.inBuilder}
@@ -31,4 +36,8 @@
div {
font-style: italic;
}
+ .hoverable:hover {
+ color: var(--spectrum-alias-icon-color-selected-hover) !important;
+ cursor: pointer;
+ }
diff --git a/packages/standard-components/src/Image.svelte b/packages/client/src/components/app/Image.svelte
similarity index 100%
rename from packages/standard-components/src/Image.svelte
rename to packages/client/src/components/app/Image.svelte
diff --git a/packages/standard-components/src/Layout.svelte b/packages/client/src/components/app/Layout.svelte
similarity index 89%
rename from packages/standard-components/src/Layout.svelte
rename to packages/client/src/components/app/Layout.svelte
index 08e0f290fe..7f120556bd 100644
--- a/packages/standard-components/src/Layout.svelte
+++ b/packages/client/src/components/app/Layout.svelte
@@ -1,9 +1,9 @@
diff --git a/packages/client/src/components/UserBindingsProvider.svelte b/packages/client/src/components/context/UserBindingsProvider.svelte
similarity index 82%
rename from packages/client/src/components/UserBindingsProvider.svelte
rename to packages/client/src/components/context/UserBindingsProvider.svelte
index 23774eb43d..fb0dffcb68 100644
--- a/packages/client/src/components/UserBindingsProvider.svelte
+++ b/packages/client/src/components/context/UserBindingsProvider.svelte
@@ -1,7 +1,7 @@
diff --git a/packages/client/src/components/NotificationDisplay.svelte b/packages/client/src/components/overlay/NotificationDisplay.svelte
similarity index 94%
rename from packages/client/src/components/NotificationDisplay.svelte
rename to packages/client/src/components/overlay/NotificationDisplay.svelte
index f03fb692fd..6e8be21647 100644
--- a/packages/client/src/components/NotificationDisplay.svelte
+++ b/packages/client/src/components/overlay/NotificationDisplay.svelte
@@ -1,5 +1,5 @@
diff --git a/packages/client/src/components/PeekScreenDisplay.svelte b/packages/client/src/components/overlay/PeekScreenDisplay.svelte
similarity index 99%
rename from packages/client/src/components/PeekScreenDisplay.svelte
rename to packages/client/src/components/overlay/PeekScreenDisplay.svelte
index 6d6e8c39c7..0af1ba499e 100644
--- a/packages/client/src/components/PeekScreenDisplay.svelte
+++ b/packages/client/src/components/overlay/PeekScreenDisplay.svelte
@@ -4,7 +4,7 @@
dataSourceStore,
notificationStore,
routeStore,
- } from "../store"
+ } from "stores"
import { Modal, ModalContent, ActionButton } from "@budibase/bbui"
import { onDestroy } from "svelte"
diff --git a/packages/client/src/components/preview/HoverIndicator.svelte b/packages/client/src/components/preview/HoverIndicator.svelte
index 5cdf3eccff..9518c6d101 100644
--- a/packages/client/src/components/preview/HoverIndicator.svelte
+++ b/packages/client/src/components/preview/HoverIndicator.svelte
@@ -1,7 +1,7 @@
diff --git a/packages/client/src/components/preview/SettingsBar.svelte b/packages/client/src/components/preview/SettingsBar.svelte
index 69197e6ede..bc4f93acda 100644
--- a/packages/client/src/components/preview/SettingsBar.svelte
+++ b/packages/client/src/components/preview/SettingsBar.svelte
@@ -3,8 +3,8 @@
import SettingsButton from "./SettingsButton.svelte"
import SettingsColorPicker from "./SettingsColorPicker.svelte"
import SettingsPicker from "./SettingsPicker.svelte"
- import { builderStore } from "../../store"
- import { domDebounce } from "../../utils/domDebounce"
+ import { builderStore } from "stores"
+ import { domDebounce } from "utils/domDebounce"
const verticalOffset = 28
const horizontalOffset = 2
diff --git a/packages/client/src/components/preview/SettingsButton.svelte b/packages/client/src/components/preview/SettingsButton.svelte
index c074d4e7f4..1490b2c9b7 100644
--- a/packages/client/src/components/preview/SettingsButton.svelte
+++ b/packages/client/src/components/preview/SettingsButton.svelte
@@ -1,6 +1,6 @@