Tweak data app page style (#25875)

* tweak header status based on isDataApp

* get isDataApp from proper source, use to stop the whole show / hide business

* Fix hardcoded color

Co-authored-by: Kyle Doherty <5248953+kdoh@users.noreply.github.com>

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 && (

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`

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;

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}