scandic/web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Merged in chore/partner-sas-header-footer-styling (pull request #2765)

Browse Source 
chore: partner-sas header and footer improvements

* improve header styling

* Add footer


Approved-by: Bianca Widstam
This commit is contained in:
Anton Gunnarsson
2025-09-08 09:23:20 +00:00
parent 8d30232aee
commit c0ee968368
11 changed files with 246 additions and 15 deletions
Download Patch File Download Diff File Expand all files Collapse all files

21
apps/partner-sas/app/[lang]/layout.tsx
View File

@@ -14,6 +14,8 @@ import { getMessages } from "@/i18n"
import ClientIntlProvider from "@/i18n/Provider"
import { setLang } from "@/i18n/serverContext"
import { Footer } from "../components/Footer/Footer"
import { Header } from "../components/Header/Header"
import {
trackAccordionItemOpen,
trackBookingSearchClick,
@@ -24,8 +26,8 @@ import {
import type { Metadata } from "next"
export const metadata: Metadata = {
title: "Create Next App",
description: "Generated by create next app",
title: "SAS by Scandic Hotels",
description: "This text should be updated.",
}
type LangParams = {
@@ -74,21 +76,10 @@ export default async function RootLayout(props: RootLayoutProps) {
trackGenericEvent,
}}
>
<header
style={{
height: 64,
backgroundColor: "dodgerblue",
color: "white",
display: "flex",
alignItems: "center",
justifyContent: "center",
}}
>
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<h1>SAS</h1>
</header>
<Header />
{props.bookingwidget}
<main>{children}</main>
<Footer />
</BookingFlowTrackingProvider>
</BookingFlowContextProvider>
</TrpcProvider>

67
apps/partner-sas/app/components/Footer/Footer.tsx Normal file
View File

@@ -0,0 +1,67 @@
/* eslint-disable formatjs/no-literal-string-in-jsx */
import Link from "next/link"
import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { PoweredByScandic } from "../PoweredByScandic/PoweredByScandic"
import styles from "./footer.module.css"
export function Footer() {
return (
<div className={styles.root}>
<div className={styles.top}>
<div>
<Image
alt="SAS logotype"
className={styles.sasLogo}
src="/_static/img/sas-logotype.svg"
height={32}
width={90}
sizes="100vw"
/>
<PoweredByScandic />
</div>
<div className={styles.links}>
<Typography variant="Body/Paragraph/mdRegular">
<Link href="#" className={styles.link}>
Privacy policy
</Link>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<Link href="#" className={styles.link}>
Terms of use
</Link>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<Link href="#" className={styles.link}>
Your privacy choices
</Link>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<Link href="#" className={styles.link}>
Cookie Policy
</Link>
</Typography>
<Typography variant="Body/Paragraph/mdRegular">
<Link href="#" className={styles.link}>
More links
</Link>
</Typography>
</div>
</div>
<div className={styles.bottom}>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>© 1999 Something something.</p>
</Typography>
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
[Place holder text], LP and SAS are not responsible for content on
external Web sites.
</p>
</Typography>
</div>
</div>
)
}

49
apps/partner-sas/app/components/Footer/footer.module.css Normal file
View File

@@ -0,0 +1,49 @@
.root {
background-color: var(--Base-Surface-Primary-light-Normal);
height: 100px;
}
.sasLogo {
height: auto;
width: 90px;
}
.top {
padding: 40px 16px 32px;
display: flex;
flex-direction: column;
gap: 24px;
@media screen and (min-width: 768px) {
padding: 40px;
}
}
.bottom {
background-color: var(--TEMP-sas-default);
color: white;
padding: 32px 16px 40px;
@media screen and (min-width: 768px) {
padding: 32px 40px 40px;
}
}
.links {
display: flex;
flex-direction: column;
gap: 8px;
@media screen and (min-width: 768px) {
flex-direction: row;
}
}
.link {
text-decoration: none;
color: var(--TEMP-sas-40);
&:hover {
text-decoration: underline;
}
}

25
apps/partner-sas/app/components/Header/Header.tsx Normal file
View File

@@ -0,0 +1,25 @@
import Image from "@scandic-hotels/design-system/Image"
import { PoweredByScandic } from "../PoweredByScandic/PoweredByScandic"
import styles from "./header.module.css"
export function Header() {
return (
<>
<header className={styles.header}>
<Image
alt="SAS logotype"
className={styles.logo}
src="/_static/img/sas-logotype-white.svg"
height={32}
width={90}
sizes="100vw"
/>
</header>
<div className={styles.poweredBy}>
<PoweredByScandic />
</div>
</>
)
}

25
apps/partner-sas/app/components/Header/header.module.css Normal file
View File

@@ -0,0 +1,25 @@
.header {
background-color: var(--TEMP-sas-default);
color: white;
display: flex;
align-items: center;
padding: 16px;
@media screen and (min-width: 768px) {
padding: 20px 40px;
}
}
.logo {
height: auto;
width: 90px;
}
.poweredBy {
padding: 6px 16px;
background-color: var(--Base-Surface-Primary-light-Normal);
@media screen and (min-width: 768px) {
padding: 8px 40px;
}
}

25
apps/partner-sas/app/components/PoweredByScandic/PoweredByScandic.tsx Normal file
View File

@@ -0,0 +1,25 @@
import Image from "@scandic-hotels/design-system/Image"
import { Typography } from "@scandic-hotels/design-system/Typography"
import styles from "./poweredByScandic.module.css"
export function PoweredByScandic() {
return (
<div className={styles.root}>
<Typography variant="Body/Supporting text (caption)/smRegular">
{/* eslint-disable-next-line formatjs/no-literal-string-in-jsx */}
<p>Powered by</p>
</Typography>
<div>
<Image
alt="Scandic"
className={styles.logo}
src="/_static/img/scandic-logotype.svg"
height={14}
width={65}
sizes="100vw"
/>
</div>
</div>
)
}

13
apps/partner-sas/app/components/PoweredByScandic/poweredByScandic.module.css Normal file
View File

@@ -0,0 +1,13 @@
.root {
display: flex;
align-items: center;
gap: 8px;
color: var(--TEMP-sas-20);
}
.logo {
max-height: 14px;
max-width: 65px;
height: auto;
width: 100%;
}