add emo supporter badge support

Nerimity · Oct 12, 2024 · 360023a · 360023a
1 parent 2c55e8a
commit 360023a
Show file tree

Hide file tree

Showing 3 changed files with 28 additions and 4 deletions.
diff --git 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
@@ -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
@@ -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}