From 760edb4feba06991e1f86ea4feec76abb692df6d Mon Sep 17 00:00:00 2001
From: TomNUSDS <74203452+TomNUSDS@users.noreply.github.com>
Date: Mon, 14 Jun 2021 13:21:18 -0700
Subject: [PATCH] Update global.scss (#127)

Fix some low-contrast accessibility issues for mobile menu.
---
 client/src/styles/global.scss | 14 +++++++++++---
 1 file changed, 11 insertions(+), 3 deletions(-)

diff --git a/client/src/styles/global.scss b/client/src/styles/global.scss
index f9e21409..66f0ee9f 100644
--- a/client/src/styles/global.scss
+++ b/client/src/styles/global.scss
@@ -76,7 +76,7 @@ $j40-max-width: 80ex;
   }
 
   span {
-    // make sure the open close cheveron is colored correctly
+    // make sure the open close chevron is colored correctly
     color: white;
   }
 
@@ -95,8 +95,16 @@ $j40-max-width: 80ex;
     font-size: 1.2em;
   }
 
-  //media (max-width: 63.99em)
-  //.usa-nav__primary a:not(.usa-button):hover {}
+  // invert the hover color so contrast stays good enough for accessibility
+  .usa-nav__primary a:not(.usa-button):hover {
+    background-color: #2491ff !important;
+  }
+
+  // this is the closebox, it's not easy to change the X color, so we change
+  // the background to keep it's contrast high
+  .usa-nav__close {
+    background-color: white;
+  }
 }
 
 .j40-aside {