From abe40298f15bd32ac8a0d3691aa1d420354dee39 Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Fri, 14 Jul 2023 05:33:18 +0300
Subject: [PATCH 1/5] MP-235 TCO wins text

---
 .../TCOWinsBanner/TCOWinsBanner.tsx                | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/src/apps/profiles/src/member-profile/tc-achievements/TCOWinsBanner/TCOWinsBanner.tsx b/src/apps/profiles/src/member-profile/tc-achievements/TCOWinsBanner/TCOWinsBanner.tsx
index 4799cbcad..fdff02ec9 100644
--- a/src/apps/profiles/src/member-profile/tc-achievements/TCOWinsBanner/TCOWinsBanner.tsx
+++ b/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}>

From a026558a116bf7f6a83da1f9059ac06d019b8b0b Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Fri, 14 Jul 2023 06:39:10 +0300
Subject: [PATCH 2/5] MP-90 breakdown challenge wins per track - init

---
 src/apps/profiles/src/lib/helpers.ts          | 15 +++++
 .../ChallengeWinsBanner.module.scss           | 30 +++++----
 .../ChallengeWinsBanner.tsx                   | 63 +++++++++++++++++--
 .../tc-achievements/MemberTCAchievements.tsx  |  2 +-
 4 files changed, 90 insertions(+), 20 deletions(-)

diff --git a/src/apps/profiles/src/lib/helpers.ts b/src/apps/profiles/src/lib/helpers.ts
index bf8174b41..e79b1eeed 100644
--- a/src/apps/profiles/src/lib/helpers.ts
+++ b/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
+    }
+
+}
diff --git a/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.module.scss b/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.module.scss
index f2f4b666b..980c932df 100644
--- a/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.module.scss
+++ b/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;
+                }
+            }
         }
     }
 }
\ No newline at end of file
diff --git a/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.tsx b/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.tsx
index c73299211..70a5f34ea 100644
--- a/src/apps/profiles/src/member-profile/tc-achievements/ChallengeWinsBanner/ChallengeWinsBanner.tsx
+++ b/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
diff --git a/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.tsx b/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.tsx
index 63d09fc13..d70d700c7 100644
--- a/src/apps/profiles/src/member-profile/tc-achievements/MemberTCAchievements.tsx
+++ b/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}
                         />
                     )
                 }

From 031f9b5f7e9a02c7bb2d1a3da51fb59cb7f0597a Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Fri, 14 Jul 2023 07:00:40 +0300
Subject: [PATCH 3/5] MP-90 open for work modal

---
 .../OpenForGigsModifyModal.module.scss          |  7 +++++--
 .../OpenForGigsModifyModal.tsx                  | 17 +++++++++--------
 .../input-wrapper/InputWrapper.module.scss      |  4 ++++
 3 files changed, 18 insertions(+), 10 deletions(-)

diff --git a/src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.module.scss b/src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.module.scss
index 64ef21e82..136ab5fa3 100644
--- a/src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.module.scss
+++ b/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;
+    }
 }
\ No newline at end of file
diff --git a/src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.tsx b/src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.tsx
index a3a7ef3ec..484a38865 100644
--- a/src/apps/profiles/src/member-profile/profile-header/OpenForGigsModifyModal/OpenForGigsModifyModal.tsx
+++ b/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>
diff --git a/src/libs/ui/lib/components/form/form-groups/form-input/input-wrapper/InputWrapper.module.scss b/src/libs/ui/lib/components/form/form-groups/form-input/input-wrapper/InputWrapper.module.scss
index 9f1c2bce2..4be07ad1d 100644
--- a/src/libs/ui/lib/components/form/form-groups/form-input/input-wrapper/InputWrapper.module.scss
+++ b/src/libs/ui/lib/components/form/form-groups/form-input/input-wrapper/InputWrapper.module.scss
@@ -45,9 +45,13 @@ $error-line-height: 14px;
             display: flex;
             flex-direction: row;
             align-items: center;
