updates from @paulkaplan’s feedback

1. Removes the cursour over loupe, and fills the loupe center’s color correctly
2. Fixes a console error and loupe initialization issue
3. Increases the size of the swatches

Thanks @paulkaplan!

src/components/color-picker/color-picker.css

@@ -44,8 +44,8 @@
 }
 
 .swatch {
-    width: 1rem;
-    height: 1rem;
+    width: 1.5rem;
+    height: 1.5rem;
     border: 1px solid #ddd;
     border-radius: 4px;
 }
@@ -56,5 +56,6 @@
 }
 
 .swatch > img {
-    max-width: 100%;
+    width: 1.5rem;
+    height: 1.5rem;
 }

src/components/loupe/loupe.jsx

@@ -50,7 +50,7 @@ class LoupeComponent extends React.Component {
         // Draw an outlined square at the cursor position (cursor is hidden)
         ctx.lineWidth = boxLineWidth;
         ctx.strokeStyle = 'black';
-        ctx.fillStyle = `rgba(${color.r}, ${color.g}, ${color.b}, ${color.a})`;
+        ctx.fillStyle = `rgba(${color[0]}, ${color[1]}, ${color[2]}, ${color[3]})`;
         ctx.beginPath();
         ctx.rect((20) - (boxSize / 2), (20) - (boxSize / 2), boxSize, boxSize);
         ctx.fill();
@@ -95,11 +95,7 @@ class LoupeComponent extends React.Component {
 
 LoupeComponent.propTypes = {
     colorInfo: PropTypes.shape({
-        color: PropTypes.shape({
-            r: PropTypes.number,
-            g: PropTypes.number,
-            b: PropTypes.number
-        }),
+        color: PropTypes.instanceOf(Uint8ClampedArray),
         x: PropTypes.number,
         y: PropTypes.number,
         data: PropTypes.instanceOf(Uint8ClampedArray)

src/components/paint-editor/paint-editor.css

@@ -127,6 +127,10 @@ $border-radius: 0.25rem;
     overflow: visible;
 }
 
+.with-eye-dropper {
+    cursor: none;
+}
+
 .mode-selector {
     display: flex;
     margin-right: calc(2 * $grid-unit);

src/components/paint-editor/paint-editor.jsx

@@ -350,7 +350,12 @@ const PaintEditorComponent = props => {
                 ) : null}
 
                 {/* Canvas */}
-                <div className={styles.canvasContainer}>
+                <div
+                    className={classNames(
+                        styles.canvasContainer,
+                        [styles.withEyeDropper]: props.isEyeDropping
+                    )}
+                >
                     <PaperCanvas
                         canvasRef={props.setCanvas}
                         rotationCenterX={props.rotationCenterX}

src/containers/paint-editor.jsx

@@ -194,6 +194,8 @@ class PaintEditor extends React.Component {
             paper.project.view.bounds.x,
             paper.project.view.bounds.y
         );
+        this.eyeDropper.pickX = -1;
+        this.eyeDropper.pickY = -1;
         this.eyeDropper.activate();
 
         // document listeners used to detect if a mouse is down outside of the