Stats-30 - Ensure correct logo and titles are displayed in the new header

client/components/jetpack-logo/index.jsx

@@ -1,6 +1,7 @@
 import colorStudio from '@automattic/color-studio';
 import clsx from 'clsx';
 import PropTypes from 'prop-types';
+import React from 'react';
 import useAriaProps from 'calypso/lib/a11y/use-aria-props';
 
 /**
@@ -48,7 +49,17 @@ const LogoPathSize32Monochrome = () => (
 	</>
 );
 
-const JetpackLogo = ( { full = false, monochrome = false, size = 32, className, aria } ) => {
+/**
+ * JetpackLogo component renders the Jetpack logo with optional monochrome styling.
+ * @param {Object} props - Component properties.
+ * @param {boolean} [props.full] - Whether to show the full logo with text.
+ * @param {boolean|undefined} [props.monochrome] - If true, renders the logo in monochrome. If undefined, uses a default based on size.
+ * @param {number} [props.size] - The size of the logo.
+ * @param {string} [props.className] - Additional class names.
+ * @param {Object} [props.aria] - ARIA attributes.
+ * @returns The rendered Jetpack logo component
+ */
+const JetpackLogo = ( { full = false, monochrome, size = 32, className, aria } ) => {
 	const classes = clsx( 'jetpack-logo', className );
 	const ariaProps = useAriaProps( aria );
 
@@ -65,7 +76,9 @@ const JetpackLogo = ( { full = false, monochrome = false, size = 32, className,
 		);
 	}
 
-	if ( 24 === size ) {
+	// If size=24 and monochrome is true or undefined, return a monochrome logo - This is to ensure legacy behavior of the component.
+	// Return a non-monochrome logo if monochrome=false is explicitly passed with size 24.
+	if ( 24 === size && ( monochrome || monochrome === undefined ) ) {
 		return (
 			// eslint-disable-next-line wpcalypso/jsx-classname-namespace
 			<svg className={ classes } height="24" width="24" viewBox="0 0 24 24" { ...ariaProps }>

client/components/navigation-header/navigation-header.scss

@@ -5,7 +5,6 @@
 .calypso-navigation-header {
 	background-color: var(--wp-components-color-background, #fff);
 	box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
-	width: 100%;
 	padding: 24px 0;
 
 	&__head {
@@ -17,12 +16,18 @@
 		display: flex;
 		align-items: center;
 		justify-content: space-between;
+		height: 32px;
+		padding-bottom: 24px;
 	}
 
 	&__left-section {
 		display: flex;
 		align-items: center;
-		gap: $grid-unit-20;
+	}
+
+	&__right-section {
+		display: flex;
+		align-items: center;
 	}
 
 	&__back-link {
@@ -34,7 +39,7 @@
 		transition: color 0.2s ease;
 
 		&:hover {
-			color: var(--wp-components-color-gray-900, #333);
+			color: var(--wp-components-color-gray-900, $gray-900);
 		}
 
 		svg {
@@ -43,19 +48,32 @@
 	}
 
 	&__title {
-		margin: 0;
-		font-size: 24px;
+		font-size: 20px;
 		font-weight: 500;
-		color: var(--wp-components-color-gray-900, #333);
+		font-family: "SF Pro Display", $sans;
+		color: var(--wp-components-color-gray-900, $gray-900);
+		display: flex;
+		align-items: center;
+		gap: 10px;
+		line-height: 1;
+		height: 32px;
 
 		@media (max-width: $break-small) {
 			font-size: 20px;
 		}
 	}
 
-	&__right-section {
+	&__title-logo {
+		padding: 4px;
 		display: flex;
 		align-items: center;
+		height: 24px;
+		width: 24px;
+
+		img, svg {
+			max-height: 100%;
+			width: auto;
+		}
 	}
 
 	// Add extra space when there is a classic/non classic option tab at the top on mobile that collides with cta's

client/components/navigation-header/navigation-header.tsx

@@ -12,30 +12,35 @@ interface BackLinkProps {
 
 interface HeaderProps extends React.HTMLAttributes< HTMLElement > {
 	title?: string;
+	titleLogo?: ReactNode;
 	backLinkProps?: BackLinkProps;
 	titleElement?: ReactNode;
 	headElement?: ReactNode;
-	children?: ReactNode;
+	rightSection?: ReactNode;
 	hasScreenOptionsTab?: boolean;
+	titleProps?: {
+		title?: string;
+		titleLogo?: ReactNode;
+	};
 }
 
 /**
  * Header component that can be used in various contexts
  * @param props - Component props
  * @param props.className - Additional CSS class name for the component
- * @param props.title - Header title text
+ * @param props.titleProps - Header title props
  * @param props.backLinkProps - Object containing back link properties (backLink URL, backLinkText, and onBackClick handler)
  * @param props.titleElement - Custom element to override default title rendering
  * @param props.headElement - Custom element to override default head section rendering
- * @param props.children - Child elements to render in the right section
+ * @param props.rightSection - Child elements to render in the right section
  * @param props.hasScreenOptionsTab - Indicates whether the screen options tab should be added
  * @returns The rendered NavigationHeader component
  */
 const NavigationHeader: React.FC< HeaderProps > = ( {
 	className,
-	title,
+	titleProps,
 	backLinkProps,
-	titleElement = <h1 className="calypso-navigation-header__title">{ title }</h1>,
+	titleElement,
 	headElement = backLinkProps?.url && (
 		<a
 			className="calypso-navigation-header__back-link"
@@ -50,10 +55,27 @@ const NavigationHeader: React.FC< HeaderProps > = ( {
 			← { backLinkProps?.text ?? translate( 'Back' ) }
 		</a>
 	),
-	children,
+	rightSection,
 	hasScreenOptionsTab,
 	...rest
 } ) => {
+	const defaultTitleElement = (
+		<h1 className="calypso-navigation-header__title">
+			{ titleProps?.titleLogo && (
+				<span className="calypso-navigation-header__title-logo" aria-hidden="true">
+					{ titleProps.titleLogo }
+				</span>
+			) }
+			{ titleProps?.title && titleProps?.titleLogo ? (
+				<span className="calypso-navigation-header__title-text">{ titleProps?.title }</span>
+			) : (
+				titleProps?.title
+			) }
+		</h1>
+	);
+
+	const finalTitleElement = titleElement ?? defaultTitleElement;
+
 	return (
 		<header
 			className={ clsx( 'calypso-navigation-header', className, {
@@ -63,8 +85,10 @@ const NavigationHeader: React.FC< HeaderProps > = ( {
 		>
 			<div className="calypso-navigation-header__head">{ headElement }</div>
 			<div className="calypso-navigation-header__body">
-				<div className="calypso-navigation-header__left-section">{ titleElement }</div>
-				<div className="calypso-navigation-header__right-section">{ children }</div>
+				<div className="calypso-navigation-header__left-section">{ finalTitleElement }</div>
+				{ rightSection && (
+					<div className="calypso-navigation-header__right-section">{ rightSection }</div>
+				) }
 			</div>
 		</header>
 	);

client/my-sites/stats/components/headers/page-header.tsx

@@ -0,0 +1,31 @@
+import config from '@automattic/calypso-config';
+import JetpackLogo from 'calypso/components/jetpack-logo';
+import NavigationHeaderImpr from 'calypso/components/navigation-header/navigation-header';
+import { STATS_PRODUCT_NAME, STATS_PRODUCT_NAME_IMPR } from '../../constants';
+
+function PageHeader() {
+	const isOdysseyStats = config.isEnabled( 'is_running_in_jetpack_site' );
+
+	if ( isOdysseyStats ) {
+		return (
+			<NavigationHeaderImpr
+				className="stats__section-header modernized-header"
+				titleProps={ {
+					title: STATS_PRODUCT_NAME,
+					titleLogo: <JetpackLogo size={ 24 } monochrome={ false } />,
+				} }
+			/>
+		);
+	}
+
+	return (
+		<NavigationHeaderImpr
+			className="stats__section-header modernized-header"
+			titleProps={ {
+				title: STATS_PRODUCT_NAME_IMPR,
+			} }
+		/>
+	);
+}
+
+export default PageHeader;

client/my-sites/stats/modernized-layout-styles.scss

@@ -36,7 +36,7 @@ $sidebar-appearance-break-point: $break-medium;
 	> * {
 		padding: 0 max(calc(50% - #{math.div($stats-sections-max-width, 2)}), 32px);
 
-		&:not(.navigation-header) {
+		&:not(.calypso-navigation-header, .navigation-header) {
 			@media (max-width: $break-small) {
 				padding-left: 0;
 				padding-right: 0;
@@ -50,17 +50,23 @@ $sidebar-appearance-break-point: $break-medium;
 	}
 
 	.navigation-header {
-		margin-bottom: 0;
 		padding-bottom: 24px;
+
+		@media (max-width: $break-small) {
+			padding-bottom: 24px;
+		}
+	}
+
+	.calypso-navigation-header,
+	.navigation-header {
+		margin-bottom: 0;
 		padding-left: max(calc(50% - #{math.div($stats-sections-max-width, 2)}), 32px);
 		padding-right: max(calc(50% - #{math.div($stats-sections-max-width, 2)}), 32px);
 		background-color: var(--studio-white);
 
 		@media (max-width: $break-small) {
-			// Restore padding to 16px on mobile as per the `.navigation-header` style.
-			padding: 16px;
-			// Reduce gap to the following section on mobile.
-			padding-bottom: 24px;
+			padding-top: 16px;
+			padding-inline: 16px;
 		}
 
 		@media (max-width: $break-mobile) {

client/my-sites/stats/site.jsx

@@ -23,7 +23,6 @@ import EmptyContent from 'calypso/components/empty-content';
 import InlineSupportLink from 'calypso/components/inline-support-link';
 import JetpackColophon from 'calypso/components/jetpack-colophon';
 import NavigationHeader from 'calypso/components/navigation-header';
-import NavigationHeaderImpr from 'calypso/components/navigation-header/navigation-header';
 import StickyPanel from 'calypso/components/sticky-panel';
 import memoizeLast from 'calypso/lib/memoize-last';
 import Main from 'calypso/my-sites/stats/components/stats-main';
@@ -33,7 +32,6 @@ import {
 	STATS_FEATURE_PAGE_TRAFFIC,
 	STATS_FEATURE_INTERVAL_DROPDOWN_WEEK,
 	STATS_PRODUCT_NAME,
-	STATS_PRODUCT_NAME_IMPR,
 } from 'calypso/my-sites/stats/constants';
 import { getMomentSiteZone } from 'calypso/my-sites/stats/hooks/use-moment-site-zone';
 import { getChartRangeParams } from 'calypso/my-sites/stats/utils';
@@ -54,6 +52,7 @@ import { isJetpackSite } from 'calypso/state/sites/selectors';
 import getEnvStatsFeatureSupportChecks from 'calypso/state/sites/selectors/get-env-stats-feature-supports';
 import { getModuleToggles } from 'calypso/state/stats/module-toggles/selectors';
 import { getSelectedSiteId, getSelectedSiteSlug } from 'calypso/state/ui/selectors';
+import PageHeader from './components/headers/page-header';
 import StatsModuleAuthors from './features/modules/stats-authors';
 import StatsModuleClicks from './features/modules/stats-clicks';
 import StatsModuleCountries from './features/modules/stats-countries';
@@ -531,10 +530,7 @@ function StatsBody( { siteId, chartTab = 'views', date, context, isInternal, ...
 				</div>
 			) }
 			{ isStatsNavigationImprovementEnabled ? (
-				<NavigationHeaderImpr
-					className="stats__section-header modernized-header"
-					title={ STATS_PRODUCT_NAME_IMPR }
-				/>
+				<PageHeader />
 			) : (
 				<NavigationHeader
 					className="stats__section-header modernized-header"