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

assets/images/utils/chevron-right.svg

@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 18 15 12 9 6"></polyline></svg>

assets/styles/global.scss

@@ -93,6 +93,8 @@ html {
     inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.05);
   --shadow-image-md: 0px 2px 4px 0px hsla(221, 39%, 11%, 0.2),
     inset 0px -2px 2px 0px hsla(221, 39%, 11%, 0.1);
+
+  --color-card-link-bg: rgba(0,0,0,7%);
 }
 
 .dark-mode {
@@ -175,6 +177,8 @@ html {
 
   --color-table-border: #4f5864;
   --color-table-alternate-row: #262a30;
+
+  --color-card-link-bg: rgb(255, 255, 255, 15%);
 }
 
 .oled-mode {

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;