Add dropdown for selecting groups

Summary: This diff refactors the group selection to the dropdown. As with the growing list of grps, dropdown will be easy to search and scale

Reviewed By: mweststrate

Differential Revision: D21175998

fbshipit-source-id: 90f1a81dfc6c2232cd2dcf767ed01205fc63e1fd

desktop/app/src/ui/components/searchable/Searchable.tsx

@@ -30,15 +30,21 @@ const SearchBar = styled(Toolbar)({
 });
 SearchBar.displayName = 'Searchable:SearchBar';
 
-export const SearchBox = styled(FlexBox)({
-  backgroundColor: colors.white,
-  borderRadius: '999em',
-  border: `1px solid ${colors.light15}`,
-  height: '100%',
-  width: '100%',
-  alignItems: 'center',
-  paddingLeft: 4,
-});
+export const SearchBox = styled(FlexBox)<{isInvalidInput?: boolean}>(
+  (props) => {
+    return {
+      backgroundColor: colors.white,
+      borderRadius: '999em',
+      border: `1px solid ${
+        !props.isInvalidInput ? colors.light15 : colors.red
+      }`,
+      height: '100%',
+      width: '100%',
+      alignItems: 'center',
+      paddingLeft: 4,
+    };
+  },
+);
 SearchBox.displayName = 'Searchable:SearchBox';
 
 export const SearchInput = styled(Input)<{