diff --git a/frontend/src/metabase/dashboard/components/DashboardInfoSidebar.styled.tsx b/frontend/src/metabase/dashboard/components/DashboardInfoSidebar.styled.tsx index b3da6f4e60a09bc4796f7cea8ca267078b8054f0..89b69afc1671b57178852326b7156832ba8bd2db 100644 --- a/frontend/src/metabase/dashboard/components/DashboardInfoSidebar.styled.tsx +++ b/frontend/src/metabase/dashboard/components/DashboardInfoSidebar.styled.tsx @@ -1,10 +1,11 @@ import styled from "@emotion/styled"; import { color } from "metabase/lib/colors"; +import EditableText from "metabase/core/components/EditableText"; export const DashboardInfoSidebarRoot = styled.div` width: 360px; - padding: 0.5rem 2rem; + padding: 0 2rem 0.5rem; background: ${color("white")}; border-left: 1px solid ${color("border")}; height: 100%; @@ -19,7 +20,21 @@ export const ContentSection = styled.div` padding: 2rem 0; border-bottom: 1px solid ${color("border")}; + &:first-of-type { + padding-top: 1.5rem; + } + &:last-of-type { border-bottom: none; } + + ${EditableText.Root} { + font-size: 1rem; + line-height: 1.4rem; + margin-left: -0.3rem; + } +`; + +export const DescriptionHeader = styled.h3` + margin-bottom: 0.5rem; `; diff --git a/frontend/src/metabase/dashboard/components/DashboardInfoSidebar.tsx b/frontend/src/metabase/dashboard/components/DashboardInfoSidebar.tsx index 673ad5d9360b68730055da78db8520a389697c17..536d7285bc1dc15a8ad32f462c26257bf5ec546c 100644 --- a/frontend/src/metabase/dashboard/components/DashboardInfoSidebar.tsx +++ b/frontend/src/metabase/dashboard/components/DashboardInfoSidebar.tsx @@ -21,6 +21,7 @@ import { DashboardInfoSidebarRoot, HistoryHeader, ContentSection, + DescriptionHeader, } from "./DashboardInfoSidebar.styled"; interface DashboardInfoSidebarProps { @@ -70,6 +71,7 @@ const DashboardInfoSidebar = ({ return ( <DashboardInfoSidebarRoot> <ContentSection> + <DescriptionHeader>{t`About`}</DescriptionHeader> <EditableText initialValue={dashboard.description} isDisabled={!dashboard.can_write}