MP-276 Challenge winner banner update

Author: kkartunov

src/apps/profiles/src/lib/helpers.ts

@@ -32,6 +32,18 @@ export function subTrackLabelToHumanName(label: string): string {
             return 'First2Finish'
         case 'CONCEPTUALIZATION':
             return 'Conceptualization'
+        case 'SPECIFICATION':
+            return 'Specification'
+        case 'BUG_HUNT':
+            return 'Bug Hunt'
+        case 'TEST_SUITES':
+            return 'Test Suites'
+        case 'TEST_SCENARIOS':
+            return 'Test Scenarios'
+        case 'CONTENT_CREATION':
+            return 'Content Creation'
+        case 'COPILOT_POSTING':
+            return 'Copilot Posting'
         default: return label
     }
 

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

@@ -0,0 +1,18 @@
+@import "@libs/ui/styles/includes";
+
+.winWrapper {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    padding: 0 $sp-2;
+    cursor: pointer;
+    min-width: 115px;
+
+    .winCnt {
+        font-family: $font-barlow-condensed;
+        font-size: 32px;
+        font-weight: 500;
+        line-height: 34px;
+        margin-top: $sp-8;
+    }
+}

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

@@ -0,0 +1,22 @@
+import { FC } from 'react'
+
+import styles from './ChallengeWin.module.scss'
+
+interface ChallengeWinProps {
+    typeName: string
+    onClick: () => void
+    winCnt: number
+}
+
+const ChallengeWin: FC<ChallengeWinProps> = (props: ChallengeWinProps) => (
+    <div className={styles.winWrapper} onClick={props.onClick}>
+        <p className={styles.winCnt}>
+            {props.winCnt}
+            {' '}
+        </p>
+        <p className='body-ultra-small-bold'>WINS</p>
+        <p className='body-small-bold'>{props.typeName}</p>
+    </div>
+)
+
+export default ChallengeWin

src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWin/index.ts

@@ -0,0 +1 @@
+export { default as ChallengeWin } from './ChallengeWin'

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

@@ -23,7 +23,7 @@
         margin-bottom: $sp-8;
         background-image: linear-gradient(90deg, #7B21A7, #1974AD);
         color: $tc-white;
-        padding: $sp-8;
+        padding: $sp-4;
 
         @include ltelg {
             padding: $sp-4;
@@ -36,21 +36,8 @@
         .wins {
             display: flex;
             flex-wrap: wrap;
-            justify-content: space-evenly;
+            justify-content: center;
             width: 100%;
-
-            .winWrapper {
-                display: flex;
-                flex-direction: column;
-                align-items: center;
-
-                .winCnt {
-                    font-size: 44px;
-                    font-weight: 500;
-                    line-height: 34px;
-                    margin-top: $sp-8;
-                }
-            }
         }
     }
 }