{src ? (
-

+

) : (
)}
diff --git a/src/renderer/src/context/user-profile/user-profile.context.tsx b/src/renderer/src/context/user-profile/user-profile.context.tsx
index ce831981..9b9d16b4 100644
--- a/src/renderer/src/context/user-profile/user-profile.context.tsx
+++ b/src/renderer/src/context/user-profile/user-profile.context.tsx
@@ -1,6 +1,6 @@
import { darkenColor } from "@renderer/helpers";
import { useAppSelector, useToast } from "@renderer/hooks";
-import type { UserProfile, UserStats } from "@types";
+import type { Badge, UserProfile, UserStats } from "@types";
import { average } from "color.js";
import { createContext, useCallback, useEffect, useState } from "react";
@@ -16,6 +16,7 @@ export interface UserProfileContext {
getUserProfile: () => Promise
;
setSelectedBackgroundImage: React.Dispatch>;
backgroundImage: string;
+ badges: Badge[];
}
export const DEFAULT_USER_PROFILE_BACKGROUND = "#151515B3";
@@ -28,6 +29,7 @@ export const userProfileContext = createContext({
getUserProfile: async () => {},
setSelectedBackgroundImage: () => {},
backgroundImage: "",
+ badges: [],
});
const { Provider } = userProfileContext;
@@ -47,6 +49,7 @@ export function UserProfileContextProvider({
const [userStats, setUserStats] = useState(null);
const [userProfile, setUserProfile] = useState(null);
+ const [badges, setBadges] = useState([]);
const [heroBackground, setHeroBackground] = useState(
DEFAULT_USER_PROFILE_BACKGROUND
);
@@ -101,12 +104,18 @@ export function UserProfileContextProvider({
});
}, [navigate, getUserStats, showErrorToast, userId, t]);
+ const getBadges = useCallback(async () => {
+ const badges = await window.electron.getBadges();
+ setBadges(badges);
+ }, []);
+
useEffect(() => {
setUserProfile(null);
setHeroBackground(DEFAULT_USER_PROFILE_BACKGROUND);
getUserProfile();
- }, [getUserProfile]);
+ getBadges();
+ }, [getUserProfile, getBadges]);
return (
{children}
diff --git a/src/renderer/src/declaration.d.ts b/src/renderer/src/declaration.d.ts
index 1b588d5c..4700fbb1 100644
--- a/src/renderer/src/declaration.d.ts
+++ b/src/renderer/src/declaration.d.ts
@@ -30,6 +30,7 @@ import type {
GameRunning,
TorBoxUser,
Theme,
+ Badge,
} from "@types";
import type { AxiosProgressEvent } from "axios";
import type disk from "diskusage";
@@ -217,6 +218,7 @@ declare global {
) => Promise;
showItemInFolder: (path: string) => Promise;
getFeatures: () => Promise;
+ getBadges: () => Promise;
platform: NodeJS.Platform;
/* Auto update */
diff --git a/src/renderer/src/main.tsx b/src/renderer/src/main.tsx
index eb890d18..bb0a3e03 100644
--- a/src/renderer/src/main.tsx
+++ b/src/renderer/src/main.tsx
@@ -11,6 +11,7 @@ import "@fontsource/noto-sans/500.css";
import "@fontsource/noto-sans/700.css";
import "react-loading-skeleton/dist/skeleton.css";
+import "react-tooltip/dist/react-tooltip.css";
import { App } from "./app";
diff --git a/src/renderer/src/pages/achievements/achievements-content.scss b/src/renderer/src/pages/achievements/achievements-content.scss
index 8ee1773f..a378f490 100644
--- a/src/renderer/src/pages/achievements/achievements-content.scss
+++ b/src/renderer/src/pages/achievements/achievements-content.scss
@@ -31,7 +31,7 @@ $logo-max-width: 200px;
display: flex;
justify-content: center;
width: 100%;
- gap: globals.$spacing-unit / 2;
+ gap: calc(globals.$spacing-unit / 2);
color: globals.$body-color;
cursor: pointer;
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
index fd21cf1d..834cb0cf 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss
@@ -27,6 +27,11 @@
}
}
+ &__badges {
+ display: flex;
+ gap: calc(globals.$spacing-unit / 2);
+ }
+
&__user-information {
display: flex;
padding: calc(globals.$spacing-unit * 7) calc(globals.$spacing-unit * 3);
@@ -82,12 +87,6 @@
text-shadow: 0 0 5px rgb(0 0 0 / 40%);
}
- &__display-name-badges-container {
- display: flex;
- gap: globals.$spacing-unit;
- align-items: center;
- }
-
&__current-game {
&-wrapper {
display: flex;
diff --git a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
index 66799c47..fc354d01 100644
--- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
+++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx
@@ -24,8 +24,8 @@ import type { FriendRequestAction } from "@types";
import { EditProfileModal } from "../edit-profile-modal/edit-profile-modal";
import Skeleton from "react-loading-skeleton";
import { UploadBackgroundImageButton } from "../upload-background-image-button/upload-background-image-button";
+import { Tooltip } from "react-tooltip";
import "./profile-hero.scss";
-import { UserBadges } from "./user-badges";
type FriendAction =
| FriendRequestAction
@@ -35,8 +35,14 @@ export function ProfileHero() {
const [showEditProfileModal, setShowEditProfileModal] = useState(false);
const [isPerformingAction, setIsPerformingAction] = useState(false);
- const { isMe, getUserProfile, userProfile, heroBackground, backgroundImage } =
- useContext(userProfileContext);
+ const {
+ isMe,
+ badges,
+ getUserProfile,
+ userProfile,
+ heroBackground,
+ backgroundImage,
+ } = useContext(userProfileContext);
const {
signOut,
updateFriendRequestState,
@@ -261,14 +267,6 @@ export function ProfileHero() {
return (
<>
- {/* */}
-
setShowEditProfileModal(false)}
@@ -312,7 +310,29 @@ export function ProfileHero() {
{userProfile?.displayName}
-
+
+
+ {userProfile.badges.map((badgeName) => {
+ const badge = badges.find((b) => b.name === badgeName);
+
+ if (!badge) return null;
+
+ return (
+

+ );
+ })}
+
+
+
) : (