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.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}>