update header styles

easy-ui-react/src/FocusedProductLayout/HeaderAtTopOfPage.module.scss

@@ -0,0 +1,17 @@
+@use "../styles/common" as *;
+@use "../styles/unstyled";
+
+.HeaderAtTopOfPage {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+  padding: design-token("space.3");
+}
+
+.logoBox {
+  display: inline-flex;
+  align-items: center;
+  gap: design-token("space.1.5");
+}

easy-ui-react/src/FocusedProductLayout/HeaderAtTopOfPage.tsx

@@ -1,10 +1,9 @@
 import React from "react";
 import { HelpMenu } from "../ProductLayout/HelpMenu";
-import { classNames } from "../utilities/css";
 import { BackArrow } from "./BackArrow";
 import type { HeaderProps } from "./FocusedProductLayout";
 
-import styles from "./Header.module.scss";
+import styles from "./HeaderAtTopOfPage.module.scss";
 
 /**
  * Header to render at the top of the page. Above the main content. Only
@@ -17,16 +16,12 @@ export function HeaderAtTopOfPage(props: Omit<HeaderProps, "title">) {
   const { helpMenuItems, onHelpMenuAction, renderBackArrow, renderLogo } =
     props;
   return (
-    <div className={classNames(styles.Header, styles.atTopOfPage)}>
-      <div className={styles.logoRow}>
-        <span className={styles.logoArrowBox}>
-          <span className={styles.backArrowBox}>
-            <BackArrow renderBackArrow={renderBackArrow} />
-          </span>
-          {renderLogo()}
-        </span>
-        <HelpMenu items={helpMenuItems} onAction={onHelpMenuAction} />
-      </div>
+    <div className={styles.HeaderAtTopOfPage}>
+      <span className={styles.logoBox}>
+        <BackArrow renderBackArrow={renderBackArrow} />
+        {renderLogo()}
+      </span>
+      <HelpMenu items={helpMenuItems} onAction={onHelpMenuAction} />
     </div>
   );
 }

easy-ui-react/src/FocusedProductLayout/HeaderInContentArea.module.scss

@@ -0,0 +1,35 @@
+@use "../styles/common" as *;
+@use "../styles/unstyled";
+@use "../ProductLayout/mixins" as ProductLayout;
+
+.HeaderInContentArea {
+  flex: 0 0 auto;
+  display: flex;
+  flex-direction: column;
+  gap: design-token("space.3");
+}
+
+.logoBar {
+  display: none;
+  flex-direction: row;
+  align-items: center;
+  justify-content: space-between;
+
+  @include ProductLayout.breakpoint-large-screen {
+    display: flex;
+  }
+}
+
+.titleBox {
+  display: inline-flex;
+  align-items: center;
+  gap: design-token("space.1");
+}
+
+.backArrowBox {
+  display: none;
+
+  @include ProductLayout.breakpoint-large-screen {
+    display: inline-flex;
+  }
+}

easy-ui-react/src/FocusedProductLayout/HeaderInContentArea.tsx

@@ -1,11 +1,10 @@
 import React from "react";
 import { HelpMenu } from "../ProductLayout/HelpMenu";
 import { Text } from "../Text";
-import { classNames } from "../utilities/css";
 import { BackArrow } from "./BackArrow";
 import type { HeaderProps } from "./FocusedProductLayout";
 
-import styles from "./Header.module.scss";
+import styles from "./HeaderInContentArea.module.scss";
 
 /**
  * Header to render in the main content area. Most of this is rendered only
@@ -23,13 +22,13 @@ export function HeaderInContentArea(props: HeaderProps) {
     title,
   } = props;
   return (
-    <div className={classNames(styles.Header, styles.inContentArea)}>
-      <div className={styles.logoRow}>
+    <div className={styles.HeaderInContentArea}>
+      <div className={styles.logoBar}>
         {renderLogo()}
         <HelpMenu items={helpMenuItems} onAction={onHelpMenuAction} />
       </div>
-      <header className={styles.titleRow}>
-        <div className={styles.titleBoxWithArrow}>
+      <header>
+        <div className={styles.titleBox}>
           <span className={styles.backArrowBox}>
             <BackArrow renderBackArrow={renderBackArrow} />
           </span>

easy-ui-react/src/FocusedProductLayout/WizardContent.module.scss

@@ -9,6 +9,10 @@
   flex-direction: column;
 }
 
+.main {
+  flex: 1 0 auto;
+}
+
 .stepperContainer {
   flex: 0 0 auto;
   padding-bottom: design-token("space.1");
@@ -27,10 +31,6 @@
   }
 }
 
-.main {
-  flex: 1 0 auto;
-}
-
 .footer {
   display: flex;
   flex-direction: column-reverse;