Updates & cleanup in the talent search app

Author: vas3a

src/apps/talent-search/src/routes/talent-search/TalentSearch.module.scss

@@ -1,96 +1,90 @@
-@import '@talentSearch/styles/variables';
+@import "@libs/ui/styles/includes";
 
 .contentLayout {
-  width: 100%;
-  padding-top: 30px;
-  background-image: url("../../assets/background.png");
-  background-size: cover;
-  background-repeat: no-repeat;
-
-  .contentLayout-outer {
-    width: 100%;
+    background-image: url("../../assets/background.png");
+    background-size: cover;
+    background-repeat: no-repeat;
+}
 
-    .contentLayout-inner {
-      width: 100%;
-      padding: 86px 48px 48px 48px;
-      overflow: visible;
-    }
-  }
+.contentLayout-inner {
+    padding: 86px 48px 48px 48px;
+    color: $tc-white;
 }
 
 .popularSkillsContainer{
-  margin-top: 16px;
-  margin-left: auto;
-  margin-right: auto;
-  text-align: center;
+    margin-top: 16px;
+    margin-left: auto;
+    margin-right: auto;
+    text-align: center;
+
+    :global(.body-medium-bold) {
+        margin-bottom: $sp-4;
+    }
 }
 
 .pillRow{
-  margin-top: 20px;
-  width:100%;
-  margin-left:auto;
-  margin-right:auto;
-}
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: $sp-2;
 
-.popularSkillsTitle{
-  font-family: $font-roboto;
-  font-weight: 700;
-  font-size: 20px;
-  line-height: 26px;
-  text-align: center;
-  color: $tc-white;
+    + .pillRow {
+        margin-top: $sp-2;
+    }
+
+    &:nth-child(4) {
+        opacity: 60%;
+    }
+    &:nth-child(n+5) {
+        opacity: 40%;
+    }
 }
 
 .searchHeader{
-  text-align: center;
+    text-align: center;
 }
 
 .searchHeaderText{
-  font-family: $font-roboto;
-  font-weight: 500;
-  font-size: 30px;
-  line-height: 20px;
-  letter-spacing: 0.5px;
-  color: $tc-white;
+    font-family: $font-roboto;
+    font-weight: 500;
+    font-size: 30px;
+    line-height: 20px;
+    letter-spacing: 0.5px;
 }
 
 .subHeader{
-  padding-top: 49px;
-  text-align: center;
+    margin-top: 49px;
+    text-align: center;
 }
 
 .subHeaderText{
-  font-family: $font-barlow;
-  font-weight: 400;
-  font-size: 25px;
-  line-height: 30px;
-  color: $tc-white;
+    font-family: $font-barlow;
+    font-weight: 400;
+    font-size: 25px;
+    line-height: 30px;
+    color: $tc-white;
 
 }
 .searchPrompt{
-  font-family: $font-roboto;
-  font-weight: 700;
-  font-size: 16px;
-  line-height: 48px;
-  color: $tc-white;
+    font-family: $font-roboto;
+    font-weight: 700;
+    font-size: 16px;
+    line-height: 48px;
+    color: $tc-white;
 }
 
 .searchOptions{
-  margin-left: auto;
-  margin-right: auto;
-  padding: 70px 32px 32px 32px;
-  max-width: 931px;
-  width: 100%;
-}
-
-.searchIconSpan{
-  cursor: pointer;
+    margin-left: auto;
+    margin-right: auto;
+    padding: 70px 32px 32px 32px;
+    max-width: 931px;
+    width: 100%;
 }
 
 .searchIcon{
-  width: 24px;
-  height: 24px;
-  color: $black-40;
-  stroke: $black-40;
-  margin-right: 10px;
+    width: 24px;
+    height: 24px;
+    color: $black-40;
+    stroke: $black-40;
+    margin-right: 10px;
 }

src/apps/talent-search/src/routes/talent-search/TalentSearch.tsx

@@ -4,7 +4,7 @@ import { ContentLayout, IconOutline, InputMultiselectOption } from '~/libs/ui'
 import { EmsiSkill, EmsiSkillSources, InputSkillSelector } from '~/libs/shared'
 import { Skill } from '@talentSearch/lib/models/'
 
-import SkillPill from './components/SkillPill'
+import { SkillPill } from './components/skill-pill'
 import styles from './TalentSearch.module.scss'
 
 // TODO: Make this configurable, or read from a service.  We need to discuss
@@ -86,9 +86,9 @@ export const TalentSearch: FC = () => {
                 <span className={styles.searchHeaderText}>Looking for a technology expert?</span>
             </div>
             <div className={styles.subHeader}>
-                <span className={styles.subHeaderText}>
+                <div className={styles.subHeaderText}>
                     Search thousands of skills to match with our global experts.
-                </span>
+                </div>
             </div>
             <div className={styles.searchOptions}>
                 <span className={styles.searchPrompt}>Search by skills</span>
@@ -102,7 +102,7 @@ export const TalentSearch: FC = () => {
                 />
             </div>
             <div className={styles.popularSkillsContainer}>
-                <span className={styles.popularSkillsTitle}>Popular Skills</span>
+                <div className='body-medium-bold'>Popular Skills</div>
 
                 {popularSkills.map((row, i) => (
                     // eslint-disable-next-line react/no-array-index-key

src/apps/talent-search/src/routes/talent-search/components/SkillPill.module.scss

@@ -0,0 +1,19 @@
+@import "@libs/ui/styles/includes";
+
+.pill {
+    cursor: pointer;
+    border-radius: 40px;
+    color: $tc-white;
+    border: 1px solid $tc-white;
+    padding: 8px 14px 8px 14px;
+    text-align: center;
+
+    &:hover {
+        background-color: rgba($tc-white, 0.1);
+    }
+
+    &.selected{
+        background-color: rgba($tc-white, 0.3);
+    }
+}
+

src/apps/talent-search/src/routes/talent-search/components/SkillPill.tsx

@@ -0,0 +1,31 @@
+import { FC, useCallback } from 'react'
+import classNames from 'classnames'
+
+import { Skill } from '~/libs/shared'
+
+import styles from './SkillPill.module.scss'
+
+export interface SkillPillProps {
+    onClick: (skill: Skill) => void
+    selected: boolean
+    skill: Skill
+}
+
+const SkillPill: FC<SkillPillProps> = props => {
+    const handleClick = useCallback(() => props.onClick.call(undefined, props.skill), [
+        props.onClick, props.skill,
+    ])
+
+    return (
+        <span
+            className={classNames(styles.pill, props.selected && styles.selected)}
+            onClick={handleClick}
+        >
+            <span className='body-main'>
+                {props.skill.name}
+            </span>
+        </span>
+    )
+}
+
+export default SkillPill

src/apps/talent-search/src/routes/talent-search/components/skill-pill/SkillPill.module.scss

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