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

fix(SW-812): styling fixes for the header and related components

Browse Source
This commit is contained in:
Erik Tiekstra
2024-11-08 12:12:12 +01:00
parent d8751b3fea
commit fe6582ccbb
47 changed files with 315 additions and 134 deletions
Download Patch File Download Diff File Expand all files Collapse all files

10
components/Header/MainMenu/MyPagesMenu/index.tsx
View File

@@ -5,8 +5,8 @@ import { useIntl } from "react-intl"
import useDropdownStore from "@/stores/main-menu"
import { ChevronDownIcon } from "@/components/Icons"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { ChevronDownSmallIcon } from "@/components/Icons"
import Body from "@/components/TempDesignSystem/Text/Body"
import useClickOutside from "@/hooks/useClickOutside"
import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
import { getInitials } from "@/utils/user"
@@ -47,12 +47,12 @@ export default function MyPagesMenu({
onClick={() => toggleDropdown(DropdownTypeEnum.MyPagesMenu)}
>
<Avatar initials={getInitials(user.firstName, user.lastName)} />
<Subtitle type="two" asChild>
<Body textTransform="bold" color="textHighContrast" asChild>
<span>
{intl.formatMessage({ id: "Hi" })} {user.firstName}!
</span>
</Subtitle>
<ChevronDownIcon
</Body>
<ChevronDownSmallIcon
className={`${styles.chevron} ${isMyPagesMenuOpen ? styles.isExpanded : ""}`}
color="red"
/>

3
components/Header/MainMenu/MyPagesMenu/myPagesMenu.module.css
View File

@@ -5,7 +5,6 @@
@media screen and (min-width: 768px) {
.myPagesMenu {
display: block;
position: relative;
}
.chevron {
@@ -18,7 +17,7 @@
.dropdown {
position: absolute;
top: 2.875rem; /* 2.875rem is the height of the main menu + bottom padding */
top: calc(3.5rem - 2px); /* 3.5rem is the height of the main menu + bottom padding. */
right: 0;
background-color: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Corner-radius-Large);