From 72a16788e641211827d781d9f1852b588043b20f Mon Sep 17 00:00:00 2001
From: Nick Fitzpatrick <nick@metabase.com>
Date: Fri, 8 Jul 2022 11:37:49 -0300
Subject: [PATCH] Updating dashboard info panel styling (#23773)
---
.../components/DashboardInfoSidebar.styled.tsx | 17 ++++++++++++++++-
.../components/DashboardInfoSidebar.tsx | 2 ++
2 files changed, 18 insertions(+), 1 deletion(-)
diff --git a/frontend/src/metabase/dashboard/components/DashboardInfoSidebar.styled.tsx b/frontend/src/metabase/dashboard/components/DashboardInfoSidebar.styled.tsx
index b3da6f4e60a..89b69afc167 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 673ad5d9360..536d7285bc1 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}
--
GitLab