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

Profiles app -> dev

Author: kkartunov

src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.module.scss

@@ -7,11 +7,11 @@
     height: 100%;
 
     .profileHeaderWrap {
-        background: url('../../lib/assets/profile-header-bg.png') no-repeat right center / auto, linear-gradient(#0d83c5, #0e89d5);
+        background: url('../../lib/assets/profile-header-bg.png') no-repeat right top / auto, linear-gradient(#0d83c5, #0e89d5);
 
         .profileHeaderContent {
             padding: 0;
-            max-height: 200px;
+            max-height: 260px;
             overflow: visible;
 
             @include ltelg {
@@ -57,7 +57,7 @@
             .profileInfoRight {
                 display: flex;
                 flex-direction: column;
-                margin-top: -215px;
+                margin-top: -275px;
 
                 @include ltelg {
                     margin-top: 0;

src/apps/profiles/src/member-profile/page-layout/ProfilePageLayout.tsx

@@ -80,7 +80,11 @@ const ProfilePageLayout: FC<ProfilePageLayoutProps> = (props: ProfilePageLayoutP
 
                         <div className={styles.sectionWrap}>
                             <div className={styles.skillsWrap}>
-                                <MemberSkillsInfo profile={props.profile} authProfile={props.authProfile} />
+                                <MemberSkillsInfo
+                                    profile={props.profile}
+                                    authProfile={props.authProfile}
+                                    refreshProfile={props.refreshProfile}
+                                />
                             </div>
                         </div>
 

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

@@ -95,11 +95,10 @@ const OpenForGigsModifyModal: FC<OpenForGigsModifyModalProps> = (props: OpenForG
         >
             <div className={styles.modalBody}>
                 <p>
-                    Currently
-                    {openForWork ? ' ' : ' not '}
-                    available for work.
-                    Get found in search results when potential clients look for services
-                    and them reach out to you for free.
+                    {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.`}
                 </p>
                 <FormToggleSwitch
                     name='openForWork'

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

@@ -9,7 +9,7 @@
 
     .photoWrap {
         position: relative;
-        margin-right: $sp-13;
+        margin-right: 60px;
 
         .verifiedBadge {
             position: absolute;

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

@@ -14,6 +14,7 @@ import styles from './MemberSkillsInfo.module.scss'
 interface MemberSkillsInfoProps {
     profile: UserProfile
     authProfile: UserProfile | undefined
+    refreshProfile: (handle: string) => void
 }
 
 const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProps) => {
@@ -47,6 +48,13 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
         setIsEditMode(false)
     }
 
+    function handleModyfSkillsSave(): void {
+        setTimeout(() => {
+            setIsEditMode(false)
+            props.refreshProfile(props.profile.handle)
+        }, 1500)
+    }
+
     return memberEMSISkills ? (
         <div className={styles.container}>
             <div className={styles.titleWrap}>
@@ -98,8 +106,8 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
             {
                 isEditMode && (
                     <ModifySkillsModal
-                        // profile={props.profile}
                         onClose={handleModyfSkillsModalClose}
+                        onSave={handleModyfSkillsSave}
                     />
                 )
             }

src/apps/profiles/src/member-profile/skills/ModifySkillsModal/ModifySkillsModal.module.scss

@@ -3,10 +3,29 @@
 .container {
     display: flex;
     flex-direction: column;
+
+    :global(.body-main-bold) {
+        font-size: 20px;
+        margin-bottom: $sp-2;
+    }
+
+    .skillPicker {
+        margin-top: $sp-4;
+    }
 }
 
 .modalButtons {
     display: flex;
     justify-content: space-between;
     width: 100%;
 }
+
+.skillsModal {
+    @include gtemd {
+        overflow: visible !important;
+    }
+}
+
+.skillsModalBody {
+    overflow: visible !important;
+}

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

@@ -1,25 +1,42 @@
 import { Dispatch, FC, SetStateAction, useState } from 'react'
+import { toast } from 'react-toastify'
 
-// import { UserProfile } from '~/libs/core'
 import { BaseModal, Button } from '~/libs/ui'
+import { MemberSkillEditor, useMemberSkillEditor } from '~/libs/shared'
 
 import styles from './ModifySkillsModal.module.scss'
 
 interface ModifySkillsModalProps {
-    // profile: UserProfile
     onClose: () => void
+    onSave: () => void
 }
 
 const ModifySkillsModal: FC<ModifySkillsModalProps> = (props: ModifySkillsModalProps) => {
     const [isSaving, setIsSaving]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
+    const { formInput: emsiFormInput, saveSkills: saveEmsiSkills }: MemberSkillEditor = useMemberSkillEditor()
+
     function handleModifySkillsSave(): void {
         setIsSaving(true)
+
+        saveEmsiSkills()
+            .then(() => {
+                toast.success('Skills updated successfully.', { position: toast.POSITION.BOTTOM_RIGHT })
+                props.onSave()
+            })
+            .catch(() => {
+                toast.error('Failed to update your skills.', { position: toast.POSITION.BOTTOM_RIGHT })
+                setIsSaving(false)
+            })
     }
 
     return (
         <BaseModal
+            bodyClassName={styles.skillsModalBody}
+            classNames={{
+                modal: styles.skillsModal,
+            }}
             onClose={props.onClose}
             open
             size='lg'
@@ -39,7 +56,17 @@ const ModifySkillsModal: FC<ModifySkillsModalProps> = (props: ModifySkillsModalP
                     />
                 </div>
             )}
-        />
+        >
+            <div className={styles.container}>
+                <p className='body-main-bold'>What are your skills?</p>
+                <p>
+                    Understanding your skills will allow us to connect you to the right opportunities.
+                </p>
+                <div className={styles.skillPicker}>
+                    {emsiFormInput}
+                </div>
+            </div>
+        </BaseModal>
     )
 }
 

src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.tsx

@@ -214,7 +214,7 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
             onClose={props.onClose}
             open
             size='lg'
-            title='Work Experience'
+            title='Experience'
             buttons={(
                 <div className={styles.modalButtons}>
                     <Button
@@ -336,7 +336,7 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
                     </div>
                     <InputText
                         name='currentlyWorking'
-                        label='I am currently working in this role'
+                        label='I am currently in this role'
                         error={formErrors.currentlyWorking}
                         dirty
                         tabIndex={-1}
@@ -348,7 +348,7 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
                         {editedItemIndex === undefined ? <IconOutline.PlusCircleIcon /> : undefined}
                         <Button
                             link
-                            label={`${editedItemIndex !== undefined ? 'Edit' : 'Add'} Job to your List`}
+                            label={`${editedItemIndex !== undefined ? 'Edit' : 'Add another'} experience to your List`}
                             onClick={handleFormAction}
                         />
                         {editedItemIndex !== undefined && (

src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.module.scss

@@ -47,6 +47,7 @@
         select {
             border: none;
             background-color: transparent;
+            margin: auto;
 
             option:hover {
                 background-color: $turq-160;

src/libs/ui/lib/components/form/form-groups/form-input/input-date-picker/InputDatePicker.tsx

@@ -60,9 +60,13 @@ const InputDatePicker: FC<InputDatePickerProps> = (props: InputDatePickerProps)
     }: any): JSX.Element {
         return (
             <div className={styles.headerWrap}>
-                <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled} type='button'>
-                    <IconOutline.ArrowCircleLeftIcon />
-                </button>
+                {
+                    props.showMonthPicker !== false && (
+                        <button onClick={decreaseMonth} disabled={prevMonthButtonDisabled} type='button'>
+                            <IconOutline.ArrowCircleLeftIcon />
+                        </button>
+                    )
+                }
 
                 {
                     props.showMonthPicker !== false && (
@@ -90,9 +94,13 @@ const InputDatePicker: FC<InputDatePickerProps> = (props: InputDatePickerProps)
                     ))}
                 </select>
 
-                <button onClick={increaseMonth} disabled={nextMonthButtonDisabled} type='button'>
-                    <IconOutline.ArrowCircleRightIcon />
-                </button>
+                {
+                    props.showMonthPicker !== false && (
+                        <button onClick={increaseMonth} disabled={nextMonthButtonDisabled} type='button'>
+                            <IconOutline.ArrowCircleRightIcon />
+                        </button>
+                    )
+                }
             </div>
         )
     }