finish styles

HHS · Jan 7, 2025 · f7aee84 · f7aee84
1 parent c77d8a2
commit f7aee84
Show file tree

Hide file tree

Showing 3 changed files with 41 additions and 21 deletions.
diff --git a/frontend/src/components/Header.tsx b/frontend/src/components/Header.tsx
@@ -192,7 +192,7 @@ const Header = ({ logoPath, locale }: Props) => {
             />
           </div>
           {!!showLoginLink && (
-            <div className="usa-nav__primary margin-top-0 desktop:margin-bottom-1 desktop:margin-bottom-5px text-no-wrap desktop:order-last margin-left-auto">
+            <div className="usa-nav__primary margin-top-0 padding-bottom-05 text-no-wrap desktop:order-last margin-left-auto desktop:height-auto height-6">
               <UserControl />
             </div>
           )}

diff --git a/frontend/src/components/user/UserControl.tsx b/frontend/src/components/user/UserControl.tsx
@@ -24,7 +24,7 @@ const LoginLink = ({
       <a
         {...(loginUrl ? { href: loginUrl } : "")}
         key="login-link"
-        className="usa-nav__link text-primary font-sans-2xs display-flex text-normal"
+        className="usa-nav__link font-sans-2xs display-flex"
       >
         <USWDSIcon
           className="margin-right-05 margin-left-neg-05"
@@ -37,6 +37,10 @@ const LoginLink = ({
   );
 };
 
+// used in three different places
+// 1. on desktop - nav item drop down button content
+// 2. on mobile - nav item drop down button content, without email text
+// 3. on mobile - nav sub item content
 const UserEmailItem = ({
   email,
   isSubnav,
@@ -47,22 +51,25 @@ const UserEmailItem = ({
   return (
     <a
       className={clsx("flex-align-center", "display-flex", {
+        "padding-x-0": !isSubnav,
         "desktop:display-none": isSubnav,
         "usa-nav__submenu-item": isSubnav,
+        "usa-button": isSubnav,
+        "border-y-0": isSubnav,
       })}
     >
       <USWDSIcon
         name="account_circle"
         className="usa-icon--size-3 display-block"
       />
-      <IconListContent
-        className={clsx("font-sans-sm", {
+      <div
+        className={clsx("padding-left-1", {
           "display-none": !isSubnav,
           "desktop:display-block": !isSubnav,
         })}
       >
         {email}
-      </IconListContent>
+      </div>
     </a>
   );
 };
@@ -95,7 +102,7 @@ const UserDropdown = ({
   return (
     <div className="usa-nav__primary-item border-top-0 mobile-nav-dropdown-uncollapsed-override">
       <NavDropDownButton
-        className="padding-0 desktop:padding-bottom-1 desktop:padding-x-2 margin-right-2 height-6"
+        className="padding-y-0 padding-x-2 margin-right-2 height-6"
         label={<UserEmailItem isSubnav={false} email={user.email} />}
         isOpen={userProfileMenuOpen}
         onToggle={() => setUserProfileMenuOpen(!userProfileMenuOpen)}

diff --git a/frontend/src/styles/_uswds-theme-custom-styles.scss b/frontend/src/styles/_uswds-theme-custom-styles.scss
@@ -390,21 +390,34 @@ button.usa-pagination__button.usa-button {
 
 // 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
-.mobile-nav-dropdown-uncollapsed-override {
-  button[aria-expanded=true] {
-    background-color: color("mint-60");
-  }
-  .usa-nav__submenu-item {
-    background-color: color('mint-60');
-    a {
-      padding-left: 1rem;
-      padding-right: 1rem;
-      color: white;
-      line-height: 1.4;
-      display: block;
+.usa-nav__primary {
+  .mobile-nav-dropdown-uncollapsed-override {
+    button[aria-expanded=true] {
+      background-color: color("mint-60");
+      a {
+        color: white;
+      }
+      span:after {
+        mask-image: url("/uswds/img/usa-icons/expand_less.svg"), linear-gradient(transparent, transparent);
+      }
+    }
+    button[aria-expanded=false] {
+      span:after {
+        mask-image: url("/uswds/img/usa-icons/expand_more.svg"), linear-gradient(transparent, transparent);
+      }
+    }
+    .usa-nav__submenu-item {
+      background-color: color('mint-60');
+      a {
+        padding-left: 1rem;
+        padding-right: 1rem;
+        color: white;
+        line-height: 1.4;
+        display: block;
+      }
+    }
+    .usa-nav__submenu {
+      right: 3.6em;
     }
-  }
-  .usa-nav__submenu {
-    right: 3.6em;
   }
 }