+
             .checkbox-label {
                 margin-left: $sp-2;
                 flex: 1;
+                font-size: 16px;
+                font-weight: $font-weight-normal;
+                line-height: 24px;
             }
         }
     }

From f66f06043268dd0da6654b9021787c4eafea14be Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Fri, 14 Jul 2023 08:14:35 +0300
Subject: [PATCH 4/5] MP-90 jobs modal new UI

---
 .../ModifyWorkExpirenceModal.module.scss      |  33 +--
 .../ModifyWorkExpirenceModal.tsx              | 258 +++++++++---------
 .../WorkExpirenceCard.module.scss             |  17 ++
 .../WorkExpirenceCard/WorkExpirenceCard.tsx   |   4 +-
 4 files changed, 167 insertions(+), 145 deletions(-)

diff --git a/src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.module.scss b/src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.module.scss
index c023ea685..c210934ca 100644
--- a/src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.module.scss
+++ b/src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.module.scss
@@ -3,9 +3,14 @@
 .container {
     display: flex;
     flex-direction: column;
+    align-items: flex-start;
 
     .workExpirenceWrap {
-        margin-bottom: $sp-8;
+        margin: $sp-8 0;
+        display: grid;
+        grid-template-columns: 1fr 1fr;
+        gap: $sp-4;
+        width: 100%;
 
         &.noItems {
             margin-bottom: 0;
@@ -13,7 +18,10 @@
 
         .workExpirenceCardWrap {
             display: flex;
-            align-items: center;
+            align-items: flex-start;
+            border: 1px solid $black-20;
+            border-radius: 8px;
+            padding: $sp-4;
 
             .actionElements {
                 display: flex;
@@ -22,6 +30,7 @@
 
                 :global(button) {
                     padding: $sp-2;
+                    color: $turq-160;
 
                     @include ltelg {
                         padding: $sp-1;
@@ -29,8 +38,8 @@
                 }
 
                 svg {
-                    width: 20px;
-                    height: 20px;
+                    width: 24px;
+                    height: 24px;
                 }
             }
         }
@@ -60,27 +69,13 @@
 
     .formWrap {
         margin-top: $sp-4;
+        width: 100%;
 
         @include ltelg {
             :global(.input-wrapper) {
                 margin-bottom: $sp-2;
             }
         }
-
-        .formCTAs {
-            display: flex;
-            align-items: center;
-
-            svg {
-                width: 14px;
-                height: 14px;
-                margin-right: $sp-1;
-            }
-
-            .ctaBtnCancel {
-                margin-left: $sp-8;
-            }
-        }
     }
 }
 
diff --git a/src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.tsx b/src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.tsx
index 901d652a8..b5f9bce56 100644
--- a/src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.tsx
+++ b/src/apps/profiles/src/member-profile/work-expirence/ModifyWorkExpirenceModal/ModifyWorkExpirenceModal.tsx
@@ -33,8 +33,8 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
     const [isSaving, setIsSaving]: [boolean, Dispatch<SetStateAction<boolean>>]
         = useState<boolean>(false)
 
-    const [isFormChanged, setIsFormChanged]: [boolean, Dispatch<SetStateAction<boolean>>]
-        = useState<boolean>(false)
+    const [addingNewItem, setAddingNewItem]: [boolean, Dispatch<SetStateAction<boolean>>]
+        = useState<boolean>(props.workExpirence?.length === 0 || false)
 
     const [formValues, setFormValues]: [
         { [key: string]: string | boolean | Date | undefined },
@@ -62,6 +62,12 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
         = useState<UserTrait[] | undefined>(props.workExpirence)
 
     function handleModifyWorkExpirenceSave(): void {
+        if (addingNewItem || editedItemIndex !== undefined) {
+            handleFormAction()
+
+            return
+        }
+
         setIsSaving(true)
 
         methodsMap[!!props.workExpirence ? 'update' : 'create'](props.profile.handle, [{
@@ -108,15 +114,12 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
         })
     }
 
-    function handleCancelEditMode(): void {
-        setEditedItemIndex(undefined)
-        resetForm()
-    }
-
     function resetForm(): void {
         setFormValues({})
+        setFormErrors({})
         formElRef.current.reset()
         setEditedItemIndex(undefined)
+        setAddingNewItem(false)
     }
 
     function handleFormAction(): void {
@@ -181,7 +184,6 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
             )
         }
 
-        setIsFormChanged(true)
         resetForm()
     }
 
@@ -206,7 +208,20 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
 
         updatedWorkExpirence.splice(indx, 1)
         setWorkExpirence(updatedWorkExpirence)
-        setIsFormChanged(true)
+    }
+
+    function handleAddNewItem(): void {
+        setAddingNewItem(true)
+    }
+
+    function handleModifyWorkExpirenceCancel(): void {
+        if (addingNewItem || editedItemIndex !== undefined) {
+            setAddingNewItem(false)
+            setEditedItemIndex(undefined)
+            resetForm()
+        } else {
+            props.onClose()
+        }
     }
 
     return (
@@ -219,148 +234,141 @@ const ModifyWorkExpirenceModal: FC<ModifyWorkExpirenceModalProps> = (props: Modi
                 <div className={styles.modalButtons}>
                     <Button
                         label='Cancel'
-                        onClick={props.onClose}
+                        onClick={handleModifyWorkExpirenceCancel}
                         secondary
                     />
                     <Button
                         label='Save'
                         onClick={handleModifyWorkExpirenceSave}
                         primary
-                        disabled={isSaving || !isFormChanged}
+                        disabled={isSaving}
                     />
                 </div>
             )}
         >
             <div className={styles.container}>
-                <div className={classNames(styles.workExpirenceWrap, !workExpirence?.length ? styles.noItems : '')}>
-                    {
-                        workExpirence?.map((work: UserTrait, indx: number) => (
-                            <div
-                                className={styles.workExpirenceCardWrap}
-                                key={`${work.company}-${work.industry}-${work.position}`}
-                            >
-                                <WorkExpirenceCard work={work} />
-                                <div className={styles.actionElements}>
-                                    <Button
-                                        className={styles.ctaBtn}
-                                        icon={IconOutline.PencilIcon}
-                                        onClick={bind(handleWorkExpirenceEdit, this, indx)}
-                                        size='lg'
-                                    />
-                                    <Button
-                                        className={styles.ctaBtn}
-                                        icon={IconOutline.TrashIcon}
-                                        onClick={bind(handleWorkExpirenceDelete, this, indx)}
-                                        size='lg'
-                                    />
-                                </div>
-                            </div>
-                        ))
-                    }
-                </div>
-
                 <p>
-                    Enter your work experience to show customers
-                    the roles and responsibilites you have held in the past.
+                    Add experience that demonstrate your skills and abilities.
                 </p>
 
-                <form
-                    ref={formElRef}
-                    className={styles.formWrap}
-                >
-                    <InputText
-                        name='company'
-                        label='Company *'
-                        error={formErrors.company}
-                        placeholder='Enter a company'
-                        dirty
-                        tabIndex={0}
-                        type='text'
-                        onChange={bind(handleFormValueChange, this, 'company')}
-                        value={formValues.company as string}
-                    />
-                    <InputText
-                        name='position'
-                        label='Position *'
-                        error={formErrors.position}
-                        placeholder='Enter a position'
-                        dirty
-                        tabIndex={-1}
-                        type='text'
-                        onChange={bind(handleFormValueChange, this, 'position')}
-                        value={formValues.position as string}
-                    />
-                    <div className={styles.row}>
+                {editedItemIndex === undefined && !addingNewItem ? (
+                    <div className={classNames(styles.workExpirenceWrap, !workExpirence?.length ? styles.noItems : '')}>
+                        {
+                            workExpirence?.map((work: UserTrait, indx: number) => (
+                                <div
+                                    className={styles.workExpirenceCardWrap}
+                                    key={`${work.company}-${work.industry}-${work.position}`}
+                                >
+                                    <WorkExpirenceCard work={work} isModalView />
+                                    <div className={styles.actionElements}>
+                                        <Button
+                                            className={styles.ctaBtn}
+                                            icon={IconOutline.PencilIcon}
+                                            onClick={bind(handleWorkExpirenceEdit, this, indx)}
+                                            size='lg'
+                                        />
+                                        <Button
+                                            className={styles.ctaBtn}
+                                            icon={IconOutline.TrashIcon}
+                                            onClick={bind(handleWorkExpirenceDelete, this, indx)}
+                                            size='lg'
+                                        />
+                                    </div>
+                                </div>
+                            ))
+                        }
+                    </div>
+                ) : undefined}
+
+                {editedItemIndex !== undefined || addingNewItem ? (
+                    <form
+                        ref={formElRef}
+                        className={styles.formWrap}
+                    >
                         <InputText
-                            name='industry'
-                            label='Industry'
-                            error={formErrors.industry}
-                            placeholder='Enter an industry'
+                            name='company'
+                            label='Company *'
+                            error={formErrors.company}
+                            placeholder='Enter a company'
                             dirty
-                            tabIndex={-1}
+                            tabIndex={0}
                             type='text'
-                            onChange={bind(handleFormValueChange, this, 'industry')}
-                            value={formValues.industry as string}
+                            onChange={bind(handleFormValueChange, this, 'company')}
+                            value={formValues.company as string}
                         />
                         <InputText
-                            name='city'
-                            label='City'
-                            error={formErrors.city}
-                            placeholder='Enter a city'
+                            name='position'
+                            label='Position *'
+                            error={formErrors.position}
+                            placeholder='Enter a position'
                             dirty
                             tabIndex={-1}
                             type='text'
-                            onChange={bind(handleFormValueChange, this, 'city')}
-                            value={formValues.city as string}
+                            onChange={bind(handleFormValueChange, this, 'position')}
+                            value={formValues.position as string}
                         />
-                    </div>
-                    <div className={styles.row}>
-                        <InputDatePicker
-                            label='Start Date'
-                            date={formValues.startDate as Date}
-                            onChange={bind(handleFormValueChange, this, 'startDate')}
-                            disabled={false}
-                            error={formErrors.startDate}
-                            dirty
-                            maxDate={new Date()}
-                        />
-                        <InputDatePicker
-                            label='End Date'
-                            date={formValues.endDate as Date}
-                            onChange={bind(handleFormValueChange, this, 'endDate')}
-                            disabled={formValues.currentlyWorking as boolean}
-                            error={formErrors.endDate}
+                        <div className={styles.row}>
+                            <InputText
+                                name='industry'
+                                label='Industry'
+                                error={formErrors.industry}
+                                placeholder='Enter an industry'
+                                dirty
+                                tabIndex={-1}
+                                type='text'
+                                onChange={bind(handleFormValueChange, this, 'industry')}
+                                value={formValues.industry as string}
+                            />
+                            <InputText
+                                name='city'
+                                label='City'
+                                error={formErrors.city}
+                                placeholder='Enter a city'
+                                dirty
+                                tabIndex={-1}
+                                type='text'
+                                onChange={bind(handleFormValueChange, this, 'city')}
+                                value={formValues.city as string}
+                            />
+                        </div>
+                        <div className={styles.row}>
+                            <InputDatePicker
+                                label='Start Date'
+                                date={formValues.startDate as Date}
+                                onChange={bind(handleFormValueChange, this, 'startDate')}
+                                disabled={false}
+                                error={formErrors.startDate}
+                                dirty
+                                maxDate={new Date()}
+                            />
+                            <InputDatePicker
+                                label='End Date'
+                                date={formValues.endDate as Date}
+                                onChange={bind(handleFormValueChange, this, 'endDate')}
+                                disabled={formValues.currentlyWorking as boolean}
+                                error={formErrors.endDate}
+                                dirty
+                                maxDate={new Date()}
+                            />
+                        </div>
+                        <InputText
+                            name='currentlyWorking'
+                            label='I am currently in this role'
+                            error={formErrors.currentlyWorking}
                             dirty
-                            maxDate={new Date()}
+                            tabIndex={-1}
+                            type='checkbox'
+                            onChange={bind(handleFormValueChange, this, 'currentlyWorking')}
+                            checked={formValues.currentlyWorking as boolean}
                         />
-                    </div>
-                    <InputText
-                        name='currentlyWorking'
-                        label='I am currently in this role'
-                        error={formErrors.currentlyWorking}
-                        dirty
-                        tabIndex={-1}
-                        type='checkbox'
-                        onChange={bind(handleFormValueChange, this, 'currentlyWorking')}
-                        checked={formValues.currentlyWorking as boolean}
+                    </form>
+                ) : (
+                    <Button
+                        label='+ Add experience'
+                        secondary
+                        onClick={handleAddNewItem}
                     />
-                    <div className={styles.formCTAs}>
-                        {editedItemIndex === undefined ? <IconOutline.PlusCircleIcon /> : undefined}
-                        <Button
-                            link
-                            label={`${editedItemIndex !== undefined ? 'Edit' : 'Add another'} experience to your List`}
-                            onClick={handleFormAction}
-                        />
-                        {editedItemIndex !== undefined && (
-                            <Button
-                                className={styles.ctaBtnCancel}
-                                link
-                                label='Cancel'
-                                onClick={handleCancelEditMode}
-                            />
-                        )}
-                    </div>
-                </form>
+                )}
             </div>
         </BaseModal>
     )
diff --git a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.module.scss b/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.module.scss
index c5a7e7c3f..1041b4108 100644
--- a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.module.scss
+++ b/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.module.scss
@@ -2,6 +2,23 @@
 
 .workExpirenceCard {
     flex: 1;
+    margin-bottom: $sp-8;
+
+    &.workExpirenceCardModalView {
+        margin-bottom: 0;
+
+        .workExpirenceCardHeader {
+            flex-direction: column;
+            align-items: flex-start;
+            justify-content: flex-start;
+            font-size: 14px;
+            line-height: 22px;
+
+            :global(.body-main-bold) {
+                margin-bottom: $sp-2;
+            }
+        }    
+    }
 
     .workExpirenceCardHeader {
         display: flex;
diff --git a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.tsx b/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.tsx
index 2d11fc9d9..1f6ff04f0 100644
--- a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.tsx
+++ b/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.tsx
@@ -1,4 +1,5 @@
 import { FC } from 'react'
+import classNames from 'classnames'
 import moment from 'moment'
 
 import { UserTrait } from '~/libs/core'
@@ -7,10 +8,11 @@ import styles from './WorkExpirenceCard.module.scss'
 
 interface WorkExpirenceCardProps {
     work: UserTrait
+    isModalView?: boolean
 }
 
 const WorkExpirenceCard: FC<WorkExpirenceCardProps> = (props: WorkExpirenceCardProps) => (
-    <div className={styles.workExpirenceCard}>
+    <div className={classNames(styles.workExpirenceCard, props.isModalView ? styles.workExpirenceCardModalView : '')}>
         <div className={styles.workExpirenceCardHeader}>
             <div className={styles.workExpirenceCardHeaderLeft}>
                 <p className='body-main-bold'>

From 0ef250f0921b43b1b52761820610ed2ffa03766e Mon Sep 17 00:00:00 2001
From: Kiril Kartunov <kiril.kartunov@gmail.com>
Date: Fri, 14 Jul 2023 08:37:29 +0300
Subject: [PATCH 5/5] MP-90 style updates Figma

---
 .../EditMemberPropertyBtn.module.scss         |  8 +++--
 .../EditMemberPropertyBtn.tsx                 |  1 +
 .../EducationAndCertifications.module.scss    |  1 +
 .../languages/MemberLanguages.module.scss     |  2 +-
 .../links/MemberLinks.module.scss             |  2 +-
 .../profile-header/ProfileHeader.module.scss  | 30 ++++---------------
 .../profile-header/ProfileHeader.tsx          | 22 +-------------
 .../work-expirence/WorkExpirence.module.scss  |  1 +
 .../WorkExpirenceCard.module.scss             | 13 +++++---
 9 files changed, 26 insertions(+), 54 deletions(-)

diff --git a/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.module.scss b/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.module.scss
index d03cd08ea..8b0a09cea 100644
--- a/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.module.scss
+++ b/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;
     }
 }
diff --git a/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx b/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx
index 944f39bb1..23268d405 100644
--- a/src/apps/profiles/src/components/EditMemberPropertyBtn/EditMemberPropertyBtn.tsx
+++ b/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'
     />
 )
 
diff --git a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss b/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss
index fc75861eb..6765d5229 100644
--- a/src/apps/profiles/src/member-profile/education-and-certifications/EducationAndCertifications.module.scss
+++ b/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 {
diff --git a/src/apps/profiles/src/member-profile/languages/MemberLanguages.module.scss b/src/apps/profiles/src/member-profile/languages/MemberLanguages.module.scss
index 2d6ed23b1..04401342d 100644
--- a/src/apps/profiles/src/member-profile/languages/MemberLanguages.module.scss
+++ b/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;
     }
 
diff --git a/src/apps/profiles/src/member-profile/links/MemberLinks.module.scss b/src/apps/profiles/src/member-profile/links/MemberLinks.module.scss
index db3f852a2..a05ca8729 100644
--- a/src/apps/profiles/src/member-profile/links/MemberLinks.module.scss
+++ b/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;
     }
 
