Profiles app -> dev

src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.module.scss

@@ -1,8 +1,12 @@
 @import "@libs/ui/styles/includes";
 
 .editMemberPropertyBtn {
+    padding: 0 !important;
+    padding-left: $sp-4 !important;
+    color: $black-100;
+
     svg {
-        width: 16px;
-        height: 16px;
+        width: 20px;
+        height: 20px;
     }
 }

src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx

@@ -13,6 +13,7 @@ const EditMemberPropertyBtn: FC<EditMemberPropertyBtnProps> = (props: EditMember
         icon={IconOutline.PencilIcon}
         onClick={props.onClick}
         className={styles.editMemberPropertyBtn}
+        size='lg'
     />
 )
 

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

@@ -21,3 +21,18 @@ export function notifyUniNavi(profile: UserProfile): void {
         })
     }
 }
+
+export function subTrackLabelToHumanName(label: string): string {
+    switch (label) {
+        case 'ASSEMBLY_COMPETITION':
+            return 'Assembly Competition'
+        case 'CODE':
+            return 'Code'
+        case 'FIRST_2_FINISH':
+            return 'First2Finish'
+        case 'CONCEPTUALIZATION':
+            return 'Conceptualization'
+        default: return label
+    }
+
+}

src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss

@@ -8,6 +8,7 @@
     .headerWrap {
         display: flex;
         align-items: center;
+        justify-content: space-between;
         margin-bottom: $sp-4;
 
         h3 {

src/apps/profiles/src/member-profile/languages/MemberLanguages.module.scss

@@ -8,7 +8,7 @@
     .titleWrap {
         display: flex;
         align-items: center;
-        justify-content: flex-start;
+        justify-content: space-between;
         margin-bottom: $sp-2;
     }
 

src/apps/profiles/src/member-profile/links/MemberLinks.module.scss

@@ -8,7 +8,7 @@
     .titleWrap {
         display: flex;
         align-items: center;
-        justify-content: flex-start;
+        justify-content: space-between;
         margin-bottom: $sp-2;
     }
 

src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.module.scss

@@ -8,6 +8,9 @@
 
 .modalBody {
     display: flex;
-    align-items: center;
-    justify-content: space-between;
+    flex-direction: column;
+
+    >p {
+        margin-bottom: $sp-4;
+    }
 }

src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.tsx

@@ -2,7 +2,7 @@ import { Dispatch, FC, SetStateAction, useEffect, useState } from 'react'
 import { toast } from 'react-toastify'
 import { reject } from 'lodash'
 
-import { BaseModal, Button, FormToggleSwitch } from '~/libs/ui'
+import { BaseModal, Button, InputText } from '~/libs/ui'
 import {
     createMemberTraitsAsync,
     updateMemberTraitsAsync,
@@ -76,7 +76,8 @@ const OpenForGigsModifyModal: FC<OpenForGigsModifyModalProps> = (props: OpenForG
         <BaseModal
             onClose={props.onClose}
             open
-            title='Gig Availability'
+            title='Don’t miss gig and work opportunities.'
+            size='lg'
             buttons={(
                 <div className={styles.modalButtons}>
                     <Button
@@ -95,15 +96,15 @@ const OpenForGigsModifyModal: FC<OpenForGigsModifyModalProps> = (props: OpenForG
         >
             <div className={styles.modalBody}>
                 <p>
-                    {openForWork
-                        ? 'Currently available for work.'
-                        : `Mark your availability to get found in search results when potential
- clients look for services and let them reach out to you for free.`}
+                    By selecting “Open to Work” our customers will know that you are available for job opportunities.
                 </p>
-                <FormToggleSwitch
+                <InputText
                     name='openForWork'
+                    label='Yes, I’m open to work'
+                    tabIndex={-1}
+                    type='checkbox'
                     onChange={handleOpenForWorkToggle}
-                    value={openForWork}
+                    checked={openForWork}
                 />
             </div>
         </BaseModal>

src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss

@@ -11,23 +11,6 @@
         position: relative;
         margin-right: 60px;
 
-        .verifiedBadge {
-            position: absolute;
-            right: 0;
-            top: 0;
-            color: $tc-white;
-
-            svg {
-                width: 70px;
-                height: 70px;
-                fill: $turq-120;
-
-                path {
-                    fill: $turq-120;
-                }
-            }
-        }
-
         .profilePhoto {
             width: 300px;
             height: 300px;
@@ -38,14 +21,11 @@
 
         button {
             position: absolute;
-            right: 0;
-            top: calc(50% - 8px);
-            padding-right: $sp-1;
-
-            svg {
-                width: 16px;
-                height: 16px;
-            }
+            bottom: -10px;
+            left: calc(50% - 20px);
+            padding: $sp-2 $sp-3 !important;
+            background-color: $tc-white;
+            border-radius: 50%;
         }
     }
 

src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx

@@ -5,14 +5,13 @@ import { KeyedMutator } from 'swr'
 import moment from 'moment'
 
 import {
-    getVerificationStatusAsync,
     useMemberTraits,
     UserProfile,
     UserTrait,
     UserTraitIds,
     UserTraits,
 } from '~/libs/core'
-import { Button, IconOutline } from '~/libs/ui'
+import { Button } from '~/libs/ui'
 
 import { EditMemberPropertyBtn } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
@@ -34,9 +33,6 @@ const DEFAULT_MEMBER_AVATAR: string
 const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
     const photoURL: string = props.profile.photoURL || DEFAULT_MEMBER_AVATAR
 
-    const [isMemberVerified, setIsMemberVerified]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useState<boolean>(false)
-
     const canEdit: boolean = props.authProfile?.handle === props.profile.handle
 
     const [isNameEditMode, setIsNameEditMode]: [boolean, Dispatch<SetStateAction<boolean>>]
@@ -76,15 +72,6 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
         // eslint-disable-next-line react-hooks/exhaustive-deps
     }, [props.authProfile])
 
-    useEffect(() => {
-        if (!props.profile?.handle) {
-            return
-        }
-
-        getVerificationStatusAsync(props.profile.handle)
-            .then(verified => setIsMemberVerified(verified))
-    }, [props.profile.handle])
-
     function handleHireMeClick(): void {
         console.log('Hire Me button clicked')
     }
@@ -124,13 +111,6 @@ const ProfileHeader: FC<ProfileHeaderProps> = (props: ProfileHeaderProps) => {
         <div className={styles.container}>
             <div className={styles.photoWrap}>
                 <img src={photoURL} alt='Topcoder - Member Profile Avatar' className={styles.profilePhoto} />
-                {
-                    isMemberVerified ? (
-                        <div className={styles.verifiedBadge}>
-                            <IconOutline.CheckCircleIcon />
-                        </div>
-                    ) : undefined
-                }
                 {
                     canEdit && (
                         <EditMemberPropertyBtn

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

@@ -7,7 +7,7 @@
     padding: $sp-6;
     flex: 1;
 
-    > p {
+    >p {
         font-size: 20px;
     }
 
@@ -22,19 +22,23 @@
         padding: $sp-8;
 
         .wins {
-            font-size: 44px;
-            font-weight: 500;
-            line-height: 34px;
-            margin-top: $sp-8;
-        }
+            display: flex;
+            flex-wrap: wrap;
+            justify-content: space-evenly;
+            width: 100%;
+
+            .winWrapper {
+                display: flex;
+                flex-direction: column;
+                align-items: center;
 
-        .champText {
-            font-family: $font-barlow-condensed;
-            font-size: 54px;
-            font-weight: 500;
-            text-transform: uppercase;
-            margin-bottom: $sp-8;
-            line-height: 54px;
+                .winCnt {
+                    font-size: 44px;
+                    font-weight: 500;
+                    line-height: 34px;
+                    margin-top: $sp-8;
+                }
+            }
         }
     }
 }

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

@@ -1,20 +1,71 @@
 import { FC } from 'react'
 
+import { MemberStats, UserStats } from '~/libs/core'
+
+import { subTrackLabelToHumanName } from '../../../lib/helpers'
+
 import styles from './ChallengeWinsBanner.module.scss'
 
 interface ChallengeWinsBannerProps {
-    challengeWins: number
+    memberStats: UserStats
 }
 
 const ChallengeWinsBanner: FC<ChallengeWinsBannerProps> = (props: ChallengeWinsBannerProps) => (
     <div className={styles.containerWrap}>
         <div className={styles.container}>
             <p className='body-large-bold'>Topcoder Challenge Winner</p>
-            <p className={styles.wins}>
-                {props.challengeWins}
-                {' '}
-            </p>
-            <p className='body-main'>WINS</p>
+            <div className={styles.wins}>
+                {
+                    !!props.memberStats.DATA_SCIENCE?.SRM?.wins && (
+                        <div className={styles.winWrapper}>
+                            <p className={styles.winCnt}>
+                                {props.memberStats.DATA_SCIENCE.SRM.wins}
+                                {' '}
+                            </p>
+                            <p className='body-main'>WINS</p>
+                            <p className='body-main-bold'>SRM</p>
+                        </div>
+                    )
+                }
+                {
+                    !!props.memberStats.DATA_SCIENCE?.MARATHON_MATCH?.wins && (
+                        <div className={styles.winWrapper}>
+                            <p className={styles.winCnt}>
+                                {props.memberStats.DATA_SCIENCE.MARATHON_MATCH.wins}
+                                {' '}
+                            </p>
+                            <p className='body-main'>WINS</p>
+                            <p className='body-main-bold'>Marathon Match</p>
+                        </div>
+                    )
+                }
+                {
+                    !!props.memberStats.DEVELOP?.wins
+                    && props.memberStats.DEVELOP?.subTracks.map((ms: MemberStats) => (ms.wins ? (
+                        <div className={styles.winWrapper}>
+                            <p className={styles.winCnt}>
+                                {ms.wins}
+                                {' '}
+                            </p>
+                            <p className='body-main'>WINS</p>
+                            <p className='body-main-bold'>{subTrackLabelToHumanName(ms.name)}</p>
+                        </div>
+                    ) : undefined))
+                }
+                {
+                    !!props.memberStats.DESIGN?.wins
+                    && props.memberStats.DESIGN?.subTracks.map((ms: MemberStats) => (ms.wins ? (
+                        <div className={styles.winWrapper}>
+                            <p className={styles.winCnt}>
+                                {ms.wins}
+                                {' '}
+                            </p>
+                            <p className='body-main'>WINS</p>
+                            <p className='body-main-bold'>{subTrackLabelToHumanName(ms.name)}</p>
+                        </div>
+                    ) : undefined))
+                }
+            </div>
         </div>
         <p>
             Topcoder challenges are open competitions where community

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

@@ -49,7 +49,7 @@ const MemberTCAchievements: FC<MemberTCAchievementsProps> = (props: MemberTCAchi
                 {
                     !!memberStats?.wins && memberStats.wins > 0 && (
                         <ChallengeWinsBanner
-                            challengeWins={memberStats?.wins}
+                            memberStats={memberStats}
                         />
                     )
                 }

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

@@ -10,9 +10,17 @@ 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}
-            {' '}
-            <span>{props.tcoWins === 1 ? 'time' : 'times'}</span>
+            {
+                props.tcoWins === 1 ? (
+                    <></>
+                ) : (
+                    <>
+                        {props.tcoWins}
+                        {' '}
+                        <span>times</span>
+                    </>
+                )
+            }
         </p>
         <p className={styles.champText}>Champion</p>
         <p className={styles.text}>