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

Profiles app -> dev

Author: kkartunov

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