diff --git a/components/Header/MainMenu/MyPagesMenuContent/index.tsx b/components/Header/MainMenu/MyPagesMenuContent/index.tsx
index 641cf8cdc..4cd2c8e99 100644
--- a/components/Header/MainMenu/MyPagesMenuContent/index.tsx
+++ b/components/Header/MainMenu/MyPagesMenuContent/index.tsx
@@ -1,6 +1,5 @@
"use client"
-import Link from "next/link"
import { useIntl } from "react-intl"
import { MembershipLevelEnum } from "@/constants/membershipLevels"
@@ -9,6 +8,7 @@ import { trpc } from "@/lib/trpc/client"
import { ArrowRightIcon } from "@/components/Icons"
import Divider from "@/components/TempDesignSystem/Divider"
+import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import useLang from "@/hooks/useLang"
@@ -70,6 +70,7 @@ export default function MyPagesMenuContent({
{link.linkText}
@@ -82,6 +83,7 @@ export default function MyPagesMenuContent({
{intl.formatMessage({ id: "Log out" })}
diff --git a/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css b/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
index 5e16801e3..5f3cbb025 100644
--- a/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
+++ b/components/Header/MainMenu/MyPagesMenuContent/myPagesMenuContent.module.css
@@ -32,26 +32,6 @@
list-style: none;
}
-.link {
- display: flex;
- align-items: center;
- justify-content: space-between;
- text-decoration: none;
- padding: var(--Spacing-x1);
- gap: var(--Spacing-x-one-and-half);
- color: var(--Base-Text-High-contrast);
- font-family: var(--typography-Body-Bold-fontFamily);
- font-size: var(--typography-Body-Bold-fontSize);
- font-weight: var(--typography-Body-Bold-fontWeight);
- line-height: var(--typography-Body-Bold-lineHeight);
- letter-spacing: var(--typography-Body-Bold-letterSpacing);
- border-radius: var(--Corner-radius-Medium);
-}
-
-.link:hover {
- background-color: var(--Base-Surface-Primary-light-Hover-alt);
-}
-
.link.smallLink {
font-family: var(--typography-Body-Regular-fontFamily);
font-size: var(--typography-Body-Regular-fontSize);
@@ -64,6 +44,10 @@
opacity: 0;
}
+.arrow {
+ flex-shrink: 0;
+}
+
@media screen and (min-width: 768px) {
.myPagesMenuContent {
padding: var(--Spacing-x2) var(--Spacing-x4);
diff --git a/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx b/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
index e0987bb6b..2458bdde8 100644
--- a/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
+++ b/components/Header/MainMenu/NavigationMenu/MegaMenu/index.tsx
@@ -11,7 +11,7 @@ import { useTrapFocus } from "@/hooks/useTrapFocus"
import styles from "./megaMenu.module.css"
-import { MegaMenuProps } from "@/types/components/header/megaMenu"
+import type { MegaMenuProps } from "@/types/components/header/megaMenu"
export default function MegaMenu({
isMobile,
@@ -60,7 +60,7 @@ export default function MegaMenu({
{submenu.map((item) => (
- {item.title}
+ {item.title}
{item.links.map(({ title, link }) =>
@@ -68,11 +68,15 @@ export default function MegaMenu({
-
{title}
+
) : null
diff --git a/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css b/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css
index bd7b645e9..da3810dc9 100644
--- a/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css
+++ b/components/Header/MainMenu/NavigationMenu/MegaMenu/megaMenu.module.css
@@ -13,8 +13,10 @@
.submenus {
list-style: none;
display: grid;
- gap: var(--Spacing-x3);
- padding: var(--Spacing-x2) var(--Spacing-x4);
+}
+
+.submenuTitle {
+ padding-left: var(--Spacing-x1);
}
.submenu {
@@ -31,10 +33,16 @@
align-content: start;
}
-.link {
- padding: var(--Spacing-x1) 0;
- font-weight: var(--typography-Body-Bold-fontWeight);
- width: 100%;
+.linkIcon {
+ display: none;
+}
+
+.link:not(:hover) .arrow {
+ opacity: 0;
+}
+
+.arrow {
+ flex-shrink: 0;
}
.backWrapper {
@@ -68,10 +76,17 @@
grid-template-rows: max-content 1fr max-content;
}
+ .submenus {
+ padding: var(--Spacing-x2);
+ }
+
.submenusItem:first-child {
padding-bottom: var(--Spacing-x2);
border-bottom: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
}
+ .submenusItem:last-child {
+ padding-top: var(--Spacing-x3);
+ }
.cardWrapper {
background-color: var(--Base-Surface-Secondary-light-Normal);
@@ -104,11 +119,16 @@
.submenus {
grid-area: submenus;
grid-template-columns: repeat(2, 1fr);
+ padding: var(--Spacing-x2) var(--Spacing-x3);
}
.submenusItem:first-child {
+ padding-right: var(--Spacing-x5);
border-right: 1px solid var(--Primary-Light-On-Surface-Divider-subtle);
}
+ .submenusItem:last-child {
+ padding-left: var(--Spacing-x5);
+ }
.cardWrapper {
grid-area: card;
diff --git a/components/LanguageSwitcher/languageSwitcher.module.css b/components/LanguageSwitcher/languageSwitcher.module.css
index 4cde01f31..7f3854520 100644
--- a/components/LanguageSwitcher/languageSwitcher.module.css
+++ b/components/LanguageSwitcher/languageSwitcher.module.css
@@ -85,17 +85,6 @@
transform: rotate(180deg);
}
- /* Triangle dropdown */
- .dropdown::before {
- content: "";
- position: absolute;
- right: 2.4rem;
- border-width: 0.75rem;
- border-style: solid;
- border-color: var(--Base-Surface-Primary-light-Normal) transparent
- transparent transparent;
- }
-
.bottom .dropdown {
transition: none;
height: auto;
diff --git a/components/TempDesignSystem/Link/link.module.css b/components/TempDesignSystem/Link/link.module.css
index 44dc08680..abd860406 100644
--- a/components/TempDesignSystem/Link/link.module.css
+++ b/components/TempDesignSystem/Link/link.module.css
@@ -196,3 +196,25 @@
letter-spacing: var(--typography-Caption-Bold-letterSpacing);
line-height: var(--typography-Caption-Bold-lineHeight);
}
+
+.menu {
+ display: flex;
+ align-items: center;
+ justify-content: space-between;
+ text-decoration: none;
+ width: 100%;
+ padding: var(--Spacing-x1);
+ gap: var(--Spacing-x-one-and-half);
+ color: var(--Base-Text-High-contrast);
+ font-family: var(--typography-Body-Bold-fontFamily);
+ font-size: var(--typography-Body-Bold-fontSize);
+ font-weight: var(--typography-Body-Bold-fontWeight);
+ line-height: var(--typography-Body-Bold-lineHeight);
+ letter-spacing: var(--typography-Body-Bold-letterSpacing);
+ border-radius: var(--Corner-radius-Medium);
+}
+
+.menu:hover {
+ color: var(--Base-Text-High-contrast);
+ background-color: var(--Base-Surface-Primary-light-Hover-alt);
+}
diff --git a/components/TempDesignSystem/Link/variants.ts b/components/TempDesignSystem/Link/variants.ts
index 923a61c90..1930b8cb8 100644
--- a/components/TempDesignSystem/Link/variants.ts
+++ b/components/TempDesignSystem/Link/variants.ts
@@ -31,6 +31,7 @@ export const linkVariants = cva(styles.link, {
icon: styles.icon,
underscored: styles.underscored,
myPageMobileDropdown: styles.myPageMobileDropdown,
+ menu: styles.menu,
shortcut: styles.shortcut,
sidebar: styles.sidebar,
tab: styles.tab,
diff --git a/components/TempDesignSystem/Text/Caption/caption.module.css b/components/TempDesignSystem/Text/Caption/caption.module.css
index 124f3cbc5..18bd252b6 100644
--- a/components/TempDesignSystem/Text/Caption/caption.module.css
+++ b/components/TempDesignSystem/Text/Caption/caption.module.css
@@ -1,4 +1,4 @@
-.caption {
+p.caption {
margin: 0;
padding: 0;
}