[Issue #3523] styling fixes for auth header (#3541)

* css rule with magic number for lining up the mobile submenu removed
* active hover state for mobile button no longer has white background
* caret is white when active
* dropdown items are lighter green on hover

frontend/src/components/user/UserControl.tsx

@@ -75,7 +75,7 @@ const UserDropdown = ({
   );
 
   return (
-    <div className="usa-nav__primary-item border-top-0 mobile-nav-dropdown-uncollapsed-override">
+    <div className="usa-nav__primary-item border-top-0 mobile-nav-dropdown-uncollapsed-override position-relative">
       <NavDropDownButton
         className="padding-y-0 padding-x-2 margin-right-2 height-6"
         // The NavDropDownButton needlessly restricts the label to a string, when passing an Element works
@@ -89,7 +89,7 @@ const UserDropdown = ({
         menuId="user-control"
       />
       <Menu
-        className="position-absolute desktop:width-full z-200"
+        className="position-absolute desktop:width-full z-200 right-0"
         id="user-control"
         items={[
           <UserEmailItem key="email" isSubnav={true} email={user.email} />,

frontend/src/styles/_uswds-theme-custom-styles.scss

@@ -379,24 +379,34 @@ button.usa-pagination__button.usa-button {
   }
 }
 
-@include at-media("desktop") {
-  .usa-nav__submenu {
-    right: 0;
-  }
-}
-
 // we are implementing the uswds nav drop down at mobile widths, which is not ordinarily supported
 // these styles are taken from the desktop imlementation of the dropdown and applied at all breakpoints
 .usa-nav__primary {
   .mobile-nav-dropdown-uncollapsed-override {
+    @include at-media("desktop") {
+      button:hover {
+        background-color: white;
+      }
+      .usa-nav__submenu {
+        right: 0;
+      }
+    }
+    button[aria-expanded="true"]:hover {
+      background-color: color("mint-40");
+    }
     button[aria-expanded="true"] {
       background-color: color("mint-60");
       a {
         color: white;
       }
+      a:hover {
+        background-color: color("mint-40");
+        color: white;
+      }
       span:after {
         mask-image: url("/uswds/img/usa-icons/expand_less.svg"),
           linear-gradient(transparent, transparent);
+        background-color: white;
       }
     }
     button[aria-expanded="false"] {
@@ -412,6 +422,9 @@ button.usa-pagination__button.usa-button {
     }
     .usa-nav__submenu-item {
       background-color: color("mint-60");
+      &:hover {
+        background-color: color("mint-40");
+      }
       a {
         padding-left: 1rem;
         padding-right: 1rem;
@@ -420,8 +433,5 @@ button.usa-pagination__button.usa-button {
         display: block;
       }
     }
-    .usa-nav__submenu {
-      right: 3.7em;
-    }
   }
 }