Merged in feat/my-pages-title-link-updates (pull request #259)

feat: update link titles to include arrows + ui updates

Approved-by: Christel Westerberg
Approved-by: Michael Zetterberg

components/Section/Header/header.module.css

@@ -1,20 +1,51 @@
 .header {
   display: grid;
   gap: var(--Spacing-x1);
-  grid-template-columns: 1fr auto;
+  grid-template-columns: 1fr;
+  align-items: baseline;
 }
 
-.title {
+.title,
-  grid-column: 1/2;
+.subtitle {
-  grid-row: 1/2;
+  grid-column: 1 / -1;
+}
+
+.linkWrapper {
+  display: flex;
+  align-items: baseline;
+  gap: var(--Spacing-x-half);
+  grid-column: 1 / -1;
+  justify-self: start;
 }
 
 .link {
-  grid-column: 2/-1;
+  display: flex;
-  grid-row: 1/2;
+  align-items: center;
 }
 
-.subtitle {
+.icon {
-  grid-column: 1/-1;
+  align-self: center;
-  grid-row: 2;
+}
+
+@media screen and (min-width: 768px) {
+  .header {
+    grid-template-columns: 1fr auto;
+  }
+
+  .title {
+    grid-column: 1 / 2;
+  }
+
+  .subtitle {
+    grid-column: 1 / 2;
+  }
+
+  .linkWrapper {
+    grid-column: 2 / 3;
+    justify-self: end;
+  }
+
+  .link {
+    align-items: baseline;
+  }
 }

components/Section/Header/index.tsx

@@ -1,3 +1,4 @@
+import ArrowRight from "@/components/Icons/ArrowRight"
 import Link from "@/components/TempDesignSystem/Link"
 import Subtitle from "@/components/TempDesignSystem/Text/Subtitle"
 import Title from "@/components/TempDesignSystem/Text/Title"
@@ -21,12 +22,20 @@ export default function SectionHeader({
       >
         {title}
       </Title>
+      {subtitle && <Subtitle className={styles.subtitle}>{subtitle}</Subtitle>}
       {link ? (
-        <Link className={styles.link} href={link.href} variant="myPage">
+        <span className={styles.linkWrapper}>
-          {link.text}
+          <ArrowRight color="burgundy" className={styles.icon} />
-        </Link>
+          <Link
+            className={styles.link}
+            color="burgundy"
+            href={link.href}
+            variant="myPage"
+          >
+            {link.text}
+          </Link>
+        </span>
       ) : null}
-      <Subtitle className={styles.subtitle}>{subtitle}</Subtitle>
     </header>
   )
 }