diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte index c540af5d4f..7f841e09ea 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/NewComponentPanel.svelte @@ -188,6 +188,7 @@ {#each category.children as component}
15} class:selected={selectedIndex === orderMap[component.component]} on:click={() => addComponent(component.component)} on:mouseover={() => (selectedIndex = null)} @@ -226,7 +227,7 @@ .component { background-color: var(--spectrum-global-color-gray-200); border-radius: 4px; - height: 72px; + height: 76px; display: flex; flex-direction: column; justify-content: center; @@ -238,6 +239,9 @@ border: 1px solid var(--spectrum-global-color-gray-200); transition: border-color 130ms ease-out; } + .component.wide { + grid-column: span 2; + } .component.selected, .component:hover { border-color: var(--spectrum-global-color-blue-400); diff --git a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/componentStructure.json b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/componentStructure.json index 6873ae547d..acd28c6a41 100644 --- a/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/componentStructure.json +++ b/packages/builder/src/pages/builder/app/[application]/design/[screenId]/components/new/_components/componentStructure.json @@ -26,6 +26,26 @@ "dynamicfilter" ] }, + { + "name": "Basic", + "icon": "TextParagraph", + "children": [ + "heading", + "text", + "button", + "tag", + "spectrumcard", + "cardstat", + "divider", + "image", + "link", + "icon", + "embed", + "markdownviewer", + "backgroundimage", + "embeddedmap" + ] + }, { "name": "Form", "icon": "Form", @@ -39,23 +59,15 @@ "optionsfield", "booleanfield", "longformfield", - "datetimefield", "attachmentfield", - "relationshipfield", "daterangepicker", - "multifieldselect", "jsonfield", + "relationshipfield", + "datetimefield", + "multifieldselect", "s3upload" ] }, - { - "name": "Card", - "icon": "Card", - "children": [ - "spectrumcard", - "cardstat" - ] - }, { "name": "Chart", "icon": "GraphBarVertical", @@ -63,27 +75,9 @@ "bar", "line", "area", + "candlestick", "pie", - "donut", - "candlestick" - ] - }, - { - "name": "Elements", - "icon": "TextParagraph", - "children": [ - "heading", - "text", - "button", - "tag", - "divider", - "image", - "backgroundimage", - "link", - "icon", - "embed", - "markdownviewer", - "embeddedmap" + "donut" ] } ]