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/Sidebar/Main.js

@@ -84,7 +84,7 @@ class MainSidebar extends React.Component<Props> {
             <Section>
               <SidebarLink
                 to="/home"
-                icon={<HomeIcon />}
+                icon={<HomeIcon color="currentColor" />}
                 exact={false}
                 label="Home"
               />
@@ -93,19 +93,19 @@ class MainSidebar extends React.Component<Props> {
                   pathname: '/search',
                   state: { fromMenu: true },
                 }}
-                icon={<SearchIcon />}
+                icon={<SearchIcon color="currentColor" />}
                 label="Search"
                 exact={false}
               />
               <SidebarLink
                 to="/starred"
-                icon={<StarredIcon />}
+                icon={<StarredIcon color="currentColor" />}
                 exact={false}
                 label="Starred"
               />
               <SidebarLink
                 to="/drafts"
-                icon={<EditIcon />}
+                icon={<EditIcon color="currentColor" />}
                 label={
                   <Drafts align="center">
                     Drafts{draftDocumentsCount > 0 && (
@@ -127,7 +127,7 @@ class MainSidebar extends React.Component<Props> {
             <Section>
               <SidebarLink
                 to="/archive"
-                icon={<ArchiveIcon />}
+                icon={<ArchiveIcon color="currentColor" />}
                 exact={false}
                 label="Archive"
                 active={
@@ -138,7 +138,7 @@ class MainSidebar extends React.Component<Props> {
               />
               <SidebarLink
                 to="/trash"
-                icon={<TrashIcon />}
+                icon={<TrashIcon color="currentColor" />}
                 exact={false}
                 label="Trash"
                 active={
@@ -149,7 +149,7 @@ class MainSidebar extends React.Component<Props> {
                 <SidebarLink
                   to="/settings/people"
                   onClick={this.handleInviteModalOpen}
-                  icon={<PlusIcon />}
+                  icon={<PlusIcon color="currentColor" />}
                   label="Invite people…"
                 />
               )}

app/components/Sidebar/components/CollectionLink.js

@@ -2,7 +2,6 @@
 import * as React from 'react';
 import { observer } from 'mobx-react';
 import { observable } from 'mobx';
-import { CollectionIcon, PrivateCollectionIcon } from 'outline-icons';
 import Collection from 'models/Collection';
 import Document from 'models/Document';
 import CollectionMenu from 'menus/CollectionMenu';
@@ -10,6 +9,7 @@ import UiStore from 'stores/UiStore';
 import DocumentsStore from 'stores/DocumentsStore';
 import SidebarLink from './SidebarLink';
 import DocumentLink from './DocumentLink';
+import CollectionIcon from 'components/CollectionIcon';
 import DropToImport from 'components/DropToImport';
 import Flex from 'shared/components/Flex';
 
@@ -44,16 +44,7 @@ class CollectionLink extends React.Component<Props> {
         <SidebarLink
           key={collection.id}
           to={collection.url}
-          icon={
-            collection.private ? (
-              <PrivateCollectionIcon
-                expanded={expanded}
-                color={collection.color}
-              />
-            ) : (
-              <CollectionIcon expanded={expanded} color={collection.color} />
-            )
-          }
+          icon={<CollectionIcon collection={collection} expanded={expanded} />}
           iconColor={collection.color}
           expanded={expanded}
           hideDisclosure

app/components/Sidebar/components/Collections.js

@@ -70,7 +70,7 @@ class Collections extends React.Component<Props> {
         <SidebarLink
           to="/collections"
           onClick={this.props.onCreateCollection}
-          icon={<PlusIcon />}
+          icon={<PlusIcon color="currentColor" />}
           label="New collection…"
           exact
         />