From 3ff6fb9c461ac29c292294236ce33a95d854afc6 Mon Sep 17 00:00:00 2001
From: Roy Johnson <roy.e.johnson@rice.edu>
Date: Mon, 8 Jan 2024 08:33:00 -0600
Subject: [PATCH] Add border bottom to focused highlights (#2096)

and snapshots

Co-authored-by: staxly[bot] <35789409+staxly[bot]@users.noreply.github.com>
---
 .../__snapshots__/routes.spec.tsx.snap        |  5 +++
 .../content/components/Page/PageContent.tsx   |  1 +
 .../__snapshots__/Content.spec.tsx.snap       | 10 +++++
 .../__snapshots__/ColorFilter.spec.tsx.snap   |  5 +++
 .../popUp/__snapshots__/Filters.spec.tsx.snap |  5 +++
 src/app/content/constants.ts                  | 42 ++++++++++++++++---
 .../__snapshots__/ContextMenu.spec.tsx.snap   | 10 +++++
 .../__snapshots__/Filters.spec.tsx.snap       |  5 +++
 .../ColorIndicator.spec.tsx.snap              |  2 +
 .../__snapshots__/ColorPicker.spec.tsx.snap   | 10 +++++
 .../__snapshots__/Filters.spec.tsx.snap       |  4 ++
 11 files changed, 93 insertions(+), 6 deletions(-)

diff --git a/src/app/content/__snapshots__/routes.spec.tsx.snap b/src/app/content/__snapshots__/routes.spec.tsx.snap
index 7d150cc473..86d6ef7a20 100644
--- a/src/app/content/__snapshots__/routes.spec.tsx.snap
+++ b/src/app/content/__snapshots__/routes.spec.tsx.snap
@@ -569,6 +569,7 @@ Array [
 @media screen {
   .c2 .highlight.yellow.focus {
     background-color: #fed200;
+    border-bottom: 0.2rem solid #8f7700;
   }
 
   .c2 .highlight.yellow.focus.block:after {
@@ -583,6 +584,7 @@ Array [
 @media screen {
   .c2 .highlight.green.focus {
     background-color: #92d101;
+    border-bottom: 0.2rem solid #4e6f01;
   }
 
   .c2 .highlight.green.focus.block:after {
@@ -597,6 +599,7 @@ Array [
 @media screen {
   .c2 .highlight.blue.focus {
     background-color: #00c3ed;
+    border-bottom: 0.2rem solid #006880;
   }
 
   .c2 .highlight.blue.focus.block:after {
@@ -611,6 +614,7 @@ Array [
 @media screen {
   .c2 .highlight.purple.focus {
     background-color: #545ec8;
+    border-bottom: 0.2rem solid #141a3e;
     color: #fff;
   }
 
@@ -626,6 +630,7 @@ Array [
 @media screen {
   .c2 .highlight.pink.focus {
     background-color: #de017e;
+    border-bottom: 0.2rem solid #560131;
     color: #fff;
   }
 
diff --git a/src/app/content/components/Page/PageContent.tsx b/src/app/content/components/Page/PageContent.tsx
index 613a3d76ad..817c5c48f9 100644
--- a/src/app/content/components/Page/PageContent.tsx
+++ b/src/app/content/components/Page/PageContent.tsx
@@ -111,6 +111,7 @@ export default styled(MainContent)`
       @media screen {
         &.focus {
           background-color: ${style.focused};
+          border-bottom: 0.2rem solid ${style.focusBorder};
 
           ${Color(style.focused).isDark() && css`
             color: ${theme.color.text.white};
diff --git a/src/app/content/components/__snapshots__/Content.spec.tsx.snap b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
index 99d5c75fcf..2b88bf3d4a 100644
--- a/src/app/content/components/__snapshots__/Content.spec.tsx.snap
+++ b/src/app/content/components/__snapshots__/Content.spec.tsx.snap
@@ -2209,6 +2209,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.yellow.focus {
     background-color: #fed200;
+    border-bottom: 0.2rem solid #8f7700;
   }
 
   .c77 .highlight.yellow.focus.block:after {
@@ -2223,6 +2224,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.green.focus {
     background-color: #92d101;
+    border-bottom: 0.2rem solid #4e6f01;
   }
 
   .c77 .highlight.green.focus.block:after {
@@ -2237,6 +2239,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.blue.focus {
     background-color: #00c3ed;
+    border-bottom: 0.2rem solid #006880;
   }
 
   .c77 .highlight.blue.focus.block:after {
@@ -2251,6 +2254,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.purple.focus {
     background-color: #545ec8;
+    border-bottom: 0.2rem solid #141a3e;
     color: #fff;
   }
 
@@ -2266,6 +2270,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.pink.focus {
     background-color: #de017e;
+    border-bottom: 0.2rem solid #560131;
     color: #fff;
   }
 
@@ -6707,6 +6712,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.yellow.focus {
     background-color: #fed200;
+    border-bottom: 0.2rem solid #8f7700;
   }
 
   .c77 .highlight.yellow.focus.block:after {
@@ -6721,6 +6727,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.green.focus {
     background-color: #92d101;
+    border-bottom: 0.2rem solid #4e6f01;
   }
 
   .c77 .highlight.green.focus.block:after {
@@ -6735,6 +6742,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.blue.focus {
     background-color: #00c3ed;
+    border-bottom: 0.2rem solid #006880;
   }
 
   .c77 .highlight.blue.focus.block:after {
@@ -6749,6 +6757,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.purple.focus {
     background-color: #545ec8;
+    border-bottom: 0.2rem solid #141a3e;
     color: #fff;
   }
 
@@ -6764,6 +6773,7 @@ li[aria-label="Current Page"] .c60 {
 @media screen {
   .c77 .highlight.pink.focus {
     background-color: #de017e;
+    border-bottom: 0.2rem solid #560131;
     color: #fff;
   }
 
diff --git a/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
index ded9ca4325..db63417127 100644
--- a/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
+++ b/src/app/content/components/popUp/__snapshots__/ColorFilter.spec.tsx.snap
@@ -507,6 +507,7 @@ input:checked + .c8 .c10 {
         size="small"
         style={
           Object {
+            "focusBorder": "#8f7700",
             "focused": "#fed200",
             "label": "yellow",
             "passive": "#ffff8a",
@@ -567,6 +568,7 @@ input:checked + .c8 .c10 {
         size="small"
         style={
           Object {
+            "focusBorder": "#4e6f01",
             "focused": "#92d101",
             "label": "green",
             "passive": "#def99f",
@@ -627,6 +629,7 @@ input:checked + .c8 .c10 {
         size="small"
         style={
           Object {
+            "focusBorder": "#006880",
             "focused": "#00c3ed",
             "label": "blue",
             "passive": "#c8f5ff",
@@ -687,6 +690,7 @@ input:checked + .c8 .c10 {
         size="small"
         style={
           Object {
+            "focusBorder": "#141a3e",
             "focused": "#545ec8",
             "label": "purple",
             "passive": "#cbcfff",
@@ -747,6 +751,7 @@ input:checked + .c8 .c10 {
         size="small"
         style={
           Object {
+            "focusBorder": "#560131",
             "focused": "#de017e",
             "label": "pink",
             "passive": "#ffc5e1",
diff --git a/src/app/content/components/popUp/__snapshots__/Filters.spec.tsx.snap b/src/app/content/components/popUp/__snapshots__/Filters.spec.tsx.snap
index d9cca9a8a7..f614af5189 100644
--- a/src/app/content/components/popUp/__snapshots__/Filters.spec.tsx.snap
+++ b/src/app/content/components/popUp/__snapshots__/Filters.spec.tsx.snap
@@ -1061,26 +1061,31 @@ exports[`Filters matches snapshot when open color filters 1`] = `
         styles={
           Array [
             Object {
+              "focusBorder": "#8f7700",
               "focused": "#fed200",
               "label": "yellow",
               "passive": "#ffff8a",
             },
             Object {
+              "focusBorder": "#4e6f01",
               "focused": "#92d101",
               "label": "green",
               "passive": "#def99f",
             },
             Object {
+              "focusBorder": "#006880",
               "focused": "#00c3ed",
               "label": "blue",
               "passive": "#c8f5ff",
             },
             Object {
+              "focusBorder": "#141a3e",
               "focused": "#545ec8",
               "label": "purple",
               "passive": "#cbcfff",
             },
             Object {
+              "focusBorder": "#560131",
               "focused": "#de017e",
               "label": "pink",
               "passive": "#ffc5e1",
diff --git a/src/app/content/constants.ts b/src/app/content/constants.ts
index ef9a50b86c..8b8b752982 100644
--- a/src/app/content/constants.ts
+++ b/src/app/content/constants.ts
@@ -14,12 +14,42 @@ export const modalQueryParameterName = 'modal';
 export const colorFilterQueryParameterName = 'colors';
 export const locationIdsFilterQueryParameterName = 'locationIds';
 
-export const highlightStyles: Array<{label: HighlightColorEnum, passive: string, focused: string}> = [
-  {label: HighlightColorEnum.Yellow, passive: '#ffff8a', focused: '#fed200'},
-  {label: HighlightColorEnum.Green, passive: '#def99f', focused: '#92d101'},
-  {label: HighlightColorEnum.Blue, passive: '#c8f5ff', focused: '#00c3ed'},
-  {label: HighlightColorEnum.Purple, passive: '#cbcfff', focused: '#545ec8'},
-  {label: HighlightColorEnum.Pink, passive: '#ffc5e1', focused: '#de017e'},
+export const highlightStyles: Array<{
+  label: HighlightColorEnum;
+  passive: string;
+  focused: string;
+  focusBorder: string;
+}> = [
+  {
+    label: HighlightColorEnum.Yellow,
+    passive: '#ffff8a',
+    focused: '#fed200',
+    focusBorder: '#8f7700',
+  },
+  {
+    label: HighlightColorEnum.Green,
+    passive: '#def99f',
+    focused: '#92d101',
+    focusBorder: '#4e6f01',
+  },
+  {
+    label: HighlightColorEnum.Blue,
+    passive: '#c8f5ff',
+    focused: '#00c3ed',
+    focusBorder: '#006880',
+  },
+  {
+    label: HighlightColorEnum.Purple,
+    passive: '#cbcfff',
+    focused: '#545ec8',
+    focusBorder: '#141a3e',
+  },
+  {
+    label: HighlightColorEnum.Pink,
+    passive: '#ffc5e1',
+    focused: '#de017e',
+    focusBorder: '#560131',
+  },
 ];
 
 export type TextResizerValue = -2 | -1 | 0 | 1 | 2 | 3;
diff --git a/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap b/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
index 7401ae8a00..29a6cbf660 100644
--- a/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
+++ b/src/app/content/highlights/components/SummaryPopup/__snapshots__/ContextMenu.spec.tsx.snap
@@ -600,6 +600,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           size="small"
           style={
             Object {
+              "focusBorder": "#8f7700",
               "focused": "#fed200",
               "label": "yellow",
               "passive": "#ffff8a",
@@ -631,6 +632,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
             size="small"
             style={
               Object {
+                "focusBorder": "#8f7700",
                 "focused": "#fed200",
                 "label": "yellow",
                 "passive": "#ffff8a",
@@ -646,6 +648,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           size="small"
           style={
             Object {
+              "focusBorder": "#4e6f01",
               "focused": "#92d101",
               "label": "green",
               "passive": "#def99f",
@@ -677,6 +680,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
             size="small"
             style={
               Object {
+                "focusBorder": "#4e6f01",
                 "focused": "#92d101",
                 "label": "green",
                 "passive": "#def99f",
@@ -692,6 +696,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           size="small"
           style={
             Object {
+              "focusBorder": "#006880",
               "focused": "#00c3ed",
               "label": "blue",
               "passive": "#c8f5ff",
@@ -723,6 +728,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
             size="small"
             style={
               Object {
+                "focusBorder": "#006880",
                 "focused": "#00c3ed",
                 "label": "blue",
                 "passive": "#c8f5ff",
@@ -738,6 +744,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           size="small"
           style={
             Object {
+              "focusBorder": "#141a3e",
               "focused": "#545ec8",
               "label": "purple",
               "passive": "#cbcfff",
@@ -769,6 +776,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
             size="small"
             style={
               Object {
+                "focusBorder": "#141a3e",
                 "focused": "#545ec8",
                 "label": "purple",
                 "passive": "#cbcfff",
@@ -784,6 +792,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
           size="small"
           style={
             Object {
+              "focusBorder": "#560131",
               "focused": "#de017e",
               "label": "pink",
               "passive": "#ffc5e1",
@@ -815,6 +824,7 @@ exports[`ContextMenu match snapshot when open 1`] = `
             size="small"
             style={
               Object {
+                "focusBorder": "#560131",
                 "focused": "#de017e",
                 "label": "pink",
                 "passive": "#ffc5e1",
diff --git a/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap b/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap
index deeef4265f..f9f6aee662 100644
--- a/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap
+++ b/src/app/content/highlights/components/SummaryPopup/__snapshots__/Filters.spec.tsx.snap
@@ -950,6 +950,7 @@ input:checked + .c21 .c22 {
               size="small"
               style={
                 Object {
+                  "focusBorder": "#8f7700",
                   "focused": "#fed200",
                   "label": "yellow",
                   "passive": "#ffff8a",
@@ -1010,6 +1011,7 @@ input:checked + .c21 .c22 {
               size="small"
               style={
                 Object {
+                  "focusBorder": "#4e6f01",
                   "focused": "#92d101",
                   "label": "green",
                   "passive": "#def99f",
@@ -1070,6 +1072,7 @@ input:checked + .c21 .c22 {
               size="small"
               style={
                 Object {
+                  "focusBorder": "#006880",
                   "focused": "#00c3ed",
                   "label": "blue",
                   "passive": "#c8f5ff",
@@ -1130,6 +1133,7 @@ input:checked + .c21 .c22 {
               size="small"
               style={
                 Object {
+                  "focusBorder": "#141a3e",
                   "focused": "#545ec8",
                   "label": "purple",
                   "passive": "#cbcfff",
@@ -1190,6 +1194,7 @@ input:checked + .c21 .c22 {
               size="small"
               style={
                 Object {
+                  "focusBorder": "#560131",
                   "focused": "#de017e",
                   "label": "pink",
                   "passive": "#ffc5e1",
diff --git a/src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap
index 645fac8066..325df61dd4 100644
--- a/src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/ColorIndicator.spec.tsx.snap
@@ -85,6 +85,7 @@ exports[`ColorIndicator matches snapshot (checked) 1`] = `
     className="c4 c5"
     style={
       Object {
+        "focusBorder": "#8f7700",
         "focused": "#fed200",
         "label": "yellow",
         "passive": "#ffff8a",
@@ -168,6 +169,7 @@ exports[`ColorIndicator matches snapshot 1`] = `
     className="c4 c5"
     style={
       Object {
+        "focusBorder": "#8f7700",
         "focused": "#fed200",
         "label": "yellow",
         "passive": "#ffff8a",
diff --git a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
index 84617414a1..67abbadf96 100644
--- a/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
+++ b/src/app/content/highlights/components/__snapshots__/ColorPicker.spec.tsx.snap
@@ -262,6 +262,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
     component={<label />}
     style={
       Object {
+        "focusBorder": "#8f7700",
         "focused": "#fed200",
         "label": "yellow",
         "passive": "#ffff8a",
@@ -292,6 +293,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       className="c6 c7"
       style={
         Object {
+          "focusBorder": "#8f7700",
           "focused": "#fed200",
           "label": "yellow",
           "passive": "#ffff8a",
@@ -306,6 +308,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
     component={<label />}
     style={
       Object {
+        "focusBorder": "#4e6f01",
         "focused": "#92d101",
         "label": "green",
         "passive": "#def99f",
@@ -336,6 +339,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       className="c6 c9"
       style={
         Object {
+          "focusBorder": "#4e6f01",
           "focused": "#92d101",
           "label": "green",
           "passive": "#def99f",
@@ -350,6 +354,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
     component={<label />}
     style={
       Object {
+        "focusBorder": "#006880",
         "focused": "#00c3ed",
         "label": "blue",
         "passive": "#c8f5ff",
@@ -380,6 +385,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       className="c6 c11"
       style={
         Object {
+          "focusBorder": "#006880",
           "focused": "#00c3ed",
           "label": "blue",
           "passive": "#c8f5ff",
@@ -394,6 +400,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
     component={<label />}
     style={
       Object {
+        "focusBorder": "#141a3e",
         "focused": "#545ec8",
         "label": "purple",
         "passive": "#cbcfff",
@@ -424,6 +431,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       className="c6 c13"
       style={
         Object {
+          "focusBorder": "#141a3e",
           "focused": "#545ec8",
           "label": "purple",
           "passive": "#cbcfff",
@@ -438,6 +446,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
     component={<label />}
     style={
       Object {
+        "focusBorder": "#560131",
         "focused": "#de017e",
         "label": "pink",
         "passive": "#ffc5e1",
@@ -468,6 +477,7 @@ exports[`ColorPicker matches snapshot no selection 1`] = `
       className="c6 c15"
       style={
         Object {
+          "focusBorder": "#560131",
           "focused": "#de017e",
           "label": "pink",
           "passive": "#ffc5e1",
diff --git a/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap b/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap
index 7b7af2801e..fccb046538 100644
--- a/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap
+++ b/src/app/content/studyGuides/components/__snapshots__/Filters.spec.tsx.snap
@@ -1460,6 +1460,7 @@ input:checked + .c21 .c22 {
               size="small"
               style={
                 Object {
+                  "focusBorder": "#8f7700",
                   "focused": "#fed200",
                   "label": "yellow",
                   "passive": "#ffff8a",
@@ -1520,6 +1521,7 @@ input:checked + .c21 .c22 {
               size="small"
               style={
                 Object {
+                  "focusBorder": "#4e6f01",
                   "focused": "#92d101",
                   "label": "green",
                   "passive": "#def99f",
@@ -1580,6 +1582,7 @@ input:checked + .c21 .c22 {
               size="small"
               style={
                 Object {
+                  "focusBorder": "#006880",
                   "focused": "#00c3ed",
                   "label": "blue",
                   "passive": "#c8f5ff",
@@ -1640,6 +1643,7 @@ input:checked + .c21 .c22 {
               size="small"
               style={
                 Object {
+                  "focusBorder": "#141a3e",
                   "focused": "#545ec8",
                   "label": "purple",
                   "passive": "#cbcfff",