fix: add my pages nav sidebar for logged in users

components/TempDesignSystem/Link/link.module.css

@@ -17,7 +17,7 @@
 .icon {
   align-items: center;
   display: flex;
-  gap: var(--Spacing-x1);
+  gap: var(--Spacing-x-half);
 }
 
 .myPage {

components/TempDesignSystem/LoyaltyCard/index.tsx

@@ -26,15 +26,13 @@ export default function LoyaltyCard({
       })}
     >
       {image ? (
-        <section>
-          <Image
-            src={image.url}
-            width={180}
-            height={160}
-            className={styles.image}
-            alt={image.meta.alt || image.title}
-          />
-        </section>
+        <Image
+          src={image.url}
+          width={180}
+          height={160}
+          className={styles.image}
+          alt={image.meta.alt || image.title}
+        />
       ) : null}
       <Title as="h5" level="h3" textAlign="center">
         {heading}
@@ -46,18 +44,21 @@ export default function LoyaltyCard({
       ) : null}
       <div className={styles.buttonContainer}>
         {link ? (
-          <span className={styles.linkWrapper}>
-            <ArrowRight color="burgundy" className={styles.icon} />
-            <Link
-              className={styles.link}
+          <Link
+            className={styles.link}
+            color="burgundy"
+            href={link.href}
+            target={link.openInNewTab ? "_blank" : undefined}
+            variant="myPage"
+          >
+            <ArrowRight
               color="burgundy"
-              href={link.href}
-              target={link.openInNewTab ? "_blank" : undefined}
-              variant="myPage"
-            >
-              {link.title}
-            </Link>
-          </span>
+              className={styles.icon}
+              height="20"
+              width="20"
+            />
+            {link.title}
+          </Link>
         ) : null}
       </div>
     </article>

components/TempDesignSystem/LoyaltyCard/loyaltyCard.module.css

@@ -15,6 +15,7 @@
   object-fit: contain;
   height: 160px;
   width: auto;
+  justify-self: center;
 }
 
 .white {
@@ -27,12 +28,6 @@
   justify-content: center;
 }
 
-.linkWrapper {
-  display: flex;
-  align-items: baseline;
-  gap: var(--Spacing-x-half);
-}
-
 .link {
   display: flex;
   align-items: center;