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

Merged in feat/LOY-584-L6-progressbar (pull request #3511)

Browse Source 
Feat/LOY-584 L6 progressbar informational modal

* refactor(LOY-584): replace deprecated link

* feat(LOY-584): add info modal to progress bar

* fix(LOY-584): let labels overflow progress bar in mobile


Approved-by: Anton Gunnarsson
This commit is contained in:
Matilda Landström
2026-01-29 14:14:20 +00:00
parent dbacb650b6
commit 4d298b0b9b
6 changed files with 193 additions and 30 deletions
Download Patch File Download Diff File Expand all files Collapse all files

7
apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/LevelProgressModal.module.css
View File

@@ -24,11 +24,8 @@
.link {
display: flex;
gap: var(--Space-x1);
}
.linkText {
text-decoration: underline;
gap: var(--Space-x05);
justify-content: left;
}
@media screen and (min-width: 768px) {

20
apps/scandic-web/components/MyPages/LevelProgressCard/LevelProgressModal/index.tsx
View File

@@ -7,7 +7,7 @@ import { dt } from "@scandic-hotels/common/dt"
import { IconButton } from "@scandic-hotels/design-system/IconButton" // client only
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Modal from "@scandic-hotels/design-system/Modal"
import Link from "@scandic-hotels/design-system/OldDSLink"
import { TextLink } from "@scandic-hotels/design-system/TextLink"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { compareAllLevels, faq } from "@/constants/webHrefs"
@@ -83,32 +83,30 @@ export default function LevelProgressModal({
})}
</p>
</Typography>
<Link
size="large"
<TextLink
href={compareAllLevels[lang]}
color="Text/Interactive/Secondary"
className={styles.link}
textDecoration="underline"
theme="Primary"
target="_blank"
>
{intl.formatMessage({
id: "myPages.compareAllLevels",
defaultMessage: "Compare all levels",
})}
<MaterialIcon icon="arrow_forward" color="CurrentColor" size={24} />
</Link>
<Link
size="large"
</TextLink>
<TextLink
href={faq[lang]}
color="Text/Interactive/Secondary"
className={styles.link}
textDecoration="underline"
theme="Primary"
target="_blank"
>
{intl.formatMessage({
id: "common.scandicFriendsFaq",
defaultMessage: "Scandic Friends FAQ",
})}
<MaterialIcon icon="arrow_forward" color="CurrentColor" size={24} />
</Link>
</TextLink>
</div>
</Modal>
)