fix(protocol-designer): fix styles for SelectionRect (#1714)

SelectionRect fill color broke in CSS refactor, fix & update colors
Opentrons · Jun 18, 2018 · 295940e · 295940e
1 parent d2c182c
commit 295940e
Show file tree

Hide file tree

Showing 2 changed files with 7 additions and 6 deletions.
diff --git a/components/src/styles/colors.css b/components/src/styles/colors.css
@@ -25,7 +25,7 @@
   --c-success: #60b120;
 
   /* Misc */
-  --c-overlay: rgba(0, 0, 0, 0.7);
+  --c-selection-overlay: color(var(--c-highlight) alpha(0.3));
   --c-plate-bg: #ccc;
   --c-white: #fff;
   --c-black: #000;

diff --git a/protocol-designer/src/components/SelectionRect.css b/protocol-designer/src/components/SelectionRect.css
@@ -1,20 +1,21 @@
+@import '@opentrons/components';
+
 .selection_rect {
   pointer-events: none; /* prevents this div from occluding wells during document.elementFromPoint sampling */
 }
 
 rect.selection_rect {
   /* svg version */
-  fill: var(--c-overlay);
-  stroke: gray;
+  fill: var(--c-selection-overlay);
+  stroke: var(--c-highlight);
   stroke-width: 0.4;
-  stroke-dasharray: 0.75, 0.5;
 }
 
 div.selection_rect {
   /* normal html version */
-  background-color: var(--c-overlay);
+  background-color: var(--c-selection-overlay);
   position: fixed;
   z-index: 1000;
   border-radius: 0;
-  border: 1px gray dashed;
+  border: 1px var(--c-highlight);
 }