Forms: Update dashboard styling for consistency (#45783)

Author: lezama

projects/packages/forms/changelog/update-forms-styling-consistency

@@ -0,0 +1,4 @@
+Significance: patch
+Type: changed
+
+Updated dashboard styling for visual consistency - improved header, buttons, tabs, and color variables

projects/packages/forms/src/dashboard/components/create-form-button/index.tsx

@@ -48,7 +48,7 @@ export default function CreateFormButton( {
 
 	return (
 		<Button
-			__next40pxDefaultSize
+			size="compact"
 			variant={ variant }
 			onClick={ onButtonClickHandler }
 			icon={ plus }

projects/packages/forms/src/dashboard/components/empty-spam-button/index.tsx

@@ -122,7 +122,7 @@ const EmptySpamButton = ( {
 	return (
 		<>
 			<Button
-				__next40pxDefaultSize
+				size="compact"
 				accessibleWhenDisabled
 				disabled={ isEmpty || isEmptying }
 				icon={ trash }

projects/packages/forms/src/dashboard/components/empty-trash-button/index.tsx

@@ -122,7 +122,7 @@ const EmptyTrashButton = ( {
 	return (
 		<>
 			<Button
-				__next40pxDefaultSize
+				size="compact"
 				accessibleWhenDisabled
 				disabled={ isEmpty || isEmptying }
 				icon={ trash }

projects/packages/forms/src/dashboard/components/inbox-status-toggle/index.tsx

@@ -4,6 +4,7 @@
 import jetpackAnalytics from '@automattic/jetpack-analytics';
 import { useBreakpointMatch } from '@automattic/jetpack-components';
 import { formatNumberCompact } from '@automattic/number-formatters';
+import { Badge } from '@automattic/ui';
 import { __, _x } from '@wordpress/i18n';
 import { useCallback } from 'react';
 import { useSearchParams } from 'react-router';
@@ -22,10 +23,10 @@ import * as Tabs from '../tabs';
  */
 function getTabLabel( label: string, count: number ): JSX.Element {
 	return (
-		<>
+		<span style={ { display: 'flex', gap: '4px', alignItems: 'center' } }>
 			{ label }
-			<span className="jp-forms__inbox-status-count">{ formatNumberCompact( count || 0 ) }</span>
-		</>
+			<Badge variant="muted">{ formatNumberCompact( count || 0 ) }</Badge>
+		</span>
 	);
 }
 

projects/packages/forms/src/dashboard/components/integrations-button/index.tsx

@@ -23,7 +23,7 @@ export default function IntegrationsButton(): JSX.Element {
 	}, [ navigate ] );
 
 	return (
-		<Button __next40pxDefaultSize variant="secondary" onClick={ onButtonClickHandler }>
+		<Button size="compact" variant="secondary" onClick={ onButtonClickHandler }>
 			{ __( 'Integrations', 'jetpack-forms' ) }
 		</Button>
 	);

projects/packages/forms/src/dashboard/components/layout/header.tsx

@@ -0,0 +1,50 @@
+/**
+ * WordPress dependencies
+ */
+
+import {
+	__experimentalHeading as Heading, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalHStack as HStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+	__experimentalVStack as VStack, // eslint-disable-line @wordpress/no-unsafe-wp-apis
+} from '@wordpress/components';
+
+/**
+ * Custom header component for Forms dashboard with consistent styling.
+ *
+ * @param {object}          props          - Component props.
+ * @param {React.ReactNode} props.title    - The header title content.
+ * @param {React.ReactNode} props.subTitle - The header subtitle/description.
+ * @param {React.ReactNode} props.actions  - Action buttons to display in the header.
+ * @return {JSX.Element} The header component.
+ */
+export default function Header( {
+	title,
+	subTitle,
+	actions,
+}: {
+	title?: React.ReactNode;
+	subTitle: React.ReactNode;
+	actions?: React.ReactNode;
+} ) {
+	return (
+		<VStack className="admin-ui-page__header" as="header" spacing={ 0 }>
+			<HStack className="admin-ui-page__header-title" justify="space-between" spacing={ 2 }>
+				<HStack spacing={ 2 }>
+					{ title && (
+						<Heading level={ 1 } size="15px" lineHeight="32px" truncate>
+							{ title }
+						</Heading>
+					) }
+				</HStack>
+				<HStack
+					style={ { width: 'auto', flexShrink: 0 } }
+					spacing={ 2 }
+					className="admin-ui-page__header-actions"
+				>
+					{ actions }
+				</HStack>
+			</HStack>
+			{ subTitle && <p className="admin-ui-page__header-subtitle">{ subTitle }</p> }
+		</VStack>
+	);
+}

projects/packages/forms/src/dashboard/components/layout/index.tsx

@@ -20,6 +20,7 @@ import { store as dashboardStore } from '../../store';
 import ActionsDropdownMenu from '../actions-dropdown-menu';
 import CreateFormButton from '../create-form-button';
 import IntegrationsButton from '../integrations-button';
+import Header from './header';
 
 import './style.scss';
 // eslint-disable-next-line import/no-unresolved -- aliased to the package's built asset in webpack config.
@@ -69,16 +70,19 @@ const Layout = () => {
 	);
 
 	return (
-		<Page
-			className="jp-forms__layout"
-			title={
-				<div className="jp-forms__layout-header-title">
-					<JetpackLogo showText={ false } width={ 24 } /> Forms
-				</div>
-			}
-			subTitle={ __( 'View and manage all your form submissions in one place.', 'jetpack-forms' ) }
-			actions={ headerActions }
-		>
+		<Page className="jp-forms__layout">
+			<Header
+				title={
+					<div className="jp-forms__layout-header-title">
+						<JetpackLogo showText={ false } width={ 24 } /> Forms
+					</div>
+				}
+				subTitle={ __(
+					'View and manage all your form submissions in one place.',
+					'jetpack-forms'
+				) }
+				actions={ headerActions }
+			/>
 			<NavigableRegion
 				className="admin-ui-page__content"
 				ariaLabel={ __( 'Forms dashboard content', 'jetpack-forms' ) }

projects/packages/forms/src/dashboard/components/layout/style.scss

@@ -23,6 +23,8 @@ body.jetpack_page_jetpack-forms-admin {
 	padding: 0;
 	width: 100%;
 	min-height: calc(100vh - var(--wp-admin--admin-bar--height, 0px));
+	background: var(--wpds-color-bg-surface-neutral-strong, #fff);
+	color: var(--wpds-color-fg-content-neutral, #1e1e1e);
 
 	.jp-forms__layout-header-title {
 		display: flex;
@@ -42,14 +44,13 @@ body.jetpack_page_jetpack-forms-admin {
 }
 
 #jp-forms-dashboard .jp-forms__layout {
-	background: #fff;
 
 	.admin-ui-page__content {
 		display: flex;
 		flex: 1 1 auto;
 		flex-direction: column;
 		min-height: 0;
-		background: var(--jp-white);
+		background: var(--wpds-color-bg-surface-neutral-strong, #fff);
 
 		// Ensure Outlet renders as flex child that expands
 		> * {
@@ -68,14 +69,21 @@ body.jetpack_page_jetpack-forms-admin {
 	.admin-ui-page__header {
 		box-sizing: border-box;
 		margin: 0;
-		padding: 16px 48px 4px;
+		padding: 8px 20px;
 		width: 100%;
-		background: transparent;
+		background: var(--wpds-color-bg-surface-neutral-strong, #fff);
+		border-bottom: none;
 
 		@media (max-width: 782px) {
-			padding: 8px 24px 0;
+			padding: 12px 24px;
 		}
 	}
 
+	.admin-ui-page__header-subtitle {
+		color: var(--wpds-color-fg-content-neutral-weak, #757575);
+		margin: 0;
+		padding-block-end: 8px;
+	}
+
 
 }

projects/packages/forms/src/dashboard/inbox/export-responses/index.tsx

@@ -28,7 +28,7 @@ const ExportResponsesButton = () => {
 
 	return (
 		<>
-			<Button __next40pxDefaultSize variant="primary" icon={ download } onClick={ openModal }>
+			<Button size="compact" variant="primary" icon={ download } onClick={ openModal }>
 				{ exportLabel }
 			</Button>