fix: page header styling and contact layout (#354)

AtB-AS · Sep 25, 2024 · 17a22c7 · 17a22c7
1 parent 6b18c6e
commit 17a22c7
Show file tree

Hide file tree

Showing 5 changed files with 58 additions and 26 deletions.
diff --git a/src/layouts/shared/page-header.module.css b/src/layouts/shared/page-header.module.css
@@ -9,6 +9,7 @@
   padding: 0 var(--contentPadding);
   display: flex;
   align-items: center;
+  justify-content: space-between;
 }
 
 .pageHeader__inner {
@@ -83,7 +84,6 @@
   padding-bottom: calc(var(--spacings-medium) - var(--border-width-medium));
   border-bottom: var(--border-width-medium) solid
     var(--ws-colors-header-border-bottom);
-  composes: typo-body__secondary--bold from '@atb/theme/typography.module.css';
 }
 .pageHeader__nav--modal .pageHeader__link--active {
   border-bottom-color: transparent;

diff --git a/src/layouts/shared/page-header.tsx b/src/layouts/shared/page-header.tsx
@@ -66,7 +66,7 @@ export default function PageHeader() {
               href={'/contact'}
               title={t(CommonText.Layout.contactLink)}
             >
-              <h4>{t(CommonText.Layout.contactLink)}</h4>
+              {t(CommonText.Layout.contactLink)}
             </Link>
           </nav>
         )}

diff --git a/src/page-modules/contact/layouts/contact-page-layout.tsx b/src/page-modules/contact/layouts/contact-page-layout.tsx
@@ -6,6 +6,7 @@ import Link from 'next/link';
 import { andIf } from '@atb/utils/css';
 import { Typo } from '@atb/components/typography';
 import { MonoIcon, MonoIcons } from '@atb/components/icon';
+import { ButtonLink } from '@atb/components/button';
 
 export type ContactPage = {
   title: TranslatedString;
@@ -55,28 +56,44 @@ function ContactPageLayout({ children }: ContactPageLayoutProps) {
   const pathname = usePathname();
 
   return (
-    <div className={style.layout__container}>
-      <Typo.h2 textType="heading--jumbo">{t(PageText.Contact.title)}</Typo.h2>
-      <nav className={style.contact_page_navigator__container}>
-        {contactPages.map((contactPage, index) => {
-          const isActive = pathname.includes(contactPage.href);
+    <div className={style.layout}>
+      <div>
+        <div className={style.homeLink__container}>
+          <ButtonLink
+            mode="transparent"
+            href="/"
+            title={t(PageText.Contact.homeLink)}
+            icon={{ left: <MonoIcon icon="navigation/ArrowLeft" /> }}
+          />
+        </div>
+        <div className={style.layout__container}>
+          <Typo.h2 textType="heading--jumbo">
+            {t(PageText.Contact.title)}
+          </Typo.h2>
+          <nav className={style.contact_page_navigator__container}>
+            {contactPages.map((contactPage, index) => {
+              const isActive = pathname.includes(contactPage.href);
 
-          return (
-            <Link
-              key={index}
-              shallow={true}
-              href={contactPage.href}
-              className={andIf({
-                [style.contact_page_navigator__link]: true,
-                [style.contact_page_navigator__activePage]: isActive,
-              })}
-            >
-              <MonoIcon size="large" icon={contactPage.icon} />
-              <Typo.p textType="body__primary">{t(contactPage.title)}</Typo.p>
-            </Link>
-          );
-        })}
-      </nav>
+              return (
+                <Link
+                  key={index}
+                  shallow={true}
+                  href={contactPage.href}
+                  className={andIf({
+                    [style.contact_page_navigator__link]: true,
+                    [style.contact_page_navigator__activePage]: isActive,
+                  })}
+                >
+                  <MonoIcon size="large" icon={contactPage.icon} />
+                  <Typo.p textType="body__primary">
+                    {t(contactPage.title)}
+                  </Typo.p>
+                </Link>
+              );
+            })}
+          </nav>
+        </div>
+      </div>
       {children}
     </div>
   );

diff --git a/src/page-modules/contact/layouts/layout.module.css b/src/page-modules/contact/layouts/layout.module.css
@@ -1,12 +1,22 @@
 @value interactive-interactive_2 from "@atb/theme/theme.module.css";
 
-.layout__container {
-  margin: 0 auto;
+.layout {
+  display: flex;
+  flex-direction: column;
+  width: 100%;
   max-width: var(--maxPageWidth);
+  margin: 0 auto;
+}
+.homeLink__container {
+  padding: 0 var(--spacings-medium);
+}
+
+.layout__container {
   padding: var(--spacings-large);
+
   display: flex;
   flex-direction: column;
-  gap: var(--spacings-medium);
+  gap: var(--spacings-xLarge);
 }
 
 .contact_page_navigator__container {

diff --git a/src/translations/pages/contact.ts b/src/translations/pages/contact.ts
@@ -8,6 +8,11 @@ export const Contact = {
     'What can we help you with?',
     'Kva kan vi hjelpe deg med?',
   ),
+  homeLink: _(
+    'Tilbake til reisesøk',
+    'Back to travel search',
+    'Tilbake til reisesøk',
+  ),
   ticketControl: {
     title: _(
       'Billettkontroll og gebyr',