TAL-37 search cards view update

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

@@ -3,15 +3,14 @@ import { useSearchParams } from 'react-router-dom'
 import { orderBy } from 'lodash'
 
 import { UserEMSISkill, UserProfile } from '~/libs/core'
-import { ExpandableList, isSkillVerified, Skill, SkillPill } from '~/libs/shared'
+import { ExpandableList, HowSkillsWorkModal, isSkillVerified, Skill, SkillPill } from '~/libs/shared'
 import { Button } from '~/libs/ui'
 
 import { AddButton, EditMemberPropertyBtn, EmptySection } from '../../components'
 import { EDIT_MODE_QUERY_PARAM, profileEditModes } from '../../config'
 import { MemberProfileContextValue, useMemberProfileContext } from '../MemberProfile.context'
 
 import { ModifySkillsModal } from './ModifySkillsModal'
-import { HowSkillsWorkModal } from './HowSkillsWorkModal'
 import styles from './MemberSkillsInfo.module.scss'
 
 interface MemberSkillsInfoProps {
@@ -141,7 +140,7 @@ const MemberSkillsInfo: FC<MemberSkillsInfoProps> = (props: MemberSkillsInfoProp
                     <HowSkillsWorkModal
                         onClose={handleHowSkillsWorkClose}
                         isTalentSearch={isTalentSearch}
-                        canEdit={canEdit}
+                        iseSelfView={canEdit}
                     />
                 )
             }

src/apps/talent-search/src/components/match-bar/MatchBar.module.scss → src/apps/talent-search/src/components/profile-match/ProfileMatch.module.scss

@@ -5,12 +5,13 @@
     align-items: center;
     justify-content: center;
     color: $tc-white;
-    font-family: $font-barlow;
-
-    gap: $sp-2;
+    font-family: $font-roboto;
+    flex-direction: column;
 
     border-radius: 100px;
     padding-bottom: 2px;
+    width: 100%;
+    aspect-ratio: 1 / 1;
 
     background: rgb(130,234,207);
     background: linear-gradient(
@@ -26,13 +27,17 @@
     background-size: 100% 3000px;
     background-position: 0 0;
 
+    font-size: 16px;
+    line-height: 26px;
+    font-weight: $font-weight-bold;
+
     &:global(.dark) {
         color: $black-100;
     }
 
     strong {
-        font-size: 26px;
-        font-weight: $font-weight-medium;
-        line-height: $sp-8;
+        font-size: 23px;
+        line-height: 27px;
+        font-weight: 900;
     }
 }

src/apps/talent-search/src/components/match-bar/MatchBar.tsx → src/apps/talent-search/src/components/profile-match/ProfileMatch.tsx

@@ -1,14 +1,14 @@
 import { FC } from 'react'
 import classNames from 'classnames'
 
-import styles from './MatchBar.module.scss'
+import styles from './ProfileMatch.module.scss'
 
