feat: Collection Icons (#1281)

* wip: Working for creation, and display

* feat: IconPicker

* fix

* feat: Invert collection icon color when dark in dark mode

* Improve readability of dropdown menus in dark mode
Suggest icon based on collection name

* Add additional icons
Tweaks and final polish

* fix: Write default icon as empty icon column

* feat: Improve icon selection logic
add more keywords
Improve icon coloring when selected and in dark mode

* lint

* lint

app/components/CollectionIcon.js

@@ -0,0 +1,45 @@
+// @flow
+import * as React from 'react';
+import { inject, observer } from 'mobx-react';
+import { getLuminance } from 'polished';
+import { PrivateCollectionIcon, CollectionIcon } from 'outline-icons';
+import Collection from 'models/Collection';
+import { icons } from 'components/IconPicker';
+import UiStore from 'stores/UiStore';
+
+type Props = {
+  collection: Collection,
+  expanded?: boolean,
+  size?: number,
+  ui: UiStore,
+};
+
+function ResolvedCollectionIcon({ collection, expanded, size, ui }: Props) {
+  // If the chosen icon color is very dark then we invert it in dark mode
+  // otherwise it will be impossible to see against the dark background.
+  const color =
+    ui.resolvedTheme === 'dark'
+      ? getLuminance(collection.color) > 0.12
+        ? collection.color
+        : 'currentColor'
+      : collection.color;
+
+  if (collection.icon && collection.icon !== 'collection') {
+    try {
+      const Component = icons[collection.icon].component;
+      return <Component color={color} size={size} />;
+    } catch (error) {
+      console.warn('Failed to render custom icon ' + collection.icon);
+    }
+  }
+
+  if (collection.private) {
+    return (
+      <PrivateCollectionIcon color={color} expanded={expanded} size={size} />
+    );
+  }
+
+  return <CollectionIcon color={color} expanded={expanded} size={size} />;
+}
+
+export default inject('ui')(observer(ResolvedCollectionIcon));