feat: Port new color picker from Journals branch

app/scenes/CollectionEdit.js

@@ -1,6 +1,6 @@
 // @flow
 import * as React from 'react';
-import { withRouter, type RouterHistory } from 'react-router-dom';
+import { withRouter } from 'react-router-dom';
 import { observable } from 'mobx';
 import { inject, observer } from 'mobx-react';
 import Input from 'components/Input';
@@ -13,7 +13,7 @@ import Collection from 'models/Collection';
 import UiStore from 'stores/UiStore';
 
 type Props = {
-  history: RouterHistory,
+  history: Object,
   collection: Collection,
   ui: UiStore,
   onSubmit: () => void,
@@ -23,15 +23,16 @@ type Props = {
 class CollectionEdit extends React.Component<Props> {
   @observable name: string;
   @observable description: string = '';
-  @observable color: string = '';
+  @observable color: string = '#4E5C6E';
   @observable isSaving: boolean;
 
   componentWillMount() {
     this.name = this.props.collection.name;
     this.description = this.props.collection.description;
+    this.color = this.props.collection.color;
   }
 
-  handleSubmit = async (ev: SyntheticEvent<>) => {
+  handleSubmit = async (ev: SyntheticEvent<*>) => {
     ev.preventDefault();
     this.isSaving = true;
 
@@ -66,17 +67,21 @@ class CollectionEdit extends React.Component<Props> {
       <Flex column>
         <form onSubmit={this.handleSubmit}>
           <HelpText>
-            You can edit a collection’s name and other details at any time,
-            however doing so often might confuse your team mates.
+            You can edit the name and other details at any time, however doing
+            so often might confuse your team mates.
           </HelpText>
-          <Input
-            type="text"
-            label="Name"
-            onChange={this.handleNameChange}
-            value={this.name}
-            required
-            autoFocus
-          />
+          <Flex>
+            <Input
+              type="text"
+              label="Name"
+              onChange={this.handleNameChange}
+              value={this.name}
+              required
+              autoFocus
+              flex
+            />
+            &nbsp;<ColorPicker onChange={this.handleColor} value={this.color} />
+          </Flex>
           <InputRich
             id={this.props.collection.id}
             label="Description"
@@ -86,10 +91,6 @@ class CollectionEdit extends React.Component<Props> {
             minHeight={68}
             maxHeight={200}
           />
-          <ColorPicker
-            onSelect={this.handleColor}
-            value={this.props.collection.color}
-          />
           <Button
             type="submit"
             disabled={this.isSaving || !this.props.collection.name}