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

shared/components/Breadcrumb.js

@@ -4,19 +4,14 @@ import { observer, inject } from 'mobx-react';
 import breakpoint from 'styled-components-breakpoint';
 import styled from 'styled-components';
 import { Link } from 'react-router-dom';
-import {
-  CollectionIcon,
-  PrivateCollectionIcon,
-  PadlockIcon,
-  GoToIcon,
-  MoreIcon,
-} from 'outline-icons';
+import { PadlockIcon, GoToIcon, MoreIcon } from 'outline-icons';
 
 import Document from 'models/Document';
 import CollectionsStore from 'stores/CollectionsStore';
 import { collectionUrl } from 'utils/routeHelpers';
 import Flex from 'shared/components/Flex';
 import BreadcrumbMenu from './BreadcrumbMenu';
+import CollectionIcon from 'components/CollectionIcon';
 
 type Props = {
   document: Document,
@@ -56,11 +51,7 @@ const Breadcrumb = observer(({ document, collections, onlyText }: Props) => {
   return (
     <Wrapper justify="flex-start" align="center">
       <CollectionName to={collectionUrl(collection.id)}>
-        {collection.private ? (
-          <PrivateCollectionIcon color={collection.color} expanded />
-        ) : (
-          <CollectionIcon color={collection.color} expanded />
-        )}{' '}
+        <CollectionIcon collection={collection} expanded />{' '}
         <span>{collection.name}</span>
       </CollectionName>
       {isNestedDocument && (

shared/styles/theme.js

@@ -155,6 +155,7 @@ export const dark = {
   sidebarText: colors.slate,
   shadow: 'rgba(0, 0, 0, 0.6)',
 
+  menuBorder: lighten(0.1, colors.almostBlack),
   menuBackground: lighten(0.015, colors.almostBlack),
   menuShadow:
     '0 0 0 1px rgba(0, 0, 0, 0.1), 0 8px 16px rgba(0, 0, 0, 0.3), 0 2px 4px rgba(0, 0, 0, 0.08), inset 0 0 1px rgba(255,255,255,.2)',