CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-07-09 00:06:05 +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> <Detail>Customize</Detail>
</div> </div>
<div class="info"> <div class="info">
<div class="infoHeader"> <Icon name="InfoOutline" size="S" />
<Icon name="InfoOutline" /> <Body size="S">These settings apply to all screens</Body>
<Body size="S">These settings apply to all screens</Body>
</div>
</div> </div>
<div class="configureLinks"> <div class="configureLinks">
<LinksEditor /> <LinksEditor />
@ -210,22 +208,14 @@
.info { .info {
background-color: var(--background-alt); background-color: var(--background-alt);
padding: 12px; padding: 12px;
margin-bottom: 12px;
}
.infoHeader {
display: flex; display: flex;
margin-bottom: 5px;
border-radius: 4px; border-radius: 4px;
gap: 4px;
margin-bottom: 16px;
} }
.info :global(svg) {
.infoHeader :global(svg) {
margin-right: 5px; margin-right: 5px;
color: var(--grey-6); color: var(--spectrum-global-color-gray-600);
}
.infoHeader :global(p) {
color: var(--grey-7);
} }
.configureLinks :global(button) { .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> </script>
<div class="info"> <div class="info">
<div class="infoHeader"> <Icon name="InfoOutline" size="S" />
<Icon name="InfoOutline" size="S" /> <Body size="S">These settings apply to all screens</Body>
<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>
</div> </div>
<Layout noPadding gap="S"> <Layout noPadding gap="S">
<Layout noPadding gap="XS"> <Layout noPadding gap="XS">
@ -68,26 +63,16 @@
/> />
</Layout> </Layout>
<!-- Add this to its own component -->
<style> <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 { .info {
background-color: var(--background-alt); background-color: var(--background-alt);
padding: 12px; 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> </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 { capitalise } from "helpers"
import { ActionButton, Layout } from "@budibase/bbui" import { ActionButton, Layout } from "@budibase/bbui"
let activeTab = "settings" let activeTab = "general"
const tabs = ["settings", "theme"] const tabs = ["general", "theme"]
</script> </script>
<Panel <Panel