diff --git a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss
index 6b474d08d..7aad93ec5 100644
--- a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.module.scss
+++ b/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%;
         }
     }
 
diff --git a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx b/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
index 489ed5d2a..cdb97e6f7 100644
--- a/src/apps/profiles/src/member-profile/profile-header/ProfileHeader.tsx
+++ b/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
diff --git a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.module.scss b/src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.module.scss
index feb7789b1..27fbcc2c6 100644
--- a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.module.scss
+++ b/src/apps/profiles/src/member-profile/work-expirence/WorkExpirence.module.scss
@@ -7,6 +7,7 @@
     .headerWrap {
         display: flex;
         align-items: center;
+        justify-content: space-between;
         margin-bottom: $sp-4;
 
         h3 {
diff --git a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.module.scss b/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.module.scss
index 1041b4108..9b89cf087 100644
--- a/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.module.scss
+++ b/src/apps/profiles/src/member-profile/work-expirence/WorkExpirenceCard/WorkExpirenceCard.module.scss
@@ -3,6 +3,13 @@
 .workExpirenceCard {
     flex: 1;
     margin-bottom: $sp-8;
+    font-size: 14px;
+    line-height: 22px;
+    color: $black-60;
+
+    :global(.body-main-bold) {
+        color: $black-100;
+    }
 
     &.workExpirenceCardModalView {
         margin-bottom: 0;
@@ -11,13 +18,11 @@
             flex-direction: column;
             align-items: flex-start;
             justify-content: flex-start;
-            font-size: 14px;
-            line-height: 22px;
 
             :global(.body-main-bold) {
                 margin-bottom: $sp-2;
             }
-        }    
+        }
     }
 
     .workExpirenceCardHeader {
@@ -25,4 +30,4 @@
         justify-content: space-between;
         align-items: flex-end;
     }
-}
+}
\ No newline at end of file