From 360023a39179266c4f8e826373b8cf390b78df3c Mon Sep 17 00:00:00 2001
From: Supertiger <saawalkhn@googlemail.com>
Date: Sat, 12 Oct 2024 09:57:38 +0100
Subject: [PATCH] add emo supporter badge support

---
 src/chat-api/Bitwise.ts                     | 10 ++++++++++
 src/components/profile-pane/ProfilePane.tsx | 12 ++++++++----
 src/components/ui/Avatar.tsx                | 10 ++++++++++
 3 files changed, 28 insertions(+), 4 deletions(-)

diff --git a/src/chat-api/Bitwise.ts b/src/chat-api/Bitwise.ts
index b1925bd5..f66d02e2 100644
--- a/src/chat-api/Bitwise.ts
+++ b/src/chat-api/Bitwise.ts
@@ -3,6 +3,7 @@ export interface Bitwise {
   description?: string;
   bit: number;
   icon?: string;
+  textColor?: string;
   showSettings?: boolean; // determine should this permission reveal the "settings" option context menu
 }
 
@@ -37,6 +38,15 @@ export const USER_BADGES = {
       "linear-gradient(90deg, rgba(235,78,209,1) 0%, rgba(243,189,247,1) 100%)",
     credit: "Avatar Border by upklyak on Freepik",
   },
+  EMO_SUPPORTER: {
+    name: "Emo Supporter",
+    description: "Supported this project by donating money",
+    bit: 128,
+    textColor: "rgba(255,255,255,0.8)",
+    color:
+      "linear-gradient(90deg, #424242 0%, #303030 100%)",
+    credit: "Avatar Border by upklyak on Freepik",
+  },
   CONTRIBUTOR: {
     name: "Contributor",
     description: "Helped with this project in some way",
diff --git a/src/components/profile-pane/ProfilePane.tsx b/src/components/profile-pane/ProfilePane.tsx
index 065532e7..e1119c75 100644
--- a/src/components/profile-pane/ProfilePane.tsx
+++ b/src/components/profile-pane/ProfilePane.tsx
@@ -778,7 +778,7 @@ const UserActivity = (props: {
                 style={{
                   "background-image": `url(${imgSrc()})`,
                 }}
-              ></div>
+              />
             </Show>
             <img
               src={imgSrc()}
@@ -1222,11 +1222,11 @@ function UsersList(props: { users: RawUser[] }) {
 
 type Badge = typeof USER_BADGES.SUPPORTER;
 
-const BadgeContainer = styled("button")<{ color: string }>`
+const BadgeContainer = styled("button")<{ color: string; textColor?: string }>`
   background: ${(props) => props.color};
   border-radius: 4px;
   padding: 3px;
-  color: rgba(0, 0, 0, 0.7);
+  color: ${(props) => props.textColor || "rgba(0, 0, 0, 0.7)"};
   font-weight: bold;
   font-size: 12px;
   border: none;
@@ -1240,7 +1240,11 @@ function Badge(props: { badge: Badge; user: UserDetails }) {
     createPortal((close) => <BadgeDetailModal {...props} close={close} />);
 
   return (
-    <BadgeContainer {...{ onClick }} color={props.badge.color}>
+    <BadgeContainer
+      {...{ onClick }}
+      textColor={props.badge.textColor}
+      color={props.badge.color}
+    >
       {props.badge.name}
     </BadgeContainer>
   );
diff --git a/src/components/ui/Avatar.tsx b/src/components/ui/Avatar.tsx
index 41e2cd69..16ecdac5 100644
--- a/src/components/ui/Avatar.tsx
+++ b/src/components/ui/Avatar.tsx
@@ -129,6 +129,16 @@ function AvatarBorder(props: {
             children={props.children}
           />
         </Match>
+
+        <Match when={props.badge?.bit === USER_BADGES.EMO_SUPPORTER.bit}>
+          <EmoSupporterBorder
+            size={props.size}
+            avatarUrl={props.url}
+            hovered={props.hovered}
+            color={props.color}
+            children={props.children}
+          />
+        </Match>
         <Match when={props.badge?.bit === USER_BADGES.SUPPORTER.bit}>
           <SupporterBorder
             size={props.size}