From ac958f46e172b9915db717a847e887c04ab90079 Mon Sep 17 00:00:00 2001
From: Colin <colin.diesh@gmail.com>
Date: Wed, 24 Nov 2021 18:18:36 -0500
Subject: [PATCH] Slightly lighter colors

---
 .../components/LinearGenomeViewSvg.tsx                 |  2 +-
 .../LinearGenomeView/components/OverviewScaleBar.tsx   | 10 ++++++----
 .../__snapshots__/LinearGenomeView.test.js.snap        |  4 ++--
 .../JBrowseLinearGenomeView.test.tsx.snap              |  2 +-
 4 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeViewSvg.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeViewSvg.tsx
index bda73455ae..b98a765d26 100644
--- a/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeViewSvg.tsx
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/LinearGenomeViewSvg.tsx
@@ -177,7 +177,7 @@ const SVGHeader = ({ model }: { model: LGV }) => {
           <Cytobands overview={overview} assembly={assembly} block={block} />
           <rect
             stroke="red"
-            fill="rgb(255,0,0,0.3)"
+            fill="rgb(255,0,0,0.1)"
             width={Math.max(lastOverviewPx - firstOverviewPx, 0.5)}
             height={HEADER_OVERVIEW_HEIGHT - 1}
             x={firstOverviewPx}
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/OverviewScaleBar.tsx b/plugins/linear-genome-view/src/LinearGenomeView/components/OverviewScaleBar.tsx
index 8a1816de2e..b8f659f4ba 100644
--- a/plugins/linear-genome-view/src/LinearGenomeView/components/OverviewScaleBar.tsx
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/OverviewScaleBar.tsx
@@ -62,7 +62,7 @@ const useStyles = makeStyles(theme => {
       height: HEADER_OVERVIEW_HEIGHT,
       pointerEvents: 'none',
       zIndex: 100,
-      border: '1px solid red',
+      border: '1px solid',
     },
     overview: {
       height: HEADER_BAR_HEIGHT,
@@ -405,6 +405,9 @@ const ScaleBar = observer(
         coord: last.reversed ? last.start : last.end,
       }) || 0
 
+    const color = showCytobands ? '#f00' : scaleBarColor
+    const transparency = showCytobands ? 0.1 : 0.3
+
     return (
       <div className={classes.scaleBar}>
         <div
@@ -412,9 +415,8 @@ const ScaleBar = observer(
           style={{
             width: lastOverviewPx - firstOverviewPx,
             left: firstOverviewPx + cytobandOffset,
-            background: showCytobands
-              ? alpha('#f00', 0.3)
-              : alpha(scaleBarColor, 0.3),
+            background: alpha(color, transparency),
+            borderColor: color,
           }}
         />
         {/* this is the entire scale bar */}
diff --git a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap
index 3622c196eb..524db92aac 100644
--- a/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap
+++ b/plugins/linear-genome-view/src/LinearGenomeView/components/__snapshots__/LinearGenomeView.test.js.snap
@@ -17,7 +17,7 @@ exports[`<LinearGenomeView /> renders one track, one region 1`] = `
         >
           <div
             class="makeStyles-scaleBarVisibleRegion"
-            style="width: 800px; left: 0px; background: rgba(121, 134, 203, 0.3);"
+            style="width: 800px; left: 0px; background: rgba(121, 134, 203, 0.3); border-color: #7986cb;"
           />
           <div
             class="makeStyles-scaleBarContig"
@@ -581,7 +581,7 @@ exports[`<LinearGenomeView /> renders two tracks, two regions 1`] = `
         >
           <div
             class="makeStyles-scaleBarVisibleRegion"
-            style="width: 580px; left: 0px; background: rgba(121, 134, 203, 0.3);"
+            style="width: 580px; left: 0px; background: rgba(121, 134, 203, 0.3); border-color: #7986cb;"
           />
           <div
             class="makeStyles-scaleBarContig"
diff --git a/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap b/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap
index 0dcfad8ea7..454664c9fe 100644
--- a/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap
+++ b/products/jbrowse-react-linear-genome-view/src/JBrowseLinearGenomeView/__snapshots__/JBrowseLinearGenomeView.test.tsx.snap
@@ -95,7 +95,7 @@ exports[`<JBrowseLinearGenomeView /> renders successfully 1`] = `
                 >
                   <div
                     class="makeStyles-scaleBarVisibleRegion"
-                    style="width: 267px; left: 0px; background: rgba(66, 119, 127, 0.3);"
+                    style="width: 267px; left: 0px; background: rgba(66, 119, 127, 0.3); border-color: rgb(66, 119, 127);"
                   />
                   <div
                     class="makeStyles-scaleBarContig"