Merged in chore/partner-sas-header-footer-styling (pull request #2765)
chore: partner-sas header and footer improvements * improve header styling * Add footer Approved-by: Bianca Widstam
This commit is contained in:
Anton Gunnarsson
@@ -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
67
apps/partner-sas/app/components/Footer/Footer.tsx
Normal 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
49
apps/partner-sas/app/components/Footer/footer.module.css
Normal 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
25
apps/partner-sas/app/components/Header/Header.tsx
Normal 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
25
apps/partner-sas/app/components/Header/header.module.css
Normal 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;
|
||||
}
|
||||
}
|
||||
@@ -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>
|
||||
)
|
||||
}
|
||||
@@ -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%;
|
||||
}
|
||||
@@ -38,6 +38,10 @@
|
||||
--modal-box-shadow: 0px 4px 24px 0px rgba(38, 32, 30, 0.08);
|
||||
--popup-box-shadow: 0 0 14px 6px rgba(0, 0, 0, 0.1);
|
||||
|
||||
--TEMP-sas-default: #000099;
|
||||
--TEMP-sas-20: #00175c;
|
||||
--TEMP-sas-40: #0030c2;
|
||||
|
||||
@supports (interpolate-size: allow-keywords) {
|
||||
interpolate-size: allow-keywords;
|
||||
}
|
||||
|
||||
@@ -0,0 +1,3 @@
|
||||
<svg width="144" height="51" viewBox="0 0 144 51" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M94.333 0.544556H79.8253C79.0833 0.544556 78.7102 0.908943 78.7102 0.908943L38.7269 49.5465C38.5404 49.9109 38.5404 50.0911 38.9134 50.0911H44.8637C45.4212 50.0911 45.6077 49.9089 45.6077 49.7267L54.1631 39.0177C54.1631 39.0177 54.3476 38.8376 54.5341 38.8376H68.8533C68.8533 38.8376 69.0398 38.8376 69.0398 39.0198C69.0398 39.202 66.9942 49.5465 66.9942 49.5465C66.9942 49.7287 66.9942 50.0911 67.5517 50.0911H84.847C85.0335 50.0911 85.22 50.0911 85.22 49.7267L94.8905 1.08709C94.704 1.08709 94.8905 0.540507 94.3309 0.540507L94.333 0.544556ZM69.7818 33.9386H58.6233H58.4388V33.7564L73.3155 15.0654L73.502 14.8832C73.6865 14.8832 73.502 15.0654 73.502 15.0654L69.7818 33.9406C69.9683 33.7584 69.9683 33.7584 69.7818 33.9406V33.9386ZM0.0451224 43.9208C0.0451224 43.9208 1.34869 39.5663 1.53319 39.7465C1.53319 39.0218 1.90621 38.8396 2.27723 39.202C3.95181 40.8356 9.15804 45.7366 16.4119 45.7366C24.4077 45.7366 23.8502 39.3842 23.8502 38.4772C23.8502 35.9366 20.5011 23.4119 19.5725 20.1465C16.9694 9.61981 23.4792 0 38.9134 0C47.0958 0 51.187 2.17822 52.675 2.90295C53.6056 3.44953 53.4171 4.17425 53.4171 4.17425C53.4171 4.17425 52.4885 7.98615 52.4885 8.34851C52.302 8.7129 51.931 8.7129 51.56 8.34851C49.1414 6.89704 46.3517 5.26337 42.0741 5.26337C37.0543 5.26337 34.4492 8.89307 35.7528 14.1564C36.3103 15.9723 39.4709 28.4951 40.0285 31.0356C42.2606 40.1109 35.9373 51 18.8305 51C9.34455 51 3.39428 47.5525 1.34869 45.9188C0.231632 45.0099 -0.139382 44.4653 0.0451224 43.9208ZM90.9838 44.103C90.9838 44.103 91.9143 39.3862 91.9143 39.7465C92.1008 39.202 92.6564 39.0218 93.0294 39.3842C94.8905 41.0178 99.7237 45.7366 106.978 45.7366C114.973 45.7366 114.418 39.3842 114.418 38.4772C114.418 35.9366 111.069 23.4119 110.138 20.1465C107.535 9.61981 114.047 0 129.479 0C137.661 0 141.753 2.17822 143.241 2.90295C144.171 3.44953 143.985 4.17425 143.985 4.17425C143.985 4.17425 143.054 7.98615 143.054 8.34851C142.87 8.7129 142.497 8.7129 142.126 8.34851C139.707 6.89704 136.917 5.26337 132.64 5.26337C127.62 5.26337 125.017 8.89307 126.318 14.1564C126.876 15.9723 130.037 28.4951 130.596 31.0356C132.826 40.1109 126.505 51 109.394 51C99.9102 51 94.333 47.7327 92.2874 46.101C91.1703 45.1921 90.7973 44.6475 90.9838 44.103Z" fill="#ffffff"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
3
apps/partner-sas/public/_static/img/sas-logotype.svg
Normal file
3
apps/partner-sas/public/_static/img/sas-logotype.svg
Normal file
@@ -0,0 +1,3 @@
|
||||
<svg width="144" height="51" viewBox="0 0 144 51" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M94.333 0.544556H79.8253C79.0833 0.544556 78.7102 0.908943 78.7102 0.908943L38.7269 49.5465C38.5404 49.9109 38.5404 50.0911 38.9134 50.0911H44.8637C45.4212 50.0911 45.6077 49.9089 45.6077 49.7267L54.1631 39.0177C54.1631 39.0177 54.3476 38.8376 54.5341 38.8376H68.8533C68.8533 38.8376 69.0398 38.8376 69.0398 39.0198C69.0398 39.202 66.9942 49.5465 66.9942 49.5465C66.9942 49.7287 66.9942 50.0911 67.5517 50.0911H84.847C85.0335 50.0911 85.22 50.0911 85.22 49.7267L94.8905 1.08709C94.704 1.08709 94.8905 0.540507 94.3309 0.540507L94.333 0.544556ZM69.7818 33.9386H58.6233H58.4388V33.7564L73.3155 15.0654L73.502 14.8832C73.6865 14.8832 73.502 15.0654 73.502 15.0654L69.7818 33.9406C69.9683 33.7584 69.9683 33.7584 69.7818 33.9406V33.9386ZM0.0451224 43.9208C0.0451224 43.9208 1.34869 39.5663 1.53319 39.7465C1.53319 39.0218 1.90621 38.8396 2.27723 39.202C3.95181 40.8356 9.15804 45.7366 16.4119 45.7366C24.4077 45.7366 23.8502 39.3842 23.8502 38.4772C23.8502 35.9366 20.5011 23.4119 19.5725 20.1465C16.9694 9.61981 23.4792 0 38.9134 0C47.0958 0 51.187 2.17822 52.675 2.90295C53.6056 3.44953 53.4171 4.17425 53.4171 4.17425C53.4171 4.17425 52.4885 7.98615 52.4885 8.34851C52.302 8.7129 51.931 8.7129 51.56 8.34851C49.1414 6.89704 46.3517 5.26337 42.0741 5.26337C37.0543 5.26337 34.4492 8.89307 35.7528 14.1564C36.3103 15.9723 39.4709 28.4951 40.0285 31.0356C42.2606 40.1109 35.9373 51 18.8305 51C9.34455 51 3.39428 47.5525 1.34869 45.9188C0.231632 45.0099 -0.139382 44.4653 0.0451224 43.9208ZM90.9838 44.103C90.9838 44.103 91.9143 39.3862 91.9143 39.7465C92.1008 39.202 92.6564 39.0218 93.0294 39.3842C94.8905 41.0178 99.7237 45.7366 106.978 45.7366C114.973 45.7366 114.418 39.3842 114.418 38.4772C114.418 35.9366 111.069 23.4119 110.138 20.1465C107.535 9.61981 114.047 0 129.479 0C137.661 0 141.753 2.17822 143.241 2.90295C144.171 3.44953 143.985 4.17425 143.985 4.17425C143.985 4.17425 143.054 7.98615 143.054 8.34851C142.87 8.7129 142.497 8.7129 142.126 8.34851C139.707 6.89704 136.917 5.26337 132.64 5.26337C127.62 5.26337 125.017 8.89307 126.318 14.1564C126.876 15.9723 130.037 28.4951 130.596 31.0356C132.826 40.1109 126.505 51 109.394 51C99.9102 51 94.333 47.7327 92.2874 46.101C91.1703 45.1921 90.7973 44.6475 90.9838 44.103Z" fill="#000099"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
26
apps/partner-sas/public/_static/img/scandic-logotype.svg
Normal file
26
apps/partner-sas/public/_static/img/scandic-logotype.svg
Normal file
@@ -0,0 +1,26 @@
|
||||
<?xml version="1.0" encoding="utf-8"?>
|
||||
<!-- Generator: Adobe Illustrator 18.0.0, SVG Export Plug-In . SVG Version: 6.00 Build 0) -->
|
||||
<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 1.1//EN" "http://www.w3.org/Graphics/SVG/1.1/DTD/svg11.dtd">
|
||||
<svg version="1.1" id="Layer_2" xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" x="0px" y="0px"
|
||||
viewBox="0 0 85 19" enable-background="new 0 0 85 19" xml:space="preserve">
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#CD0921" d="M24.8,17.9c-1.2,0.3-2.4,0.4-3.6,0.4c-4.3,0-7.1-2-7.1-6.7
|
||||
c0-4.5,2.9-6.4,7-6.4c1.2,0,2.4,0.1,3.6,0.3v2.2c-0.9-0.1-1.6-0.2-2.4-0.2c-3.3,0-4.9,1-4.9,4.3c0,3.1,1.5,4.2,4.9,4.2
|
||||
c0.9,0,1.6-0.1,2.4-0.2V17.9z"/>
|
||||
<path fill="#CD0921" d="M69.1,18h3.2V5.4h-3.2V18z M69.1,2.9h3.2V0h-3.2V2.9z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#CD0921" d="M66.5,17.7c-0.6,0.1-2.8,0.5-5,0.5c-4.1,0-7.1-1.9-7.1-6.5
|
||||
c0-4.4,2.7-6.6,6.8-6.6c0.6,0,1.6,0.1,2.1,0.1V0h3.2C66.5,0.6,66.5,17.4,66.5,17.7 M63.4,15.8V7.6c-0.4,0-1.1-0.1-1.8-0.1
|
||||
c-2.9,0-4,1.4-4,4.3c0,2.6,1,4.2,3.9,4.2C62.1,16,62.7,15.9,63.4,15.8"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#CD0921" d="M52.3,18h-3.1V9.7c0-1.4-0.6-2.2-2.6-2.2c-1.4,0-2.9,0.3-2.9,0.3
|
||||
V18h-3.1V5.8c0.2,0,4.2-0.6,6.5-0.6c2.8,0,5.3,0.5,5.3,4.3V18z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#CD0921" d="M38,18c-2.2,0.2-3.9,0.3-5.8,0.3c-3.2,0-5.8-0.5-5.8-4.1
|
||||
c0-3.5,3.2-3.7,6.1-3.8c0.7,0,1.5,0,2.3,0c0-2.2-0.1-3-3.3-3c-1.6,0-3.3,0.3-4.3,0.5V5.6c1.2-0.3,3.1-0.4,4.5-0.5
|
||||
c3.6,0,6.3,0.4,6.3,4.2V18z M34.8,16.1v-3.6c-0.6,0-1.7,0-2.1,0c-1.9,0-3.1,0.1-3.1,1.9c0,1.8,1.5,1.9,3,1.9
|
||||
C33.5,16.2,34,16.2,34.8,16.1"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#CD0921" d="M85,17.9c-1.2,0.3-2.4,0.4-3.6,0.4c-4.3,0-7.1-2-7.1-6.7
|
||||
c0-4.5,2.9-6.4,7-6.4c1.2,0,2.4,0.1,3.6,0.3v2.2c-0.9-0.1-1.6-0.2-2.4-0.2c-3.3,0-4.9,1-4.9,4.3c0,3.1,1.5,4.2,4.9,4.2
|
||||
c0.9,0,1.6-0.1,2.4-0.2V17.9z"/>
|
||||
<path fill-rule="evenodd" clip-rule="evenodd" fill="#CD0921" d="M12.5,13c0,3.7-2.9,5.3-7.2,5.3c-2.8,0-4.8-0.5-5.1-0.6v-2.6
|
||||
c1,0.2,3.1,0.7,4.9,0.7c1.8,0,4.1-0.4,4.1-2.4c0-1.3-1-1.8-2.8-2.3c-0.7-0.2-1.4-0.4-2.1-0.6C1.9,9.8,0,8.8,0,6c0-4,3.2-5,6.9-5
|
||||
c2.2,0,4,0.4,4.3,0.5v2.4c-0.4-0.1-2.1-0.5-4-0.5c-1.8,0-3.9,0.2-3.9,2.2c0,1.5,1.2,1.9,2.9,2.3C7,8.2,7.8,8.3,8.6,8.6
|
||||
C10.7,9.2,12.5,10.2,12.5,13"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 2.3 KiB |
Reference in New Issue
Block a user