Indicate owner/manager in the SendouQ match screen

app/features/sendouq/q.css

@@ -133,6 +133,12 @@
   min-width: 180px;
 }
 
+.q-match__star-icon {
+  width: 18px;
+  color: var(--theme-secondary);
+  stroke-width: 2;
+}
+
 .q-match__container {
   /** Push footer down to avoid it "flashing" when the score reporter animates */
   padding-bottom: 14rem;

app/features/sendouq/routes/q.match.$id.tsx

@@ -80,6 +80,8 @@ import { FormWithConfirm } from "~/components/FormWithConfirm";
 import { addDummySkill } from "../queries/addDummySkill.server";
 import { inGameNameWithoutDiscriminator } from "~/utils/strings";
 import { currentSeason } from "~/features/mmr";
+import { StarFilledIcon } from "~/components/icons/StarFilled";
+import { StarIcon } from "~/components/icons/Star";
 
 export const links: LinksFunction = () => {
   return [{ rel: "stylesheet", href: styles }];
@@ -775,6 +777,12 @@ function MatchGroup({
   side: "ALPHA" | "BRAVO";
   showWeapons: boolean;
 }) {
+  const roleString = (role: GroupMember["role"]) => {
+    if (role === "REGULAR") return "";
+
+    return ` (${role.toLowerCase()})`;
+  };
+
   return (
     <div className="stack sm items-center">
       <h3 className="text-lighter">{side}</h3>
@@ -798,6 +806,7 @@ function MatchGroup({
             <Link
               to={userPage(member)}
               className="stack horizontal xs items-center"
+              title={`${member.discordName}${roleString(member.role)}`}
             >
               <Avatar size="xxs" user={member} />
               <div className="text-sm text-main-forced font-body">
@@ -810,6 +819,12 @@ function MatchGroup({
                   member.discordName
                 )}
               </div>
+              {member.role === "OWNER" ? (
+                <StarFilledIcon className="q-match__star-icon" />
+              ) : null}
+              {member.role === "MANAGER" ? (
+                <StarIcon className="q-match__star-icon" />
+              ) : null}
             </Link>
             {showWeapons && member.weapons.length > 0 ? (
               <div className="q__group-member-weapons">