Update panel text size and improve target panel position wording

4 years ago · ee0dd6853a
3 changed files with 6 additions and 3 deletions
--- a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/NewComponentPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/NewComponentPanel.svelte
@ -139,7 +139,7 @@
    {/each}
  {:else}
    <Layout paddingX="L" paddingY="XL" gap="S">
-      <Body>Blocks are a collection of pre-built components</Body>
+      <Body size="S">Blocks are collections of pre-built components</Body>
      <Layout noPadding gap="XS">
        {#each blocks as block}
          <div class="component block" on:click={() => addComponent(block)}>
--- a/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/NewComponentTargetPanel.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/components/[screenId]/new/_components/NewComponentTargetPanel.svelte
@ -8,10 +8,11 @@
  )
  $: isScreen = $selectedComponent?._id === $selectedScreen?.props._id
  $: title = isScreen ? "Screen" : $selectedComponent?._instanceName
+  $: position = componentDefinition?.hasChildren ? "inside" : "below"
 </script>

 <SettingsPanel {title} icon={componentDefinition?.icon}>
  <Layout paddingX="L" paddingY="XL">
-    <Body>The component you add will be placed inside {title}</Body>
+    <Body size="S">Components you add will be placed {position} {title}</Body>
  </Layout>
 </SettingsPanel>
--- a/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte
+++ b/packages/builder/src/pages/builder/app/[application]/design/theme/index.svelte
@ -6,7 +6,9 @@

 <NavigationPanel title="Theme">
  <Layout paddingX="L" paddingY="XL" gap="S">
-    <Body>Your theme is set across all the screens within your app</Body>
+    <Body size="S">
+      Your theme is set across all the screens within your app
+    </Body>
    <ThemeEditor />
  </Layout>
 </NavigationPanel>