diff --git a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.jsx b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.jsx index d649a7604cf10105feb1456ce90f54781ca7a3cb..26c92ce32c280b7c9d7262136117c8f1e388f5c2 100644 --- a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.jsx +++ b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.jsx @@ -270,6 +270,7 @@ class Dashboard extends Component { <HeaderContainer isFullscreen={isFullscreen} isNightMode={shouldRenderAsNightMode} + isDataApp={dashboard.is_app_page} > <DashboardHeader {...this.props} @@ -280,6 +281,7 @@ class Dashboard extends Component { onSharingClick={this.onSharingClick} onToggleAddQuestionSidebar={this.onToggleAddQuestionSidebar} showAddQuestionSidebar={showAddQuestionSidebar} + isDataApp={dashboard.is_app_page} /> {shouldRenderParametersWidgetInEditMode && ( diff --git a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.jsx b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.jsx index 8b418e1e02b003ed6ddc1344b05640d8addec5af..8b01f52ff04b03e852987280a06aa934905ed4e4 100644 --- a/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.jsx +++ b/frontend/src/metabase/dashboard/components/Dashboard/Dashboard.styled.jsx @@ -63,11 +63,16 @@ export const DashboardBody = styled.div` `; export const HeaderContainer = styled.header` - background-color: white; - border-bottom: 1px solid ${color("border")}; position: relative; z-index: 2; + ${({ isDataApp }) => + !isDataApp && + css` + background-color: ${color("bg-white")}; + border-bottom: 1px solid ${color("border")}; + `} + ${({ isFullscreen }) => isFullscreen && css` diff --git a/frontend/src/metabase/dashboard/components/DashboardHeader.styled.tsx b/frontend/src/metabase/dashboard/components/DashboardHeader.styled.tsx index 8f577c7451b4267f78e492e7690c86bec98e2159..2ec2b84f83ecfa31bd213587df00755151e9dec8 100644 --- a/frontend/src/metabase/dashboard/components/DashboardHeader.styled.tsx +++ b/frontend/src/metabase/dashboard/components/DashboardHeader.styled.tsx @@ -86,15 +86,19 @@ export const HeaderContent = styled.div<HeaderContentProps>` opacity: ${props => (props.showSubHeader ? "1x" : "0")}; } - &:hover, - &:focus-within { - ${HeaderCaptionContainer} { - top: 0; - } - ${HeaderLastEditInfoLabel} { - opacity: 1; - } - } + ${({ showSubHeader }) => + showSubHeader && + css` + &:hover, + &:focus-within { + ${HeaderCaptionContainer} { + top: 0; + } + ${HeaderLastEditInfoLabel} { + opacity: 1; + } + } + `} ${breakpointMaxSmall} { padding-top: 0; diff --git a/frontend/src/metabase/dashboard/components/DashboardHeader.tsx b/frontend/src/metabase/dashboard/components/DashboardHeader.tsx index cf3e008394a69aee4058d70617dd96712bd93032..4d7f146ba21fc8ffa6bc7bd8bcb8958253602074 100644 --- a/frontend/src/metabase/dashboard/components/DashboardHeader.tsx +++ b/frontend/src/metabase/dashboard/components/DashboardHeader.tsx @@ -113,6 +113,8 @@ const DashboardHeader = ({ return () => clearTimeout(timerId); }); + const isDataApp = dashboard.is_app_page; + return ( <div> {isEditing && ( @@ -135,7 +137,7 @@ const DashboardHeader = ({ className={cx("QueryBuilder-section", headerClassName)} ref={header} > - <HeaderContent showSubHeader={showSubHeader}> + <HeaderContent showSubHeader={!isDataApp && showSubHeader}> <HeaderCaptionContainer> <HeaderCaption key={dashboard.name}