diff --git a/packages/builder/assets/Inter-Black.woff b/packages/builder/assets/Inter-Black.woff new file mode 100644 index 0000000000..07800f4b74 Binary files /dev/null and b/packages/builder/assets/Inter-Black.woff differ diff --git a/packages/builder/assets/Inter-Black.woff2 b/packages/builder/assets/Inter-Black.woff2 new file mode 100644 index 0000000000..9a615e6e83 Binary files /dev/null and b/packages/builder/assets/Inter-Black.woff2 differ diff --git a/packages/builder/assets/Inter-Bold.woff b/packages/builder/assets/Inter-Bold.woff new file mode 100644 index 0000000000..61e1c25e64 Binary files /dev/null and b/packages/builder/assets/Inter-Bold.woff differ diff --git a/packages/builder/assets/Inter-Bold.woff2 b/packages/builder/assets/Inter-Bold.woff2 new file mode 100644 index 0000000000..6c401bb09b Binary files /dev/null and b/packages/builder/assets/Inter-Bold.woff2 differ diff --git a/packages/builder/assets/Inter-ExtraBold.woff b/packages/builder/assets/Inter-ExtraBold.woff new file mode 100644 index 0000000000..433fb3285c Binary files /dev/null and b/packages/builder/assets/Inter-ExtraBold.woff differ diff --git a/packages/builder/assets/Inter-ExtraBold.woff2 b/packages/builder/assets/Inter-ExtraBold.woff2 new file mode 100644 index 0000000000..5a08b364d5 Binary files /dev/null and b/packages/builder/assets/Inter-ExtraBold.woff2 differ diff --git a/packages/builder/assets/Inter-Medium.woff b/packages/builder/assets/Inter-Medium.woff new file mode 100644 index 0000000000..8c36a6345e Binary files /dev/null and b/packages/builder/assets/Inter-Medium.woff differ diff --git a/packages/builder/assets/Inter-Medium.woff2 b/packages/builder/assets/Inter-Medium.woff2 new file mode 100644 index 0000000000..3b31d3350a Binary files /dev/null and b/packages/builder/assets/Inter-Medium.woff2 differ diff --git a/packages/builder/assets/Inter-Regular.woff b/packages/builder/assets/Inter-Regular.woff new file mode 100644 index 0000000000..7d587c40bf Binary files /dev/null and b/packages/builder/assets/Inter-Regular.woff differ diff --git a/packages/builder/assets/Inter-Regular.woff2 b/packages/builder/assets/Inter-Regular.woff2 new file mode 100644 index 0000000000..d5ffd2a1f1 Binary files /dev/null and b/packages/builder/assets/Inter-Regular.woff2 differ diff --git a/packages/builder/assets/Inter-SemiBold.woff b/packages/builder/assets/Inter-SemiBold.woff new file mode 100644 index 0000000000..99df06cbee Binary files /dev/null and b/packages/builder/assets/Inter-SemiBold.woff differ diff --git a/packages/builder/assets/Inter-SemiBold.woff2 b/packages/builder/assets/Inter-SemiBold.woff2 new file mode 100644 index 0000000000..df746af999 Binary files /dev/null and b/packages/builder/assets/Inter-SemiBold.woff2 differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff deleted file mode 100644 index 72f1207930..0000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff2 deleted file mode 100644 index 05fda6ab5c..0000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-300.woff2 and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff deleted file mode 100644 index fb70b7e915..0000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff2 deleted file mode 100644 index 96981bc870..0000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-500.woff2 and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff deleted file mode 100644 index d023f3de32..0000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff2 deleted file mode 100644 index fd49210352..0000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-700.woff2 and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff deleted file mode 100644 index 397450501b..0000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff2 deleted file mode 100644 index 5cd76971f1..0000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-900.woff2 and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff b/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff deleted file mode 100644 index f9849dfbee..0000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff and /dev/null differ diff --git a/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff2 b/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff2 deleted file mode 100644 index 1f7dd5b890..0000000000 Binary files a/packages/builder/assets/roboto-v20-latin-ext_latin-regular.woff2 and /dev/null differ diff --git a/packages/builder/cypress/integration/screens.spec.js b/packages/builder/cypress/integration/screens.spec.js new file mode 100644 index 0000000000..43f7d44917 --- /dev/null +++ b/packages/builder/cypress/integration/screens.spec.js @@ -0,0 +1,22 @@ + +context('Screen Tests', () => { + before(() => { + cy.visit('localhost:4001/_builder') + cy.createApp('Conor Cy App', 'Model App Description') + cy.navigateToFrontend() + }) + + it('Should successful create a screen', () => { + cy.createScreen("test Screen") + }) + + it('Should rename a screen', () => { + cy.get(".components-pane").within(() => { + cy.contains("Settings").click() + cy.get("input[name=_instanceName]").clear().type("About Us").blur() + }) + cy.get('.nav-items-container').within(() => { + cy.contains("About Us").should('exist') + }) + }) +}) \ No newline at end of file diff --git a/packages/builder/cypress/support/commands.js b/packages/builder/cypress/support/commands.js index ed19ba8233..33ae53d6da 100644 --- a/packages/builder/cypress/support/commands.js +++ b/packages/builder/cypress/support/commands.js @@ -103,3 +103,23 @@ Cypress.Commands.add("addButtonComponent", () => { cy.get("[data-cy=Button]").click() }) + +Cypress.Commands.add("navigateToFrontend", () => { + cy.get(".close", { timeout: 10000 }).click() + cy.contains("frontend").click() + cy.get(".close", { timeout: 10000 }).click() +}) + +Cypress.Commands.add("createScreen", (screenName, route) => { + cy.get(".newscreen").click() + cy.get(".uk-input:first").type(screenName) + if (route) { + cy.get(".uk-input:last").type(route) + } + cy.get(".uk-modal-footer").within(() => { + cy.contains("Create Screen").click() + }) + cy.get(".nav-items-container").within(() => { + cy.contains(screenName).should("exist") + }) +}) diff --git a/packages/builder/package.json b/packages/builder/package.json index 50ee90e328..26d6ee3e61 100644 --- a/packages/builder/package.json +++ b/packages/builder/package.json @@ -50,8 +50,7 @@ ] }, "dependencies": { - "@beyonk/svelte-notifications": "^2.0.3", - "@budibase/bbui": "^1.12.0", + "@budibase/bbui": "^1.13.0", "@budibase/client": "^0.0.32", "@nx-js/compiler-util": "^2.0.0", "codemirror": "^5.51.0", @@ -101,4 +100,4 @@ "svelte": "3.23.x" }, "gitHead": "115189f72a850bfb52b65ec61d932531bf327072" -} \ No newline at end of file +} diff --git a/packages/builder/rollup.config.js b/packages/builder/rollup.config.js index 0a4e016170..08973e6195 100644 --- a/packages/builder/rollup.config.js +++ b/packages/builder/rollup.config.js @@ -153,6 +153,10 @@ export default { find: "builderStore", replacement: path.resolve(projectRootDir, "src/builderStore"), }, + { + find: "constants", + replacement: path.resolve(projectRootDir, "src/constants"), + }, ], customResolver, }), diff --git a/packages/builder/src/App.svelte b/packages/builder/src/App.svelte index b19b8df5c7..d10c04727f 100644 --- a/packages/builder/src/App.svelte +++ b/packages/builder/src/App.svelte @@ -4,30 +4,10 @@ import { Router, basepath } from "@sveltech/routify" import { routes } from "../routify/routes" import { store, initialise } from "builderStore" - import AppNotification, { - showAppNotification, - } from "components/common/AppNotification.svelte" - import { NotificationDisplay } from "@beyonk/svelte-notifications" - - function showErrorBanner() { - showAppNotification({ - status: "danger", - message: - "Whoops! Looks like we're having trouble. Please refresh the page.", - }) - } - - onMount(async () => { - window.addEventListener("error", showErrorBanner) - window.addEventListener("unhandledrejection", showErrorBanner) - }) + import NotificationDisplay from "components/common/Notification/NotificationDisplay.svelte" $basepath = "/_builder" - - - - diff --git a/packages/builder/src/actions/index.js b/packages/builder/src/actions/index.js deleted file mode 100644 index e69de29bb2..0000000000 diff --git a/packages/builder/src/budibase.css b/packages/builder/src/budibase.css index 3d880cbfa2..eed164131d 100644 --- a/packages/builder/src/budibase.css +++ b/packages/builder/src/budibase.css @@ -57,13 +57,14 @@ .budibase__nav-item { cursor: pointer; padding: 0 4px 0 2px; - height: 35px; - margin: 5px 0px 4px 0px; - border-radius: 0 5px 5px 0; + 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 { @@ -72,18 +73,22 @@ } .budibase__nav-item:hover { - background: var(--grey-light); + background: var(--grey-1); } .budibase__input { - height: 35px; - width: 220px; - border-radius: 3px; - border: 1px solid var(--grey-dark); + 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: 12px; + padding-left: 8px; + -moz-box-sizing: border-box; + -webkit-box-sizing: border-box; + box-sizing: border-box; } .uk-text-right { @@ -100,7 +105,7 @@ } .budibase__table { - border: 1px solid var(--grey-dark); + border: 1px solid var(--grey-4); background: #fff; border-radius: 2px; } @@ -116,12 +121,12 @@ } .budibase__table tr { - border-bottom: 1px solid var(--grey-light); + border-bottom: 1px solid var(--grey-1); } .button--toggled { background: var(--blue-light); - color: var(--ink-light); + color: var(--grey-7); width: 40px; height: 40px; display: flex; diff --git a/packages/builder/src/builderStore/store/backend.js b/packages/builder/src/builderStore/store/backend.js index 53bdaa3360..e5e5413111 100644 --- a/packages/builder/src/builderStore/store/backend.js +++ b/packages/builder/src/builderStore/store/backend.js @@ -1,22 +1,20 @@ import { writable } from "svelte/store" +import { cloneDeep } from "lodash/fp" +import { uuid } from "builderStore/uuid" import api from "../api" -import { getContext } from "svelte" - -/** TODO: DEMO SOLUTION - * this section should not be here, it is a quick fix for a demo - * when we reorg the backend UI, this should disappear - * **/ -import { CreateEditModelModal } from "components/database/ModelDataTable/modals" -/** DEMO SOLUTION END **/ export const getBackendUiStore = () => { const INITIAL_BACKEND_UI_STATE = { - breadcrumbs: [], models: [], views: [], users: [], selectedDatabase: {}, selectedModel: {}, + draftModel: {}, + tabs: { + SETUP_PANEL: "SETUP", + NAVIGATION_PANEL: "NAVIGATE", + }, } const store = writable(INITIAL_BACKEND_UI_STATE) @@ -31,26 +29,12 @@ export const getBackendUiStore = () => { store.update(state => { state.selectedDatabase = db if (models && models.length > 0) { - state.selectedModel = models[0] - state.selectedView = `all_${models[0]._id}` + store.actions.models.select(models[0]) } - state.breadcrumbs = [db.name] state.models = models state.views = views return state }) - /** TODO: DEMO SOLUTION**/ - if (!models || models.length === 0) { - const { open, close } = getContext("simple-modal") - open( - CreateEditModelModal, - { - onClosed: close, - }, - { styleContent: { padding: "0" } } - ) - } - /** DEMO SOLUTION END **/ }, }, records: { @@ -59,11 +43,6 @@ export const getBackendUiStore = () => { state.selectedView = state.selectedView return state }), - view: record => - store.update(state => { - state.breadcrumbs = [state.selectedDatabase.name, record._id] - return state - }), select: record => store.update(state => { state.selectedRecord = record @@ -71,14 +50,48 @@ export const getBackendUiStore = () => { }), }, models: { - create: model => + fetch: async () => { + const modelsResponse = await api.get(`/api/models`) + const models = await modelsResponse.json() + store.update(state => { + state.models = models + return state + }) + }, + select: model => store.update(state => { - state.models.push(model) - state.models = state.models state.selectedModel = model + state.draftModel = cloneDeep(model) + state.selectedField = "" state.selectedView = `all_${model._id}` + state.tabs.SETUP_PANEL = "SETUP" return state }), + save: async ({ model }) => { + const updatedModel = cloneDeep(model) + + const SAVE_MODEL_URL = `/api/models` + await api.post(SAVE_MODEL_URL, updatedModel) + await store.actions.models.fetch() + }, + addField: field => { + store.update(state => { + if (!state.draftModel.schema) { + state.draftModel.schema = {} + } + + const id = uuid() + + state.draftModel.schema = { + ...state.draftModel.schema, + [id]: field, + } + state.selectedField = id + state.tabs.NAVIGATION_PANEL = "NAVIGATE" + + return state + }) + }, }, views: { select: view => diff --git a/packages/builder/src/builderStore/store/index.js b/packages/builder/src/builderStore/store/index.js index 0b17e8c61c..11f2ed365e 100644 --- a/packages/builder/src/builderStore/store/index.js +++ b/packages/builder/src/builderStore/store/index.js @@ -1,4 +1,6 @@ import { values } from "lodash/fp" +import { get_capitalised_name } from "../../helpers" +import { backendUiStore } from "builderStore" import * as backendStoreActions from "./backend" import { writable, get } from "svelte/store" import api from "../api" @@ -22,7 +24,6 @@ import { saveCurrentPreviewItem as _saveCurrentPreviewItem, saveScreenApi as _saveScreenApi, regenerateCssForCurrentScreen, - renameCurrentScreen, } from "../storeUtils" export const getStore = () => { @@ -68,6 +69,7 @@ export const getStore = () => { store.getPathToComponent = getPathToComponent(store) store.addTemplatedComponent = addTemplatedComponent(store) store.setMetadataProp = setMetadataProp(store) + store.editPageOrScreen = editPageOrScreen(store) return store } @@ -152,14 +154,13 @@ const createScreen = store => (screenName, route, layoutComponentName) => { const rootComponent = state.components[layoutComponentName] const newScreen = { - name: screenName || "", description: "", url: "", _css: "", props: createProps(rootComponent).props, } - newScreen.route = route + newScreen.props._instanceName = screenName || "" state.currentPreviewItem = newScreen state.currentComponentInfo = newScreen.props state.currentFrontEndType = "screen" @@ -172,7 +173,7 @@ const createScreen = store => (screenName, route, layoutComponentName) => { const setCurrentScreen = store => screenName => { store.update(s => { - const screen = getExactComponent(s.screens, screenName) + const screen = getExactComponent(s.screens, screenName, true) s.currentPreviewItem = screen s.currentFrontEndType = "screen" s.currentView = "detail" @@ -243,6 +244,7 @@ const setCurrentPage = store => pageName => { const currentPage = state.pages[pageName] state.currentFrontEndType = "page" + state.currentView = "detail" state.currentPageName = pageName state.screens = Array.isArray(current_screens) ? current_screens @@ -294,10 +296,15 @@ const addChildComponent = store => (componentToAdd, presetName) => { const presetProps = presetName ? component.presets[presetName] : {} + const instanceId = get(backendUiStore).selectedDatabase._id + const instanceName = get_capitalised_name(componentToAdd) + const newComponent = createProps( component, { ...presetProps, + _instanceId: instanceId, + _instanceName: instanceName, }, state ) @@ -346,24 +353,23 @@ const selectComponent = store => component => { const setComponentProp = store => (name, value) => { store.update(state => { - const current_component = state.currentComponentInfo - state.currentComponentInfo[name] = value - - _saveCurrentPreviewItem(state) + let current_component = state.currentComponentInfo + current_component[name] = value state.currentComponentInfo = current_component + _saveCurrentPreviewItem(state) return state }) } const setPageOrScreenProp = store => (name, value) => { store.update(state => { - if (name === "name" && state.currentFrontEndType === "screen") { - state = renameCurrentScreen(value, state) + if (name === "_instanceName" && state.currentFrontEndType === "screen") { + state.currentPreviewItem.props[name] = value } else { state.currentPreviewItem[name] = value - _saveCurrentPreviewItem(state) } + _saveCurrentPreviewItem(state) return state }) } @@ -413,6 +419,18 @@ const setScreenType = store => type => { state.currentComponentInfo = pageOrScreen ? pageOrScreen.props : null state.currentPreviewItem = pageOrScreen + state.currentView = "detail" + return state + }) +} + +const editPageOrScreen = store => (key, value, setOnComponent = false) => { + store.update(state => { + setOnComponent + ? (state.currentPreviewItem.props[key] = value) + : (state.currentPreviewItem[key] = value) + _saveCurrentPreviewItem(state) + return state }) } diff --git a/packages/builder/src/builderStore/store/notifications.js b/packages/builder/src/builderStore/store/notifications.js new file mode 100644 index 0000000000..85e708e92a --- /dev/null +++ b/packages/builder/src/builderStore/store/notifications.js @@ -0,0 +1,23 @@ +import { writable } from "svelte/store" +import { generate } from "shortid" + +export const notificationStore = writable({ + notifications: [], +}) + +export function send(message, type = "default") { + notificationStore.update(state => { + state.notifications = [ + ...state.notifications, + { id: generate(), type, message }, + ] + return state + }) +} + +export const notifier = { + danger: msg => send(msg, "danger"), + warning: msg => send(msg, "warning"), + info: msg => send(msg, "info"), + success: msg => send(msg, "success"), +} diff --git a/packages/builder/src/builderStore/storeUtils.js b/packages/builder/src/builderStore/storeUtils.js index ff951e6b6f..63fd7ecd00 100644 --- a/packages/builder/src/builderStore/storeUtils.js +++ b/packages/builder/src/builderStore/storeUtils.js @@ -46,8 +46,9 @@ export const saveScreenApi = (screen, s) => { } export const renameCurrentScreen = (newname, state) => { - const oldname = state.currentPreviewItem.name - state.currentPreviewItem.name = newname + const oldname = state.currentPreviewItem.props._instanceName + state.currentPreviewItem.props._instanceName = newname + api.patch( `/_builder/api/${state.appId}/pages/${state.currentPageName}/screen`, { diff --git a/packages/builder/src/components/common/ActionButton.svelte b/packages/builder/src/components/common/ActionButton.svelte index 147737b5c6..3af21e4398 100644 --- a/packages/builder/src/components/common/ActionButton.svelte +++ b/packages/builder/src/components/common/ActionButton.svelte @@ -41,7 +41,7 @@ .secondary { color: var(--ink); - border: solid 1px var(--grey-dark); + border: solid 1px var(--grey-4); background: white; } diff --git a/packages/builder/src/components/common/AppNotification.svelte b/packages/builder/src/components/common/AppNotification.svelte deleted file mode 100644 index 2e8723ab53..0000000000 --- a/packages/builder/src/components/common/AppNotification.svelte +++ /dev/null @@ -1,77 +0,0 @@ - - - diff --git a/packages/builder/src/components/common/Block.svelte b/packages/builder/src/components/common/Block.svelte new file mode 100644 index 0000000000..fc1958a211 --- /dev/null +++ b/packages/builder/src/components/common/Block.svelte @@ -0,0 +1,56 @@ + + +
+ + {title} +
+ + diff --git a/packages/builder/src/components/common/Button.svelte b/packages/builder/src/components/common/Button.svelte index 5b8f2fb593..a5fe3752a2 100644 --- a/packages/builder/src/components/common/Button.svelte +++ b/packages/builder/src/components/common/Button.svelte @@ -42,14 +42,14 @@ /* ---- PRIMARY ----*/ .primary { - background-color: var(--primary100); - border-color: var(--primary100); + background-color: var(--blue); + border-color: var(--blue); color: var(--white); } .primary:hover { - background-color: var(--primary75); - border-color: var(--primary75); + background-color: var(--blue); + border-color: var(--blue); } .primary:active { @@ -59,8 +59,8 @@ .primary-outline { background-color: var(--white); - border-color: var(--primary100); - color: var(--primary100); + border-color: var(--blue); + color: var(--blue); } .primary-outline:hover { @@ -74,8 +74,8 @@ /* ---- secondary ----*/ .secondary { - background-color: var(--secondary100); - border-color: var(--secondary100); + background-color: var(--ink); + border-color: var(--ink); color: var(--white); } @@ -91,8 +91,8 @@ .secondary-outline { background-color: var(--white); - border-color: var(--secondary100); - color: var(--secondary100); + border-color: var(--ink); + color: var(--ink); } .secondary-outline:hover { @@ -136,32 +136,36 @@ /* ---- deletion ----*/ .deletion { - background-color: var(--deletion100); - border-color: var(--deletion100); + background-color: var(--red); + border-color: var(--red); color: var(--white); } .deletion:hover { - background-color: var(--deletion75); - border-color: var(--deletion75); + background-color: var(--red-light); + border-color: var(--red); + color: var(--red); } .deletion:pressed { - background-color: var(--deletiondark); - border-color: var(--deletiondark); + background-color: var(--red-dark); + border-color: var(--red-dark); + color: var(--white); } .deletion-outline { background-color: var(--white); - border-color: var(--deletion100); - color: var(--deletion100); + border-color: var(--red); + color: var(--red); } .deletion-outline:hover { - background-color: var(--deletion10); + background-color: var(--red-light); + color: var(--red); } .deletion-outline:pressed { - background-color: var(--deletion25); + background-color: var(--red-dark); + color: var(--white); } diff --git a/packages/builder/src/components/common/Checkbox.svelte b/packages/builder/src/components/common/Checkbox.svelte index 9f777ca704..37eb385d79 100644 --- a/packages/builder/src/components/common/Checkbox.svelte +++ b/packages/builder/src/components/common/Checkbox.svelte @@ -3,8 +3,8 @@ export let label = "" - {label} + diff --git a/packages/builder/src/components/common/Notification/NotificationDisplay.svelte b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte new file mode 100644 index 0000000000..425eb60fb2 --- /dev/null +++ b/packages/builder/src/components/common/Notification/NotificationDisplay.svelte @@ -0,0 +1,65 @@ + + +
    + {#each $notificationStore.notifications as notification (notification.id)} +
  • +
    {notification.message}
    + {#if notification.icon} + + {/if} +
    • + {/each} +
+ + diff --git a/packages/builder/src/components/common/NumberBox.svelte b/packages/builder/src/components/common/NumberBox.svelte index 2c0f097964..8a38f8a0d2 100644 --- a/packages/builder/src/components/common/NumberBox.svelte +++ b/packages/builder/src/components/common/NumberBox.svelte @@ -13,13 +13,25 @@ let numberText = value === null || value === undefined ? "" : value.toString() -
- -
- -
+
+ +
+ + diff --git a/packages/builder/src/components/common/PlusButton.svelte b/packages/builder/src/components/common/PlusButton.svelte index 6e2e4cf58a..25b8a147c2 100644 --- a/packages/builder/src/components/common/PlusButton.svelte +++ b/packages/builder/src/components/common/PlusButton.svelte @@ -17,7 +17,7 @@ align-items: center; font-size: 1.2rem; - font-weight: 700; - color: var(--secondary100); + font-weight: 600; + color: var(--ink); } diff --git a/packages/builder/src/components/common/Select.svelte b/packages/builder/src/components/common/Select.svelte index 4bdd2a941e..0eb368dac9 100644 --- a/packages/builder/src/components/common/Select.svelte +++ b/packages/builder/src/components/common/Select.svelte @@ -21,7 +21,7 @@ .select-container { font-size: 14px; position: relative; - border: var(--grey-dark) 1px solid; + border: var(--grey-4) 1px solid; } .adjusted { diff --git a/packages/builder/src/components/common/Switcher.svelte b/packages/builder/src/components/common/Switcher.svelte index 484d52ee07..59c44190af 100644 --- a/packages/builder/src/components/common/Switcher.svelte +++ b/packages/builder/src/components/common/Switcher.svelte @@ -43,7 +43,7 @@ display: flex; flex-direction: column; padding: 20px 20px; - border-left: solid 1px var(--grey); + border-left: solid 1px var(--grey-2); box-sizing: border-box; } @@ -60,10 +60,11 @@ padding: 0; cursor: pointer; font-size: 18px; - font-weight: 700; - color: var(--ink-lighter); + font-weight: 600; + color: var(--grey-5); margin-right: 20px; background: none; + outline: none; } .switcher > .selected { diff --git a/packages/builder/src/components/common/ValuesList.svelte b/packages/builder/src/components/common/ValuesList.svelte index 1d1e5ce33c..f27bf4cf82 100644 --- a/packages/builder/src/components/common/ValuesList.svelte +++ b/packages/builder/src/components/common/ValuesList.svelte @@ -15,16 +15,34 @@ $: valuesText = join("\n")(values) -
- +
+