diff --git a/packages/app/public/assets/badges/early_streamer.svg b/packages/app/public/assets/badges/early_streamer.svg new file mode 100644 index 00000000..41376040 --- /dev/null +++ b/packages/app/public/assets/badges/early_streamer.svg @@ -0,0 +1,3 @@ + + + diff --git a/packages/app/public/assets/badges/x1.svg b/packages/app/public/assets/badges/x1.svg new file mode 100644 index 00000000..7af13996 --- /dev/null +++ b/packages/app/public/assets/badges/x1.svg @@ -0,0 +1,23 @@ + + + + + + + + + + + + + + + + + + + + + + + diff --git a/packages/app/src/components/UserBadges/index.jsx b/packages/app/src/components/UserBadges/index.jsx index 78f57437..72e704e6 100755 --- a/packages/app/src/components/UserBadges/index.jsx +++ b/packages/app/src/components/UserBadges/index.jsx @@ -1,47 +1,88 @@ import React from "react" import * as antd from "antd" -import Loadable from "react-loadable" import { createIconRender } from "components/Icons" import { UserModel } from "models" import "./index.less" -export default React.memo((props) => { - return React.createElement(Loadable({ - loader: async () => { - let { user_id } = props +import DOMPurify from "dompurify" +import axios from "axios" - const badgesData = await UserModel.getUserBadges(user_id).catch((err) => { - console.error(err) +const RemoteSVG = (props) => { + // IMPORTANT: Only use this component for SVG files that you trust. + console.warn("RemoteSVGToComponent: This component is not safe at all, cause use __dangerouslySetInnerHTML. Only use it for SVG files that you trust.") - app.message.error("Failed to fetch user badges") + // make sure the url is local + if (!props.src.startsWith("/") && !props.remote) { + console.error("RemoteSVGToComponent: The file is not a local file.") + return () => null + } - return null - }) + // make sure the file is a SVG + if (!props.src.endsWith(".svg")) { + console.error("RemoteSVGToComponent: The file is not a SVG.") + return () => null + } - if (!badgesData) { - return null + const [L_Badge, R_Badge, E_Badge] = app.cores.api.useRequest(async () => { + return await axios({ + method: "GET", + url: props.src, + }) + }) + + if (E_Badge || L_Badge) { + return <> + } + + return
+} - return () =>
- { - badgesData.map((badge, index) => { - return - - {badge.label} - - - }) - } -
- }, - loading: antd.Skeleton, - })) -}) \ No newline at end of file +export default (props) => { + let { user_id } = props + + const [L_Badges, R_Badges, E_Badges] = app.cores.api.useRequest(UserModel.getUserBadges, user_id) + + if (E_Badges) { + return null + } + + if (L_Badges) { + return null + } + + if (!R_Badges) { + return null + } + + return
+ { + R_Badges.map((badge, index) => { + return +
+ { + badge.iconUrl + ? + : createIconRender(badge.icon) + } +
+ + }) + } +
+} \ No newline at end of file diff --git a/packages/app/src/components/UserBadges/index.less b/packages/app/src/components/UserBadges/index.less index fb246054..1d4ab724 100644 --- a/packages/app/src/components/UserBadges/index.less +++ b/packages/app/src/components/UserBadges/index.less @@ -16,17 +16,33 @@ .badges { display: flex; - flex-direction: column; + flex-direction: row; + + align-items: center; + + height: fit-content; gap: 7px; - .ant-tag { - display: inline-flex; + background-color: var(--background-color-primary); + border-radius: 12px; + padding: 7px 15px; + + .badge { + display: flex; flex-direction: row; align-items: center; + justify-content: center; - margin: 0 !important; + --outline-color: var(--icon-color); + + svg { + font-size: 1rem; + + margin: 0 !important; + color: var(--icon-color); + } } } \ No newline at end of file diff --git a/packages/app/src/components/UserCard/index.jsx b/packages/app/src/components/UserCard/index.jsx index 5e4bf6d6..dfb2ae6e 100755 --- a/packages/app/src/components/UserCard/index.jsx +++ b/packages/app/src/components/UserCard/index.jsx @@ -111,7 +111,7 @@ export const UserCard = React.forwardRef((props, ref) => {
-
+

{user.fullName || user.username} {user.verified && } @@ -121,30 +121,7 @@ export const UserCard = React.forwardRef((props, ref) => {

-
- { - user.roles.includes("admin") && - - - - } - { - user.early_supporter && - - - - } - { - user.roles.includes("internal_dev") && - - - - } -
+
@@ -153,12 +130,6 @@ export const UserCard = React.forwardRef((props, ref) => {
-
- }> - - -
- { user.links && Array.isArray(user.links) && user.links.length > 0 &&
{ diff --git a/packages/app/src/components/UserCard/index.less b/packages/app/src/components/UserCard/index.less index fd8253d0..59dd59ba 100755 --- a/packages/app/src/components/UserCard/index.less +++ b/packages/app/src/components/UserCard/index.less @@ -273,28 +273,28 @@ flex-direction: row; margin-top: 20px; - - h1 { - display: inline-flex; - font-size: 1.5rem; - font-weight: 600; - font-family: "Space grotesk", sans-serif; - } - - span { - font-size: 0.8rem; - font-style: italic; - } - - svg { - fill: var(--app-color); - font-size: 0.8rem; - } - - div { + + .username_text { display: flex; flex-direction: column; width: 100%; + + h1 { + display: inline-flex; + font-size: 1.5rem; + font-weight: 600; + font-family: "Space grotesk", sans-serif; + } + + span { + font-size: 0.8rem; + font-style: italic; + } + + svg { + fill: var(--app-color); + font-size: 0.8rem; + } } .indicators { @@ -331,18 +331,7 @@ } .badges { - display: flex; - flex-direction: row; - - margin-top: 20px; - - flex-wrap: wrap; - - .badge { - margin-left: 5px; - - margin-bottom: 5px; - } + justify-content: flex-end; } .userLinks {