diff --git a/src/locales/en/translation.json b/src/locales/en/translation.json index f1e85019..bf91cc40 100644 --- a/src/locales/en/translation.json +++ b/src/locales/en/translation.json @@ -444,6 +444,9 @@ "show_achievements_on_profile": "Show your achievements on your profile", "show_points_on_profile": "Show your earned points on your profile" }, + "badge": { + "badge_description_theme_creator": "Awarded to those who created a custom theme" + }, "achievement": { "achievement_unlocked": "Achievement unlocked", "user_achievements": "{{displayName}}'s Achievements", diff --git a/src/locales/pt-BR/translation.json b/src/locales/pt-BR/translation.json index 0cefd188..3556dbd1 100644 --- a/src/locales/pt-BR/translation.json +++ b/src/locales/pt-BR/translation.json @@ -440,6 +440,9 @@ "show_achievements_on_profile": "Exiba suas conquistas no perfil", "show_points_on_profile": "Exiba seus pontos ganhos no perfil" }, + "badge": { + "badge_description_theme_creator": "Concedido àqueles que criaram um tema customizado" + }, "achievement": { "achievement_unlocked": "Conquista desbloqueada", "your_achievements": "Suas Conquistas", diff --git a/src/renderer/src/assets/icons/badge-theme-creator.svg b/src/renderer/src/assets/icons/badge-theme-creator.svg new file mode 100644 index 00000000..0793a7e9 --- /dev/null +++ b/src/renderer/src/assets/icons/badge-theme-creator.svg @@ -0,0 +1,29 @@ + + + + + + + + + + + + + + + + + + + + + + + + + + + + + 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 98a25a77..ce831981 100644 --- a/src/renderer/src/context/user-profile/user-profile.context.tsx +++ b/src/renderer/src/context/user-profile/user-profile.context.tsx @@ -41,7 +41,7 @@ export interface UserProfileContextProviderProps { export function UserProfileContextProvider({ children, userId, -}: UserProfileContextProviderProps) { +}: Readonly) { const { userDetails } = useAppSelector((state) => state.userDetails); const [userStats, setUserStats] = useState(null); 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 8be99794..fd21cf1d 100644 --- a/src/renderer/src/pages/profile/profile-hero/profile-hero.scss +++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.scss @@ -65,6 +65,12 @@ overflow: hidden; } + &__display-name-container { + display: flex; + gap: globals.$spacing-unit; + align-items: center; + } + &__display-name { font-weight: bold; overflow: hidden; @@ -76,6 +82,12 @@ 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 e198fbf2..66799c47 100644 --- a/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx +++ b/src/renderer/src/pages/profile/profile-hero/profile-hero.tsx @@ -25,6 +25,7 @@ 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 "./profile-hero.scss"; +import { UserBadges } from "./user-badges"; type FriendAction = | FriendRequestAction @@ -307,9 +308,12 @@ export function ProfileHero() {
{userProfile ? ( -

- {userProfile?.displayName} -

+
+

+ {userProfile?.displayName} +

+ +
) : ( )} diff --git a/src/renderer/src/pages/profile/profile-hero/user-badges.tsx b/src/renderer/src/pages/profile/profile-hero/user-badges.tsx new file mode 100644 index 00000000..ed5d0571 --- /dev/null +++ b/src/renderer/src/pages/profile/profile-hero/user-badges.tsx @@ -0,0 +1,40 @@ +import BadgeThemeCreator from "@renderer/assets/icons/badge-theme-creator.svg?react"; +import "./profile-hero.scss"; +import { useContext } from "react"; +import { userProfileContext } from "@renderer/context"; +import { UserBadge } from "@types"; +import { useTranslation } from "react-i18next"; + +export function UserBadges() { + const { t } = useTranslation("badge"); + const { userProfile } = useContext(userProfileContext); + + if (!userProfile?.badges?.length) return null; + + const getBadgeIcon = (badge: UserBadge) => { + if (badge === "THEME_CREATOR") { + return ; + } + + return null; + }; + + return ( +
+ {userProfile.badges.map((badge) => { + const badgeIcon = getBadgeIcon(badge); + + if (!badgeIcon) return null; + return ( +
+ {badgeIcon} +
+ ); + })} +
+ ); +} diff --git a/src/types/index.ts b/src/types/index.ts index 53fb97dc..e17a694a 100644 --- a/src/types/index.ts +++ b/src/types/index.ts @@ -130,6 +130,8 @@ export interface UserProfileCurrentGame extends Omit { export type ProfileVisibility = "PUBLIC" | "PRIVATE" | "FRIENDS"; +export type UserBadge = "THEME_CREATOR"; + export interface UserDetails { id: string; username: string; @@ -164,6 +166,7 @@ export interface UserProfile { quirks: { backupsPerGameLimit: number; }; + badges: UserBadge[]; } export interface UpdateProfileRequest {