TAL - make the search icon in the search by skill input clickable

Author: vas3a

src/apps/talent-search/src/components/search-input/SearchInput.module.scss

@@ -1,9 +1,39 @@
 @import "@libs/ui/styles/includes";
 
 .searchIcon{
-    width: $sp-6;
-    height: $sp-6;
-    color: $black-40;
-    stroke: $black-40;
     margin-right: 10px;
+
+    position: relative;
+    z-index: 1;
+
+    cursor: pointer;
+    color: $black-40;
+    transition: 0.15s ease-in-out;
+
+    &:hover {
+        color: $black-100;
+    }
+
+    &.disabled {
+        pointer-events: none;
+        opacity: 0.4;
+    }
+
+    &:before {
+        content: "";
+        display: block;
+        position: absolute;
+        top: 50%;
+        left: 50%;
+        transform: translate(-50%, -50%);
+        width: $sp-12;
+        height: $sp-12;
+    }
+
+    svg {
+        width: $sp-6;
+        height: $sp-6;
+        stroke: currentColor;
+        color: inherit;
+    }
 }

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

@@ -1,4 +1,5 @@
 import { FC, useMemo } from 'react'
+import classNames from 'classnames'
 
 import { IconOutline, InputMultiselectOption } from '~/libs/ui'
 import { EmsiSkill, EmsiSkillSources, InputSkillSelector, Skill } from '~/libs/shared'
@@ -28,14 +29,23 @@ const SearchInput: FC<SearchInputProps> = props => {
         })))
     }
 
+    const searchIcon = useMemo(() => (
+        <div
+            className={classNames(styles.searchIcon, !emsiSkills.length && styles.disabled)}
+            onClick={props.onSearch}
+        >
+            <IconOutline.SearchIcon />
+        </div>
+    ), [props.onSearch, emsiSkills])
+
     return (
         <InputSkillSelector
             className={props.className}
             autoFocus={props.autoFocus}
             placeholder='Enter skills you are searching for...'
             useWrapper={false}
             theme='clear'
-            dropdownIcon={<IconOutline.SearchIcon className={styles.searchIcon} />}
+            dropdownIcon={searchIcon}
             value={emsiSkills}
             onChange={onChange}
             onSubmit={props.onSearch}