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

refactor: move divider to design system

Browse Source 
remove not used variants and duplicate colors
This commit is contained in:
Christian Andolf
2025-06-12 15:56:33 +02:00
parent 2dd07eb6b8
commit 9551a629fa
71 changed files with 231 additions and 244 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
apps/scandic-web/components/HotelReservation/BookingConfirmation/Receipt/TotalPrice/index.tsx
View File

@@ -2,13 +2,13 @@
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useBookingConfirmationStore } from "@/stores/booking-confirmation"
import BookingCodeChip from "@/components/BookingCodeChip"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"
import PriceDetails from "../../PriceDetails"
@@ -28,7 +28,7 @@ export default function TotalPrice() {
return (
<>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
<div className={styles.price}>
<div className={styles.entry}>
<Typography variant="Body/Paragraph/mdBold">

5
apps/scandic-web/components/HotelReservation/BookingConfirmation/index.tsx
View File

@@ -1,5 +1,7 @@
import { notFound } from "next/navigation"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { getBookingConfirmation } from "@/lib/trpc/memoizedRequests"
import HotelDetails from "@/components/HotelReservation/BookingConfirmation/HotelDetails"
@@ -9,7 +11,6 @@ import Receipt from "@/components/HotelReservation/BookingConfirmation/Receipt"
import Rooms from "@/components/HotelReservation/BookingConfirmation/Rooms"
import SidePanel from "@/components/HotelReservation/SidePanel"
import Alert from "@/components/TempDesignSystem/Alert"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import BookingConfirmationProvider from "@/providers/BookingConfirmationProvider"
@@ -74,7 +75,7 @@ export default async function BookingConfirmation({
mainRoom={room}
/>
<PaymentDetails />
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
<HotelDetails hotel={hotel} />
{hotel.specialAlerts.map((alert) => (
<div key={alert.id}>

4
apps/scandic-web/components/HotelReservation/EnterDetails/Confirm/index.tsx
View File

@@ -5,6 +5,7 @@ import { useFormContext } from "react-hook-form"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -13,7 +14,6 @@ import { PaymentMethodEnum } from "@/constants/booking"
import MySavedCards from "@/components/HotelReservation/MySavedCards"
import PaymentOption from "@/components/HotelReservation/PaymentOption"
import Modal from "@/components/Modal"
import Divider from "@/components/TempDesignSystem/Divider"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import PaymentOptionsGroup from "../Payment/PaymentOptionsGroup"
@@ -102,7 +102,7 @@ export default function ConfirmBooking({
</div>
</Modal>
</div>
<Divider color="subtle" />
<Divider />
<Typography variant="Body/Supporting text (caption)/smRegular">
<p>
{intl.formatMessage({

4
apps/scandic-web/components/HotelReservation/EnterDetails/PriceChangeDialog/PriceChangeSummary/index.tsx
View File

@@ -9,10 +9,10 @@ import {
} from "react-aria-components"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -168,7 +168,7 @@ export default function PriceChangeSummary({
</div>
))}
</div>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
</Fragment>
)
})}

11
apps/scandic-web/components/HotelReservation/EnterDetails/Summary/UI/index.tsx
View File

@@ -5,6 +5,7 @@ import { useIntl } from "react-intl"
import { useMediaQuery } from "usehooks-ts"
import { Button } from "@scandic-hotels/design-system/Button"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { dt } from "@/lib/dt"
@@ -13,7 +14,6 @@ import BookingCodeChip from "@/components/BookingCodeChip"
import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
import Modal from "@/components/Modal"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -126,7 +126,7 @@ export default function SummaryUI({
color="CurrentColor"
/>
</header>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
{rooms.map(({ room }, idx) => {
const roomNumber = idx + 1
const adults = room.adults
@@ -353,7 +353,7 @@ export default function SummaryUI({
nights={nights}
/>
</div>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
</Fragment>
)
})}
@@ -422,7 +422,10 @@ export default function SummaryUI({
isBreakfastIncluded={isAllBreakfastIncluded}
alignCenter
/>
<Divider className={styles.bottomDivider} color="primaryLightSubtle" />
<Divider
className={styles.bottomDivider}
color="Border/Divider/Subtle"
/>
</div>
{showSignupPromo && roomOneMemberPrice && !isMember ? (
<SignupPromoDesktop

5
apps/scandic-web/components/HotelReservation/HotelCard/HotelPriceCard/index.tsx
View File

@@ -1,7 +1,8 @@
import { cx } from "class-variance-authority"
import { useIntl } from "react-intl"
import Divider from "@/components/TempDesignSystem/Divider"
import { Divider } from "@scandic-hotels/design-system/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -103,7 +104,7 @@ export default function HotelPriceCard({
// Handle undefined scenarios
productTypePrices.localPrice.pricePerNight && (
<>
<Divider color="subtle" className={styles.divider} />
<Divider className={styles.divider} />
<div className={styles.priceRow}>
<dt>
<Caption color="uiTextMediumContrast">

4
apps/scandic-web/components/HotelReservation/HotelCard/index.tsx
View File

@@ -6,6 +6,7 @@ import { useRouter, useSearchParams } from "next/navigation"
import { memo } from "react"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import HotelLogoIcon from "@scandic-hotels/design-system/Icons/HotelLogoIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -15,7 +16,6 @@ import { useHotelsMapStore } from "@/stores/hotels-map"
import BookingCodeChip from "@/components/BookingCodeChip"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import Divider from "@/components/TempDesignSystem/Divider"
import Link from "@/components/TempDesignSystem/Link"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import { Tooltip } from "@/components/TempDesignSystem/Tooltip"
@@ -133,7 +133,7 @@ function HotelCard({
</address>
<div>
<Divider variant="vertical" color="subtle" />
<Divider variant="vertical" />
</div>
<Typography variant="Body/Supporting text (caption)/smRegular">
<span>

6
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/PriceSummary/index.tsx
View File

@@ -1,9 +1,9 @@
import { Fragment } from "react"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Divider from "@/components/TempDesignSystem/Divider"
import { formatPrice } from "@/utils/numberFormatting"
import PriceRow from "./PriceRow"
@@ -42,7 +42,7 @@ export default function PriceSummary({
})}
</h2>
</Typography>
<Divider color="subtle" />
<Divider />
{items.map((item) => (
<Fragment key={item.title}>
@@ -68,7 +68,7 @@ export default function PriceSummary({
})}`}
/>
)}
<Divider color="subtle" />
<Divider />
</Fragment>
))}

12
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/PriceDetails/index.tsx
View File

@@ -1,6 +1,7 @@
import { useWatch } from "react-hook-form"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import {
@@ -9,7 +10,6 @@ import {
useAddAncillaryStore,
} from "@/stores/my-stay/add-ancillary-flow"
import Divider from "@/components/TempDesignSystem/Divider"
import { formatPrice } from "@/utils/numberFormatting"
import PriceSummary from "./PriceSummary"
@@ -210,7 +210,7 @@ export default function PriceDetails({
)}
</p>
</Typography>
<Divider variant="vertical" color="subtle" />
<Divider variant="vertical" />
</>
) : null}
{hasTotalPrice && (
@@ -224,13 +224,11 @@ export default function PriceDetails({
</p>
</Typography>
)}
{hasTotalPoints && hasTotalPrice && (
<Divider variant="vertical" color="subtle" />
)}
{hasTotalPoints && hasTotalPrice && <Divider variant="vertical" />}
{hasTotalPoints && (
<div>
<div>
<Divider variant="vertical" color="subtle" />
<Divider variant="vertical" />
</div>
<Typography variant="Body/Paragraph/mdBold">
<p>
@@ -248,7 +246,7 @@ export default function PriceDetails({
)}
</div>
</div>
<Divider color="subtle" />
<Divider />
{isPriceDetailsOpen && currentStep === AncillaryStepEnum.confirmation && (
<PriceSummary
totalPrice={totalPrice}

8
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddAncillaryFlow/AddAncillaryFlowModal/index.tsx
View File

@@ -6,6 +6,7 @@ import { useEffect, useState } from "react"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { PaymentMethodEnum } from "@/constants/booking"
@@ -28,7 +29,6 @@ import {
} from "@/components/HotelReservation/MyStay/utils/ancillaries"
import LoadingSpinner from "@/components/LoadingSpinner"
import Modal from "@/components/Modal"
import Divider from "@/components/TempDesignSystem/Divider"
import { toast } from "@/components/TempDesignSystem/Toasts"
import { useGuaranteeBooking } from "@/hooks/booking/useGuaranteeBooking"
import useLang from "@/hooks/useLang"
@@ -385,7 +385,7 @@ export default function AddAncillaryFlowModal({
</Typography>
{selectedAncillary.points && (
<div className={styles.pointsDivider}>
<Divider variant="vertical" color="subtle" />
<Divider variant="vertical" />
<Typography variant="Body/Paragraph/mdBold">
<p>
{intl.formatMessage(
@@ -471,7 +471,7 @@ function BreakfastPriceList() {
{breakfastData.nrOfPayingChildren > 0 && (
<>
<div className={styles.divider}>
<Divider variant="vertical" color="baseSurfaceSubtleNormal" />
<Divider variant="vertical" color="Border/Divider/Subtle" />
</div>
<Typography variant="Body/Paragraph/mdBold">
@@ -492,7 +492,7 @@ function BreakfastPriceList() {
{breakfastData.nrOfFreeChildren > 0 && (
<>
<div className={styles.divider}>
<Divider variant="vertical" color="baseSurfaceSubtleNormal" />
<Divider variant="vertical" color="Border/Divider/Subtle" />
</div>
<Typography variant="Body/Paragraph/mdBold">

4
apps/scandic-web/components/HotelReservation/MyStay/Ancillaries/AddedAncillaries/index.tsx
View File

@@ -1,11 +1,11 @@
import { Fragment } from "react"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import Accordion from "@/components/TempDesignSystem/Accordion"
import AccordionItem from "@/components/TempDesignSystem/Accordion/AccordionItem"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
import { formatPrice } from "@/utils/numberFormatting"
@@ -174,7 +174,7 @@ export function AddedAncillaries({
</div>
</div>
<Divider color="baseSurfaceSubtleHover" />
<Divider />
<div className={styles.footer}>
<div className={styles.comment}>

6
apps/scandic-web/components/HotelReservation/MyStay/Receipt/Specification/index.tsx
View File

@@ -1,6 +1,6 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import styles from "./specification.module.css"
@@ -146,7 +146,7 @@ export default async function Specification({
{/****** Ancillaries ********/}
{booking.ancillaries.map((ancillary) => (
<>
<Divider color="subtle" />
<Divider />
<div>
<div className={styles.quantifyingHeader}>
<Typography variant="Body/Supporting text (caption)/smBold">
@@ -197,7 +197,7 @@ export default async function Specification({
{/****** Breakfast ********/}
{displayBreakfastPrice && (
<>
<Divider color="subtle" />
<Divider />
<div>
<div className={styles.quantifyingHeader}>
<Typography variant="Body/Supporting text (caption)/smBold">

4
apps/scandic-web/components/HotelReservation/MyStay/Receipt/Total/index.tsx
View File

@@ -1,6 +1,6 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import styles from "./total.module.css"
@@ -48,7 +48,7 @@ export default async function Total({ booking, currency }: TotalProps) {
</div>
</Typography>
<Divider color="subtle" />
<Divider />
<dl className={styles.dl}>
<Typography>
<dt>

5
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/ChangeDates/Steps/Confirmation/index.tsx
View File

@@ -1,13 +1,14 @@
"use client"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { dt } from "@/lib/dt"
import { trpc } from "@/lib/trpc/client"
import { useMyStayStore } from "@/stores/my-stay"
import Modal from "@/components/HotelReservation/MyStay/Modal"
import PriceContainer from "@/components/HotelReservation/MyStay/ReferenceCard/PriceContainer"
import Divider from "@/components/TempDesignSystem/Divider"
import { toast } from "@/components/TempDesignSystem/Toasts"
import useLang from "@/hooks/useLang"
@@ -148,7 +149,7 @@ export default function Confirmation({
striked
/>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
<PriceAndDate
checkInDate={newCheckIn}

4
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Actions/NotCancelled/ManageStay/Actions/GuaranteeLateArrival/Form/index.tsx
View File

@@ -3,6 +3,7 @@ import { zodResolver } from "@hookform/resolvers/zod"
import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { PaymentMethodEnum } from "@/constants/booking"
@@ -16,7 +17,6 @@ import PaymentOptionsGroup from "@/components/HotelReservation/EnterDetails/Paym
import MySavedCards from "@/components/HotelReservation/MySavedCards"
import PaymentOption from "@/components/HotelReservation/PaymentOption"
import LoadingSpinner from "@/components/LoadingSpinner"
import Divider from "@/components/TempDesignSystem/Divider"
import Checkbox from "@/components/TempDesignSystem/Form/Checkbox"
import Link from "@/components/TempDesignSystem/Link"
import { toast } from "@/components/TempDesignSystem/Toasts"
@@ -182,7 +182,7 @@ export default function Form() {
</span>
</Typography>
</div>
<Divider variant="vertical" color="subtle" />
<Divider variant="vertical" />
<Typography variant="Title/Subtitle/md">
<span className={styles.baseTextHighContrast}>
{formatPrice(intl, 0, currencyCode)}

5
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/Reference/index.tsx
View File

@@ -1,12 +1,11 @@
"use client"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useMyStayStore } from "@/stores/my-stay"
import Divider from "@/components/TempDesignSystem/Divider"
import styles from "./reference.module.css"
export default function Reference() {
@@ -43,7 +42,7 @@ export default function Reference() {
</p>
</Typography>
</div>
<Divider color="subtle" />
<Divider />
</>
)
}

4
apps/scandic-web/components/HotelReservation/MyStay/ReferenceCard/index.tsx
View File

@@ -1,9 +1,9 @@
"use client"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import Divider from "@/components/TempDesignSystem/Divider"
import { useGuaranteePaymentFailedToast } from "@/hooks/booking/useGuaranteePaymentFailedToast"
import TotalPrice from "../Rooms/TotalPrice"
@@ -29,7 +29,7 @@ export function ReferenceCard() {
<Room />
<Cancellations />
<GuaranteeInfo />
<Divider color="subtle" />
<Divider />
<div className={styles.row}>
<Typography variant="Body/Lead text">

4
apps/scandic-web/components/HotelReservation/MyStay/Rooms/MultiRoom/Room.tsx
View File

@@ -1,6 +1,7 @@
"use client"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { IconButton } from "@scandic-hotels/design-system/IconButton"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { Typography } from "@scandic-hotels/design-system/Typography"
@@ -11,7 +12,6 @@ import { dt } from "@/lib/dt"
import { IconForFeatureCode } from "@/components/HotelReservation/utils"
import Image from "@/components/Image"
import Modal from "@/components/Modal"
import Divider from "@/components/TempDesignSystem/Divider"
import IconChip from "@/components/TempDesignSystem/IconChip"
import useRateTitles from "@/hooks/booking/useRateTitles"
import useLang from "@/hooks/useLang"
@@ -315,7 +315,7 @@ export default function Room({ booking, roomNr, user }: RoomProps) {
</Typography>
</div>
)}
<Divider color="subtle" />
<Divider />
<div className={styles.row}>
<Typography variant="Body/Lead text">
<p>

4
apps/scandic-web/components/HotelReservation/SelectHotel/FilterAndSortModal/index.tsx
View File

@@ -13,12 +13,12 @@ import {
} from "react-aria-components"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { useHotelFilterStore } from "@/stores/hotel-filters"
import Button from "@/components/TempDesignSystem/Button"
import Divider from "@/components/TempDesignSystem/Divider"
import Select from "@/components/TempDesignSystem/Select"
import Footnote from "@/components/TempDesignSystem/Text/Footnote"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -156,7 +156,7 @@ export default function FilterAndSortModal({
/>
</div>
<div className={styles.divider}>
<Divider color="subtle" />
<Divider />
</div>
<div className={styles.filters}>
<HotelFilter filters={filters} />

6
apps/scandic-web/components/HotelReservation/SelectRate/HotelInfoCard/index.tsx
View File

@@ -1,10 +1,10 @@
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { FacilityToIcon } from "@/components/ContentType/HotelPage/data"
import ImageGallery from "@/components/ImageGallery"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Alert from "@/components/TempDesignSystem/Alert"
import Divider from "@/components/TempDesignSystem/Divider"
import { getIntl } from "@/i18n"
import { mapApiImagesToGalleryImages } from "@/utils/imageGallery"
import { getSingleDecimal } from "@/utils/numberFormatting"
@@ -71,7 +71,7 @@ export default async function HotelInfoCard({ hotel }: HotelInfoCardProps) {
/>
</div>
</div>
<Divider color="subtle" variant="vertical" />
<Divider variant="vertical" />
<div className={styles.facilities}>
<div className={styles.facilityList}>
{sortedFacilities?.map((facility) => (
@@ -131,7 +131,7 @@ export function HotelInfoCardSkeleton() {
</Typography>
</div>
</div>
<Divider color="subtle" variant="vertical" />
<Divider variant="vertical" />
<div className={styles.facilities}>
<div className={styles.facilityList}>
<Typography

11
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/RateSummary/MobileSummary/Summary.tsx
View File

@@ -4,6 +4,7 @@ import { Button as ButtonRAC } from "react-aria-components"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
import { dt } from "@/lib/dt"
@@ -12,7 +13,6 @@ import { useRatesStore } from "@/stores/select-rate"
import PriceDetailsModal from "@/components/HotelReservation/PriceDetailsModal"
import SignupPromoDesktop from "@/components/HotelReservation/SignupPromo/Desktop"
import Modal from "@/components/Modal"
import Divider from "@/components/TempDesignSystem/Divider"
import Body from "@/components/TempDesignSystem/Text/Body"
import Caption from "@/components/TempDesignSystem/Text/Caption"
import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
@@ -101,7 +101,7 @@ export default function Summary({
/>
</ButtonRAC>
</header>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
{rooms.map((room, idx) => {
if (!room) {
return null
@@ -287,7 +287,7 @@ export default function Summary({
</div>
))}
</div>
<Divider color="primaryLightSubtle" />
<Divider color="Border/Divider/Subtle" />
</Fragment>
)
})}
@@ -355,7 +355,10 @@ export default function Summary({
)}
</div>
</div>
<Divider className={styles.bottomDivider} color="primaryLightSubtle" />
<Divider
className={styles.bottomDivider}
color="Border/Divider/Subtle"
/>
</div>
{!isMember && memberPrice ? (
<SignupPromoDesktop memberPrice={memberPrice} badgeContent={"✌️"} />

4
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsHeader/RoomPackageFilter/Form/index.tsx
View File

@@ -3,12 +3,12 @@ import { FormProvider, useForm } from "react-hook-form"
import { useIntl } from "react-intl"
import { Button } from "@scandic-hotels/design-system/Button"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { trpc } from "@/lib/trpc/client"
import { useRatesStore } from "@/stores/select-rate"
import Divider from "@/components/TempDesignSystem/Divider"
import { useRoomContext } from "@/contexts/SelectRate/Room"
import useLang from "@/hooks/useLang"
@@ -75,7 +75,7 @@ export default function Form({ close }: { close: () => void }) {
<form onSubmit={methods.handleSubmit(onSubmit)}>
<Checkboxes />
<div className={styles.footer}>
<Divider color="borderDividerSubtle" className={styles.divider} />
<Divider color="Border/Divider/Subtle" className={styles.divider} />
<div className={styles.buttonContainer}>
<Typography variant="Body/Supporting text (caption)/smBold">
<Button variant="Tertiary" size="Small" type="submit">

6
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/BreakfastMessage/index.tsx
View File

@@ -2,11 +2,11 @@
import { useSession } from "next-auth/react"
import { useIntl } from "react-intl"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { Typography } from "@scandic-hotels/design-system/Typography"
import { useRatesStore } from "@/stores/select-rate"
import Divider from "@/components/TempDesignSystem/Divider"
import { useRoomContext } from "@/contexts/SelectRate/Room"
import { isValidClientSession } from "@/utils/clientSession"
@@ -66,14 +66,14 @@ export default function BreakfastMessage({
return (
<div className={styles.message}>
<Divider className={styles.divider} color="borderDividerSubtle" />
<Divider className={styles.divider} color="Border/Divider/Subtle" />
<Typography
variant={"Body/Supporting text (caption)/smRegular"}
className={styles.breakfastMessage}
>
<p>{breakfastMessage}</p>
</Typography>
<Divider className={styles.divider} color="borderDividerSubtle" />
<Divider className={styles.divider} color="Border/Divider/Subtle" />
</div>
)
}

5
apps/scandic-web/components/HotelReservation/SelectRate/RoomsContainer/Rooms/RoomsList/RoomListItem/Rates/index.tsx
View File

@@ -2,11 +2,12 @@
import { useSession } from "next-auth/react"
import { Divider } from "@scandic-hotels/design-system/Divider"
import { dt } from "@/lib/dt"
import { useRatesStore } from "@/stores/select-rate"
import SkeletonShimmer from "@/components/SkeletonShimmer"
import Divider from "@/components/TempDesignSystem/Divider"
import { useRoomContext } from "@/contexts/SelectRate/Room"
import { isValidClientSession } from "@/utils/clientSession"
@@ -62,7 +63,7 @@ export default function Rates({
<Code {...sharedProps} code={code} />
<Campaign {...sharedProps} campaign={campaign} />
<Redemptions {...sharedProps} redemptions={redemptions} />
{showDivider ? <Divider color="borderDividerSubtle" /> : null}
{showDivider ? <Divider color="Border/Divider/Subtle" /> : null}
{isFetchingAdditionalRate ? (
<>
<SkeletonShimmer height="100px" />