feat(aurora): move projectOverviewBanner into ContentHeader above divider

Author: MartinS-git

packages/aurora/src/client/components/ContentHeader/ContentHeader.tsx

@@ -36,6 +36,10 @@ export function ContentHeader({ title, projectId, description, actions, badges }
       <Slot component={slots.serviceBanner} useShadowDOM={false} currentService={currentService} />
     ) : null
 
+  const projectOverviewBanner = slots?.projectOverviewBanner ? (
+    <Slot component={slots.projectOverviewBanner} useShadowDOM={false} />
+  ) : null
+
   return (
     <header className="mb-8">
       <div className="flex flex-col sm:flex-row sm:items-center sm:justify-between">
@@ -52,6 +56,7 @@ export function ContentHeader({ title, projectId, description, actions, badges }
       </div>
       {description && <p className="text-sm font-normal">{description}</p>}
       {serviceBanner}
+      {projectOverviewBanner}
       <Divider className="mt-4" />
       {(badges || actions) && (
         <div className="mt-3 flex items-start justify-between">

packages/aurora/src/client/routes/_auth/projects/$projectId/index.tsx

@@ -32,7 +32,7 @@ function ServiceCard({ group, label, to, service }: ServiceCardProps) {
       <div className="flex min-w-0 flex-col">
         <div className="flex items-center gap-1">
           <p className="text-theme-light text-xs leading-5 font-medium">{group}</p>
-          <Icon icon="expandLess" size="16" className="text-theme-high" />
+          <Icon icon="expandMore" size="16" className="text-theme-high" />
         </div>
         <div className="flex items-center gap-2">
           <p className="text-theme-high text-lg leading-7 font-bold" data-testid="service-card-label">
@@ -51,7 +51,7 @@ function RouteComponent() {
     from: "/_auth/projects/$projectId",
   })
   const { t } = useLingui()
-  const { slots, enabledServices } = useRouteContext({ strict: false })
+  const { enabledServices } = useRouteContext({ strict: false })
   const isEnabled = (service: string) => !enabledServices || enabledServices.includes(service)
 
   const serviceIndex = getServiceIndex(availableServices ?? [])
@@ -100,11 +100,6 @@ function RouteComponent() {
   return (
     <Stack direction="vertical">
       <ContentHeader title={crumbProject?.name ?? t`Project`} projectId={projectId} description={description} />
-      {slots?.projectOverviewBanner && (
-        <div className="mb-6">
-          <Slot component={slots.projectOverviewBanner} useShadowDOM={false} />
-        </div>
-      )}
       {cards.length > 0 ? (
         <div className="grid grid-cols-1 gap-6 sm:grid-cols-2 lg:grid-cols-3 2xl:grid-cols-4">
           {cards.map((card) => (