smoother color selection

app/pods/components/color-picker/component.js

@@ -9,6 +9,14 @@ export default Em.Component.extend({
   canvasContext: null,
 
   actions: {
+    mouseMove(){
+      if(this.get('pressingDown')){
+        this.send('colorSelect');
+      }
+    },
+    mouseUp(){
+      this.set('pressingDown', false);
+    },
     colorSelect() {
       var canvasOffset = Em.$(this.get('canvas')).offset();
       var canvasX = Math.floor(event.pageX - canvasOffset.left), canvasY = Math.floor(event.pageY - canvasOffset.top);
@@ -17,12 +25,16 @@ export default Em.Component.extend({
       var imageData = this.get('canvasContext').getImageData(canvasX, canvasY, 1, 1);
       var pixel = imageData.data;
 
+      this.set('pressingDown', true);
+
       if( !(pixel[0] === 0 && pixel[1] === 0 && pixel[2] === 0) ) {
         this.set('rgb', [pixel[0], pixel[1], pixel[2]]);
       }
     }
   },
 
+  pressingDown: false,
+
   // https://dzone.com/articles/creating-your-own-html5
   didInsertElement(){
     // handle color changes

app/pods/components/color-picker/template.hbs

@@ -1 +1 @@
-<canvas id="picker" width="256" height="256" {{action "colorSelect"}}></canvas>
+<canvas id="picker" width="256" height="256" {{action "colorSelect" on="mouseDown"}} {{action "mouseMove" on="mouseMove"}} {{action "mouseUp" on="mouseUp"}}></canvas>

app/pods/components/groups-list/template.hbs

@@ -1,6 +1,6 @@
 {{#paper-list}}
   {{#paper-item class="newGroupRow"}}
-    <div class="newGroup" {{action "toggleAddGroupsModal"}}>Add a new group</div>
+    <div class="newGroup" {{action "toggleAddGroupsModal"}}>{{paper-icon icon="group-add"}} Add a new group</div>
   {{/paper-item}}
 
   {{#each groupsArrData as |group|}}

app/pods/components/lights-tab/component.js

@@ -28,6 +28,8 @@ export default Em.Component.extend({
         if(rgb[0] !== 255 && rgb[1] !== 255 && rgb[2] !== 255) {
           options['xy'] = this.rgbToXy(rgb[0], rgb[1], rgb[2]);
         }
+        
+        options['transitiontime'] = 0;
 
         Em.$.ajax(this.get('apiURL') + '/lights/' + light + '/state', {
           data: JSON.stringify(options),

app/styles/app.scss

@@ -393,18 +393,17 @@ md-toolbar {
   width: 100%;
   padding: 10px 0 10px 10px;
   margin: 0;
+  .group-add {
+    margin-right: 5px;
+  }
 }
 
 .newGroupRow{
-  border-style: solid;
-  border-width: 3px;
-  border-color: #f6c653 #bd6a23 #b6631f #e8ab4a;
-  background: #d79922;
-  color: black;
+  background: white;
 }
 
 .newGroupRow:hover {
-  background-color: lighten(#d79922, 10%);
+  background-color: darken(white, 5%);
 }
 
 .groupRow:hover * .close {
@@ -862,7 +861,7 @@ body.dimmerOn {
   color: white;
   background: #242424;
   .md-track, .color {
-    background: white !important;
+    background: white;
   }
   .playlistItem {
     color: #cdcdcd;
@@ -874,10 +873,10 @@ body.dimmerOn {
   .playlistItem:hover {
     background: darken(#2D2D2D, 10%);
   }
-  .close {
+  .playlistItem .close {
     color: #cdcdcd !important;
   }
-  .close:hover {
+  .playlistItem .close:hover {
     color: white !important;
   }
   svg {