diff --git a/components/Footer/Details/details.module.css b/components/Footer/Details/details.module.css index a6b184ea2..d8bd17d93 100644 --- a/components/Footer/Details/details.module.css +++ b/components/Footer/Details/details.module.css @@ -1,13 +1,13 @@ .details { - background: var(--Main-Grey-100); - color: var(--Main-Grey-White); - padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x7); + background: var(--Main-Red-100); + color: var(--Main-Brand-PalePeach); + padding: var(--Spacing-x3) var(--Spacing-x2) var(--Spacing-x6); } .topContainer { display: flex; justify-content: space-between; - padding: 0 0 var(--Spacing-x2) 0; + padding-bottom: var(--Spacing-x2); margin-bottom: var(--Spacing-x2); } @@ -27,21 +27,38 @@ justify-content: space-between; margin-bottom: var(--Spacing-x2); padding-bottom: var(--Spacing-x2); - border-bottom: 1px solid #e3d9d120; + border-bottom: 1px solid var(--Scandic-Peach-80); } .navigation { display: flex; - gap: var(--Spacing-x2); + gap: var(--Spacing-x1); +} + +.link { + &::after { + content: "·"; + margin-left: var(--Spacing-x1); + } + &:last-child { + &::after { + content: ""; + } + } +} + +.copyrightContainer { + display: flex; + gap: var(--Spacing-x1); } @media screen and (min-width: 1367px) { .details { - background: var(--Main-Grey-100); color: var(--Main-Grey-White); - padding: var(--Spacing-x5) var(--Spacing-x5) var(--Spacing-x9); + padding: var(--Spacing-x6) var(--Spacing-x5) var(--Spacing-x4); } .bottomContainer { + border-top: 1px solid var(--Scandic-Peach-80); flex-direction: row; } .navigationContainer { diff --git a/components/Footer/Details/index.tsx b/components/Footer/Details/index.tsx index ac43a04d0..3768005d6 100644 --- a/components/Footer/Details/index.tsx +++ b/components/Footer/Details/index.tsx @@ -3,6 +3,8 @@ import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name" import Image from "@/components/Image" import Link from "@/components/TempDesignSystem/Link" import Body from "@/components/TempDesignSystem/Text/Body" +import Footnote from "@/components/TempDesignSystem/Text/Footnote" +import { getLang } from "@/i18n/serverContext" import { detailsData } from "../mockedData" @@ -15,11 +17,13 @@ function socialIcon(iconName: string): JSX.Element | null { return SocialIcon ? : {iconName} } -export default async function FooterDetails() { +export default function FooterDetails() { + const lang = getLang() + const currentYear = new Date().getFullYear() return (
- + Scandic Hotels logo
- - {detailsData.copyrightCompany}{" "} - {detailsData.copyrightInfo} - +
+ + © {currentYear} {detailsData.copyrightCompany} + + + {detailsData.copyrightInfo} + +
{ diff --git a/components/Footer/Navigation/MainNav/index.tsx b/components/Footer/Navigation/MainNav/index.tsx index f3158ba4f..31fa31338 100644 --- a/components/Footer/Navigation/MainNav/index.tsx +++ b/components/Footer/Navigation/MainNav/index.tsx @@ -1,27 +1,28 @@ import { ArrowRightIcon } from "@/components/Icons" import Link from "@/components/TempDesignSystem/Link" +import Subtitle from "@/components/TempDesignSystem/Text/Subtitle" import styles from "./mainnav.module.css" -export default async function FooterMainNav({ - mainLinks, -}: { - mainLinks: Array<{ id: string; href: string; title: string }> -}) { +import { FooterMainNavProps } from "@/types/components/footer/navigation" + +export default function FooterMainNav({ mainLinks }: FooterMainNavProps) { return (