fix: cleanup profile pages in renaming to follow naming convention

cleanup profile page html to be valid

replace old temp design system components with new ones

divider is now correctly an hr element

less section elements to be valid html

apps/scandic-web/components/MyPages/Sidebar/SidebarNavigationSkeleton.tsx

@@ -1,9 +1,10 @@
 import { Fragment } from "react"
 
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import SkeletonShimmer from "@/components/SkeletonShimmer"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 
 import styles from "./sidebar.module.css"
 
@@ -12,9 +13,9 @@ export default function SidebarNavigationSkeleton() {
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
-        <Subtitle type="two" color="baseTextHighContrast">
-          <SkeletonShimmer width={"10ch"} />
-        </Subtitle>
+        <Typography variant="Title/Subtitle/md">
+          <SkeletonShimmer width="10ch" />
+        </Typography>
         <Divider color="beige" />
         <ul className={styles.list}>
           {skeletonWidths.map((width, index) => (

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

@@ -1,3 +1,5 @@
+import { Typography } from "@scandic-hotels/design-system/Typography"
+
 import { logout } from "@/constants/routes/handleAuth"
 import { getProfileSafely } from "@/lib/trpc/memoizedRequests"
 import { serverClient } from "@/lib/trpc/server"
@@ -5,7 +7,6 @@ import { serverClient } from "@/lib/trpc/server"
 import { SASLevelUpgradeCheck } from "@/components/MyPages/SASLevelUpgradeCheck"
 import Divider from "@/components/TempDesignSystem/Divider"
 import Link from "@/components/TempDesignSystem/Link"
-import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import { getIntl } from "@/i18n"
 import { getLang } from "@/i18n/serverContext"
 import { getEurobonusMembership } from "@/utils/user"
@@ -22,11 +23,13 @@ export default async function SidebarMyPages() {
   return (
     <aside className={styles.sidebar}>
       <nav className={styles.nav}>
-        <Subtitle type="two" color="baseTextHighContrast">
-          {intl.formatMessage({
-            defaultMessage: "My pages",
-          })}
-        </Subtitle>
+        <Typography variant="Title/Subtitle/md">
+          <h2 className={styles.title}>
+            {intl.formatMessage({
+              defaultMessage: "My pages",
+            })}
+          </h2>
+        </Typography>
 
         <PrimaryLinks />
         <SecondaryLinks />

apps/scandic-web/components/MyPages/Sidebar/sidebar.module.css

@@ -4,7 +4,15 @@
 
 .nav {
   display: grid;
-  gap: var(--Spacing-x2);
+  gap: var(--Space-x2);
+}
+
+.title {
+  color: var(--Text-Interactive-Default);
+}
+
+.titleSkeleton {
+  color: var(--Base-Text-High-contrast);
 }
 
 .list {
@@ -15,6 +23,6 @@
   .sidebar {
     align-self: flex-start;
     display: block;
-    padding-top: var(--Spacing-x1);
+    padding-top: var(--Space-x1);
   }
 }