refactor(wallet): Remove, rebrand, cleanup ButtonOrLink, tooltip, com…

…ponents/menu (#3586)
iotaledger · Oct 24, 2024 · fed535c · fed535c
1 parent 3dd596f
commit fed535c
Show file tree

Hide file tree

Showing 10 changed files with 48 additions and 361 deletions.
diff --git a/apps/wallet/src/ui/app/components/IconButton.tsx b/apps/wallet/src/ui/app/components/IconButton.tsx
diff --git a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx
@@ -8,8 +8,15 @@ import { Form, Formik } from 'formik';
 import { toast } from 'react-hot-toast';
 import { useNavigate } from 'react-router-dom';
 import { object, string as YupString } from 'yup';
-import { Loader } from '@iota/ui-icons';
-import { Button, ButtonHtmlType, ButtonType, Header, InputType } from '@iota/apps-ui-kit';
+import { ArrowLeft, ArrowRight, Loader } from '@iota/ui-icons';
+import {
+    Button,
+    ButtonHtmlType,
+    ButtonType,
+    ButtonSize,
+    Header,
+    InputType,
+} from '@iota/apps-ui-kit';
 import { PasswordInputField } from '../shared/input/password';
 
 const validation = object({
@@ -83,8 +90,10 @@ export function PasswordInputDialog({
                     <div className="flex flex-nowrap gap-3.75 self-stretch">
                         {showBackButton ? (
                             <Button
+                                size={ButtonSize.Small}
                                 text="Back"
                                 type={ButtonType.Secondary}
+                                icon={<ArrowLeft className="h-4 w-4" />}
                                 onClick={() => {
                                     if (typeof onBackClicked === 'function') {
                                         onBackClicked();
@@ -97,11 +106,18 @@ export function PasswordInputDialog({
                             />
                         ) : null}
                         <Button
+                            size={ButtonSize.Small}
                             htmlType={ButtonHtmlType.Submit}
                             type={ButtonType.Primary}
                             text={continueLabel}
-                            disabled={!isValid}
-                            icon={isSubmitting ? <Loader className="h-4 w-4 animate-spin" /> : null}
+                            disabled={isSubmitting || !isValid}
+                            icon={
+                                isSubmitting ? (
+                                    <Loader className="h-4 w-4 animate-spin" />
+                                ) : (
+                                    <ArrowRight className="h-4 w-4" />
+                                )
+                            }
                             iconAfterText
                             fullWidth
                         />

diff --git a/apps/wallet/src/ui/app/components/accounts/AccountBalanceItem.tsx b/apps/wallet/src/ui/app/components/accounts/AccountBalanceItem.tsx
@@ -3,10 +3,10 @@
 
 import { formatAddress } from '@iota/iota-sdk/utils';
 import { useCopyToClipboard } from '../../hooks/useCopyToClipboard';
-import { IconButton } from '_components';
 import { type SerializedUIAccount } from '_src/background/accounts/Account';
 import { useBalance, useFormatCoin } from '@iota/core';
 import { Copy } from '@iota/ui-icons';
+import { ButtonUnstyled } from '@iota/apps-ui-kit';
 
 interface AccountBalanceItemProps {
     account: SerializedUIAccount;
@@ -30,11 +30,9 @@ export function AccountBalanceItem({ account }: AccountBalanceItemProps): JSX.El
                 <div className="text-steel-dark flex gap-1.5 leading-none">
                     <span className="text-body-md">{formatAddress(account.address)}</span>
                     <div className="flex gap-1 opacity-0 duration-100 group-hover:opacity-100">
-                        <IconButton
-                            variant="transparent"
-                            icon={<Copy className="h-2.5 w-2.5" />}
-                            onClick={copyAddress}
-                        />
+                        <ButtonUnstyled onClick={copyAddress}>
+                            <Copy className="h-2.5 w-2.5" />
+                        </ButtonUnstyled>
                     </div>
                 </div>
 

diff --git a/apps/wallet/src/ui/app/components/index.ts b/apps/wallet/src/ui/app/components/index.ts
@@ -4,7 +4,6 @@
 export * from './DAppInfoCard';
 export * from './DAppPermissionList';
 export * from './HideShowDisplayBox';
-export * from './IconButton';
 export * from './NoData';
 export * from './Overlay';
 export * from './PageTemplate';

diff --git a/apps/wallet/src/ui/app/components/menu/button/MenuButton.module.scss b/apps/wallet/src/ui/app/components/menu/button/MenuButton.module.scss
diff --git a/apps/wallet/src/ui/app/components/menu/button/WalletSettingsButton.tsx b/apps/wallet/src/ui/app/components/menu/button/WalletSettingsButton.tsx
@@ -2,9 +2,10 @@
 // Modifications Copyright (c) 2024 IOTA Stiftung
 // SPDX-License-Identifier: Apache-2.0
 
+import { Button, ButtonSize, ButtonType } from '@iota/apps-ui-kit';
 import { Close, Settings } from '@iota/ui-icons';
 import { useMenuIsOpen, useNextMenuUrl } from '_components';
-import { ButtonOrLink } from '_src/ui/app/shared/utils/ButtonOrLink';
+import { Link } from 'react-router-dom';
 import { cx } from 'class-variance-authority';
 
 export function WalletSettingsButton() {
@@ -13,15 +14,16 @@ export function WalletSettingsButton() {
     const IconComponent = isOpen ? Close : Settings;
 
     return (
-        <ButtonOrLink
-            className={cx(
-                'hover:text-hero-dark ml-auto flex cursor-pointer appearance-none items-center justify-center border-none bg-transparent p-xs text-neutral-10 [&_svg]:h-5 [&_svg]:w-5',
-                { 'text-steel': !isOpen, 'text-gray-90': isOpen },
-            )}
+        <Link
+            className={cx('flex cursor-pointer')}
             aria-label={isOpen ? 'Close settings menu' : 'Open settings menu'}
             to={menuUrl}
         >
-            <IconComponent />
-        </ButtonOrLink>
+            <Button
+                type={ButtonType.Ghost}
+                size={ButtonSize.Small}
+                icon={<IconComponent className="h-5 w-5" />}
+            />
+        </Link>
     );
 }
diff --git a/apps/wallet/src/ui/app/components/menu/content/AutoLockAccounts.tsx b/apps/wallet/src/ui/app/components/menu/content/AutoLockAccounts.tsx
@@ -53,7 +53,7 @@ export function AutoLockAccounts() {
             closeOverlay={() => navigate(mainMenuUrl)}
         >
             <Loading loading={autoLock.isPending}>
-                <Form className="flex h-full flex-col pt-5" form={form} onSubmit={handleSave}>
+                <Form className="flex h-full flex-col" form={form} onSubmit={handleSave}>
                     <AutoLockSelector disabled={isSubmitting} />
                     <div className="flex-1" />
                     <Button

diff --git a/apps/wallet/src/ui/app/pages/accounts/manage/accounts-finder/AccountsFinderView.tsx b/apps/wallet/src/ui/app/pages/accounts/manage/accounts-finder/AccountsFinderView.tsx
@@ -2,7 +2,7 @@
 // SPDX-License-Identifier: Apache-2.0
 
 import { Search } from '@iota/ui-icons';
-import { Button, ButtonType, LoadingIndicator } from '@iota/apps-ui-kit';
+import { Button, ButtonType, ButtonSize, LoadingIndicator } from '@iota/apps-ui-kit';
 import {
     AccountBalanceItem,
     VerifyPasswordModal,
@@ -102,7 +102,7 @@ export function AccountsFinderView(): JSX.Element {
         if (searchPhase === SearchPhase.Ready) {
             return {
                 text: 'Search',
-                icon: <Search className="h-6 w-6" />,
+                icon: <Search className="h-4 w-4" />,
             };
         }
         if (searchPhase === SearchPhase.Ongoing) {
@@ -113,7 +113,7 @@ export function AccountsFinderView(): JSX.Element {
         }
         return {
             text: 'Search again',
-            icon: <Search className="h-6 w-6" />,
+            icon: <Search className="h-4 w-4" />,
         };
     })();
 
@@ -130,6 +130,7 @@ export function AccountsFinderView(): JSX.Element {
                 <div className="flex flex-col gap-2">
                     {isLedgerLocked ? (
                         <Button
+                            size={ButtonSize.Small}
                             type={ButtonType.Secondary}
                             text="Unlock Ledger"
                             onClick={unlockLedger}
@@ -138,13 +139,15 @@ export function AccountsFinderView(): JSX.Element {
                     ) : isLocked ? (
                         <Button
                             type={ButtonType.Secondary}
+                            size={ButtonSize.Small}
                             text="Verify password"
                             onClick={verifyPassword}
                             fullWidth
                         />
                     ) : (
                         <>
                             <Button
+                                size={ButtonSize.Small}
                                 type={ButtonType.Secondary}
                                 text={searchOptions.text}
                                 icon={searchOptions.icon}
@@ -156,12 +159,18 @@ export function AccountsFinderView(): JSX.Element {
 
                             <div className="flex flex-row gap-2">
                                 <Button
+                                    size={ButtonSize.Small}
                                     type={ButtonType.Secondary}
                                     text="Skip"
                                     disabled={isSearchOngoing}
                                     fullWidth
                                 />
-                                <Button text="Continue" disabled={isSearchOngoing} fullWidth />
+                                <Button
+                                    size={ButtonSize.Small}
+                                    text="Continue"
+                                    disabled={isSearchOngoing}
+                                    fullWidth
+                                />
                             </div>
                         </>
                     )}