diff --git a/frontend/src/metabase/collections/components/PinnedItemOverview/PinnedItemOverview.styled.tsx b/frontend/src/metabase/collections/components/PinnedItemOverview/PinnedItemOverview.styled.tsx index a14f66f22b2b15cef890184b5dc459b6372ffed5..e3605c236d240f52ae72e83135045ed8cd3e4299 100644 --- a/frontend/src/metabase/collections/components/PinnedItemOverview/PinnedItemOverview.styled.tsx +++ b/frontend/src/metabase/collections/components/PinnedItemOverview/PinnedItemOverview.styled.tsx @@ -23,9 +23,13 @@ export const Grid = styled.div` } `; -export const SectionHeader = styled.div` +export interface SectionHeaderProps { + hasTopMargin?: boolean; +} + +export const SectionHeader = styled.div<SectionHeaderProps>` + margin-top: ${props => (props.hasTopMargin ? "1.5rem" : "")}; padding-bottom: 1.15rem; - margin-top: 1.5rem; `; export const SectionSubHeader = styled.div` diff --git a/frontend/src/metabase/collections/components/PinnedItemOverview/PinnedItemOverview.tsx b/frontend/src/metabase/collections/components/PinnedItemOverview/PinnedItemOverview.tsx index f2e4d48960d7fec2854030c2a5ce6e0eff243b13..fe34cb36b8983d551cbaa09b34c01afc874028ea 100644 --- a/frontend/src/metabase/collections/components/PinnedItemOverview/PinnedItemOverview.tsx +++ b/frontend/src/metabase/collections/components/PinnedItemOverview/PinnedItemOverview.tsx @@ -98,42 +98,49 @@ function PinnedItemOverview({ )} {dashboardItems.length > 0 && ( - <Grid> - {dashboardItems.map(item => ( - <div key={item.id} className="relative"> - <PinnedItemSortDropTarget - isFrontTarget - itemModel="dashboard" - pinIndex={item.collection_position} - enableDropTargetBackground={false} - /> - <ItemDragSource item={item} collection={collection}> - <div> - <PinnedItemCard - bookmarks={bookmarks} - createBookmark={createBookmark} - deleteBookmark={deleteBookmark} - item={item} - collection={collection} - onCopy={onCopy} - onMove={onMove} - /> - </div> - </ItemDragSource> - <PinnedItemSortDropTarget - isBackTarget - itemModel="dashboard" - pinIndex={item.collection_position} - enableDropTargetBackground={false} - /> - </div> - ))} - </Grid> + <div> + <SectionHeader hasTopMargin={cardItems.length > 0}> + <h3>{t`Dashboards`}</h3> + </SectionHeader> + <Grid> + {dashboardItems.map(item => ( + <div key={item.id} className="relative"> + <PinnedItemSortDropTarget + isFrontTarget + itemModel="dashboard" + pinIndex={item.collection_position} + enableDropTargetBackground={false} + /> + <ItemDragSource item={item} collection={collection}> + <div> + <PinnedItemCard + bookmarks={bookmarks} + createBookmark={createBookmark} + deleteBookmark={deleteBookmark} + item={item} + collection={collection} + onCopy={onCopy} + onMove={onMove} + /> + </div> + </ItemDragSource> + <PinnedItemSortDropTarget + isBackTarget + itemModel="dashboard" + pinIndex={item.collection_position} + enableDropTargetBackground={false} + /> + </div> + ))} + </Grid> + </div> )} {dataModelItems.length > 0 && ( <div> - <SectionHeader> + <SectionHeader + hasTopMargin={cardItems.length > 0 || dashboardItems.length > 0} + > <h3>{t`Useful data`}</h3> <SectionSubHeader> {isRootCollection(collection)