Use different bg color for multiplayer profile page

ppy · Aug 16, 2023 · 04a28d4 · 04a28d4
1 parent 1b6691f
commit 04a28d4
Show file tree

Hide file tree

Showing 3 changed files with 11 additions and 2 deletions.
diff --git a/resources/css/bem/profile-badges.less b/resources/css/bem/profile-badges.less
@@ -13,6 +13,13 @@
     --gutter: @gutter-v2-desktop;
   }
 
+  // This is intentionally deviating from the design to visually separate the
+  // badges from the profile info above it. It should not be necessary if the
+  // multiplayer page gets a detail section like the other profile pages
+  &--multiplayer {
+    background-color: hsl(var(--hsl-b5));
+  }
+
   &__badge {
     width: 86px;
     height: 40px;

diff --git a/resources/js/profile-page/badges.tsx b/resources/js/profile-page/badges.tsx
@@ -4,10 +4,12 @@
 import Img2x from 'components/img2x';
 import UserBadgeJson from 'interfaces/user-badge-json';
 import * as React from 'react';
+import { Modifiers, classWithModifiers } from 'utils/css';
 import { present } from 'utils/string';
 
 interface Props {
   badges: UserBadgeJson[];
+  modifiers?: Modifiers;
 }
 
 export default class Badges extends React.PureComponent<Props> {
@@ -17,7 +19,7 @@ export default class Badges extends React.PureComponent<Props> {
     if (this.props.badges.length === 0) return null;
 
     return (
-      <div className='profile-badges'>
+      <div className={classWithModifiers('profile-badges', this.props.modifiers)}>
         {this.props.badges.map((badge) => {
           const img = (
             <Img2x

diff --git a/resources/js/user-multiplayer-index/main.tsx b/resources/js/user-multiplayer-index/main.tsx
@@ -39,7 +39,7 @@ export default function Main(props: Props) {
 
         <ProfileTournamentBanner banner={props.user.active_tournament_banner} />
 
-        <Badges badges={props.user.badges} />
+        <Badges badges={props.user.badges} modifiers='multiplayer' />
 
         <DetailBar user={props.user} />