Improve design of "See all" link in feat. section (#625)

pages/_type/_id.vue

@@ -333,16 +333,22 @@
           <hr class="card-divider" />
         </template>
         <template v-if="featuredVersions.length > 0">
-          <h3 class="card-header">Featured versions</h3>
-          <span class="links">
+          <div class="featured-header">
+            <h3 class="card-header">Featured versions</h3>
             <nuxt-link
               v-if="project.versions.length > 0 || currentMember"
               :to="`/${project.project_type}/${
                 project.slug ? project.slug : project.id
               }/versions`"
-              ><span>(See all)</span></nuxt-link
-            ></span
-          >
+              class="all-link"
+            >
+              See all
+              <ChevronRightIcon
+                class="featured-header-chevron"
+                aria-hidden="true"
+              />
+            </nuxt-link>
+          </div>
           <div
             v-for="version in featuredVersions"
             :key="version.id"
@@ -601,6 +607,7 @@ import KoFiIcon from '~/assets/images/external/kofi.svg?inline'
 import PayPalIcon from '~/assets/images/external/paypal.svg?inline'
 import OpenCollectiveIcon from '~/assets/images/external/opencollective.svg?inline'
 import UnknownIcon from '~/assets/images/utils/unknown-donation.svg?inline'
+import ChevronRightIcon from '~/assets/images/utils/chevron-right.svg?inline'
 import Advertisement from '~/components/ads/Advertisement'
 import VersionBadge from '~/components/ui/Badge'
 import Categories from '~/components/ui/search/Categories'
@@ -628,6 +635,7 @@ export default {
     Categories,
     PatreonIcon,
     KoFiIcon,
+    ChevronRightIcon,
   },
   async asyncData(data) {
     const projectTypes = ['mod', 'modpack', 'resourcepack', 'plugin', 'project']
@@ -1026,6 +1034,31 @@ export default {
   display: inline;
 }
 
+.featured-header {
+  display: flex;
+  justify-content: space-between;
+  align-items: baseline;
+
+  .card-header {
+    height: 23px;
+  }
+
+  .all-link {
+    display: inline-flex;
+    align-items: center;
+    gap: 3px;
+    padding: 5px 3px 5px 7px; // <- 3px & -> 7px to compensate for chevron
+    border-radius: 5px;
+    transition: 0.05s all ease-in-out;
+  }
+
+  .all-link:hover,
+  .all-link:focus {
+    color: var(--color-link-active);
+    background: var(--color-card-link-bg);
+  }
+}
+
 .featured-version {
   display: flex;
   flex-direction: row;