From 8fd525b7b5f3d02a3b5c280fc87ee0f723adc52b Mon Sep 17 00:00:00 2001
From: Kalle <38327916+Sendouc@users.noreply.github.com>
Date: Sat, 9 Jul 2022 15:30:24 +0300
Subject: [PATCH] Show badge managers on badge page

---
 app/routes/badges/$id.tsx | 11 ++++++++++-
 app/styles/badges.css     |  6 ++++++
 2 files changed, 16 insertions(+), 1 deletion(-)

diff --git a/app/routes/badges/$id.tsx b/app/routes/badges/$id.tsx
index 71a9b9ed9..7eae83f99 100644
--- a/app/routes/badges/$id.tsx
+++ b/app/routes/badges/$id.tsx
@@ -54,7 +54,16 @@ export default function BadgeDetailsPage() {
     <div className="stack md items-center">
       <Outlet context={context} />
       <Badge badge={badge} isAnimated size={200} />
-      <div className="badges__explanation">{badgeExplanationText(badge)}</div>
+      <div>
+        <div className="badges__explanation">{badgeExplanationText(badge)}</div>
+        <div
+          className={clsx("badges__managers", {
+            invisible: data.managers.length === 0,
+          })}
+        >
+          Managed by {data.managers.map((m) => discordFullName(m)).join(", ")}
+        </div>
+      </div>
       {canEditBadgeOwners({ user, managers: data.managers }) ? (
         <LinkButton to="edit" variant="outlined" tiny data-cy="edit-button">
           Edit
diff --git a/app/styles/badges.css b/app/styles/badges.css
index 30f3dee57..b33eca1e2 100644
--- a/app/styles/badges.css
+++ b/app/styles/badges.css
@@ -26,6 +26,12 @@
   text-align: center;
 }
 
+.badges__managers {
+  color: var(--text-lighter);
+  font-size: var(--fonts-xxs);
+  text-align: center;
+}
+
 .badges__owners-container {
   height: 8rem;
   overflow-y: auto;