feat: update menu dropdown and navigation

src/app/components/Menu/MenuItemButton.tsx

@@ -3,15 +3,13 @@ import { classNames } from "~/app/utils/index";
 
 type Props = {
   children: React.ReactNode;
-  danger?: boolean;
   disabled?: boolean;
   onClick: () => void;
   title?: string;
 };
 
 function MenuItemButton({
   children,
-  danger = false,
   disabled = false,
   onClick,
   title = "",
@@ -21,10 +19,9 @@ function MenuItemButton({
       {({ active }) => (
         <button
           className={classNames(
-            active ? "bg-gray-100 dark:bg-white/10" : "",
-            danger ? "text-red-700" : "text-gray-700",
+            active ? "bg-gray-50 dark:bg-surface-02dp" : "",
             disabled ? "cursor-not-allowed" : "cursor-pointer",
-            "flex items-center block w-full text-left px-4 py-3 text-sm dark:text-white"
+            "flex items-center w-full p-4 text-sm text-gray-800 dark:text-neutral-200"
           )}
           disabled={disabled}
           onClick={onClick}

src/app/components/Menu/MenuList.tsx

@@ -25,7 +25,7 @@ function List({ position = "left", fullWidth, children }: Props) {
             ? "left-0 origin-top-left"
             : "right-0 origin-top-right",
           fullWidth ? "w-full" : "w-56",
-          "absolute z-50 mt-2 py-1 rounded-md shadow-lg bg-white ring-1 ring-black ring-opacity-5 focus:outline-none dark:bg-surface-12dp dark:border-0"
+          "absolute z-50 mt-2 overflow-hidden rounded-xl shadow-lg bg-white focus:outline-none dark:bg-surface-01dp border border-gray-200 dark:border-neutral-700"
         )}
       >
         {children}

src/app/components/Navbar/NavbarLink.tsx

@@ -5,19 +5,21 @@ type Props = {
   children: React.ReactNode;
   end?: boolean;
   href: string;
+  target?: string;
 };
 
-function NavbarLink({ children, end = false, href }: Props) {
+function NavbarLink({ children, end = false, href, target }: Props) {
   return (
     <NavLink
       end={end}
       to={href}
+      target={target}
       className={({ isActive }) =>
         classNames(
-          "block font-semibold hover:text-gray-600 dark:hover:text-gray-300 transition px-1 text-md",
+          "flex items-center font-semibold hover:text-gray-600 dark:hover:text-neutral-400 transition px-1 text-md",
           isActive
-            ? " text-gray-900 dark:text-gray-100"
-            : " text-gray-400 dark:text-gray-400"
+            ? " text-gray-800 dark:text-neutral-200"
+            : " text-gray-400 dark:text-gray-600"
         )
       }
     >

src/app/components/UserMenu/index.tsx

@@ -1,17 +1,17 @@
-import {
-  GearIcon,
-  LockIcon,
-  MagicWandIcon,
-  MenuIcon,
-  RocketIcon,
-  WalletIcon,
-} from "@bitcoin-design/bitcoin-icons-react/filled";
+import { MenuIcon } from "@bitcoin-design/bitcoin-icons-react/filled";
 import { useTranslation } from "react-i18next";
 import { useNavigate } from "react-router-dom";
 import { useAccount } from "~/app/context/AccountContext";
-import { ConnectedSiteIcon, HelpIcon } from "~/app/icons";
+import { ConnectedSiteIcon } from "~/app/icons";
 import utils from "~/common/lib/utils";
 
+import {
+  PopiconsBulbLine,
+  PopiconsCogLine,
+  PopiconsCommentLine,
+  PopiconsExpandLine,
+  PopiconsLockLine,
+} from "@popicons/react";
 import Menu from "../Menu";
 
 export default function UserMenu() {
@@ -42,66 +42,58 @@ export default function UserMenu() {
 
   return (
     <Menu as="div" className="relative">
-      <Menu.Button className="flex items-center text-gray-700 dark:text-white hover:text-black dark:hover:text-white transition-colors duration-200">
+      <Menu.Button className="flex items-center text-gray-800 dark:text-neutral-200 hover:text-black dark:hover:text-white transition-colors duration-200">
         <MenuIcon className="h-6 w-6" />
       </Menu.Button>
       <Menu.List position="left">
         <div className="lg:hidden">
           <Menu.ItemButton
             onClick={() => {
-              openOptions("discover");
+              openOptions("wallet");
             }}
           >
-            <RocketIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
-            {tCommon("discover")}
+            <PopiconsExpandLine className="h-5 w-5 mr-2 text-gray-800 dark:text-neutral-200" />
+            {tCommon("full_screen")}
           </Menu.ItemButton>
           <Menu.ItemButton
             onClick={() => {
               openOptions("publishers");
             }}
           >
-            <ConnectedSiteIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
+            <ConnectedSiteIcon className="h-5 w-5 mr-2 text-gray-800 dark:text-neutral-200" />
             {tCommon("connected_sites")}
           </Menu.ItemButton>
-          <Menu.ItemButton
-            onClick={() => {
-              openOptions("wallet");
-            }}
-          >
-            <WalletIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
-            {tCommon("wallet")}
-          </Menu.ItemButton>
-          <Menu.Divider />
         </div>
         <Menu.ItemButton
           onClick={() => {
             openOptions("settings");
           }}
         >
-          <GearIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
+          <PopiconsCogLine className="h-5 w-5 mr-2 text-gray-800 dark:text-neutral-200" />
           {tCommon("settings")}
         </Menu.ItemButton>
         <Menu.ItemButton
           onClick={() => {
             utils.openUrl("https://feedback.getalby.com");
           }}
         >
-          <MagicWandIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
+          <PopiconsCommentLine className="h-5 w-5 mr-2 text-gray-800 dark:text-neutral-200" />
           {tCommon("feedback")}
         </Menu.ItemButton>
+
         <Menu.ItemButton
           onClick={() => {
             utils.openUrl(
               "https://guides.getalby.com/user-guide/v/alby-account-and-browser-extension/"
             );
           }}
         >
-          <HelpIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
+          <PopiconsBulbLine className="h-5 w-5 mr-2 text-gray-800 dark:text-neutral-200" />
           {tCommon("help")}
         </Menu.ItemButton>
-        <Menu.Divider />
+
         <Menu.ItemButton onClick={lock}>
-          <LockIcon className="h-5 w-5 mr-2 text-gray-700 dark:text-neutral-300" />
+          <PopiconsLockLine className="h-5 w-5 mr-2 text-gray-800 dark:text-neutral-200" />
           {tCommon("actions.lock")}
         </Menu.ItemButton>
       </Menu.List>