feat: wallet settings revamp

src/app/components/AccountDetailLayout/index.tsx

@@ -10,9 +10,8 @@ function AccountDetailLayout() {
   const navigate = useNavigate();
   const isRoot = useMatch("accounts/:id");
   const { accounts } = useAccounts();
-  const { t } = useTranslation("translation", {
-    keyPrefix: "accounts.account_view",
-  });
+
+  const { t: tCommon } = useTranslation("common");
   const { id } = useParams() as { id: string };
 
   function back() {
@@ -50,7 +49,7 @@ function AccountDetailLayout() {
             </h2>
             <span>/</span>
             <span className="text-ellipsis whitespace-nowrap overflow-hidden">
-              {t("title1")}
+              {tCommon("wallet_settings")}
             </span>
           </div>
         )}

src/app/components/AccountMenu/index.tsx

@@ -127,7 +127,7 @@ function AccountMenu({ showOptions = true }: Props) {
             }}
           >
             <PopiconsWalletLine className="w-4 h-4 mr-2 shrink-0" />
-            {t("options.account.wallet_settings")}
+            {tCommon("wallet_settings")}
           </Menu.ItemButton>
           {(isAlbyLNDHubAccount(
             authAccount?.alias,

src/app/components/Button/index.tsx

@@ -8,6 +8,7 @@ export type Props = React.ButtonHTMLAttributes<HTMLButtonElement> & {
   halfWidth?: boolean;
   label: string;
   icon?: React.ReactNode;
+  iconRight?: React.ReactNode;
   primary?: boolean;
   destructive?: boolean;
   outline?: boolean;
@@ -26,6 +27,7 @@ const Button = forwardRef(
       disabled,
       direction = "row",
       icon,
+      iconRight,
       fullWidth = false,
       halfWidth = false,
       primary = false,
@@ -61,7 +63,7 @@ const Button = forwardRef(
             "hover:bg-gray-50 dark:hover:bg-surface-16dp",
           disabled ? "cursor-default opacity-60" : "cursor-pointer",
           flex && "flex-1",
-          "inline-flex justify-center items-center font-medium bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary transition duration-150",
+          "inline-flex justify-center items-center gap-1 font-medium bg-origin-border shadow rounded-md focus:outline-none focus-visible:ring-2 focus-visible:ring-offset-2 focus-visible:ring-primary transition duration-150",
           !!className && className
         )}
         onClick={onClick}
@@ -74,6 +76,7 @@ const Button = forwardRef(
         )}
         {icon}
         {label}
+        {iconRight}
       </button>
     );
   }

src/app/components/Setting/index.tsx

@@ -16,7 +16,9 @@ function Setting({ title, subtitle, children, inline }: Props) {
       )}
     >
       <div>
-        <span className="text-black dark:text-white font-medium">{title}</span>
+        <span className="text-gray-800 dark:text-white font-medium">
+          {title}
+        </span>
         <p className="text-gray-600 mr-1 dark:text-neutral-400 text-sm">
           {subtitle}
         </p>

src/app/components/form/TextField/index.tsx

@@ -1,7 +1,7 @@
 import Input from "../Input";
 
 export type Props = {
-  label: string;
+  label: string | React.ReactNode;
   hint?: string;
   suffix?: string;
   endAdornment?: React.ReactNode;