TAL - search results page updates

Author: vas3a

src/apps/talent-search/src/components/search-input/SearchInput.tsx

@@ -6,6 +6,7 @@ import { EmsiSkill, EmsiSkillSources, InputSkillSelector, Skill } from '~/libs/s
 import styles from './SearchInput.module.scss'
 
 interface SearchInputProps {
+    className?: string
     readonly autoFocus?: boolean
     onChange: (skills: Skill[]) => void
     skills: Skill[]
@@ -29,6 +30,7 @@ const SearchInput: FC<SearchInputProps> = props => {
 
     return (
         <InputSkillSelector
+            className={props.className}
             autoFocus={props.autoFocus}
             placeholder='Enter skills you are searching for...'
             useWrapper={false}

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

@@ -1,9 +1,34 @@
 @import "@libs/ui/styles/includes";
 
+.headerWrap {
+    height: 156px;
+}
+
+.headerContentLayout {
+    height: 100%;
+    background-image: url("../../assets/background.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+    padding: 0 $sp-8;
+}
+
+.summaryText {
+    margin: $sp-4 0 $sp-5;
+    text-align: center;
+    color: $black-60;
+    > span {
+        color: $black-100;
+    }
+}
+
+.searchInput {
+    margin-top: $sp-10;
+}
 
 .contentLayout {
     background: $black-5;
-    padding: $sp-8;
+    padding: $sp-2;
+    position: relative;
 }
 
 .resultsWrap {

src/apps/talent-search/src/routes/search-results-page/SearchResultsPage.tsx

@@ -1,6 +1,7 @@
 import { FC, useCallback } from 'react'
+import classNames from 'classnames'
 
-import { ContentLayout } from '~/libs/ui'
+import { ContentLayout, LoadingSpinner } from '~/libs/ui'
 import { EmsiSkill } from '~/libs/shared'
 
 import { TalentCard } from '../../components/talent-card'
@@ -19,28 +20,42 @@ const SearchResultsPage: FC = () => {
     ), [skills])
 
     return (
-        <ContentLayout
-            contentClass={styles.contentLayout}
-            outerClass={styles['contentLayout-outer']}
-            innerClass={styles['contentLayout-inner']}
-        >
+        <>
             <div className={styles.headerWrap}>
-                <SearchInput
-                    skills={skills}
-                    onChange={setSkills}
-                />
-            </div>
-            <div className={styles.resultsWrap}>
-                {matches.map(member => (
-                    <TalentCard
-                        member={member}
-                        match={member.skillScore}
-                        key={member.userId}
-                        isMatchingSkill={isMatchingSkill}
+                <ContentLayout contentClass={styles.headerContentLayout}>
+                    <SearchInput
+                        className={styles.searchInput}
+                        skills={skills}
+                        onChange={setSkills}
                     />
-                ))}
+                </ContentLayout>
             </div>
-        </ContentLayout>
+            <ContentLayout
+                contentClass={styles.contentLayout}
+                outerClass={styles['contentLayout-outer']}
+                innerClass={styles['contentLayout-inner']}
+            >
+                <LoadingSpinner hide={!loading} />
+                <div className={classNames('body-medium-normal', styles.summaryText)}>
+                    We found&nbsp;
+                    <span className='body-medium-medium'>
+                        {matches.length}
+                        &nbsp;Experts
+                    </span>
+                    &nbsp;that match your search
+                </div>
+                <div className={styles.resultsWrap}>
+                    {matches.map(member => (
+                        <TalentCard
+                            member={member}
+                            match={member.skillScore}
+                            key={member.userId}
+                            isMatchingSkill={isMatchingSkill}
+                        />
+                    ))}
+                </div>
+            </ContentLayout>
+        </>
     )
 }
 

src/libs/shared/lib/components/input-skill-selector/InputSkillSelector.tsx

@@ -28,6 +28,7 @@ const fetchSkills = (queryTerm: string): Promise<Option[]> => (
 )
 
 interface InputSkillSelectorProps {
+    readonly className?: string
     readonly autoFocus?: boolean
     readonly limit?: number
     readonly label?: string
@@ -43,6 +44,7 @@ interface InputSkillSelectorProps {
 
 const InputSkillSelector: FC<InputSkillSelectorProps> = props => (
     <InputMultiselect
+        className={props.className}
         autoFocus={props.autoFocus}
         label={props.label ?? 'Select Skills'}
         limit={props.limit}

src/libs/ui/lib/components/form/form-groups/form-input/input-multiselect/InputMultiselect.tsx

@@ -25,6 +25,7 @@ export type InputMultiselectThemes = 'tc-green' | 'clear'
 
 export interface InputMultiselectProps {
     readonly autoFocus?: boolean
+    readonly className?: string
     readonly dirty?: boolean
     readonly disabled?: boolean
     readonly dropdownIcon?: ReactNode
@@ -93,6 +94,7 @@ const InputMultiselect: FC<InputMultiselectProps> = (props: InputMultiselectProp
         <AsyncSelect
             className={
                 classNames(
+                    props.className,
                     styles.multiselect,
                     styles[`theme-${props.theme ? props.theme : 'tc-green'}`],
                     props.useWrapper === false && styles.multiSelectWrap,