From d8dfeb9a937b8e5285267fe79d57a04c7fd82336 Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sun, 22 Oct 2023 11:09:06 +0300
Subject: [PATCH] Link to tiers page

---
 app/features/sendouq/components/GroupCard.tsx | 26 ++++++++++++++-----
 1 file changed, 20 insertions(+), 6 deletions(-)

diff --git a/app/features/sendouq/components/GroupCard.tsx b/app/features/sendouq/components/GroupCard.tsx
index 75fb7ca5d..cb5e333ad 100644
--- a/app/features/sendouq/components/GroupCard.tsx
+++ b/app/features/sendouq/components/GroupCard.tsx
@@ -14,7 +14,12 @@ import type { TieredSkill } from "~/features/mmr/tiered.server";
 import { useTranslation } from "~/hooks/useTranslation";
 import { useUser } from "~/modules/auth";
 import { languagesUnified } from "~/modules/i18n/config";
-import { SENDOUQ_LOOKING_PAGE, navIconUrl, userPage } from "~/utils/urls";
+import {
+  SENDOUQ_LOOKING_PAGE,
+  TIERS_PAGE,
+  navIconUrl,
+  userPage,
+} from "~/utils/urls";
 import { FULL_GROUP_SIZE, SENDOUQ } from "../q-constants";
 import type { LookingGroup } from "../q-types";
 import { StarIcon } from "~/components/icons/Star";
@@ -462,13 +467,22 @@ function TierInfo({ skill }: { skill: TieredSkill }) {
     <div className="q__group-member__tier">
       <Popover buttonChildren={<TierImage tier={skill.tier} width={38} />}>
         <div className="stack sm items-center">
-          <TierImage tier={skill.tier} width={80} />
-          <div className="text-lighter text-xxs">
-            {skill.tier.name}
-            {skill.tier.isPlus ? "+" : ""}
+          <div className="stack items-center">
+            <TierImage tier={skill.tier} width={80} />
+            <div className="text-lighter text-xxs">
+              {skill.tier.name}
+              {skill.tier.isPlus ? "+" : ""}
+            </div>
+            <Link to={TIERS_PAGE} className="text-xxs" target="_blank">
+              All tiers
+            </Link>
           </div>
           {!skill.approximate ? (
-            <> {ordinalToRoundedSp(skill.ordinal)}SP</>
+            <div className="text-lg">
+              {" "}
+              {ordinalToRoundedSp(skill.ordinal)}
+              <span className="text-lighter">SP</span>
+            </div>
           ) : null}
         </div>
       </Popover>