feat: Improved the header to reflect the new design

src/layouts/shared/page-header.module.css

@@ -6,7 +6,7 @@
   width: 100%;
   max-width: var(--maxPageWidth);
   margin: 0 auto;
-  padding: 0 var(--contentPadding);
+  padding: token('spacing.medium') var(--contentPadding);
   display: flex;
   align-items: center;
   justify-content: space-between;

src/layouts/shared/page-header.tsx

@@ -8,6 +8,7 @@ import { MonoIcon } from '@atb/components/icon';
 import { andIf } from '@atb/utils/css';
 import { useRouter } from 'next/router';
 import { shouldShowContactPage } from '@atb/page-modules/contact';
+import { ButtonLink } from '@atb/components/button';
 
 export default function PageHeader() {
   const { t } = useTranslation();
@@ -55,6 +56,12 @@ export default function PageHeader() {
             </Link>
           </h1>
         </div>
+        <ButtonLink
+          href={urls.homePageUrl.href}
+          title={t(CommonText.Layout.homeLink(urls.homePageUrl.name))}
+          icon={{ right: <MonoIcon icon="navigation/ExternalLink" /> }}
+          size="pill"
+        />
         {/*
         {hasContactFormUrl && (
           <nav>

src/page-modules/assistant/layout.tsx

@@ -33,7 +33,6 @@ import useSWRImmutable from 'swr/immutable';
 import { debounce } from 'lodash';
 import LineFilter from './line-filter';
 import { useTheme } from '@atb/modules/theme';
-import { HomeLinkWithGlobalMessageLayout } from '@atb/layouts/shared/home-link-with-global-message-layout';
 
 export type AssistantLayoutProps = PropsWithChildren<{
   tripQuery: FromToTripQuery;
@@ -137,7 +136,7 @@ function AssistantLayout({ children, tripQuery }: AssistantLayoutProps) {
   ]);
 
   return (
-    <HomeLinkWithGlobalMessageLayout>
+    <div>
       <form className={style.container} onSubmit={onSubmitHandler}>
         <motion.div
           animate={{ paddingBottom: showAlternatives ? '1.5rem' : '5.75rem' }}
@@ -295,7 +294,7 @@ function AssistantLayout({ children, tripQuery }: AssistantLayoutProps) {
           {children}
         </EmptySearch>
       </section>
-    </HomeLinkWithGlobalMessageLayout>
+    </div>
   );
 }
 export default AssistantLayout;

src/page-modules/departures/departures.module.css

@@ -81,5 +81,8 @@
 .contentContainer {
   margin: 0 auto;
   max-width: var(--maxPageWidth);
-  padding: token('spacing.xLarge');
+  padding: 0 token('spacing.xLarge');
+  display: flex;
+  flex-direction: column;
+  gap: token('spacing.medium');
 }

src/page-modules/departures/layout.tsx

@@ -49,7 +49,7 @@ function DeparturesLayout({ children, fromQuery }: DeparturesLayoutProps) {
   const { orgId } = getOrgData();
 
   return (
-    <HomeLinkWithGlobalMessageLayout>
+    <div>
       <form className={style.container} onSubmit={onSubmitHandler}>
         <div className={style.main}>
           <TabLink activePath="/departures" />
@@ -116,7 +116,7 @@ function DeparturesLayout({ children, fromQuery }: DeparturesLayoutProps) {
           {children}
         </LoadingEmptySearch>
       </section>
-    </HomeLinkWithGlobalMessageLayout>
+    </div>
   );
 }
 

src/pages/assistant/index.tsx

@@ -2,15 +2,19 @@ import DefaultLayout from '@atb/layouts/default';
 import { withGlobalData, type WithGlobalData } from '@atb/layouts/global-data';
 import {
   AssistantLayout,
-  fetchFromToTripQuery,
-  Trip,
   type AssistantLayoutProps,
+  fetchFromToTripQuery,
   type FromToTripQuery,
+  Trip,
   type TripProps,
 } from '@atb/page-modules/assistant';
 import { withAssistantClient } from '@atb/page-modules/assistant/server';
 import { getAssistantTripIfCached } from '@atb/page-modules/assistant/server/trip-cache';
 import type { NextPage } from 'next';
+import {
+  GlobalMessageContextEnum,
+  GlobalMessages,
+} from '@atb/modules/global-messages';
 
 export type AssistantContentProps =
   | { tripQuery: FromToTripQuery; empty: true }
@@ -30,6 +34,7 @@ const AssistantPage: NextPage<AssistantPageProps> = (props) => {
   return (
     <DefaultLayout {...props}>
       <AssistantLayout {...props}>
+        <GlobalMessages context={GlobalMessageContextEnum.plannerWeb} />
         <AssistantContent {...props} />
       </AssistantLayout>
     </DefaultLayout>

src/pages/departures/[[...id]].tsx

@@ -1,19 +1,23 @@
 import DefaultLayout from '@atb/layouts/default';
 import { withGlobalData, type WithGlobalData } from '@atb/layouts/global-data';
 import {
-  DeparturesLayout,
-  NearestStopPlaces,
-  StopPlace,
   type DepartureData,
+  DeparturesLayout,
   type DeparturesLayoutProps,
+  NearestStopPlaces,
   type NearestStopPlacesProps,
+  StopPlace,
 } from '@atb/page-modules/departures';
 import { fetchFromDepartureQuery } from '@atb/page-modules/departures/fetch-departure-query';
 import { withDepartureClient } from '@atb/page-modules/departures/server';
 import { FromDepartureQuery } from '@atb/page-modules/departures/types';
 import { PageText, TranslatedString } from '@atb/translations';
 import type { NextPage } from 'next';
 import { encode } from 'querystring';
+import {
+  GlobalMessageContextEnum,
+  GlobalMessages,
+} from '@atb/modules/global-messages';
 
 type DeparturesStopPlaceProps = {
   stopPlace: true;
@@ -50,6 +54,7 @@ const DeparturesPage: NextPage<DeparturesPageProps> = (props) => {
   return (
     <DefaultLayout {...props} title={getDepartureTitle(props)}>
       <DeparturesLayout {...props}>
+        <GlobalMessages context={GlobalMessageContextEnum.plannerWeb} />
         <DeparturesRouting {...props} />
       </DeparturesLayout>
     </DefaultLayout>

src/styles/globals.css

@@ -6,7 +6,7 @@
 
   --ws-colors-header-border-bottom: #ffffff;
 
-  --maxPageWidth: 1024px;
+  --maxPageWidth: 976px;
   --contentPadding: token('spacing.xLarge');
 }
 

src/translations/common/layout.ts

@@ -3,7 +3,7 @@ import { orgSpecificTranslations } from '@atb/translations/utils';
 
 const LayoutInternal = {
   homeLink: (name: string) =>
-    _(`Tilbake til ${name}`, `Back to ${name}`, `Tilbake til ${name}`),
+    _(`Gå til ${name}`, `Gå to ${name}`, `Gå til ${name}`),
 
   contactLink: _('Kontaktskjema', 'Contact form', 'Kontaktskjema'),