CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-05 22:40:39 +12:00
Code Issues Projects Releases Wiki Activity

Standardise info boxes between theme and navigation

Browse source
This commit is contained in:
Andrew Kingston 2023-08-23 16:46:32 +01:00
parent 07e5f04b6a
commit 07e49f4436
3 changed files with 17 additions and 42 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

22
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Navigation/index.svelte
View file

@ -64,10 +64,8 @@
<Detail>Customize</Detail>
</div>
<div class="info">
<div class="infoHeader">
<Icon name="InfoOutline" />
<Body size="S">These settings apply to all screens</Body>
</div>
<Icon name="InfoOutline" size="S" />
<Body size="S">These settings apply to all screens</Body>
</div>
<div class="configureLinks">
<LinksEditor />
@ -210,22 +208,14 @@
.info {
background-color: var(--background-alt);
padding: 12px;
margin-bottom: 12px;
}
.infoHeader {
display: flex;
margin-bottom: 5px;
border-radius: 4px;
gap: 4px;
margin-bottom: 16px;
}
.infoHeader :global(svg) {
.info :global(svg) {
margin-right: 5px;
color: var(--grey-6);
}
.infoHeader :global(p) {
color: var(--grey-7);
color: var(--spectrum-global-color-gray-600);
}
.configureLinks :global(button) {

33
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/ThemePanel.svelte
View file

@ -29,13 +29,8 @@
</script>
<div class="info">
<div class="infoHeader">
<Icon name="InfoOutline" size="S" />
<Body size="XS">CHANGES WILL APPLY TO ALL SCREENS</Body>
</div>
<Body size="S">
Your theme is configured for all the screens within your app.
</Body>
<Icon name="InfoOutline" size="S" />
<Body size="S">These settings apply to all screens</Body>
</div>
<Layout noPadding gap="S">
<Layout noPadding gap="XS">
@ -68,26 +63,16 @@
/>
</Layout>
<!-- Add this to its own component -->
<style>
.infoHeader {
display: flex;
margin-bottom: 5px;
border-radius: 4px;
}
.infoHeader :global(svg) {
margin-right: 5px;
color: var(--grey-6);
}
.infoHeader :global(p) {
color: var(--grey-6);
}
.info {
background-color: var(--background-alt);
padding: 12px;
margin-bottom: 12px;
display: flex;
border-radius: 4px;
gap: 4px;
}
.info :global(svg) {
margin-right: 5px;
color: var(--spectrum-global-color-gray-600);
}
</style>

4
packages/builder/src/pages/builder/app/[application]/design/[screenId]/[componentId]/_components/Screen/index.svelte
View file

@ -6,8 +6,8 @@
import { capitalise } from "helpers"
import { ActionButton, Layout } from "@budibase/bbui"
let activeTab = "settings"
const tabs = ["settings", "theme"]
let activeTab = "general"
const tabs = ["general", "theme"]
</script>
<Panel