feat(WEB-304): remaning UI from design system primitives

components/MyPages/Blocks/Shortcuts/index.tsx

@@ -1,4 +1,4 @@
-import Image from "@/components/Image"
+import { ArrowRightIcon } from "@/components/Icons"
 import Link from "@/components/TempDesignSystem/Link"
 
 import Header from "../Header"
@@ -8,28 +8,29 @@ import styles from "./shortcuts.module.css"
 import type { ShortcutsProps } from "@/types/components/myPages/myPage/shortcuts"
 
 export default function Shortcuts({
+  firstItem = false,
   shortcuts,
   subtitle,
   title,
 }: ShortcutsProps) {
   return (
     <section className={styles.shortcuts}>
-      <Header link={undefined} subtitle={subtitle} title={title} />
+      <Header
+        link={undefined}
+        subtitle={subtitle}
+        title={title}
+        topTitle={firstItem}
+      />
       <section className={styles.links}>
         {shortcuts.map((shortcut) => (
           <Link
-            className={styles.link}
             href={shortcut.url}
             key={shortcut.title}
             target={shortcut.openInNewTab ? "_blank" : undefined}
+            variant="shortcut"
           >
             <span>{shortcut.text ? shortcut.text : shortcut.title}</span>
-            <Image
-              alt="Chevron Icon"
-              height={20}
-              src="/_static/icons/chevron.svg"
-              width={20}
-            />
+            <ArrowRightIcon />
           </Link>
         ))}
       </section>

components/MyPages/Blocks/Shortcuts/shortcuts.module.css

@@ -1,38 +1,9 @@
 .shortcuts {
   display: grid;
-  gap: 2rem;
-}
-
-.header {
-  display: grid;
-  gap: 2rem;
-}
-
-.subtitle {
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: 1.8rem;
-  font-weight: 400;
-  line-height: 2.2rem;
-  margin: 0;
+  gap: var(--Spacing-x4);
 }
 
 .links {
-  display: grid;
-  gap: 0.8rem;
-}
-
-.link {
-  align-items: center;
-  border: 0.1rem solid var(--some-grey-color, #d9d9d9);
-  border-radius: 0.4rem;
-  color: var(--some-black-color, #000);
-  display: flex;
-  font-family: var(--typography-Body-Regular-fontFamily);
-  font-size: 1.6rem;
-  font-weight: 700;
-  gap: 0.4rem;
-  justify-content: space-between;
-  line-height: 2.2rem;
-  padding: 1.4rem 2rem;
-  text-decoration: none;
+  background-color: var(--Scandic-Brand-Warm-White);
+  border-radius: var(--Corner-radius-xLarge);
 }