CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-01 04:21:06 +12:00
Code Issues Projects Releases Wiki Activity

Update binding icon styles and fix theme editor

Browse source
This commit is contained in:
Andrew Kingston 2021-04-19 14:10:58 +01:00
parent 3703ab17a4
commit f0d1667b03
3 changed files with 10 additions and 20 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

11
packages/builder/src/builderStore/store/theme.js
View file

@ -5,19 +5,8 @@ export const getThemeStore = () => {
const initialValue = {
darkMode: true,
}
const store = localStorageStore("bb-theme", initialValue)
// Resets the custom theme to the default dark theme.
// The reset option is only available when dark theme is on, which is why it
// sets dark mode to true here
store.reset = () => {
store.set({
...initialValue,
darkMode: true,
})
}
// Update theme when store changes
store.subscribe(theme => {
themeElement.classList.toggle("spectrum--darkest", theme.darkMode)

17
packages/builder/src/components/design/PropertiesPanel/PropertyControls/PropertyControl.svelte
View file

@ -138,18 +138,19 @@
}
.icon {
right: 2px;
top: 2px;
bottom: 2px;
right: 1px;
top: 1px;
bottom: 1px;
position: absolute;
align-items: center;
display: flex;
box-sizing: border-box;
padding-left: 7px;
border-left: 1px solid var(--grey-4);
background-color: var(--grey-2);
border-top-right-radius: var(--border-radius-m);
border-bottom-right-radius: var(--border-radius-m);
padding-left: 4px;
padding-right: 2px;
border-left: 1px solid var(--spectrum-alias-border-color);
background-color: var(--spectrum-global-color-gray-50);
border-top-right-radius: var(--spectrum-alias-border-radius-regular);
border-bottom-right-radius: var(--spectrum-alias-border-radius-regular);
color: var(--grey-7);
font-size: 14px;
}

2
packages/builder/src/components/settings/ThemeEditor.svelte
View file

@ -7,7 +7,7 @@
<div class="content">
<div>
<Toggle thin text="Dark theme" bind:checked={$themeStore.darkMode} />
<Toggle text="Dark theme" bind:value={$themeStore.darkMode} />
</div>
</div>