-interface MatchBarProps {
+interface ProfileMatchProps {
     className?: string
     percent?: number
 }
 
-const MatchBar: FC<MatchBarProps> = props => {
+const ProfileMatch: FC<ProfileMatchProps> = props => {
     const value = Math.round((props.percent ?? 0) * 100)
 
     return (
@@ -25,4 +25,4 @@ const MatchBar: FC<MatchBarProps> = props => {
     )
 }
 
-export default MatchBar
+export default ProfileMatch

src/apps/talent-search/src/components/profile-match/index.ts

@@ -0,0 +1 @@
+export { default as ProfileMatch } from './ProfileMatch'

src/apps/talent-search/src/components/talent-card/TalentCard.module.scss

@@ -1,7 +1,7 @@
 @import "@libs/ui/styles/includes";
 
 .wrap {
-    padding: $sp-55 $sp-8;
+    padding: $sp-6;
     border-radius: $sp-4;
 
     background: $tc-white;
@@ -12,20 +12,20 @@
 
 .topWrap {
     display: flex;
-    gap: $sp-10;
+    gap: $sp-6;
 }
 
 .profilePic {
-    width: 200px;
-    max-width: 200px;
+    width: 188px;
+    max-width: 188px;
 }
 
 .detailsContainer {
     flex: 1 1 auto;
 
-    padding: $sp-5 $sp-45 $sp-45 0;
+    padding: $sp-5 0 $sp-45;
     display: flex;
-    flex-direction: column;
+    gap: $sp-4;
 }
 
 .talentInfo {
@@ -34,6 +34,7 @@
     align-items: flex-start;
     gap: $sp-3;
     margin-bottom: $sp-45;
+    flex: 1 1 auto;
 
     &Name {
         font-size: 30px;
@@ -55,9 +56,9 @@
 
 }
 
-.matchBar {
-    max-width: 330px;
-    margin-top: auto;
+.profileMatch {
+    width: 83px;
+    flex: 0 0 auto;
 }
 
 .skillsContainer {

src/apps/talent-search/src/components/talent-card/TalentCard.tsx

@@ -7,7 +7,7 @@ import codes from 'country-calling-code'
 import { IconSolid } from '~/libs/ui'
 import { isSkillVerified, ProfilePicture, Skill, SkillPill } from '~/libs/shared'
 
-import { MatchBar } from '../match-bar'
+import { ProfileMatch } from '../profile-match'
 import { Member } from '../../lib/models'
 import { TALENT_SEARCH_PATHS } from '../../talent-search.routes'
 import { useIsMatchingSkill } from '../../lib/utils'
@@ -35,20 +35,20 @@ const TalentCard: FC<TalentCardProps> = props => {
 
     const matchedSkills = orderBy(
         props.member.emsiSkills,
-        isSkillVerified,
-        'desc',
+        [isSkillVerified, a => a.name],
+        ['desc', 'asc'],
     )
         .filter(isMatchingSkill)
 
-    const limitMatchedSkills = matchedSkills.slice(0, 10)
+    const limitMatchedSkills = matchedSkills.slice(0, 7)
 
     const provenSkills = limitMatchedSkills.filter(isSkillVerified)
     const selfSkills = limitMatchedSkills.filter(s => !isSkillVerified(s))
     const restSkills = matchedSkills.length - limitMatchedSkills.length
 
     const restLabel = restSkills > 0 && (
         <div className={styles.unmatchedSkills}>
-            {`+${restSkills} more skill${restSkills > 1 ? 's' : ''}`}
+            {`+${restSkills} more matched skill${restSkills > 1 ? 's' : ''}`}
         </div>
     )
 
@@ -85,41 +85,32 @@ const TalentCard: FC<TalentCardProps> = props => {
                             </div>
                         ))}
                     </div>
-                    <MatchBar className={styles.matchBar} percent={props.match} />
+                    <div className={styles.profileMatch}>
+                        <ProfileMatch percent={props.match} />
+                    </div>
                 </div>
             </div>
             <div className={styles.skillsContainer}>
-                <div className={classNames(styles.skillsContainerTitle, 'overline')}>Matched skills</div>
-                {provenSkills.length > 0 && (
-                    <>
-                        <div className='overline'>Proven skills</div>
-                        <div className={styles.skillsWrap}>
-                            {provenSkills.map(skill => (
-                                <SkillPill
-                                    key={skill.skillId}
-                                    theme='dark'
-                                    skill={skill}
-                                />
-                            ))}
-                            {!selfSkills.length && restLabel}
-                        </div>
-                    </>
-                )}
-                {selfSkills.length > 0 && (
-                    <>
-                        <div className='overline'>Self-selected skills</div>
-                        <div className={styles.skillsWrap}>
-                            {selfSkills.map(skill => (
-                                <SkillPill
-                                    key={skill.skillId}
-                                    theme='dark'
-                                    skill={skill}
-                                />
-                            ))}
-                            {restLabel}
-                        </div>
-                    </>
-                )}
+                <div className={classNames(styles.skillsContainerTitle, 'overline')}>
+                    {`${matchedSkills.length} Matched skills`}
+                </div>
+                <div className={styles.skillsWrap}>
+                    {provenSkills.length > 0 && provenSkills.map(skill => (
+                        <SkillPill
+                            key={skill.skillId}
+                            theme='dark'
+                            skill={skill}
+                        />
+                    ))}
+                    {selfSkills.length > 0 && selfSkills.map(skill => (
+                        <SkillPill
+                            key={skill.skillId}
+                            theme='dark'
+                            skill={skill}
+                        />
+                    ))}
+                    {restLabel}
+                </div>
             </div>
         </Link>
     )

src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.module.scss

@@ -21,11 +21,32 @@
     margin: $sp-4 0 $sp-5;
     text-align: center;
     color: $black-60;
+
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
     > span {
+        display: block;
+        margin: 0 auto;
+        flex: 1 1 auto;
+    }
+
+    :global(.highlighting) {
         color: $black-100;
     }
 }
 
+.skillsPill {
+    flex: 0 0 auto;
+
+    &:first-child {
+        opacity: 0;
+        visibility: hidden;
+        pointer-events: none;
+    }
+}
+
 .searchInput {
     margin-top: $sp-10;
 }