fix: leaderboard updates

thegoodparty · Mar 16, 2021 · 5fe84b8 · 5fe84b8
1 parent 2fb511b
commit 5fe84b8
Show file tree

Hide file tree

Showing 2 changed files with 19 additions and 22 deletions.
diff --git a/components/profile/LeaderboardWrapper/LeaderboardPerson.js b/components/profile/LeaderboardWrapper/LeaderboardPerson.js
@@ -11,6 +11,7 @@ import Hidden from '@material-ui/core/Hidden';
 
 import { numberFormatter } from 'helpers/numberHelper';
 import UserAvatar from '../../shared/UserAvatar';
+import { fullFirstLastInitials } from '../../../helpers/userHelper';
 
 const heartImg = '/images/heart.svg';
 
@@ -64,39 +65,34 @@ const Heart = styled.img`
   margin-right: 6px;
 `;
 
-function LeaderboardPerson({ purple = false, person, index }) {
+function LeaderboardPerson({ you = false, person, index }) {
   if (!person) {
     return <></>;
   }
-  const crewHeart = crewCount => (
-    <CrewCountWrapper>
-      <Heart src={heartImg} />
-      <div>
-        {numberFormatter(crewCount)} {crewCount === 1 ? 'person' : 'people'}{' '}
-        recruited
-      </div>
-    </CrewCountWrapper>
-  );
+
   const { name, uuid, crewCount } = person;
   return (
-    <Row className={purple && 'purple-bg'} key={uuid}>
+    <Row className={you && 'purple-bg'} key={uuid}>
       <LeftColumn>
         <Index>{index + 1}</Index>
-        <UserAvatar user={person} size="medium" />
+        <UserAvatar user={person} size="medium" you />
         <Name>
-          {name}
-          <Hidden mdUp>{crewHeart(crewCount)}</Hidden>
+          {you ? `${fullFirstLastInitials(name)} (you)` : name}
+          <CrewCountWrapper>
+            <Heart src={heartImg} />
+            <div>
+              {numberFormatter(crewCount)}{' '}
+              {crewCount === 1 ? 'person' : 'people'} recruited
+            </div>
+          </CrewCountWrapper>
         </Name>
       </LeftColumn>
-      <Hidden mdDown>
-        <div>{crewHeart(crewCount)}</div>
-      </Hidden>
     </Row>
   );
 }
 
 LeaderboardPerson.propTypes = {
-  purple: PropTypes.bool,
+  you: PropTypes.bool,
   person: PropTypes.object,
   index: PropTypes.number,
 };

diff --git a/components/profile/LeaderboardWrapper/index.js b/components/profile/LeaderboardWrapper/index.js
@@ -10,11 +10,12 @@ import styled from 'styled-components';
 import Link from 'next/link';
 
 import PageWrapper from '../../shared/PageWrapper';
-import { MaxWidth } from '../ProfileWrapper';
 import { Body19, H1 } from '../../shared/typogrophy';
 import LeaderboardPerson from './LeaderboardPerson';
 
-const ContentWrpper = styled(MaxWidth)`
+const ContentWrpper = styled.div`
+  max-width: 640px;
+  margin: 0 auto;
   padding: 24px 20px 48px;
   @media only screen and (min-width: ${({ theme }) => theme.breakpoints.md}) {
     padding: 40px 0 64px;
@@ -83,7 +84,7 @@ function LeaderboardWrapper({ crew, user, leaderboard }) {
             <Everyone>Everyone</Everyone>
           </Link>
         </Title>
-        <LeaderboardPerson purple person={user} index={0} />
+        <LeaderboardPerson you person={user} index={0} />
         {crew &&
           crew.map((crewMember, index) => (
             <LeaderboardPerson person={crewMember} index={index + 1} />
@@ -100,7 +101,7 @@ function LeaderboardWrapper({ crew, user, leaderboard }) {
         {leaderboard &&
           leaderboard.map((member, index) => (
             <LeaderboardPerson
-              purple={member.uuid === user.uuid}
+              you={member.uuid === user.uuid}
               person={member}
               index={index}
             />