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/menus/NewDocumentMenu.js

@@ -3,13 +3,14 @@ import * as React from 'react';
 import { observable } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import { Redirect } from 'react-router-dom';
-import { PlusIcon, CollectionIcon, PrivateCollectionIcon } from 'outline-icons';
+import { PlusIcon } from 'outline-icons';
 
 import { newDocumentUrl } from 'utils/routeHelpers';
 import CollectionsStore from 'stores/CollectionsStore';
 import PoliciesStore from 'stores/PoliciesStore';
 import { DropdownMenu, DropdownMenuItem } from 'components/DropdownMenu';
 import Button from 'components/Button';
+import CollectionIcon from 'components/CollectionIcon';
 
 type Props = {
   label?: React.Node,
@@ -64,12 +65,7 @@ class NewDocumentMenu extends React.Component<Props> {
               onClick={() => this.handleNewDocument(collection.id)}
               disabled={!can.update}
             >
-              {collection.private ? (
-                <PrivateCollectionIcon color={collection.color} />
-              ) : (
-                <CollectionIcon color={collection.color} />
-              )}{' '}
-              {collection.name}
+              <CollectionIcon collection={collection} /> {collection.name}
             </DropdownMenuItem>
           );
         })}