feat/SW-604-select-hotel-page-UI (pull request #905)

Feat/SW-604 select hotel page UI

* feat(SW-604): update header, scandic logo, and map text

* feat(SW-604): fix map button

* feat(SW-604): fix align header

* feat(SW-604): hide filter for mobile

* feat(SW-604): fix padding

* feat(SW-604): fix padding again

* feat(SW-604): fix mobile design

* feat(SW-604): fix padding


Approved-by: Pontus Dreij

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.module.css

@@ -1,21 +1,23 @@
 .main {
   display: flex;
-  gap: var(--Spacing-x3);
-  padding: var(--Spacing-x4) var(--Spacing-x4) 0 var(--Spacing-x4);
+  padding: 0 var(--Spacing-x2) var(--Spacing-x3) var(--Spacing-x2);
   background-color: var(--Scandic-Brand-Warm-White);
   min-height: 100dvh;
   flex-direction: column;
   max-width: var(--max-width);
   margin: 0 auto;
 }
-
 .header {
   display: flex;
-  margin: 0 auto;
-  padding: var(--Spacing-x4) var(--Spacing-x5) var(--Spacing-x3)
-    var(--Spacing-x5);
-  justify-content: space-between;
-  max-width: var(--max-width);
+  flex-direction: column;
+  gap: var(--Spacing-x2);
+  padding: var(--Spacing-x3) var(--Spacing-x2) 0 var(--Spacing-x2);
+}
+
+.cityInformation {
+  display: flex;
+  flex-wrap: wrap;
+  gap: var(--Spacing-x1);
 }
 
 .sideBar {
@@ -46,6 +48,23 @@
 }
 
 @media (min-width: 768px) {
+  .main {
+    padding: var(--Spacing-x5);
+  }
+  .header {
+    display: block;
+    background-color: var(--Base-Surface-Subtle-Normal);
+    padding: var(--Spacing-x4) var(--Spacing-x5) var(--Spacing-x3)
+      var(--Spacing-x5);
+  }
+
+  .title {
+    margin: 0 auto;
+    display: flex;
+    max-width: var(--max-width-navigation);
+    align-items: center;
+    justify-content: space-between;
+  }
   .link {
     display: flex;
     padding-bottom: var(--Spacing-x6);
@@ -57,13 +76,6 @@
     border-radius: var(--Corner-radius-Medium);
     border: 1px solid var(--Base-Border-Subtle);
   }
-  .mapLinkText {
-    display: flex;
-    align-items: center;
-    justify-content: center;
-    gap: var(--Spacing-x-half);
-    padding: var(--Spacing-x-one-and-half) var(--Spacing-x0);
-  }
   .main {
     flex-direction: row;
     gap: var(--Spacing-x5);

app/[lang]/(live)/(public)/hotelreservation/(standard)/select-hotel/page.tsx

@@ -18,7 +18,10 @@ import {
 import { ChevronRightIcon } from "@/components/Icons"
 import StaticMap from "@/components/Maps/StaticMap"
 import Alert from "@/components/TempDesignSystem/Alert"
+import Button from "@/components/TempDesignSystem/Button"
 import Link from "@/components/TempDesignSystem/Link"
+import Preamble from "@/components/TempDesignSystem/Text/Preamble"
+import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 import { setLang } from "@/i18n/serverContext"
 
@@ -66,8 +69,14 @@ export default async function SelectHotelPage({
   return (
     <>
       <header className={styles.header}>
-        <div>{city.name}</div>
-        <HotelSorter />
+        <div className={styles.title}>
+          <div className={styles.cityInformation}>
+            <Subtitle>{city.name}</Subtitle>
+            <Preamble>{hotels.length} hotels</Preamble>
+          </div>
+          <HotelSorter />
+        </div>
+        <MobileMapButtonContainer city={searchParams.city} />
       </header>
       <main className={styles.main}>
         <div className={styles.sideBar}>
@@ -87,10 +96,14 @@ export default async function SelectHotelPage({
                   mapType="roadmap"
                   altText={`Map of ${searchParams.city} city center`}
                 />
-                <div className={styles.mapLinkText}>
-                  {intl.formatMessage({ id: "Show map" })}
-                  <ChevronRightIcon color="burgundy" width={20} height={20} />
-                </div>
+                <Button wrapping size="medium" intent="text" theme="base">
+                  {intl.formatMessage({ id: "See map" })}
+                  <ChevronRightIcon
+                    color="baseButtonTextOnFillNormal"
+                    width={20}
+                    height={20}
+                  />
+                </Button>
               </div>
             </Link>
           ) : (
@@ -105,7 +118,6 @@ export default async function SelectHotelPage({
               />
             </div>
           )}
-          <MobileMapButtonContainer city={searchParams.city} />
           <HotelFilter filters={filterList} />
         </div>
         <div className={styles.hotelList}>