Merged in chore/replace-deprecated-body (pull request #3300)
Replace deprecated <Body> with <Typography> * chore: replace deprecated body component * refactor: replace Body component with Typography across various components * merge Approved-by: Bianca Widstam Approved-by: Matilda Landström
This commit is contained in:
@@ -4,12 +4,12 @@ import { useIntl } from "react-intl"
|
||||
import { CurrencyEnum } from "@scandic-hotels/common/constants/currency"
|
||||
import { RateEnum } from "@scandic-hotels/common/constants/rate"
|
||||
import { logger } from "@scandic-hotels/common/logger"
|
||||
import Body from "@scandic-hotels/design-system/Body"
|
||||
import Caption from "@scandic-hotels/design-system/Caption"
|
||||
import { ChipButton } from "@scandic-hotels/design-system/ChipButton"
|
||||
import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
|
||||
import Image from "@scandic-hotels/design-system/Image"
|
||||
import Subtitle from "@scandic-hotels/design-system/Subtitle"
|
||||
import { Typography } from "@scandic-hotels/design-system/Typography"
|
||||
|
||||
import { useSelectRateContext } from "../../../../../../contexts/SelectRate/SelectRateContext"
|
||||
import { useIsLoggedIn } from "../../../../../../hooks/useIsLoggedIn"
|
||||
@@ -59,8 +59,12 @@ export function SelectedRoomPanel({ roomIndex }: { roomIndex: number }) {
|
||||
<Subtitle className={styles.subtitle} color="uiTextHighContrast">
|
||||
{selectedRate.roomInfo.roomType}
|
||||
</Subtitle>
|
||||
<Body color="uiTextMediumContrast">{rateTitle}</Body>
|
||||
<Body color="uiTextHighContrast">{selectedProductTitle}</Body>
|
||||
<Typography variant="Body/Paragraph/mdRegular">
|
||||
<div>
|
||||
<p className={styles.uiTextMediumContrast}>{rateTitle}</p>
|
||||
<p className={styles.uiTextHighContrast}>{selectedProductTitle}</p>
|
||||
</div>
|
||||
</Typography>
|
||||
</div>
|
||||
<div className={styles.imageContainer}>
|
||||
{image?.src ? (
|
||||
|
||||
@@ -33,6 +33,14 @@ div.selectedRoomPanel p.subtitle {
|
||||
padding-bottom: var(--Space-x1);
|
||||
}
|
||||
|
||||
.uiTextMediumContrast {
|
||||
color: var(--UI-Text-Medium-contrast);
|
||||
}
|
||||
|
||||
.uiTextHighContrast {
|
||||
color: var(--UI-Text-High-contrast);
|
||||
}
|
||||
|
||||
@media screen and (max-width: 767px) {
|
||||
.selectedRoomPanel {
|
||||
gap: var(--Space-x1);
|
||||
|
||||
Reference in New Issue
Block a user