update color option and enhance UX of FolderItem

browser/lib/consts.js

@@ -1,22 +1,20 @@
 const consts = {
   FOLDER_COLORS: [
-    '#3460C7',
-    '#2BA5F7',
+    '#E10051',
     '#FF8E00',
     '#E8D252',
     '#3FD941',
-    '#1FAD85',
-    '#E10051',
+    '#30D5C8',
+    '#2BA5F7',
     '#B013A4'
   ],
   FOLDER_COLOR_NAMES: [
-    'Cerulean Blue',
-    'Dodger Blue',
+    'Razzmatazz',
     'Pizazz',
     'Confetti',
     'Emerald',
-    'Mountain Meadow',
-    'Razzmatazz',
+    'Turquoise',
+    'Dodger Blue',
     'Violet Eggplant'
   ]
 }

browser/main/HomePage/SideNav/FolderItem.js

@@ -89,6 +89,7 @@ class FolderItem extends React.Component {
       name: this.props.folder.name
     }, () => {
       this.refs.nameInput.focus()
+      this.refs.nameInput.select()
     })
   }
 
@@ -124,7 +125,9 @@ class FolderItem extends React.Component {
 
     return (
       <div className='FolderItem'
-        styleName='root'>
+        styleName='root'
+        onContextMenu={(e) => this.handleContextButtonClick(e)}
+      >
         <div styleName='label'>
           <i className='fa fa-cube' style={{color: folder.color}}/> {folder.name}
         </div>
@@ -181,7 +184,6 @@ class FolderItem extends React.Component {
     return (
       <div className='FolderItem'
         styleName='root'
-        onContextMenu={(e) => this.handleContextButtonClick(e)}
       >
         <input styleName='nameInput'
           ref='nameInput'