Merge pull request #816 from topcoder-platform/profiles-app

Profiles app -> dev

Author: kkartunov

src/apps/profiles/src/member-profile/skills/HowSkillsWorkModal/HowSkillsWorkModal.tsx

@@ -37,7 +37,7 @@ const HowSkillsWorkModal: FC<HowSkillsWorkModalProps> = (props: HowSkillsWorkMod
                             by completing opportunities on the platform
                         </li>
                         <li>Topcoder tracks and labels these skills, displaying what skills have been proven</li>
-                        <li>The more opportunities our experts complete the higher they rate for associated skills</li>
+                        <li>The more opportunities you complete the higher you rate for associated skills</li>
                     </ul>
                     <p>
                         You can also self-proclaim skills that have not yet been proven.

src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.tsx

@@ -161,6 +161,7 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
                         !!props.memberStats.DEVELOP?.wins
                         && props.memberStats.DEVELOP?.subTracks.map((ms: MemberStats) => (ms.wins ? (
                             <ChallengeWin
+                                key={ms.name}
                                 typeName={subTrackLabelToHumanName(ms.name)}
                                 onClick={bind(handleChallengeWinModalToggle, this, ms.name)}
                                 winCnt={ms.wins}
@@ -171,6 +172,7 @@ const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsB
                         !!props.memberStats.DESIGN?.wins
                         && props.memberStats.DESIGN?.subTracks.map((ms: MemberStats) => (ms.wins ? (
                             <ChallengeWin
+                                key={ms.name}
                                 typeName={subTrackLabelToHumanName(ms.name)}
                                 onClick={bind(handleChallengeWinModalToggle, this, ms.name)}
                                 winCnt={ms.wins}

src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.module.scss

@@ -39,5 +39,14 @@
     .rolesWrap {
         display: flex;
         align-items: center;
+        padding: $sp-4;
+        background-image: linear-gradient(to right, #652385, #8C384C);
+        color: $tc-white;
+        border-radius: 8px;
+        margin: $sp-4 0;
+
+        @include ltelg {
+            margin-bottom: 0;
+        }
     }
 }

src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.tsx

@@ -29,21 +29,25 @@ const MemberTCAchievements: FC<MemberTCAchievementsProps> = (props: MemberTCAchi
         (badge: UserBadge) => /TCO.*Champion/.test(badge.org_badge.badge_name),
     ).length || 0, [memberBadges])
 
+    const tcoQualifications: number = useMemo(() => memberBadges?.rows.filter(
+        (badge: UserBadge) => /TCO.*Finalist/.test(badge.org_badge.badge_name),
+    ).length || 0, [memberBadges])
+
     const isCopilot: boolean
         = useMemo(() => !!memberStats?.COPILOT, [memberStats])
 
     // function handleOpenTCAchievements(): void {
     //     console.log('handleOpenTCAchievements')
     // }
 
-    return memberStats?.wins || tcoWins ? (
+    return memberStats?.wins || tcoWins || tcoQualifications ? (
         <div className={styles.container}>
             <p className='body-large-medium'>Achievements @ Topcoder</p>
 
             <div className={styles.achievementsWrap}>
                 {
-                    tcoWins > 0 && (
-                        <TCOWinsBanner tcoWins={tcoWins} />
+                    (tcoWins > 0 || tcoQualifications > 0) && (
+                        <TCOWinsBanner tcoWins={tcoWins} tcoQualifications={tcoQualifications} />
                     )
                 }
                 {
@@ -59,7 +63,7 @@ const MemberTCAchievements: FC<MemberTCAchievementsProps> = (props: MemberTCAchi
             {
                 isCopilot && (
                     <div className={styles.rolesWrap}>
-                        <p className='body-main-bold'>Special Roles:&nbsp;</p>
+                        <p className='body-main-medium'>Topcoder Special Roles:&nbsp;</p>
                         <p>Copilot</p>
                     </div>
                 )

src/apps/profiles/src/member-profile/tc-achievements/TCOWinsBanner/TCOWinsBanner.tsx

@@ -4,25 +4,26 @@ import styles from './TCOWinsBanner.module.scss'
 
 interface TCOWinsBannerProps {
     tcoWins: number
+    tcoQualifications: number
 }
 
 const TCOWinsBanner: FC<TCOWinsBannerProps> = (props: TCOWinsBannerProps) => (
     <div className={styles.container}>
         <p className='body-large-bold'>Topcoder Open (TCO)</p>
         <p className={styles.wins}>
             {
-                props.tcoWins === 1 ? (
+                props.tcoWins === 1 || props.tcoQualifications === 1 ? (
                     <></>
                 ) : (
                     <>
-                        {props.tcoWins}
+                        {props.tcoWins || props.tcoQualifications}
                         {' '}
                         <span>times</span>
                     </>
                 )
             }
         </p>
-        <p className={styles.champText}>Champion</p>
+        <p className={styles.champText}>{props.tcoWins ? 'Champion' : 'Finalist'}</p>
         <p className={styles.text}>
             Topcoder Open (TCO) is the ultimate programming tournament,
             that earns our winners major prestige in the programming community.