Merged in LOY-346-add-modal-to-level-progress-card (pull request #2896)

feat(LOY-346): Add modal to LevelProgressCard

* Added LevelProgressModal with styles in LevelProgressCard. Also added compareAllLevels LangRoute in webHrefs

* feat(LOY-346): Smaller changes based on comments

* feat(LOY-346): Changed paragraph to time, added textdecoration:underline, changed dialog css

* feat(LOY-346): Changed title size:)

* feat(LOY-346): Changed dates-arrow icon to in text


Approved-by: Chuma Mcphoy (We Ahead)
Approved-by: Matilda Landström

apps/scandic-web/components/MyPages/LevelProgressCard/index.tsx

@@ -1,5 +1,4 @@
 import { dt } from "@scandic-hotels/common/dt"
-import { MaterialIcon } from "@scandic-hotels/design-system/Icons/MaterialIcon"
 import { Typography } from "@scandic-hotels/design-system/Typography"
 import { getScandicNativeMembership } from "@scandic-hotels/trpc/routers/user/helpers"
 
@@ -9,6 +8,7 @@ import { getLang } from "@/i18n/serverContext"
 import ProgressCardHighestLevel from "./InnerCard/ProgressCardHighestLevel"
 import ProgressCardLowerLevel from "./InnerCard/ProgressCardLowerLevel"
 import SuccessCard from "./InnerCard/SuccessCard"
+import LevelProgressModal from "./LevelProgressModal"
 import { getLevelProgressData } from "./utils"
 import { levelProgressCardVariants } from "./variants"
 
@@ -56,14 +56,9 @@ export default async function LevelProgressCard({
             )}
           </p>
         </Typography>
-        <MaterialIcon
-          className={styles.infoButton}
-          icon="info"
-          color={
-            color === "Surface/Brand/Primary 1/OnSurface/Default"
-              ? "Icon/Inverted"
-              : "Icon/Interactive/Default"
-          }
+        <LevelProgressModal
+          color={color}
+          tierExpires={friendsMembership.tierExpires}
         />
       </header>