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

Merged in fix/icon-color (pull request #1672)

Browse Source 
fix: change to correct icon color

* fix: change to correct icon color


Approved-by: Erik Tiekstra
Approved-by: Fredrik Thorsson
This commit is contained in:
Matilda Landström
2025-03-31 07:29:18 +00:00
parent 8e86bbb4b9
commit b86b9db22b
5 changed files with 20 additions and 13 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
apps/scandic-web/components/ContentType/DestinationPage/ExperienceList/experienceList.module.css
View File

@@ -1,6 +1,6 @@
.experienceList { .experienceList {
list-style: none; list-style: none;
display: flex; display: flex;
gap: var(--Spacing-x1); gap: var(--Space-x1);
flex-wrap: wrap; flex-wrap: wrap;
} }

2
apps/scandic-web/components/ContentType/DestinationPage/ExperienceList/index.tsx
View File

@@ -21,7 +21,7 @@ export default function ExperienceList({ experiences }: ExperienceListProps) {
{experienceList.map(({ Icon, name }) => ( {experienceList.map(({ Icon, name }) => (
<li key={name}> <li key={name}>
<Chip variant="tag"> <Chip variant="tag">
<Icon size={20} /> <Icon size={20} color="Icon/Interactive/Default" />
{name} {name}
</Chip> </Chip>
</li> </li>

9
apps/scandic-web/components/Header/HeaderLink/headerLink.module.css
View File

@@ -1,17 +1,18 @@
.headerLink { .headerLink {
display: flex; display: flex;
align-items: center; align-items: center;
gap: var(--Spacing-x1); gap: var(--Space-x1);
color: var(--Text-Interactive-Secondary);
} }
.headerLink:hover { .headerLink:hover {
color: var(--Base-Text-High-contrast); color: var(--Text-Interactive-Default);
} }
.headerLink .icon * { .headerLink .icon * {
fill: var(--Base-Text-Medium-contrast); fill: var(--Icon-Interactive-Default);
} }
.headerLink:hover .icon * { .headerLink:hover .icon * {
fill: var(--Base-Text-High-contrast); fill: var(--Icon-Interactive-Secondary);
} }

8
apps/scandic-web/components/Header/HeaderLink/index.tsx
View File

@@ -2,8 +2,9 @@
import Link from "next/link" import Link from "next/link"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { IconByIconName } from "@/components/Icons/IconByIconName" import { IconByIconName } from "@/components/Icons/IconByIconName"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import styles from "./headerLink.module.css" import styles from "./headerLink.module.css"
@@ -17,17 +18,18 @@ export default function HeaderLink({
onClick = () => undefined, onClick = () => undefined,
}: HeaderLinkProps) { }: HeaderLinkProps) {
return ( return (
<Caption type="regular" color="textMediumContrast" asChild> <Typography variant="Body/Supporting text (caption)/smRegular">
<Link href={href} className={styles.headerLink} onClick={onClick}> <Link href={href} className={styles.headerLink} onClick={onClick}>
{iconName ? ( {iconName ? (
<IconByIconName <IconByIconName
iconName={iconName} iconName={iconName}
className={styles.icon} className={styles.icon}
size={iconSize} size={iconSize}
color="CurrentColor"
/> />
) : null} ) : null}
{children} {children}
</Link> </Link>
</Caption> </Typography>
) )
} }

12
apps/scandic-web/components/LanguageSwitcher/index.tsx
View File

@@ -6,6 +6,7 @@ import FocusLock from "react-focus-lock"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons" import { MaterialIcon } from "@scandic-hotels/design-system/Icons"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { languages } from "@/constants/languages" import { languages } from "@/constants/languages"
import { trpc } from "@/lib/trpc/client" import { trpc } from "@/lib/trpc/client"
@@ -16,7 +17,6 @@ import { useHandleKeyUp } from "@/hooks/useHandleKeyUp"
import useLang from "@/hooks/useLang" import useLang from "@/hooks/useLang"
import SkeletonShimmer from "../SkeletonShimmer" import SkeletonShimmer from "../SkeletonShimmer"
import Caption from "../TempDesignSystem/Text/Caption"
import LanguageSwitcherContainer from "./LanguageSwitcherContainer" import LanguageSwitcherContainer from "./LanguageSwitcherContainer"
import LanguageSwitcherContent from "./LanguageSwitcherContent" import LanguageSwitcherContent from "./LanguageSwitcherContent"
import { languageSwitcherVariants } from "./variants" import { languageSwitcherVariants } from "./variants"
@@ -106,14 +106,18 @@ export default function LanguageSwitcher({ type }: LanguageSwitcherProps) {
aria-label={isLanguageSwitcherOpen ? closeMsg : openMsg} aria-label={isLanguageSwitcherOpen ? closeMsg : openMsg}
onClick={handleClick} onClick={handleClick}
> >
<MaterialIcon icon="globe" size={globeIconSize} /> <MaterialIcon icon="globe" size={globeIconSize} color="CurrentColor" />
<Caption className={styles.buttonText} type="regular" asChild> <Typography
variant="Body/Supporting text (caption)/smRegular"
className={styles.buttonText}
>
<span>{languages[currentLanguage]}</span> <span>{languages[currentLanguage]}</span>
</Caption> </Typography>
<MaterialIcon <MaterialIcon
icon="keyboard_arrow_down" icon="keyboard_arrow_down"
className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`} className={`${styles.chevron} ${isLanguageSwitcherOpen ? styles.isExpanded : ""}`}
size={20} size={20}
color="CurrentColor"
/> />
</button> </button>