From c12c1e53e8569f49781a486679f72640e4334f95 Mon Sep 17 00:00:00 2001
From: jimbo <jimbo@google.com>
Date: Fri, 7 Sep 2018 14:50:04 -0400
Subject: [PATCH] updating stroke colors and styles.

---
 .../components/facets_dive/facets-dive.html   |  2 +-
 .../facets_dive_vis/facets-dive-vis.ts        | 96 ++++++++++---------
 2 files changed, 50 insertions(+), 48 deletions(-)

diff --git a/facets_dive/components/facets_dive/facets-dive.html b/facets_dive/components/facets_dive/facets-dive.html
index 91d68fa..58d7b19 100644
--- a/facets_dive/components/facets_dive/facets-dive.html
+++ b/facets_dive/components/facets_dive/facets-dive.html
@@ -55,7 +55,7 @@
         flex-direction: column;
       }
       facets-dive-controls {
-        border-bottom: 1px solid black;
+        border-bottom: 1px solid #d3d3d3;
         flex-grow: 0;
         flex-shrink: 0;
         height: 60px;
diff --git a/facets_dive/components/facets_dive_vis/facets-dive-vis.ts b/facets_dive/components/facets_dive_vis/facets-dive-vis.ts
index 824d179..196802f 100644
--- a/facets_dive/components/facets_dive_vis/facets-dive-vis.ts
+++ b/facets_dive/components/facets_dive_vis/facets-dive-vis.ts
@@ -70,7 +70,7 @@ const SELECTED_ITEM_COLOR = '#fad411';
 /**
  * Color for stroke around selected item borders.
  */
-const SELECTED_ITEM_COLOR_STROKE = '#826e09';
+const SELECTED_ITEM_COLOR_STROKE = '#483d06';
 
 /**
  * Stroke width for the selected item borders.
@@ -90,12 +90,12 @@ const SELECTED_ITEM_FINAL_SCALE = 0.8;
 /**
  * Color for compared item borders.
  */
-const COMPARED_ITEM_COLOR = '#16dcfb';
+const COMPARED_ITEM_COLOR = '#1d6b1d';
 
 /**
  * Color for stroke around compared item borders.
  */
-const COMPARED_ITEM_COLOR_STROKE = '#0b6371';
+const COMPARED_ITEM_COLOR_STROKE = '#44ff44';
 
 /**
  * Stroke width for the compared item borders.
@@ -1034,19 +1034,20 @@ class FacetsDiveVizInternal {
         this.selectedLayer.selectAll('.selected').data(selectedBoxes);
 
     // ENTER.
-    const enterElements = selectedElements
-        .enter()
-        .append('g')
-        .classed('selected', true)
-        .attr('transform', (pos: ItemPosition) => {
-          const x = 0.5 + (pos.x || 0);
-          const y = 0.5 + (pos.y || 0);
-          return `translate(${x},${y}) scale(${SELECTED_ITEM_INITIAL_SCALE})`;
-        })
-        .style('opacity', 0);
-
-    enterElements
-        .append('rect')
+    const enterElements = selectedElements.enter()
+                              .append('g')
+                              .classed('selected', true)
+                              .attr(
+                                  'transform',
+                                  (pos: ItemPosition) => {
+                                    const x = 0.5 + (pos.x || 0);
+                                    const y = 0.5 + (pos.y || 0);
+                                    return `translate(${x},${y}) scale(${
+                                        SELECTED_ITEM_INITIAL_SCALE})`;
+                                  })
+                              .style('opacity', 0);
+
+    enterElements.append('rect')
         .attr('x', -0.5)
         .attr('y', -0.5)
         .attr('width', 1)
@@ -1057,8 +1058,7 @@ class FacetsDiveVizInternal {
         .attr('stroke-opacity', 0)
         .attr('stroke-width', SELECTED_ITEM_STROKE_WIDTH * 2)
         .attr('fill-opacity', 0);
-    enterElements
-        .append('rect')
+    enterElements.append('rect')
         .attr('x', -0.5)
         .attr('y', -0.5)
         .attr('width', 1)
@@ -1073,14 +1073,15 @@ class FacetsDiveVizInternal {
     // ENTER + UPDATE.
     const mergedElements = enterElements.merge(selectedElements);
     mergedElements.transition()
-        .attr('transform', (pos: ItemPosition) => {
-          const x = 0.5 + (pos.x || 0);
-          const y = 0.5 + (pos.y || 0);
-          return `translate(${x},${y}) scale(${SELECTED_ITEM_FINAL_SCALE})`;
-        })
+        .attr(
+            'transform',
+            (pos: ItemPosition) => {
+              const x = 0.5 + (pos.x || 0);
+              const y = 0.5 + (pos.y || 0);
+              return `translate(${x},${y}) scale(${SELECTED_ITEM_FINAL_SCALE})`;
+            })
         .style('opacity', 1);
-    mergedElements
-        .selectAll('rect')
+    mergedElements.selectAll('rect')
         .classed('rotate', true)
         .attr('stroke-opacity', 1);
 
@@ -1106,19 +1107,20 @@ class FacetsDiveVizInternal {
         this.comparedLayer.selectAll('.compared').data(comparedBoxes);
 
     // ENTER.
-    const enterElements = comparedElements
-        .enter()
-        .append('g')
-        .classed('compared', true)
-        .attr('transform', (pos: ItemPosition) => {
-          const x = 0.5 + (pos.x || 0);
-          const y = 0.5 + (pos.y || 0);
-          return `translate(${x},${y}) scale(${COMPARED_ITEM_INITIAL_SCALE})`;
-        })
-        .style('opacity', 0);
-
-    enterElements
-        .append('rect')
+    const enterElements = comparedElements.enter()
+                              .append('g')
+                              .classed('compared', true)
+                              .attr(
+                                  'transform',
+                                  (pos: ItemPosition) => {
+                                    const x = 0.5 + (pos.x || 0);
+                                    const y = 0.5 + (pos.y || 0);
+                                    return `translate(${x},${y}) scale(${
+                                        COMPARED_ITEM_INITIAL_SCALE})`;
+                                  })
+                              .style('opacity', 0);
+
+    enterElements.append('rect')
         .attr('x', -0.5)
         .attr('y', -0.5)
         .attr('width', 1)
@@ -1129,8 +1131,7 @@ class FacetsDiveVizInternal {
         .attr('stroke-opacity', 0)
         .attr('stroke-width', COMPARED_ITEM_STROKE_WIDTH * 2)
         .attr('fill-opacity', 0);
-    enterElements
-        .append('rect')
+    enterElements.append('rect')
         .attr('x', -0.5)
         .attr('y', -0.5)
         .attr('width', 1)
@@ -1145,14 +1146,15 @@ class FacetsDiveVizInternal {
     // ENTER + UPDATE.
     const mergedElements = enterElements.merge(comparedElements);
     mergedElements.transition()
-        .attr('transform', (pos: ItemPosition) => {
-          const x = 0.5 + (pos.x || 0);
-          const y = 0.5 + (pos.y || 0);
-          return `translate(${x},${y}) scale(${COMPARED_ITEM_FINAL_SCALE})`;
-        })
+        .attr(
+            'transform',
+            (pos: ItemPosition) => {
+              const x = 0.5 + (pos.x || 0);
+              const y = 0.5 + (pos.y || 0);
+              return `translate(${x},${y}) scale(${COMPARED_ITEM_FINAL_SCALE})`;
+            })
         .style('opacity', 1);
-    mergedElements
-        .selectAll('rect')
+    mergedElements.selectAll('rect')
         .classed('rotate', true)
         .attr('stroke-opacity', 1);