From f1e061dae043b347854cec17235491a89fac4b9e Mon Sep 17 00:00:00 2001
From: Bilge <bilge@scriptfusion.com>
Date: Thu, 4 Apr 2024 21:48:01 +0100
Subject: [PATCH] Added benefits to micro tiers.

---
 assets/css/inc/nav.less        | 41 ++++++++++++++++++++++------------
 assets/css/inc/quicklinks.less |  9 ++------
 composer.lock                  |  8 +++----
 template/layout/ranking.twig   |  6 +++--
 template/layout/template.twig  | 11 +++++----
 5 files changed, 44 insertions(+), 31 deletions(-)

diff --git a/assets/css/inc/nav.less b/assets/css/inc/nav.less
index 93a2c30a617..175116dba52 100644
--- a/assets/css/inc/nav.less
+++ b/assets/css/inc/nav.less
@@ -84,16 +84,16 @@ ol.menu {
         &:last-of-type {
           background: none;
           border-radius: 0 0 2px 2px;
+
+          >a {
+            padding-bottom: calc(.2em + 3px);
+          }
         }
 
         >a {
           display: block;
           min-width: 45px;
           padding: calc(.2em + 3px) .8em calc(.2em + 4px);
-
-          &:last-of-type {
-            padding-bottom: calc(.2em + 3px);
-          }
         }
 
         a:not([href]):after {
@@ -156,7 +156,6 @@ ol.menu {
         grid-column: span 2;
 
         font-size: 120%;
-        text-align: center;
 
         >a {
           padding-top: 1ex;
@@ -165,13 +164,14 @@ ol.menu {
       }
     }
 
-    /* Specials. */
+    /* Classified items. */
     a[class] {
-      padding-left: 2.05em;
+      display: flex;
+      gap: .7ch;
+      align-items: center;
 
       &:before {
         content: '';
-        position: absolute;
         --width: 1em;
         width: var(--width);
         height: $width;
@@ -179,7 +179,6 @@ ol.menu {
         background: linear-gradient(#d9b882, #947e59) $mask;
         // Fudge size for scuffed Chrome SVG renderer.
         mask: no-repeat 0/99% 100%;
-        transform: translate(-125%);
       }
       &:hover:before {
         filter: brightness(14%);
@@ -212,10 +211,13 @@ ol.menu {
       &.deck:before {
         #icons.deck();
       }
-      &.tag:before {
-        --width: 1.2em;
-        transform: translate(-120%, -10%);
-        mask-image: url(/svg/tag.svg);
+      &.tag {
+        justify-content: center;
+
+        &:before {
+          --width: 1.2em;
+          mask-image: url(/svg/tag.svg);
+        }
       }
       &.email:before {
         #icons.email();
@@ -226,9 +228,13 @@ ol.menu {
       }
       &.discord:before {
         --width: 1.3em;
-        transform: translate(-110%, -10%);
+        margin-left: -.4em;
+
         mask-image: url(/svg/discord.svg);
+        mask-size: 110%;
         background: linear-gradient(#96aaf2, #5067b3);
+
+        translate: 2px;
       }
       &.steam:before {
         mask-image: url(/svg/steam.svg);
@@ -252,8 +258,15 @@ ol.menu {
   }
 
   .micro.tier {
+    margin: 0;
+
     opacity: .9;
     font-size: 75%;
     text-shadow: none;
+    line-height: 1.3;
+
+    &:hover {
+      filter: brightness(112%) saturate(120%);
+    }
   }
 }
diff --git a/assets/css/inc/quicklinks.less b/assets/css/inc/quicklinks.less
index 47d714aebde..abe80421d71 100644
--- a/assets/css/inc/quicklinks.less
+++ b/assets/css/inc/quicklinks.less
@@ -52,13 +52,8 @@
       border-color: #ebe9ff5e #0000002e #0000 #585475;
       border-radius: @radius;
 
-      >span {
-        position: relative;
-        left: 1ch;
-
-        &.micro.tier {
-          opacity: .9;
-        }
+      >.micro.tier {
+        margin-left: 1ch;
       }
 
       @ico-width: 1.2rem;
diff --git a/composer.lock b/composer.lock
index 4f8d53966df..4a6f1b0be10 100644
--- a/composer.lock
+++ b/composer.lock
@@ -12,12 +12,12 @@
             "source": {
                 "type": "git",
                 "url": "https://github.com/250/Components.git",
-                "reference": "80acf417d1ddfeb3ebe56e78124a38100da46283"
+                "reference": "81203b90862a576769c972ee71ce45c9895bd93c"
             },
             "dist": {
                 "type": "zip",
-                "url": "https://api.github.com/repos/250/Components/zipball/80acf417d1ddfeb3ebe56e78124a38100da46283",
-                "reference": "80acf417d1ddfeb3ebe56e78124a38100da46283",
+                "url": "https://api.github.com/repos/250/Components/zipball/81203b90862a576769c972ee71ce45c9895bd93c",
+                "reference": "81203b90862a576769c972ee71ce45c9895bd93c",
                 "shasum": ""
             },
             "default-branch": true,
@@ -34,7 +34,7 @@
                 "issues": "https://github.com/250/Components/issues",
                 "source": "https://github.com/250/Components/tree/master"
             },
-            "time": "2024-01-29T18:27:15+00:00"
+            "time": "2024-03-22T00:15:01+00:00"
         },
         {
             "name": "250/log",
diff --git a/template/layout/ranking.twig b/template/layout/ranking.twig
index 0597e74be39..358003ba9c7 100644
--- a/template/layout/ranking.twig
+++ b/template/layout/ranking.twig
@@ -23,12 +23,14 @@
                 <li><a href="/most_played{{ ext }}"><span class="played">Most Played</span></a>
                 <li><a href="{{ club250 }}/ranking/trending">
                         <span class="trend">
-                            Trending <span class="t1 micro tier">T1</span>
+                            Trending
+                            {{ include('@components/micro tier.twig', {tier: 1, benefit: 'trend'}) }}
                         </span>
                     </a>
                 <li><a href="{{ club250 }}/ranking/custom">
                         <span class="cranking">
-                            Custom Ranking <span class="t1 micro tier">T1</span>
+                            Custom Ranking
+                            {{ include('@components/micro tier.twig', {tier: 1, benefit: 'cranking'}) }}
                         </span>
                     </a>
             </ol>
diff --git a/template/layout/template.twig b/template/layout/template.twig
index d5ed9026fd9..99e5c1e66b1 100644
--- a/template/layout/template.twig
+++ b/template/layout/template.twig
@@ -50,17 +50,20 @@
                 <li><a href="/top250{{ ext }}" class="cup">Top 250 Games</a>
                 <li><a href="{{ club250 }}/ranking/250/history/{{ '-7 year'|date('Ymd') }}" class="history">
                         Top 250 History
-                        <span class="t1 micro tier">T1</span>
+                        {{ include('@components/micro tier.twig', {tier: 1, benefit: 'hist250'}) }}
                     </a>
                 <li><a href="/hidden_gems{{ ext }}" class="gem">Hidden Gems</a>
                 <li><a href="{{ club250 }}/ranking/gems/history/{{ '-7 year'|date('Ymd') }}" class="history">
                         Hidden Gems History
-                        <span class="t1 micro tier">T1</span>
+                        {{ include('@components/micro tier.twig', {tier: 1, benefit: 'hist250'}) }}
+                    </a>
+                <li><a href="{{ club250 }}/ranking/trending" class="trend">
+                        Trending Games
+                        {{ include('@components/micro tier.twig', {tier: 1, benefit: 'trend'}) }}
                     </a>
-                <li><a href="{{ club250 }}/ranking/trending" class="trend">Trending Games</a>
                 <li><a href="{{ club250 }}/ranking/custom" class="custom">
                         Custom Ranking
-                        <span class="t1 micro tier">T1</span>
+                        {{ include('@components/micro tier.twig', {tier: 1, benefit: 'cranking'}) }}
                     </a>
                 <li><a href="/most_played{{ ext }}" class="pad">Most Played</a>
                 <li>