Merged in fix/SW-1524-clickable-area (pull request #2125)

Fix/SW-1524: Enter details- expand clickable area

* fix(SW-1524): make whole price area clickable

* fix(SW-1524): add div as fake button


Approved-by: Bianca Widstam
Approved-by: Erik Tiekstra

apps/scandic-web/components/HotelReservation/HotelCard/NoPriceAvailableCard/index.tsx

@@ -1,8 +1,7 @@
 import { useIntl } from "react-intl"
 
 import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
-
-import Caption from "@/components/TempDesignSystem/Text/Caption"
+import { Typography } from "@scandic-hotels/design-system/Typography"
 
 import styles from "./noPriceAvailable.module.css"
 
@@ -11,15 +10,15 @@ export default function NoPriceAvailableCard() {
   return (
     <div className={styles.priceCard}>
       <div className={styles.noRooms}>
-        <div>
-          <MaterialIcon icon="error" color="Icon/Interactive/Accent" />
-        </div>
-        <Caption color="uiTextHighContrast">
-          {intl.formatMessage({
-            defaultMessage:
-              "There are no rooms available that match your request.",
-          })}
-        </Caption>
+        <MaterialIcon icon="error" color="Icon/Feedback/Error" />
+        <Typography variant="Body/Paragraph/mdRegular">
+          <span>
+            {intl.formatMessage({
+              defaultMessage:
+                "There are no rooms available that match your request.",
+            })}
+          </span>
+        </Typography>
       </div>
     </div>
   )