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

Merged in fix/SW-2626-error-message-multiroom-reward (pull request #2299)

Browse Source 
fix(SW-2626): add multiroom reward error message for mobile

* fix(SW-2626): add multiroom reward error message for mobile

* fix(SW-2626): error message to red color

* fix(SW-2626): fix errorContainer

* fix(SW-2626): fix button fullwidth

* fix(SW-2626): fix button fullwidth

* fix(SW-2626): add design

* fix(SW-2626): add new colors for checkbox

* fix(SW-2626): new color for input

* fix(SW-2626): fix pr comment

* fix(SW-2626): final ui for desktop and mobile


Approved-by: Hrishikesh Vaipurkar
This commit is contained in:
Bianca Widstam
2025-06-12 12:51:37 +00:00
parent 2dd07eb6b8
commit 5b90e15746
15 changed files with 213 additions and 114 deletions
Download Patch File Download Diff File Expand all files Collapse all files

24
apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/booking-code.module.css
View File

@@ -16,20 +16,20 @@
align-items: center; align-items: center;
gap: var(--Spacing-x-half); gap: var(--Spacing-x-half);
position: relative; position: relative;
color: var(--Text-Accent-Primary);
} }
.errorContainer { .errorContainer {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
gap: var(--Spacing-x1); gap: var(--Space-x2);
}
.error {
display: flex;
gap: var(--Spacing-x-half);
} }
.errorIcon { .error {
min-width: 20px; display: flex;
gap: var(--Space-x1);
white-space: break-spaces;
color: var(--UI-Text-Error);
} }
.bookingCodeRemember, .bookingCodeRemember,
@@ -52,10 +52,17 @@
align-items: center; align-items: center;
} }
.removeButton {
width: 100%;
}
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {
.hideOnMobile { .hideOnMobile {
display: none; display: none;
} }
.removeButton {
display: none;
}
} }
@media screen and (min-width: 768px) { @media screen and (min-width: 768px) {
@@ -69,6 +76,9 @@
justify-content: space-between; justify-content: space-between;
border-radius: var(--Spacing-x-one-and-half); border-radius: var(--Spacing-x-one-and-half);
} }
.error {
color: var(--Text-Default);
}
} }
@media screen and (min-width: 768px) and (max-width: 1366px) { @media screen and (min-width: 768px) and (max-width: 1366px) {

64
apps/scandic-web/components/Forms/BookingWidget/FormContent/BookingCode/index.tsx
View File

@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts" import { useMediaQuery } from "usehooks-ts"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { REDEMPTION } from "@/constants/booking" import { REDEMPTION } from "@/constants/booking"
@@ -17,8 +18,8 @@ import Switch from "@/components/TempDesignSystem/Form/Switch"
import Body from "@/components/TempDesignSystem/Text/Body" import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption" import Caption from "@/components/TempDesignSystem/Text/Caption"
import { bookingWidgetErrors } from "../../schema"
import { Input as BookingWidgetInput } from "../Input" import { Input as BookingWidgetInput } from "../Input"
import { isMultiRoomError } from "../utils"
import styles from "./booking-code.module.css" import styles from "./booking-code.module.css"
@@ -70,6 +71,7 @@ export default function BookingCode() {
// Add delay to handle table mode rendering // Add delay to handle table mode rendering
setTimeout(function () { setTimeout(function () {
setValue(REDEMPTION, false, { setValue(REDEMPTION, false, {
shouldValidate: true,
shouldDirty: true, shouldDirty: true,
}) })
}) })
@@ -147,13 +149,9 @@ export default function BookingCode() {
> >
<div className={styles.bookingCode}> <div className={styles.bookingCode}>
<div className={styles.bookingCodeLabel}> <div className={styles.bookingCodeLabel}>
<Caption <Typography variant="Body/Supporting text (caption)/smBold">
color={showRemember ? "uiTextActive" : "red"}
type="bold"
asChild
>
<span>{codeVoucher}</span> <span>{codeVoucher}</span>
</Caption> </Typography>
<CodeRulesModal /> <CodeRulesModal />
</div> </div>
<BookingWidgetInput <BookingWidgetInput
@@ -176,7 +174,7 @@ export default function BookingCode() {
} }
> >
{codeError?.message ? ( {codeError?.message ? (
<BookingCodeError codeError={codeError} /> <BookingCodeError codeError={codeError} isDesktop />
) : ( ) : (
<CodeRemember <CodeRemember
bookingCodeValue={bookingCode?.value} bookingCodeValue={bookingCode?.value}
@@ -266,7 +264,8 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
<Button <Button
size="small" size="small"
className={styles.hideOnMobile} className={styles.hideOnMobile}
intent="secondary" intent="tertiary"
theme="base"
type="button" type="button"
onClick={onApplyClick} onClick={onApplyClick}
> >
@@ -279,29 +278,36 @@ function CodeRemember({ bookingCodeValue, onApplyClick }: CodeRememberProps) {
) )
} }
function BookingCodeError({ codeError }: { codeError: FieldError }) { function BookingCodeError({
codeError,
isDesktop = false,
}: {
codeError: FieldError
isDesktop?: boolean
}) {
const intl = useIntl() const intl = useIntl()
const isMultiroomErr = const isMultiroomError = isMultiRoomError(codeError.message)
codeError.message ===
bookingWidgetErrors.MULTIROOM_BOOKING_CODE_UNAVAILABLE ||
codeError.message === bookingWidgetErrors.MULTIROOM_REWARD_NIGHT_UNAVAILABLE
const isInvalidErr =
codeError.message === bookingWidgetErrors.BOOKING_CODE_INVALID
return ( return (
<div className={styles.errorContainer}> <div className={styles.errorContainer}>
<Caption className={styles.error}> <Typography
<MaterialIcon className={styles.error}
icon="error" variant="Body/Supporting text (caption)/smRegular"
color={ >
isInvalidErr ? "Icon/Feedback/Information" : "Icon/Feedback/Error" <span>
} <MaterialIcon
className={styles.errorIcon} size={20}
/> icon="error"
{getErrorMessage(intl, codeError.message)} color="Icon/Feedback/Error"
</Caption> isFilled={!isDesktop}
{isMultiroomErr ? ( />
<RemoveExtraRooms className={styles.hideOnMobile} /> {getErrorMessage(intl, codeError.message)}
</span>
</Typography>
{isMultiroomError ? (
<div className={styles.removeButton}>
<RemoveExtraRooms fullWidth />
</div>
) : null} ) : null}
</div> </div>
) )
@@ -325,7 +331,7 @@ export function RemoveExtraRooms({ ...props }: ButtonProps) {
type="button" type="button"
onClick={removeExtraRooms} onClick={removeExtraRooms}
size="small" size="small"
intent="primary" intent="secondary"
{...props} {...props}
> >
{intl.formatMessage({ {intl.formatMessage({

38
apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/index.tsx
View File

@@ -3,6 +3,7 @@
import { useCallback, useEffect, useRef } from "react" import { useCallback, useEffect, useRef } from "react"
import { useFormContext } from "react-hook-form" import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography" import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -16,6 +17,7 @@ import { getErrorMessage } from "@/components/TempDesignSystem/Form/Input/errors
import Caption from "@/components/TempDesignSystem/Text/Caption" import Caption from "@/components/TempDesignSystem/Text/Caption"
import { RemoveExtraRooms } from "../BookingCode" import { RemoveExtraRooms } from "../BookingCode"
import { isMultiRoomError } from "../utils"
import styles from "./reward-night.module.css" import styles from "./reward-night.module.css"
@@ -38,7 +40,7 @@ export default function RewardNight() {
"To book a reward night, make sure you're logged in to your Scandic Friends account.", "To book a reward night, make sure you're logged in to your Scandic Friends account.",
}) })
const redemptionErr = errors[REDEMPTION] const redemptionErr = errors[REDEMPTION]
const isMultiRoomError = redemptionErr?.message?.indexOf("Multi-room") === 0 const isDesktop = useMediaQuery("(min-width: 767px)")
function validateRedemption(value: boolean) { function validateRedemption(value: boolean) {
// Validate redemption as per the rules defined in the schema // Validate redemption as per the rules defined in the schema
@@ -55,10 +57,10 @@ export default function RewardNight() {
} }
const resetOnMultiroomError = useCallback(() => { const resetOnMultiroomError = useCallback(() => {
if (isMultiRoomError) { if (isMultiRoomError(redemptionErr?.message) && isDesktop) {
setValue(REDEMPTION, false, { shouldValidate: true }) setValue(REDEMPTION, false, { shouldValidate: true })
} }
}, [isMultiRoomError, setValue]) }, [redemptionErr?.message, setValue, isDesktop])
function closeOnBlur(evt: FocusEvent) { function closeOnBlur(evt: FocusEvent) {
const target = evt.relatedTarget as HTMLElement const target = evt.relatedTarget as HTMLElement
@@ -119,16 +121,26 @@ export default function RewardNight() {
</Checkbox> </Checkbox>
{redemptionErr && ( {redemptionErr && (
<div className={styles.errorContainer}> <div className={styles.errorContainer}>
<Caption className={styles.error} type="regular" color="blue"> <Typography
<MaterialIcon className={styles.error}
icon="error" variant="Body/Supporting text (caption)/smRegular"
size={24} >
color="Icon/Feedback/Information" <span>
className={styles.errorIcon} <MaterialIcon
/> icon="error"
{getErrorMessage(intl, redemptionErr.message)} size={20}
</Caption> color="Icon/Feedback/Error"
{isMultiRoomError ? <RemoveExtraRooms /> : null} className={styles.errorIcon}
isFilled={!isDesktop}
/>
{getErrorMessage(intl, redemptionErr.message)}
</span>
</Typography>
{isMultiRoomError(redemptionErr.message) ? (
<div className={styles.hideOnMobile}>
<RemoveExtraRooms fullWidth />
</div>
) : null}
</div> </div>
)} )}
</div> </div>

36
apps/scandic-web/components/Forms/BookingWidget/FormContent/RewardNight/reward-night.module.css
View File

@@ -1,23 +1,19 @@
.errorContainer { .errorContainer {
background: var(--Base-Surface-Primary-light-Normal);
border-radius: var(--Spacing-x-one-and-half);
display: grid; display: grid;
gap: var(--Spacing-x1); gap: var(--Space-x2);
padding: var(--Spacing-x2); margin-top: var(--Space-x2);
position: absolute;
top: calc(100% + 16px);
width: 320px;
} }
.error { .error {
display: flex; display: flex;
gap: var(--Spacing-x-half); gap: var(--Space-x1);
color: var(--UI-Text-Error);
white-space: break-spaces;
} }
.errorIcon { .errorIcon {
min-width: 20px; min-width: 20px;
} }
.rewardNightLabel { .rewardNightLabel {
align-items: center; align-items: center;
display: flex; display: flex;
@@ -28,3 +24,25 @@
max-width: 560px; max-width: 560px;
margin-top: var(--Spacing-x2); margin-top: var(--Spacing-x2);
} }
@media screen and (max-width: 767px) {
.hideOnMobile {
display: none;
}
}
@media screen and (min-width: 768px) {
.errorContainer {
border-radius: var(--Space-x15);
padding: var(--Space-x2);
background: var(--Base-Surface-Primary-light-Normal);
position: absolute;
top: calc(100% + 16px);
width: 320px;
margin-top: 0;
box-shadow: var(--popup-box-shadow);
}
.error {
color: var(--Text-Default);
}
}

13
apps/scandic-web/components/Forms/BookingWidget/FormContent/index.tsx
View File

@@ -7,6 +7,7 @@ import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography" import { Typography } from "@scandic-hotels/design-system/Typography"
import { REDEMPTION } from "@/constants/booking"
import { hotelreservation } from "@/constants/routes/hotelReservation" import { hotelreservation } from "@/constants/routes/hotelReservation"
import { dt } from "@/lib/dt" import { dt } from "@/lib/dt"
@@ -18,6 +19,7 @@ import useLang from "@/hooks/useLang"
import { RemoveExtraRooms } from "./BookingCode" import { RemoveExtraRooms } from "./BookingCode"
import { Search, SearchSkeleton } from "./Search" import { Search, SearchSkeleton } from "./Search"
import { isMultiRoomError } from "./utils"
import ValidationError from "./ValidationError" import ValidationError from "./ValidationError"
import Voucher, { VoucherSkeleton } from "./Voucher" import Voucher, { VoucherSkeleton } from "./Voucher"
@@ -108,12 +110,11 @@ export default function FormContent({
<Voucher /> <Voucher />
</div> </div>
<div className={`${styles.buttonContainer} ${styles.hideOnTablet}`}> <div className={`${styles.buttonContainer} ${styles.hideOnTablet}`}>
{errors.bookingCode?.value?.message?.indexOf("Multi-room") === 0 ? ( {isMultiRoomError(errors.bookingCode?.value?.message) ||
<RemoveExtraRooms isMultiRoomError(errors[REDEMPTION]?.message) ? (
size="medium" <div className={styles.showOnMobile}>
fullWidth <RemoveExtraRooms size="medium" fullWidth />
className={styles.showOnMobile} </div>
/>
) : null} ) : null}
<Button <Button
className={styles.button} className={styles.button}

8
apps/scandic-web/components/Forms/BookingWidget/FormContent/utils.ts Normal file
View File

@@ -0,0 +1,8 @@
import { bookingWidgetErrors } from "../schema"
export function isMultiRoomError(errorMessage: string | undefined): boolean {
return (
errorMessage === bookingWidgetErrors.MULTIROOM_BOOKING_CODE_UNAVAILABLE ||
errorMessage === bookingWidgetErrors.MULTIROOM_REWARD_NIGHT_UNAVAILABLE
)
}

64
apps/scandic-web/components/GuestsRoomsPicker/Form.tsx
View File

@@ -5,6 +5,7 @@ import { useFormContext, useWatch } from "react-hook-form"
import { useIntl } from "react-intl" import { useIntl } from "react-intl"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon" import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { REDEMPTION } from "@/constants/booking" import { REDEMPTION } from "@/constants/booking"
@@ -64,13 +65,19 @@ export default function GuestsRoomsPickerDialog({
const handleRemoveRoom = useCallback( const handleRemoveRoom = useCallback(
(index: number) => { (index: number) => {
setValue( const updatedRooms = roomsValue.filter((_, i) => i !== index)
"rooms",
roomsValue.filter((_, i) => i !== index), setValue("rooms", updatedRooms, {
{ shouldValidate: true, shouldDirty: true } shouldValidate: true,
) shouldDirty: true,
})
if (updatedRooms.length === 1) {
trigger("bookingCode.value")
trigger(REDEMPTION)
}
}, },
[roomsValue, setValue] [roomsValue, trigger, setValue]
) )
// Validate rooms when they change // Validate rooms when they change
@@ -107,24 +114,35 @@ export default function GuestsRoomsPickerDialog({
{addRoomDisabledTextForSpecialRate ? ( {addRoomDisabledTextForSpecialRate ? (
<div className={styles.addRoomMobileContainer}> <div className={styles.addRoomMobileContainer}>
<Tooltip <Button
text={addRoomDisabledTextForSpecialRate} intent="text"
position="bottom" variant="icon"
arrow="left" wrapping
theme="base"
fullWidth
onPress={handleAddRoom}
disabled
> >
<Button <MaterialIcon icon="add" color="CurrentColor" />
intent="text" {addRoomLabel}
variant="icon" </Button>
wrapping <div className={styles.errorContainer}>
theme="base" <Typography
fullWidth className={styles.error}
onPress={handleAddRoom} variant="Body/Supporting text (caption)/smRegular"
disabled
> >
<MaterialIcon icon="add" color="CurrentColor" /> <span>
{addRoomLabel} <MaterialIcon
</Button> icon="error"
</Tooltip> size={20}
color="Icon/Feedback/Error"
className={styles.errorIcon}
isFilled
/>
{addRoomDisabledTextForSpecialRate}
</span>
</Typography>
</div>
</div> </div>
) : ( ) : (
canAddRooms && ( canAddRooms && (
@@ -151,7 +169,7 @@ export default function GuestsRoomsPickerDialog({
<div className={styles.hideOnMobile}> <div className={styles.hideOnMobile}>
<Tooltip <Tooltip
text={addRoomDisabledTextForSpecialRate} text={addRoomDisabledTextForSpecialRate}
position="top" position="bottom"
arrow="left" arrow="left"
> >
<Button <Button

16
apps/scandic-web/components/GuestsRoomsPicker/guests-rooms-picker.module.css
View File

@@ -2,6 +2,17 @@
display: none; display: none;
} }
.errorContainer {
display: flex;
padding: var(--Space-x2);
}
.error {
display: flex;
gap: var(--Space-x1);
color: var(--UI-Text-Error);
}
.pickerContainerMobile { .pickerContainerMobile {
--header-height: 72px; --header-height: 72px;
--sticky-button-height: 140px; --sticky-button-height: 140px;
@@ -59,6 +70,10 @@
padding: 20px var(--Spacing-x-one-and-half) 0; padding: 20px var(--Spacing-x-one-and-half) 0;
} }
.guestsAndRooms {
color: var(--Text-Default);
}
.footer { .footer {
display: flex; display: flex;
flex-direction: row; flex-direction: row;
@@ -132,7 +147,6 @@
.addRoomMobileContainer { .addRoomMobileContainer {
display: grid; display: grid;
padding-bottom: calc(var(--sticky-button-height) + 20px); padding-bottom: calc(var(--sticky-button-height) + 20px);
gap: var(--Spacing-x2);
} }
.addRoomMobileContainer button { .addRoomMobileContainer button {

2
apps/scandic-web/components/GuestsRoomsPicker/index.tsx
View File

@@ -183,7 +183,7 @@ function Trigger({
aria-labelledby={ariaLabelledBy} aria-labelledby={ariaLabelledBy}
> >
<Typography variant="Body/Paragraph/mdRegular"> <Typography variant="Body/Paragraph/mdRegular">
<span>{parts.join(", ")}</span> <span className={styles.guestsAndRooms}>{parts.join(", ")}</span>
</Typography> </Typography>
</Button> </Button>
) )

2
apps/scandic-web/components/HotelReservation/PaymentOption/paymentOption.module.css
View File

@@ -25,7 +25,7 @@
} }
.radio.selected { .radio.selected {
border: 8px solid var(--UI-Input-Controls-Fill-Selected); border: 8px solid var(--Surface-UI-Fill-Active);
} }
.titleContainer { .titleContainer {

4
apps/scandic-web/components/HotelReservation/SelectHotel/HotelFilter/FilterCheckbox/filterCheckbox.module.css
View File

@@ -6,8 +6,8 @@
} }
.container[data-selected] .checkbox { .container[data-selected] .checkbox {
border: var(--UI-Input-Controls-Fill-Selected); border: var(--Surface-UI-Fill-Active);
background: var(--UI-Input-Controls-Fill-Selected); background: var(--Surface-UI-Fill-Active);
} }
.container:focus-within .checkbox { .container:focus-within .checkbox {

2
apps/scandic-web/components/TempDesignSystem/Form/Checkbox/checkbox.module.css
View File

@@ -7,7 +7,7 @@
.container[data-selected] .checkbox { .container[data-selected] .checkbox {
border: none; border: none;
background: var(--UI-Input-Controls-Fill-Selected); background: var(--Surface-UI-Fill-Active);
} }
.container[data-disabled] .checkbox { .container[data-disabled] .checkbox {

12
apps/scandic-web/components/TempDesignSystem/Form/Switch/switch.module.css
View File

@@ -10,8 +10,8 @@
.switch { .switch {
width: 40px; width: 40px;
height: 24px; height: 24px;
border: 2px solid var(--UI-Input-Controls-Border-Normal); border: 2px solid var(--Surface-Secondary-Default-dark);
background: var(--UI-Input-Controls-Surface-Normal); background: var(--Surface-Secondary-Default-dark);
border-radius: 24px; border-radius: 24px;
transition: all 200ms; transition: all 200ms;
display: block; display: block;
@@ -22,7 +22,7 @@
margin: 2px; margin: 2px;
width: 16px; width: 16px;
height: 16px; height: 16px;
background: var(--UI-Input-Controls-Border-Normal); background: var(--Surface-UI-Fill-Default);
border-radius: 100%; border-radius: 100%;
transition: all 200ms; transition: all 200ms;
} }
@@ -30,11 +30,11 @@
.container[data-selected] { .container[data-selected] {
.switch { .switch {
border-color: var(--UI-Input-Controls-Fill-Selected); border-color: var(--Surface-UI-Fill-Active);
background: var(--UI-Input-Controls-Fill-Selected); background: var(--Surface-UI-Fill-Active);
&:before { &:before {
background: var(--UI-Input-Controls-Surface-Normal); background: var(--Surface-UI-Fill-Default);
transform: translateX(100%); transform: translateX(100%);
} }
} }

2
apps/scandic-web/components/TempDesignSystem/Select/select.module.css
View File

@@ -121,7 +121,7 @@
} }
.listBoxItem[data-selected="true"].showRadioButton:before { .listBoxItem[data-selected="true"].showRadioButton:before {
box-shadow: inset 0 0 0 8px var(--UI-Input-Controls-Fill-Selected); box-shadow: inset 0 0 0 8px var(--Surface-UI-Fill-Active);
} }
/* Use global react aria classnames here since setting a css modules classname overrides /* Use global react aria classnames here since setting a css modules classname overrides

40
apps/scandic-web/components/TempDesignSystem/Tooltip/tooltip.module.css
View File

@@ -5,8 +5,8 @@
.tooltip { .tooltip {
padding: var(--Spacing-x1); padding: var(--Spacing-x1);
background-color: var(--UI-Text-Active); background-color: var(--Surface-UI-Fill-Intense);
border: 0.5px solid var(--UI-Border-Active); border: 0.5px solid var(--Border-Interactive-Focus);
border-radius: var(--Corner-radius-md); border-radius: var(--Corner-radius-md);
color: var(--Base-Text-Inverted); color: var(--Base-Text-Inverted);
position: absolute; position: absolute;
@@ -54,7 +54,8 @@
top: -8px; top: -8px;
left: 16px; left: 16px;
border-width: 0 7px 8px 7px; border-width: 0 7px 8px 7px;
border-color: transparent transparent var(--UI-Text-Active) transparent; border-color: transparent transparent var(--Border-Interactive-Focus)
transparent;
} }
.bottom.arrowCenter::before { .bottom.arrowCenter::before {
@@ -62,21 +63,24 @@
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
border-width: 0 7px 8px 7px; border-width: 0 7px 8px 7px;
border-color: transparent transparent var(--UI-Text-Active) transparent; border-color: transparent transparent var(--Border-Interactive-Focus)
transparent;
} }
.bottom.arrowRight::before { .bottom.arrowRight::before {
top: -8px; top: -8px;
right: 16px; right: 16px;
border-width: 0 7px 8px 7px; border-width: 0 7px 8px 7px;
border-color: transparent transparent var(--UI-Text-Active) transparent; border-color: transparent transparent var(--Border-Interactive-Focus)
transparent;
} }
.top.arrowLeft::before { .top.arrowLeft::before {
bottom: -8px; bottom: -8px;
left: 16px; left: 16px;
border-width: 8px 7px 0 7px; border-width: 8px 7px 0 7px;
border-color: var(--UI-Text-Active) transparent transparent transparent; border-color: var(--Border-Interactive-Focus) transparent transparent
transparent;
} }
.top.arrowCenter::before { .top.arrowCenter::before {
@@ -84,14 +88,16 @@
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
border-width: 8px 7px 0 7px; border-width: 8px 7px 0 7px;
border-color: var(--UI-Text-Active) transparent transparent transparent; border-color: var(--Border-Interactive-Focus) transparent transparent
transparent;
} }
.top.arrowRight::before { .top.arrowRight::before {
bottom: -8px; bottom: -8px;
right: 16px; right: 16px;
border-width: 8px 7px 0 7px; border-width: 8px 7px 0 7px;
border-color: var(--UI-Text-Active) transparent transparent transparent; border-color: var(--Border-Interactive-Focus) transparent transparent
transparent;
} }
.left.arrowTop::before { .left.arrowTop::before {
@@ -99,7 +105,8 @@
right: -8px; right: -8px;
transform: translateY(-50%); transform: translateY(-50%);
border-width: 7px 0 7px 8px; border-width: 7px 0 7px 8px;
border-color: transparent transparent transparent var(--UI-Text-Active); border-color: transparent transparent transparent
var(--Border-Interactive-Focus);
} }
.left.arrowCenter::before { .left.arrowCenter::before {
@@ -107,7 +114,8 @@
right: -8px; right: -8px;
transform: translateY(-50%); transform: translateY(-50%);
border-width: 7px 0 7px 8px; border-width: 7px 0 7px 8px;
border-color: transparent transparent transparent var(--UI-Text-Active); border-color: transparent transparent transparent
var(--Border-Interactive-Focus);
} }
.left.arrowBottom::before { .left.arrowBottom::before {
@@ -115,7 +123,8 @@
right: -8px; right: -8px;
transform: translateY(50%); transform: translateY(50%);
border-width: 7px 0 7px 8px; border-width: 7px 0 7px 8px;
border-color: transparent transparent transparent var(--UI-Text-Active); border-color: transparent transparent transparent
var(--Border-Interactive-Focus);
} }
.right.arrowTop::before { .right.arrowTop::before {
@@ -123,7 +132,8 @@
left: -8px; left: -8px;
transform: translateY(-50%); transform: translateY(-50%);
border-width: 7px 8px 7px 0; border-width: 7px 8px 7px 0;
border-color: transparent var(--UI-Text-Active) transparent transparent; border-color: transparent var(--Border-Interactive-Focus) transparent
transparent;
} }
.right.arrowCenter::before { .right.arrowCenter::before {
@@ -131,7 +141,8 @@
left: -8px; left: -8px;
transform: translateY(-50%); transform: translateY(-50%);
border-width: 7px 8px 7px 0; border-width: 7px 8px 7px 0;
border-color: transparent var(--UI-Text-Active) transparent transparent; border-color: transparent var(--Border-Interactive-Focus) transparent
transparent;
} }
.right.arrowBottom::before { .right.arrowBottom::before {
@@ -139,7 +150,8 @@
left: -8px; left: -8px;
transform: translateY(50%); transform: translateY(50%);
border-width: 7px 8px 7px 0; border-width: 7px 8px 7px 0;
border-color: transparent var(--UI-Text-Active) transparent transparent; border-color: transparent var(--Border-Interactive-Focus) transparent
transparent;
} }
@media screen and (max-width: 767px) { @media screen and (max-width: 767px) {