MP-90 style updates Figma

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/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/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/work-expirence/WorkExpirence.module.scss

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

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,18 +18,16 @@
             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;
         justify-content: space-between;
         align-items: flex-end;
     }
-}
+}