feat(link): use new design for links

trakt · Feb 10, 2025 · 4f88169 · 4f88169
1 parent 64d8ffe
commit 4f88169
Show file tree

Hide file tree

Showing 7 changed files with 59 additions and 25 deletions.
diff --git a/projects/client/src/lib/components/card/CardFooter.svelte b/projects/client/src/lib/components/card/CardFooter.svelte
@@ -30,6 +30,10 @@
     gap: var(--gap-xs);
     justify-content: space-between;
 
+    :global(.trakt-link) {
+      text-decoration: none;
+    }
+
     .trakt-card-footer-information {
       width: 100%;
       margin-top: var(--ni-neg-4);

diff --git a/projects/client/src/lib/components/dropdown/DropdownItem.svelte b/projects/client/src/lib/components/dropdown/DropdownItem.svelte
@@ -102,6 +102,7 @@
       align-items: center;
       display: flex;
       justify-content: space-between;
+      text-decoration: none;
     }
 
     @mixin color($color, $hover-bg, $active-bg, $outline-color, $bg-color) {

diff --git a/projects/client/src/lib/components/link/Link.svelte b/projects/client/src/lib/components/link/Link.svelte
@@ -49,16 +49,20 @@
   .trakt-link {
     -webkit-tap-highlight-color: transparent;
     color: inherit;
-    text-decoration: none;
     cursor: pointer;
-    transition: color var(--transition-increment) ease-in-out;
+    transition: var(--transition-increment) ease-in-out;
+    transition-property: color, text-decoration;
     display: inherit;
 
     :global(p),
     :global(span) {
       color: inherit;
     }
 
+    text-decoration: underline;
+    text-underline-offset: var(--ni-2);
+    text-decoration-thickness: var(--ni-2);
+
     &:focus-visible {
       outline: none;
       position: relative;
@@ -79,6 +83,8 @@
     }
 
     &[data-color="default"] {
+      text-decoration-color: var(--color-link-active);
+
       &,
       &:visited {
         color: var(--color-foreground);
@@ -107,15 +113,16 @@
 
     &[data-color="classic"] {
       display: inline;
-      text-decoration: underline;
 
       &:visited {
         color: var(--red-300);
+        text-decoration-color: var(--red-300);
       }
 
       @include for-mouse {
         &:hover {
           color: var(--blue-600);
+          text-decoration-color: var(--blue-300);
         }
       }
     }

diff --git a/projects/client/src/lib/sections/lists/components/CastMemberCard.svelte b/projects/client/src/lib/sections/lists/components/CastMemberCard.svelte
@@ -13,26 +13,35 @@
   const { castMember }: CastMemberCardProps = $props();
 </script>
 
-<Link focusable={false} href={UrlBuilder.people(castMember.id)}>
-  <div class="trakt-cast-member">
-    <PersonCard>
-      <CardCover
-        src={castMember.headShotUrl}
-        alt={`${m.person_headshot({ person: castMember.name })}`}
-        style="flat"
-      />
-    </PersonCard>
-    <div class="trakt-cast-member-footer">
-      <p class="secondary ellipsis actor-name">{castMember.name}</p>
-      <p class="small secondary ellipsis">{castMember.characterName}</p>
+<trakt-cast-member>
+  <Link focusable={false} href={UrlBuilder.people(castMember.id)}>
+    <div class="trakt-cast-member">
+      <PersonCard>
+        <CardCover
+          src={castMember.headShotUrl}
+          alt={`${m.person_headshot({ person: castMember.name })}`}
+          style="flat"
+        />
+      </PersonCard>
+      <div class="trakt-cast-member-footer">
+        <p class="secondary ellipsis actor-name">{castMember.name}</p>
+        <p class="small secondary ellipsis">{castMember.characterName}</p>
+      </div>
     </div>
-  </div>
-</Link>
+  </Link>
+</trakt-cast-member>
 
 <style>
+  trakt-cast-member {
+    :global(.trakt-link) {
+      text-decoration: none;
+    }
+  }
+
   .trakt-cast-member-footer {
     height: var(--height-person-footer);
   }
+
   .trakt-cast-member {
     display: flex;
     flex-direction: column;

diff --git a/projects/client/src/lib/sections/lists/components/MediaSummaryCard.svelte b/projects/client/src/lib/sections/lists/components/MediaSummaryCard.svelte
@@ -40,5 +40,9 @@
     :global(.trakt-card .trakt-summary-item) {
       padding: var(--ni-12);
     }
+
+    :global(.trakt-link) {
+      text-decoration: none;
+    }
   }
 </style>
diff --git a/projects/client/src/lib/sections/navbar/components/search/SearchInput.svelte b/projects/client/src/lib/sections/navbar/components/search/SearchInput.svelte
@@ -203,6 +203,7 @@
       box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
 
       :global(a.trakt-link) {
+        text-decoration: none;
         transition: background-color var(--transition-increment) ease-in-out;
 
         @include for-mouse {

diff --git a/projects/client/src/lib/sections/profile/components/YearToDateLink.svelte b/projects/client/src/lib/sections/profile/components/YearToDateLink.svelte
@@ -14,17 +14,25 @@
     : UrlBuilder.og.getVip();
 </script>
 
-<Link {href} target="_blank">
-  <div class="ytd-link-content">
-    <h2 class="ytd-year">{currentYear}</h2>
-    <div class="ytd-link-details">
-      <h5 class="ytd-label">{m.year_to_date()}</h5>
-      <YearToDateArrow />
+<trakt-year-to-date-link>
+  <Link {href} target="_blank">
+    <div class="ytd-link-content">
+      <h2 class="ytd-year">{currentYear}</h2>
+      <div class="ytd-link-details">
+        <h5 class="ytd-label">{m.year_to_date()}</h5>
+        <YearToDateArrow />
+      </div>
     </div>
-  </div>
-</Link>
+  </Link>
+</trakt-year-to-date-link>
 
 <style>
+  trakt-year-to-date-link {
+    :global(.trakt-link) {
+      text-decoration: none;
+    }
+  }
+
   .ytd-link-details {
     display: flex;
     align-items: center;