fixup package GafaelfawrUserMenu.Link

lsst-sqre · May 16, 2024 · 72e67b8 · 72e67b8
1 parent 921fc2d
commit 72e67b8
Show file tree

Hide file tree

Showing 3 changed files with 20 additions and 4 deletions.
diff --git a/apps/squareone/src/components/Header/UserMenu.js b/apps/squareone/src/components/Header/UserMenu.js
@@ -71,12 +71,12 @@ export default function UserMenu({ pageUrl }) {
 
   return (
     <GafaelfawrUserMenu currentUrl={pageUrl}>
-      <RadixNavigationMenu.Link href={coManageRegistryUrl}>
+      <GafaelfawrUserMenu.Link href={coManageRegistryUrl}>
         Account settings
-      </RadixNavigationMenu.Link>
-      <RadixNavigationMenu.Link href={'/auth/tokens'}>
+      </GafaelfawrUserMenu.Link>
+      <GafaelfawrUserMenu.Link href={'/auth/tokens'}>
         Security tokens
-      </RadixNavigationMenu.Link>
+      </GafaelfawrUserMenu.Link>
     </GafaelfawrUserMenu>
   );
 

diff --git a/packages/squared/src/components/GafaelfawrUserMenu/GafaelfawrUserMenu.tsx b/packages/squared/src/components/GafaelfawrUserMenu/GafaelfawrUserMenu.tsx
@@ -7,6 +7,7 @@ import Menu from './Menu';
 // import MenuItem from './MenuItem';
 import { getLoginUrl, getLogoutUrl } from './authUrls';
 import useGafaelfawrUser from '../../hooks/useGafaelfawrUser';
+import { Link } from './Menu';
 
 export interface GafaelfawrUserMenuProps {
   children: React.ReactNode;
@@ -50,5 +51,6 @@ const SiteNavLink = styled.a`
 // Associate child components with the parent for easier imports.
 // GafaelfawrUserMenu.Item = MenuItem;
 // GafaelfawrUserMenu.Separator = Separator;
+GafaelfawrUserMenu.Link = Link;
 
 export default GafaelfawrUserMenu;
diff --git a/packages/squared/src/components/GafaelfawrUserMenu/Menu.tsx b/packages/squared/src/components/GafaelfawrUserMenu/Menu.tsx
@@ -223,6 +223,20 @@ const ViewportPosition = styled.div`
   perspective: 2000px;
 `;
 
+export const Link = styled(RadixNavigationMenu.Link)`
+  color: var(--rsd-component-header-nav-menulist-text-color);
+  padding: var(--gafaelfawr-user-menu-padding);
+  text-decoration: none;
+  display: block;
+
+  &:hover {
+    background-color: var(
+      --rsd-component-header-nav-menulist-selected-background-color
+    );
+    color: white;
+  }
+`;
+
 /**
  * The menu content container, used in a `DropdownMenu.Portal`.
  */