[Issue #3247] login header follow up fixes (#3480)

* fix bug where mobile login dropdown appeared on top of mobile menu * improve spacing on mobile login dropdown
HHS · Jan 10, 2025 · 96f6b65 · 96f6b65
1 parent 6f82fa2
commit 96f6b65
Show file tree

Hide file tree

Showing 4 changed files with 10 additions and 6 deletions.
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -24,12 +24,13 @@ type PrimaryLink = {
 };
 
 type Props = {
-  logoPath?: string;
   locale?: string;
 };
 
 const homeRegexp = /^\/(?:e[ns])?$/;
 
+const logoPath = "./img/grants-logo.svg";
+
 const NavLinks = ({
   mobileExpanded,
   onToggleMobileNav,
@@ -120,8 +121,7 @@ const NavLinks = ({
   );
 };
 
-const Header = ({ logoPath, locale }: Props) => {
-  logoPath = "./img/grants-logo.svg";
+const Header = ({ locale }: Props) => {
   const t = useTranslations("Header");
   const [isMobileNavExpanded, setIsMobileNavExpanded] =
     useState<boolean>(false);

diff --git a/frontend/src/components/user/UserControl.tsx b/frontend/src/components/user/UserControl.tsx
@@ -89,7 +89,7 @@ const UserDropdown = ({
         menuId="user-control"
       />
       <Menu
-        className="position-absolute desktop:width-full z-top"
+        className="position-absolute desktop:width-full z-200"
         id="user-control"
         items={[
           <UserEmailItem key="email" isSubnav={true} email={user.email} />,

diff --git a/frontend/src/styles/_uswds-theme-custom-styles.scss b/frontend/src/styles/_uswds-theme-custom-styles.scss
@@ -405,6 +405,11 @@ button.usa-pagination__button.usa-button {
           linear-gradient(transparent, transparent);
       }
     }
+    button[aria-expanded] {
+      span:after {
+        right: 0.75rem;
+      }
+    }
     .usa-nav__submenu-item {
       background-color: color("mint-60");
       a {
@@ -416,7 +421,7 @@ button.usa-pagination__button.usa-button {
       }
     }
     .usa-nav__submenu {
-      right: 3.6em;
+      right: 3.7em;
     }
   }
 }
diff --git a/frontend/tests/components/Header.test.tsx b/frontend/tests/components/Header.test.tsx
@@ -7,7 +7,6 @@ import { ReadonlyURLSearchParams } from "next/navigation";
 import Header from "src/components/Header";
 
 const props = {
-  logoPath: "/img/logo.svg",
   locale: "en",
 };