Improve UX for Skills Selector (#160)

Sticky category labels, better positioning to allow room for the drop down, and keep menu open while user is selecting skills

packages/design-system/src/SelectSearch.tsx

@@ -8,6 +8,10 @@ const selectStyles: Styles = {
     ...styles,
     background: theme.colors.purple[400],
   }),
+  menuList: (styles) => ({
+    ...styles,
+    paddingTop: 0,
+  }),
   noOptionsMessage: (styles) => ({
     ...styles,
     color: theme.colors.white,
@@ -16,9 +20,20 @@ const selectStyles: Styles = {
     ...styles,
     color: theme.colors.white,
   }),
+  group: (styles) => ({
+    ...styles,
+    paddingTop: 0,
+    paddingBottom: 0,
+  }),
   groupHeading: (styles) => ({
     ...styles,
     color: theme.colors.white,
+    background: theme.colors.purple[400],
+    paddingTop: theme.space['3'],
+    paddingBottom: theme.space['3'],
+    position: 'sticky',
+    top: 0,
+    borderRadius: theme.radii.md,
   }),
   option: (styles) => ({
     ...styles,

packages/web/components/Setup/SetupSkills.tsx

@@ -15,7 +15,7 @@ export const SetupSkills: React.FC = () => {
 
   return (
     <FlexContainer>
-      <MetaHeading mb={10} textAlign="center">
+      <MetaHeading mb={10} mt={-64} textAlign="center">
         What are your superpowers?
       </MetaHeading>
       <FlexContainer w="100%" align="stretch">
@@ -24,6 +24,8 @@ export const SetupSkills: React.FC = () => {
           value={skills}
           onChange={(value) => setSkills(value as Array<SkillOption>)}
           options={skillsList}
+          autoFocus
+          closeMenuOnSelect={false}
           placeholder="ADD YOUR SKILLS"
         />
       </FlexContainer>