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/scenes/CollectionNew.js

@@ -3,11 +3,12 @@ import * as React from 'react';
 import { withRouter, type RouterHistory } from 'react-router-dom';
 import { observable } from 'mobx';
 import { inject, observer } from 'mobx-react';
+import { intersection } from 'lodash';
 import Button from 'components/Button';
 import Switch from 'components/Switch';
 import Input from 'components/Input';
 import InputRich from 'components/InputRich';
-import ColorPicker from 'components/ColorPicker';
+import IconPicker, { icons } from 'components/IconPicker';
 import HelpText from 'components/HelpText';
 import Flex from 'shared/components/Flex';
 
@@ -26,9 +27,11 @@ type Props = {
 class CollectionNew extends React.Component<Props> {
   @observable name: string = '';
   @observable description: string = '';
+  @observable icon: string = '';
   @observable color: string = '#4E5C6E';
   @observable private: boolean = false;
   @observable isSaving: boolean;
+  hasOpenedIconPicker: boolean = false;
 
   handleSubmit = async (ev: SyntheticEvent<>) => {
     ev.preventDefault();
@@ -37,6 +40,7 @@ class CollectionNew extends React.Component<Props> {
       {
         name: this.name,
         description: this.description,
+        icon: this.icon,
         color: this.color,
         private: this.private,
       },
@@ -56,6 +60,29 @@ class CollectionNew extends React.Component<Props> {
 
   handleNameChange = (ev: SyntheticInputEvent<*>) => {
     this.name = ev.target.value;
+
+    // If the user hasn't picked an icon yet, go ahead and suggest one based on
+    // the name of the collection. It's the little things sometimes.
+    if (!this.hasOpenedIconPicker) {
+      const keys = Object.keys(icons);
+      for (const key of keys) {
+        const icon = icons[key];
+        const keywords = icon.keywords.split(' ');
+        const namewords = this.name.toLowerCase().split(' ');
+        const matches = intersection(namewords, keywords);
+
+        if (matches.length > 0) {
+          this.icon = key;
+          return;
+        }
+      }
+
+      this.icon = 'collection';
+    }
+  };
+
+  handleIconPickerOpen = () => {
+    this.hasOpenedIconPicker = true;
   };
 
   handleDescriptionChange = getValue => {
@@ -66,8 +93,9 @@ class CollectionNew extends React.Component<Props> {
     this.private = ev.target.checked;
   };
 
-  handleColor = (color: string) => {
+  handleChange = (color: string, icon: string) => {
     this.color = color;
+    this.icon = icon;
   };
 
   render() {
@@ -88,7 +116,13 @@ class CollectionNew extends React.Component<Props> {
             autoFocus
             flex
           />
-          &nbsp;<ColorPicker onChange={this.handleColor} value={this.color} />
+          &nbsp;
+          <IconPicker
+            onOpen={this.handleIconPickerOpen}
+            onChange={this.handleChange}
+            color={this.color}
+            icon={this.icon}
+          />
         </Flex>
         <InputRich
           label="Description"