diff --git a/app/globals.css b/app/globals.css index 3a6b68d69..7dd0c44fb 100644 --- a/app/globals.css +++ b/app/globals.css @@ -106,7 +106,7 @@ --max-width-navigation: 89.5rem; --main-menu-mobile-height: 75px; - --main-menu-desktop-height: 129px; + --main-menu-desktop-height: 125px; --booking-widget-mobile-height: 75px; --booking-widget-desktop-height: 77px; --hotel-page-map-desktop-width: 23.75rem; diff --git a/components/Header/HeaderLink/headerLink.module.css b/components/Header/HeaderLink/headerLink.module.css index 198e0c61b..bf642527f 100644 --- a/components/Header/HeaderLink/headerLink.module.css +++ b/components/Header/HeaderLink/headerLink.module.css @@ -2,5 +2,16 @@ display: flex; align-items: center; gap: var(--Spacing-x1); - font-size: var(--typography-Caption-Regular-fontSize); +} + +.headerLink:hover { + color: var(--Base-Text-High-contrast); +} + +.headerLink .icon * { + fill: var(--Base-Text-Medium-contrast); +} + +.headerLink:hover .icon * { + fill: var(--Base-Text-High-contrast); } diff --git a/components/Header/HeaderLink/index.tsx b/components/Header/HeaderLink/index.tsx index 1bfa286ac..78c700733 100644 --- a/components/Header/HeaderLink/index.tsx +++ b/components/Header/HeaderLink/index.tsx @@ -1,4 +1,7 @@ -import Link from "@/components/TempDesignSystem/Link" +import Link from "next/link" + +import { getIconByIconName } from "@/components/Icons/get-icon-by-icon-name" +import Caption from "@/components/TempDesignSystem/Text/Caption" import styles from "./headerLink.module.css" @@ -6,16 +9,19 @@ import type { HeaderLinkProps } from "@/types/components/header/headerLink" export default function HeaderLink({ children, - className, - ...props + href, + iconName, + iconSize = 20, }: HeaderLinkProps) { + const Icon = getIconByIconName(iconName) return ( - - {children} - + + + {Icon ? ( + + ) : null} + {children} + + ) } diff --git a/components/Header/MainMenu/MobileMenu/index.tsx b/components/Header/MainMenu/MobileMenu/index.tsx index 272c4b231..621529b0f 100644 --- a/components/Header/MainMenu/MobileMenu/index.tsx +++ b/components/Header/MainMenu/MobileMenu/index.tsx @@ -7,21 +7,23 @@ import { useMediaQuery } from "usehooks-ts" import useDropdownStore from "@/stores/main-menu" -import { GiftIcon, SearchIcon, ServiceIcon } from "@/components/Icons" import LanguageSwitcher from "@/components/LanguageSwitcher" import { useHandleKeyUp } from "@/hooks/useHandleKeyUp" import HeaderLink from "../../HeaderLink" +import TopLink from "../../TopLink" import styles from "./mobileMenu.module.css" import { DropdownTypeEnum } from "@/types/components/dropdown/dropdown" import type { MobileMenuProps } from "@/types/components/header/mobileMenu" +import { IconName } from "@/types/components/icon" export default function MobileMenu({ children, languageUrls, topLink, + isLoggedIn, }: React.PropsWithChildren) { const intl = useIntl() const { @@ -77,18 +79,11 @@ export default function MobileMenu({ > {children}