From b4016ce850cd8853ae64dfe14264c5ee37583c79 Mon Sep 17 00:00:00 2001
From: lebaudantoine <lebaud.antoine131@gmail.com>
Date: Mon, 10 Mar 2025 19:18:35 +0100
Subject: [PATCH] =?UTF-8?q?=E2=9C=A8(frontend)=20support=20screen=20titles?=
 =?UTF-8?q?=20with=20colorful=20page=20headers?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Added support for passing screen titles that display in colorful header
components, improving page navigation context and visual hierarchy.
---
 src/frontend/src/layout/Screen.tsx | 41 +++++++++++++++++++++++++++++-
 1 file changed, 40 insertions(+), 1 deletion(-)

diff --git a/src/frontend/src/layout/Screen.tsx b/src/frontend/src/layout/Screen.tsx
index 7d90d401..72531346 100644
--- a/src/frontend/src/layout/Screen.tsx
+++ b/src/frontend/src/layout/Screen.tsx
@@ -2,6 +2,8 @@ import { layoutStore } from '@/stores/layout'
 import { Layout } from './Layout'
 import { useEffect } from 'react'
 import { Centered } from './Centered'
+import { H } from '@/primitives'
+import { css } from '@/styled-system/css'
 
 export type ScreenProps = {
   /**
@@ -14,6 +16,7 @@ export type ScreenProps = {
    */
   header?: boolean
   footer?: boolean
+  headerTitle?: string
   children: React.ReactNode
 }
 
@@ -21,6 +24,7 @@ export const Screen = ({
   layout = 'fullpage',
   header = true,
   footer = true,
+  headerTitle,
   children,
 }: ScreenProps) => {
   useEffect(() => {
@@ -31,5 +35,40 @@ export const Screen = ({
       layoutStore.showFooter = footer
     }
   }, [header, footer])
-  return layout === 'centered' ? <Centered>{children}</Centered> : children
+
+  return (
+    <>
+      {headerTitle && (
+        <div
+          className={css({
+            backgroundColor: 'primary.100',
+            width: '100%',
+          })}
+        >
+          <div
+            className={css({
+              maxWidth: '100%',
+              width: '38rem',
+              margin: 'auto',
+              paddingX: '2rem',
+            })}
+          >
+            <H
+              lvl={1}
+              margin={false}
+              className={css({
+                paddingY: '2rem',
+                md: {
+                  paddingY: '3rem',
+                },
+              })}
+            >
+              {headerTitle}
+            </H>
+          </div>
+        </div>
+      )}
+      {layout === 'centered' ? <Centered>{children}</Centered> : children}
+    </>
+  )
 }