diff --git a/apps/core/src/components/coin/CoinIcon.tsx b/apps/core/src/components/coin/CoinIcon.tsx index 8dfd50ca5aa..f93a12baf64 100644 --- a/apps/core/src/components/coin/CoinIcon.tsx +++ b/apps/core/src/components/coin/CoinIcon.tsx @@ -18,7 +18,7 @@ interface NonIotaCoinProps { function NonIotaCoin({ coinType, size = ImageIconSize.Full, rounded }: NonIotaCoinProps) { const { data: coinMeta } = useCoinMetadata(coinType); return ( -
+
-
+
diff --git a/apps/core/src/components/coin/CoinItem.tsx b/apps/core/src/components/coin/CoinItem.tsx index a7d82afe1ba..8e2062efa26 100644 --- a/apps/core/src/components/coin/CoinItem.tsx +++ b/apps/core/src/components/coin/CoinItem.tsx @@ -39,13 +39,8 @@ export function CoinItem({ return ( -
- +
+
- + {isIota ? (coinMeta?.name || '').toUpperCase() : coinMeta?.name || symbol}
diff --git a/apps/core/src/components/icon/ImageIcon.tsx b/apps/core/src/components/icon/ImageIcon.tsx index 6b58dbf715a..3f1e76a6d31 100644 --- a/apps/core/src/components/icon/ImageIcon.tsx +++ b/apps/core/src/components/icon/ImageIcon.tsx @@ -42,9 +42,8 @@ function FallBackAvatar({ str, rounded, size = ImageIconSize.Large }: FallBackAv return (
diff --git a/apps/wallet/src/ui/app/components/DAppPermissionList.tsx b/apps/wallet/src/ui/app/components/DAppPermissionList.tsx index 3f5d4b33d6c..b565f9aff18 100644 --- a/apps/wallet/src/ui/app/components/DAppPermissionList.tsx +++ b/apps/wallet/src/ui/app/components/DAppPermissionList.tsx @@ -20,7 +20,7 @@ export function DAppPermissionList({ permissions }: DAppPermissionListProps) { {permissions.map((permissionKey) => ( } + icon={} text={PERMISSION_TYPE_TO_TEXT[permissionKey]} /> ))} diff --git a/apps/wallet/src/ui/app/components/NoData.tsx b/apps/wallet/src/ui/app/components/NoData.tsx index 4c943d9ab68..c8052f55236 100644 --- a/apps/wallet/src/ui/app/components/NoData.tsx +++ b/apps/wallet/src/ui/app/components/NoData.tsx @@ -1,15 +1,19 @@ // Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 +import { Theme, useTheme } from '@iota/core'; import NoDataImage from '_assets/images/no_data.svg'; +import NoDataDarkImage from '_assets/images/no_data_darkmode.svg'; interface NoDataProps { message: string; } export function NoData({ message }: NoDataProps) { + const { theme } = useTheme(); + return (
- + {theme === Theme.Dark ? : } {message}
); diff --git a/apps/wallet/src/ui/app/components/Overlay.tsx b/apps/wallet/src/ui/app/components/Overlay.tsx index 73e523e38cd..69a027a87ea 100644 --- a/apps/wallet/src/ui/app/components/Overlay.tsx +++ b/apps/wallet/src/ui/app/components/Overlay.tsx @@ -15,7 +15,7 @@ interface OverlayProps { closeOverlay?: () => void; closeIcon?: ReactNode | null; setShowModal?: (showModal: boolean) => void; - background?: 'bg-neutral-100'; + background?: 'bg-neutral-100 dark:bg-neutral-6'; titleCentered?: boolean; showBackButton?: boolean; onBack?: () => void; @@ -58,7 +58,7 @@ export function Overlay({ testId="overlay-title" /> )} -
+
{children}
diff --git a/apps/wallet/src/ui/app/components/PageTemplate.tsx b/apps/wallet/src/ui/app/components/PageTemplate.tsx index 3648ff6732c..53fe44848bf 100644 --- a/apps/wallet/src/ui/app/components/PageTemplate.tsx +++ b/apps/wallet/src/ui/app/components/PageTemplate.tsx @@ -33,7 +33,7 @@ export function PageTemplate({ onClose={onClose} /> )} -
+
{children}
diff --git a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx index 842e31ac7f2..2b433c7e41d 100644 --- a/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx +++ b/apps/wallet/src/ui/app/components/PasswordInputDialog.tsx @@ -68,7 +68,7 @@ export function PasswordInputDialog({ {({ isSubmitting, isValid, errors }) => (
diff --git a/apps/wallet/src/ui/app/components/SummaryCard.tsx b/apps/wallet/src/ui/app/components/SummaryCard.tsx index 936c7f48d85..deb53bc7f2f 100644 --- a/apps/wallet/src/ui/app/components/SummaryCard.tsx +++ b/apps/wallet/src/ui/app/components/SummaryCard.tsx @@ -13,7 +13,7 @@ export interface SummaryCardProps { export function SummaryCard({ body, header, footer }: SummaryCardProps) { return ( -
+
{header ? (
diff --git a/apps/wallet/src/ui/app/components/SummaryPanel.tsx b/apps/wallet/src/ui/app/components/SummaryPanel.tsx index c16c3f743b0..b3f098f474b 100644 --- a/apps/wallet/src/ui/app/components/SummaryPanel.tsx +++ b/apps/wallet/src/ui/app/components/SummaryPanel.tsx @@ -11,7 +11,7 @@ interface SummaryPanelProps { export function SummaryPanel({ title, body }: SummaryPanelProps) { return ( - <div className="flex flex-col rounded-xl bg-neutral-96 pb-md"> + <div className="flex flex-col rounded-xl bg-neutral-96 pb-md dark:bg-neutral-12"> <div className="flex flex-col gap-y-xs"> <div className="py-2.5"> <Title size={TitleSize.Small} title={title} /> diff --git a/apps/wallet/src/ui/app/components/accounts/AccountItem.tsx b/apps/wallet/src/ui/app/components/accounts/AccountItem.tsx index 518174b8cd0..544da756927 100644 --- a/apps/wallet/src/ui/app/components/accounts/AccountItem.tsx +++ b/apps/wallet/src/ui/app/components/accounts/AccountItem.tsx @@ -67,7 +67,7 @@ function AccountAvatar({ isLocked, icon }: { isLocked?: boolean; icon?: ReactNod className={cn( 'flex h-10 w-10 items-center justify-center rounded-full [&_svg]:h-5 [&_svg]:w-5 ', isLocked - ? 'bg-neutral-96 [&_svg]:text-neutral-10' + ? 'bg-neutral-96 dark:bg-neutral-12 [&_svg]:text-neutral-10 [&_svg]:dark:text-neutral-92' : 'bg-primary-30 [&_svg]:text-white', )} > diff --git a/apps/wallet/src/ui/app/components/accounts/ImportRecoveryPhraseForm.tsx b/apps/wallet/src/ui/app/components/accounts/ImportRecoveryPhraseForm.tsx index ef3d2620d80..4afa2038447 100644 --- a/apps/wallet/src/ui/app/components/accounts/ImportRecoveryPhraseForm.tsx +++ b/apps/wallet/src/ui/app/components/accounts/ImportRecoveryPhraseForm.tsx @@ -124,7 +124,7 @@ export function ImportRecoveryPhraseForm({ })} </div> - <div className="sticky bottom-0 left-0 flex flex-col gap-2.5 bg-neutral-100 pt-sm"> + <div className="sticky bottom-0 left-0 flex flex-col gap-2.5 bg-neutral-100 pt-sm dark:bg-neutral-6"> {touchedFields.recoveryPhrase && errors.recoveryPhrase && ( <InfoBox type={InfoBoxType.Default} diff --git a/apps/wallet/src/ui/app/components/error-boundary/index.tsx b/apps/wallet/src/ui/app/components/error-boundary/index.tsx index b68d08ccdab..e450622a9cf 100644 --- a/apps/wallet/src/ui/app/components/error-boundary/index.tsx +++ b/apps/wallet/src/ui/app/components/error-boundary/index.tsx @@ -11,7 +11,7 @@ import { useLocation } from 'react-router-dom'; function Fallback({ error }: FallbackProps) { return ( - <div className="flex h-full w-full items-center justify-center p-2"> + <div className="flex h-full w-full items-center justify-center p-2 [&_div]:w-full"> <InfoBox title="Something went wrong" supportingText={error?.message ?? 'An error occurred'} diff --git a/apps/wallet/src/ui/app/components/iota-apps/DisconnectApp.tsx b/apps/wallet/src/ui/app/components/iota-apps/DisconnectApp.tsx index 292389bfe0a..a2ba2745704 100644 --- a/apps/wallet/src/ui/app/components/iota-apps/DisconnectApp.tsx +++ b/apps/wallet/src/ui/app/components/iota-apps/DisconnectApp.tsx @@ -103,7 +103,9 @@ function DisconnectApp({ /> ) : ( <SummaryListItem - icon={<CircleEmitter className="h-5 w-5 text-neutral-10" />} + icon={ + <CircleEmitter className="h-5 w-5 text-neutral-10 dark:text-neutral-92" /> + } text={ connectedAccounts[0] ? formatAddress(connectedAccounts[0]) diff --git a/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx b/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx index aa4c2dc7e4b..d6db449aaa4 100644 --- a/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx +++ b/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx @@ -54,10 +54,10 @@ interface ListViewProps { function ListView({ name, icon, description, tags }: ListViewProps) { return ( - <div className="item-center box-border flex gap-sm rounded-2xl bg-neutral-100 p-sm hover:bg-shader-primary-dark-12"> + <div className="item-center box-border flex gap-sm rounded-2xl bg-neutral-100 p-sm hover:bg-shader-primary-dark-12 dark:bg-neutral-6"> <ImageIcon src={icon || null} label={name} fallback={name} /> <div className="flex flex-col justify-center gap-sm"> - <span className="text-label-md text-neutral-10">{name}</span> + <span className="text-label-md text-neutral-10 dark:text-neutral-92">{name}</span> <span className="text-body-sm text-neutral-40">{description}</span> {tags?.length && ( <div className="flex flex-wrap gap-xxs"> diff --git a/apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx b/apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx index 4dc7b6021d8..094721b1587 100644 --- a/apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx +++ b/apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx @@ -9,7 +9,7 @@ const appEmptyStyle = cva(['flex gap-3 p-lg h-28'], { variants: { displayType: { full: 'w-full', - card: 'bg-neutral-100 flex flex-col p-lg w-full rounded-2xl h-32 box-border w-full rounded-2xl border border-solid border-shader-primary-dark', + card: 'bg-neutral-100 dark:bg-neutral-6 flex flex-col p-lg w-full rounded-2xl h-32 box-border w-full rounded-2xl border border-solid border-shader-primary-dark', }, }, defaultVariants: { diff --git a/apps/wallet/src/ui/app/components/ledger/ConnectLedgerModal.tsx b/apps/wallet/src/ui/app/components/ledger/ConnectLedgerModal.tsx index 9b0020b1185..ae47a317ea1 100644 --- a/apps/wallet/src/ui/app/components/ledger/ConnectLedgerModal.tsx +++ b/apps/wallet/src/ui/app/components/ledger/ConnectLedgerModal.tsx @@ -55,7 +55,7 @@ export function ConnectLedgerModal({ onClose, onConfirm, onError }: ConnectLedge <Link to="https://support.ledger.com/article/360011633353-zd" onClick={() => ampli.viewedLedgerTutorial()} - className="text-body-lg text-primary-30 no-underline" + className="text-body-lg text-primary-30 no-underline dark:text-primary-80" target="_blank" rel="noreferrer" > @@ -91,10 +91,11 @@ function LedgerLogo() { height="82" viewBox="0 0 244 82" fill="none" + className="text-neutral-10 dark:text-neutral-92" > <path d="M208.725 76.3995V81.4987H244V58.5003H238.86V76.3995H208.725ZM208.725 0.5V5.59948H238.86V23.4997H244V0.5H208.725ZM190.534 39.9502V28.1006H198.597C202.528 28.1006 203.939 29.4003 203.939 32.9508V35.0504C203.939 38.7002 202.578 39.9502 198.597 39.9502H190.534ZM203.333 42.0498C207.012 41.0999 209.581 37.6994 209.581 33.6503C209.581 31.1005 208.574 28.8001 206.659 26.9498C204.24 24.6493 201.014 23.4997 196.833 23.4997H185.494V58.4991H190.534V44.5499H198.093C201.973 44.5499 203.536 46.1497 203.536 50.1504V58.5003H208.675V50.9503C208.675 45.4503 207.365 43.3507 203.333 42.7505V42.0498ZM160.904 43.1994H176.425V38.5997H160.904V28.0994H177.936V23.4997H155.763V58.4991H178.692V53.8994H160.904V43.1994ZM144.021 45.0497V47.4494C144.021 52.4993 142.157 54.1498 137.471 54.1498H136.363C131.675 54.1498 129.408 52.6493 129.408 45.6995V36.2993C129.408 29.2999 131.776 27.849 136.463 27.849H137.47C142.055 27.849 143.517 29.5491 143.567 34.2493H149.11C148.607 27.3492 143.971 23 137.016 23C133.64 23 130.818 24.0503 128.702 26.0495C125.527 28.9998 123.763 34 123.763 40.9994C123.763 47.7495 125.276 52.7497 128.399 55.8489C130.515 57.8989 133.439 58.9988 136.311 58.9988C139.335 58.9988 142.107 57.7984 143.517 55.1991H144.222V58.4991H148.858V40.45H135.201V45.0497H144.021ZM99.5765 28.0994H105.07C110.261 28.0994 113.083 29.3991 113.083 36.3997V45.5991C113.083 52.5985 110.261 53.8994 105.07 53.8994H99.5765V28.0994ZM105.522 58.5003C115.148 58.5003 118.725 51.2504 118.725 41.0006C118.725 30.6007 114.895 23.5009 105.421 23.5009H94.536V58.5003H105.522ZM70.1978 43.1994H85.7189V38.5997H70.1978V28.0994H87.23V23.4997H65.0566V58.4991H87.9862V53.8994H70.1978V43.1994ZM40.4664 23.4997H35.3268V58.4991H58.5074V53.8994H40.4664V23.4997ZM0.000976562 58.5003V81.5H35.2756V76.3995H5.14057V58.5003H0.000976562ZM0.000976562 0.5V23.4997H5.14057V5.59948H35.2756V0.5H0.000976562Z" - fill="#171D26" + fill="currentColor" /> </svg> ); diff --git a/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx b/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx index 1847c843caf..2c2c5d2f987 100644 --- a/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx +++ b/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx @@ -121,7 +121,7 @@ function MenuList() { {MENU_ITEMS.map((item, index) => ( <Card key={index} type={CardType.Default} onClick={item.onClick}> <CardImage type={ImageType.BgSolid}> - <div className="flex h-10 w-10 items-center justify-center rounded-full text-neutral-10 [&_svg]:h-5 [&_svg]:w-5"> + <div className="flex h-10 w-10 items-center justify-center rounded-full text-neutral-10 dark:text-neutral-92 [&_svg]:h-5 [&_svg]:w-5"> <span className="text-2xl">{item.icon}</span> </div> </CardImage> diff --git a/apps/wallet/src/ui/app/components/menu/content/index.tsx b/apps/wallet/src/ui/app/components/menu/content/index.tsx index 114a4591ff2..4c677ed313a 100644 --- a/apps/wallet/src/ui/app/components/menu/content/index.tsx +++ b/apps/wallet/src/ui/app/components/menu/content/index.tsx @@ -42,7 +42,7 @@ function MenuContent() { } return ( - <div className="absolute inset-0 z-50 flex flex-col justify-items-stretch overflow-y-auto rounded-t-xl bg-white px-2.5 pb-8"> + <div className="absolute inset-0 z-50 flex flex-col justify-items-stretch overflow-y-auto rounded-t-xl bg-neutral-100 px-2.5 pb-8 dark:bg-neutral-6"> <ErrorBoundary> <MainLocationContext.Provider value={mainLocation}> <Routes location={menuUrl || ''}> diff --git a/apps/wallet/src/ui/app/components/navigation/index.tsx b/apps/wallet/src/ui/app/components/navigation/index.tsx index 04a8230e317..17abcb0d65e 100644 --- a/apps/wallet/src/ui/app/components/navigation/index.tsx +++ b/apps/wallet/src/ui/app/components/navigation/index.tsx @@ -48,7 +48,7 @@ export function Navigation() { } return ( - <div className="sticky bottom-0 w-full shrink-0 border-b-0 bg-white"> + <div className="sticky bottom-0 w-full shrink-0 border-b-0 bg-neutral-100 dark:bg-neutral-6"> <Navbar items={NAVBAR_ITEMS} activeId={activeId} onClickItem={handleItemClick} /> </div> ); diff --git a/apps/wallet/src/ui/app/components/nft-display/index.tsx b/apps/wallet/src/ui/app/components/nft-display/index.tsx index d5038c40c7d..dec1953fc94 100644 --- a/apps/wallet/src/ui/app/components/nft-display/index.tsx +++ b/apps/wallet/src/ui/app/components/nft-display/index.tsx @@ -65,7 +65,11 @@ export function NFTDisplayCard({ onIconClick={onIconClick} /> )} - {wideView && <span className="text-title-lg text-neutral-10">{nftName}</span>} + {wideView && ( + <span className="text-title-lg text-neutral-10 dark:text-neutral-92"> + {nftName} + </span> + )} </div> </Loading> </div> diff --git a/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx b/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx index a993b4657ca..912937bde97 100644 --- a/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx +++ b/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx @@ -28,7 +28,7 @@ export function TxnAmount({ amount, coinType, subtitle, approximation }: TxnAmou return Number(amount) !== 0 ? ( <Card type={CardType.Filled}> <CardImage type={ImageType.BgSolid}> - <div className="h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10"> + <div className="h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10 dark:text-neutral-92"> <CoinIcon coinType={coinType} size={ImageIconSize.Full} rounded /> </div> </CardImage> diff --git a/apps/wallet/src/ui/app/components/user-approve-container/index.tsx b/apps/wallet/src/ui/app/components/user-approve-container/index.tsx index 3ab12353295..3a994d63f6b 100644 --- a/apps/wallet/src/ui/app/components/user-approve-container/index.tsx +++ b/apps/wallet/src/ui/app/components/user-approve-container/index.tsx @@ -71,7 +71,7 @@ export function UserApproveContainer({ </div> <div className="sticky bottom-0 z-10"> <div - className={cn('flex items-center bg-white p-md pt-sm', { + className={cn('flex items-center bg-neutral-100 p-md pt-sm dark:bg-neutral-6', { 'flex-row-reverse': isWarning, })} > diff --git a/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx b/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx index 53192a4ac0c..3c0d667ddc0 100644 --- a/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/BackupMnemonicPage.tsx @@ -48,7 +48,7 @@ export function BackupMnemonicPage() { <Loading loading={isPending}> <div className="flex h-full flex-col items-center justify-between"> <div className="flex flex-col gap-md"> - <h3 className="text-center text-headline-lg text-neutral-10"> + <h3 className="text-center text-headline-lg text-neutral-10 dark:text-neutral-92"> Wallet Created Successfully! </h3> <InfoBox diff --git a/apps/wallet/src/ui/app/pages/accounts/ImportLedgerAccountsPage.tsx b/apps/wallet/src/ui/app/pages/accounts/ImportLedgerAccountsPage.tsx index d0c166322d3..92b8dcdce92 100644 --- a/apps/wallet/src/ui/app/pages/accounts/ImportLedgerAccountsPage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/ImportLedgerAccountsPage.tsx @@ -142,7 +142,9 @@ function LedgerViewLoading() { return ( <div className="flex h-full w-full flex-row items-center justify-center gap-x-sm"> <LoadingIndicator /> - <span className="text-title-lg text-neutral-10">Looking for Accounts...</span> + <span className="text-title-lg text-neutral-10 dark:text-neutral-92"> + Looking for Accounts... + </span> </div> ); } @@ -151,7 +153,9 @@ function LedgerViewAllAccountsImported() { return ( <div className="flex h-full w-full flex-row items-center justify-center gap-x-sm [&_svg]:h-6 [&_svg]:w-6"> <CheckmarkFilled className="text-primary-30" /> - <span className="text-title-lg text-neutral-10">Imported all Ledger Accounts</span> + <span className="text-title-lg text-neutral-10 dark:text-neutral-92"> + Imported all Ledger Accounts + </span> </div> ); } diff --git a/apps/wallet/src/ui/app/pages/accounts/ImportPassphrasePage.tsx b/apps/wallet/src/ui/app/pages/accounts/ImportPassphrasePage.tsx index 7f982d4ea32..6a3a60a2f6e 100644 --- a/apps/wallet/src/ui/app/pages/accounts/ImportPassphrasePage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/ImportPassphrasePage.tsx @@ -36,7 +36,7 @@ export function ImportPassphrasePage() { ); } - const BUTTON_ICON_CLASSES = 'w-5 h-5 text-neutral-10'; + const BUTTON_ICON_CLASSES = 'w-5 h-5 text-neutral-10 dark:text-neutral-92'; return ( <PageTemplate title="Import Mnemonic" isTitleCentered showBackButton> <div className="flex h-full flex-col gap-md"> diff --git a/apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx b/apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx index d2b5bcad7e8..a9ac8919e66 100644 --- a/apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx @@ -22,12 +22,14 @@ export function WelcomePage() { return ( <Loading loading={isInitializedLoading || isFullscreenGuardLoading}> - <div className="flex h-full w-full flex-col items-center justify-between bg-white px-md py-2xl shadow-wallet-content"> + <div className="flex h-full w-full flex-col items-center justify-between bg-neutral-100 px-md py-2xl shadow-wallet-content dark:bg-neutral-6"> <IotaLogoWeb width={130} height={32} /> <div className="flex flex-col items-center gap-8 text-center"> <div className="flex flex-col items-center gap-4"> <span className="text-headline-sm text-neutral-40">Welcome to</span> - <h1 className="text-display-lg text-neutral-10">IOTA Wallet</h1> + <h1 className="text-display-lg text-neutral-10 dark:text-neutral-92"> + IOTA Wallet + </h1> <span className="text-title-lg text-neutral-40"> Your Gateway to the IOTA Ecosystem </span> diff --git a/apps/wallet/src/ui/app/pages/accounts/forgot-password/RecoverManyPage.tsx b/apps/wallet/src/ui/app/pages/accounts/forgot-password/RecoverManyPage.tsx index a7528e4814c..61ae8475f46 100644 --- a/apps/wallet/src/ui/app/pages/accounts/forgot-password/RecoverManyPage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/forgot-password/RecoverManyPage.tsx @@ -125,7 +125,7 @@ export function RecoverManyPage() { } setRecoverInfo(null); }} - background="bg-neutral-100" + background="bg-neutral-100 dark:bg-neutral-6" > <div className="flex h-full w-full flex-col flex-nowrap gap-4 text-center"> {recoverInfo?.type === AccountSourceType.Mnemonic ? ( diff --git a/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx b/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx index b8877caba83..b6cd64ae3b6 100644 --- a/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx @@ -113,13 +113,15 @@ export function AccountGroup({ <div className="flex items-center gap-1"> <TriangleDown className={clsx( - 'h-5 w-5 text-neutral-60', + 'h-5 w-5 text-neutral-10 dark:text-neutral-92', isOpen ? 'rotate-0 transition-transform ease-linear' : '-rotate-90 transition-transform ease-linear', )} /> - <div className="text-title-md">{getGroupTitle(accounts[0])}</div> + <div className="text-title-md text-neutral-10 dark:text-neutral-92"> + {getGroupTitle(accounts[0])} + </div> </div> <div className="flex items-center gap-1"> {(isMnemonicDerivedGroup || isSeedDerivedGroup) && accountSource ? ( @@ -127,7 +129,9 @@ export function AccountGroup({ size={ButtonSize.Small} type={ButtonType.Ghost} onClick={handleAdd} - icon={<Add className="h-5 w-5 text-neutral-10" />} + icon={ + <Add className="h-5 w-5 text-neutral-10 dark:text-neutral-92" /> + } /> ) : null} {showMoreButton && ( @@ -139,7 +143,9 @@ export function AccountGroup({ e.stopPropagation(); setDropdownOpen(true); }} - icon={<MoreHoriz className="h-5 w-5 text-neutral-10" />} + icon={ + <MoreHoriz className="h-5 w-5 text-neutral-10 dark:text-neutral-92" /> + } /> </div> )} @@ -161,7 +167,7 @@ export function AccountGroup({ ))} </Collapsible> <div - className={`absolute right-3 top-3 z-[100] bg-white ${isDropdownOpen ? '' : 'hidden'}`} + className={`absolute right-3 top-3 z-[100] rounded-lg bg-neutral-100 shadow-md dark:bg-neutral-6 ${isDropdownOpen ? '' : 'hidden'}`} > <OutsideClickHandler onOutsideClick={() => setDropdownOpen(false)}> <Dropdown> diff --git a/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroupItem.tsx b/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroupItem.tsx index 2f0269bdc4a..6762b389280 100644 --- a/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroupItem.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroupItem.tsx @@ -150,7 +150,7 @@ export function AccountGroupItem({ top: dropdownPosition.y, }} className={clsx( - `absolute right-0 z-[99] rounded-lg bg-white`, + `absolute right-0 z-[99] rounded-lg bg-neutral-100 shadow-md dark:bg-neutral-6`, showDropdownOptionsBottom ? '-translate-y-full' : '', )} > @@ -198,7 +198,7 @@ function AccountAvatar({ account }: { account: SerializedUIAccount }) { } return ( <div - className={`flex h-8 w-8 items-center justify-center rounded-full [&_svg]:h-5 [&_svg]:w-5 [&_svg]:text-white ${account.isLocked ? 'bg-neutral-80' : 'bg-primary-30'}`} + className={`flex h-8 w-8 items-center justify-center rounded-full [&_svg]:h-5 [&_svg]:w-5 [&_svg]:text-neutral-100 ${account.isLocked ? 'bg-neutral-90 dark:bg-neutral-20 [&_svg]:dark:text-neutral-50' : 'bg-primary-30 '}`} > {logo} </div> diff --git a/apps/wallet/src/ui/app/pages/home/assets/HiddenAssetsProvider.tsx b/apps/wallet/src/ui/app/pages/home/assets/HiddenAssetsProvider.tsx index 7e01a7c3ebd..ff94f428a74 100644 --- a/apps/wallet/src/ui/app/pages/home/assets/HiddenAssetsProvider.tsx +++ b/apps/wallet/src/ui/app/pages/home/assets/HiddenAssetsProvider.tsx @@ -188,7 +188,7 @@ function MovedAssetNotification({ t, destination, onUndo }: MovedAssetNotificati className="flex w-full flex-row items-baseline gap-x-xxs" onClick={() => toast.dismiss(t.id)} > - <ButtonUnstyled className="text-body-sm text-neutral-12"> + <ButtonUnstyled className="text-body-sm text-neutral-12 dark:text-neutral-92"> Moved to {destination} </ButtonUnstyled> <ButtonUnstyled @@ -196,7 +196,7 @@ function MovedAssetNotification({ t, destination, onUndo }: MovedAssetNotificati onUndo(); toast.dismiss(t.id); }} - className="ml-auto mr-sm text-body-sm text-neutral-12" + className="ml-auto mr-sm text-body-sm text-neutral-12 dark:text-neutral-92" > UNDO </ButtonUnstyled> diff --git a/apps/wallet/src/ui/app/pages/home/nft-details/index.tsx b/apps/wallet/src/ui/app/pages/home/nft-details/index.tsx index 00792a40e54..ab9508a19f0 100644 --- a/apps/wallet/src/ui/app/pages/home/nft-details/index.tsx +++ b/apps/wallet/src/ui/app/pages/home/nft-details/index.tsx @@ -125,7 +125,7 @@ function NFTDetailsPage() { </div> <div className="flex flex-col gap-md"> <div className="flex flex-col gap-xxxs"> - <span className="text-title-lg text-neutral-10"> + <span className="text-title-lg text-neutral-10 dark:text-neutral-92"> {nftDisplayData?.name} </span> {nftDisplayData?.description ? ( diff --git a/apps/wallet/src/ui/app/pages/home/tokens/TokenStakingOverview.tsx b/apps/wallet/src/ui/app/pages/home/tokens/TokenStakingOverview.tsx index 15c72d92bb1..1c164c4a9d6 100644 --- a/apps/wallet/src/ui/app/pages/home/tokens/TokenStakingOverview.tsx +++ b/apps/wallet/src/ui/app/pages/home/tokens/TokenStakingOverview.tsx @@ -59,7 +59,7 @@ export function TokenStakingOverview({ return ( <Card type={CardType.Filled} onClick={handleOnClick} isDisabled={disabled}> <CardImage shape={ImageShape.SquareRounded}> - <Stake className="h-5 w-5 text-primary-20" /> + <Stake className="h-5 w-5 text-primary-20 dark:text-primary-90" /> </CardImage> <CardBody title={ diff --git a/apps/wallet/src/ui/app/pages/home/tokens/coin-balance/index.tsx b/apps/wallet/src/ui/app/pages/home/tokens/coin-balance/index.tsx index d2bd29199a7..75aecdf86ca 100644 --- a/apps/wallet/src/ui/app/pages/home/tokens/coin-balance/index.tsx +++ b/apps/wallet/src/ui/app/pages/home/tokens/coin-balance/index.tsx @@ -42,7 +42,10 @@ export function CoinBalance({ amount: walletBalance, type }: CoinProps) { return ( <> <div className="flex items-baseline gap-0.5"> - <div className="text-headline-lg text-neutral-10" data-testid="coin-balance"> + <div + className="text-headline-lg text-neutral-10 dark:text-neutral-92" + data-testid="coin-balance" + > {formatted} </div> <div className="text-label-md text-neutral-40">{symbol}</div> diff --git a/apps/wallet/src/ui/app/pages/home/tokens/icon-link/index.tsx b/apps/wallet/src/ui/app/pages/home/tokens/icon-link/index.tsx index 272284b6d49..2b3d21fca68 100644 --- a/apps/wallet/src/ui/app/pages/home/tokens/icon-link/index.tsx +++ b/apps/wallet/src/ui/app/pages/home/tokens/icon-link/index.tsx @@ -23,7 +23,12 @@ function IconLink({ to, icon, disabled = false, text }: IconLinkProps) { tabIndex={disabled ? -1 : undefined} > <div className={cl(disabled ? 'text-gray-60' : 'text-hero-dark')}>{icon}</div> - <span className={cl('text-body-sm', disabled ? 'opacity-60' : 'text-neutral-10')}> + <span + className={cl( + 'text-body-sm', + disabled ? 'opacity-60' : 'text-neutral-10 dark:text-neutral-92', + )} + > {text} </span> </Link> diff --git a/apps/wallet/src/ui/app/pages/restricted/index.tsx b/apps/wallet/src/ui/app/pages/restricted/index.tsx index b794fdeced2..8571e51a6c5 100644 --- a/apps/wallet/src/ui/app/pages/restricted/index.tsx +++ b/apps/wallet/src/ui/app/pages/restricted/index.tsx @@ -13,7 +13,7 @@ export function RestrictedPage() { return ( <PageMainLayout> - <div className="flex h-full w-full flex-col items-center justify-between bg-white px-md py-2xl shadow-wallet-content"> + <div className="flex h-full w-full flex-col items-center justify-between bg-neutral-100 px-md py-2xl shadow-wallet-content dark:bg-neutral-6"> <IotaLogoWeb width={130} height={32} /> <div className="flex flex-col items-center text-center"> <span className="text-title-lg text-neutral-40"> diff --git a/apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx b/apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx index 29e5c03cf4a..c26f80bed6c 100644 --- a/apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx +++ b/apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx @@ -19,7 +19,7 @@ export const ButtonConnectedTo = forwardRef<HTMLButtonElement, ButtonConnectedTo <button {...rest} ref={ref} - className="flex max-w-28 cursor-pointer flex-row items-center gap-1 rounded-full bg-neutral-96 p-xxxs pr-xs hover:bg-neutral-92" + className="flex max-w-28 cursor-pointer flex-row items-center gap-1 rounded-full bg-neutral-96 p-xxxs pr-xs hover:bg-neutral-92 dark:bg-neutral-12" > <div className="flex rounded-full bg-neutral-50 p-xxxs text-neutral-100"> {iconBefore} diff --git a/apps/wallet/src/ui/app/shared/card-layout/index.tsx b/apps/wallet/src/ui/app/shared/card-layout/index.tsx index 55ab6622f49..c77416b4082 100644 --- a/apps/wallet/src/ui/app/shared/card-layout/index.tsx +++ b/apps/wallet/src/ui/app/shared/card-layout/index.tsx @@ -35,7 +35,9 @@ export function CardLayout({ children, title, subtitle, headerCaption, icon }: C ) : null} {subtitle ? ( <div className="mb-md text-center"> - <span className="text-label-md text-neutral-10">{subtitle}</span> + <span className="text-label-md text-neutral-10 dark:text-neutral-92"> + {subtitle} + </span> </div> ) : null} {children} diff --git a/apps/wallet/src/ui/app/shared/dapp-status/index.tsx b/apps/wallet/src/ui/app/shared/dapp-status/index.tsx index dd6901acbb8..42cb18e8598 100644 --- a/apps/wallet/src/ui/app/shared/dapp-status/index.tsx +++ b/apps/wallet/src/ui/app/shared/dapp-status/index.tsx @@ -103,7 +103,7 @@ function DappStatus() { duration: 0.3, ease: 'anticipate', }} - className="absolute right-6 top-[48px] z-50 max-w-72 rounded-2xl bg-neutral-96 p-sm shadow-xl" + className="absolute right-6 top-[48px] z-50 max-w-72 rounded-2xl bg-neutral-96 p-sm shadow-xl dark:bg-neutral-12" style={{ top: y || 0, left: x || 0 }} {...getFloatingProps()} ref={refs.setFloating} @@ -123,7 +123,7 @@ function DappStatus() { <span className="text-label-md text-neutral-40"> Connected to </span> - <div className="break-all text-body-sm text-neutral-10"> + <div className="break-all text-body-sm text-neutral-10 dark:text-neutral-92"> {activeOrigin} </div> </div> diff --git a/apps/wallet/src/ui/app/shared/header/Header.tsx b/apps/wallet/src/ui/app/shared/header/Header.tsx index 3ee58883a15..e93445edcc2 100644 --- a/apps/wallet/src/ui/app/shared/header/Header.tsx +++ b/apps/wallet/src/ui/app/shared/header/Header.tsx @@ -18,7 +18,7 @@ interface HeaderProps { */ export function Header({ network, leftContent, middleContent, rightContent }: HeaderProps) { return ( - <header className="flex flex-row items-center justify-between bg-neutral-100 px-md py-xs"> + <header className="flex flex-row items-center justify-between bg-neutral-100 px-md py-xs dark:bg-neutral-6"> {leftContent && <div>{leftContent}</div>} {middleContent && <div className="overflow-hidden">{middleContent}</div>} {rightContent && <div>{rightContent}</div>} diff --git a/apps/wallet/src/ui/app/shared/page-main-layout/PageMainLayout.tsx b/apps/wallet/src/ui/app/shared/page-main-layout/PageMainLayout.tsx index 6b725d2b75a..9896be915fb 100644 --- a/apps/wallet/src/ui/app/shared/page-main-layout/PageMainLayout.tsx +++ b/apps/wallet/src/ui/app/shared/page-main-layout/PageMainLayout.tsx @@ -64,7 +64,7 @@ export function PageMainLayout({ /> ) : null} <div className="relative flex flex-grow flex-col flex-nowrap overflow-hidden"> - <div className="flex flex-grow flex-col flex-nowrap overflow-y-auto overflow-x-hidden bg-neutral-100"> + <div className="flex flex-grow flex-col flex-nowrap overflow-y-auto overflow-x-hidden bg-neutral-100 dark:bg-neutral-6"> <main className={cn('flex w-full flex-grow flex-col', { 'p-5': bottomNavEnabled && isHomePage, @@ -109,7 +109,9 @@ function LeftContent({ > {isLedgerAccount ? <Ledger /> : <IotaLogoMark />} </div> - <span className="shrink-0 text-title-sm text-neutral-10">{accountName}</span> + <span className="shrink-0 text-title-sm text-neutral-10 dark:text-neutral-92"> + {accountName} + </span> </Link> ); } diff --git a/apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx b/apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx index 8a33d355cec..ba8a478c00e 100644 --- a/apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx +++ b/apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx @@ -14,12 +14,16 @@ export function StatsDetail({ balance, title }: DisplayStatsProps) { const [formatted, symbol] = useFormatCoin(balance, IOTA_TYPE_ARG); return ( - <div className="flex h-[96px] flex-1 flex-col justify-between rounded-xl bg-neutral-96 p-md"> - <div className="text-label-sm text-neutral-10">{title}</div> + <div className="flex h-[96px] flex-1 flex-col justify-between rounded-xl bg-neutral-96 p-md dark:bg-neutral-12"> + <div className="text-label-sm text-neutral-10 dark:text-neutral-92">{title}</div> <div className="flex items-baseline gap-xxs"> - <div className="text-title-md text-neutral-10">{formatted}</div> - <div className="text-label-md text-neutral-10 opacity-40">{symbol}</div> + <div className="text-title-md text-neutral-10 dark:text-neutral-92"> + {formatted} + </div> + <div className="text-label-md text-neutral-10 opacity-40 dark:text-neutral-92"> + {symbol} + </div> </div> </div> ); diff --git a/apps/wallet/src/ui/assets/images/no_data.svg b/apps/wallet/src/ui/assets/images/no_data.svg index fcc781d2e8e..388b9a8f428 100644 --- a/apps/wallet/src/ui/assets/images/no_data.svg +++ b/apps/wallet/src/ui/assets/images/no_data.svg @@ -1,4 +1,8 @@ <svg xmlns="http://www.w3.org/2000/svg" width="180" height="120" viewBox="0 0 180 120" fill="none"> -<path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" d="M45.4626 51.4023L56.7293 93.4501L134.537 72.6016L123.27 30.5538L45.4626 51.4023ZM35.6474 37.5011C30.2674 38.9427 27.0746 44.4727 28.5162 49.8527L42.8281 103.265C44.2697 108.645 49.7996 111.838 55.1796 110.397L144.352 86.5028C149.732 85.0612 152.925 79.5312 151.484 74.1512L137.172 20.7386C135.73 15.3585 130.2 12.1658 124.82 13.6074L35.6474 37.5011Z" fill="#DDE4F0"/> -<path fill-rule="evenodd" clip-rule="evenodd" d="M43.209 24.0059C37.5707 24.0059 33 28.6024 33 34.2725V90.7392C33 96.4093 37.5707 101.006 43.209 101.006H136.791C142.429 101.006 147 96.4093 147 90.7392V34.2725C147 28.6024 142.429 24.0059 136.791 24.0059H43.209ZM66.6045 55.6614C63.0806 55.6614 60.2239 58.5343 60.2239 62.0781C60.2239 65.6219 63.0806 68.4947 66.6045 68.4947C70.1284 68.4947 72.9851 65.6219 72.9851 62.0781C72.9851 58.5343 70.1284 55.6614 66.6045 55.6614ZM83.194 62.0781C83.194 58.5343 86.0507 55.6614 89.5746 55.6614C93.0985 55.6614 95.9552 58.5343 95.9552 62.0781C95.9552 65.6219 93.0985 68.4947 89.5746 68.4947C86.0507 68.4947 83.194 65.6219 83.194 62.0781ZM112.545 55.6614C109.021 55.6614 106.164 58.5343 106.164 62.0781C106.164 65.6219 109.021 68.4947 112.545 68.4947C116.069 68.4947 118.925 65.6219 118.925 62.0781C118.925 58.5343 116.069 55.6614 112.545 55.6614Z" fill="#DDE4F0"/> + <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" + d="M45.4626 51.4023L56.7293 93.4501L134.537 72.6016L123.27 30.5538L45.4626 51.4023ZM35.6474 37.5011C30.2674 38.9427 27.0746 44.4727 28.5162 49.8527L42.8281 103.265C44.2697 108.645 49.7996 111.838 55.1796 110.397L144.352 86.5028C149.732 85.0612 152.925 79.5312 151.484 74.1512L137.172 20.7386C135.73 15.3585 130.2 12.1658 124.82 13.6074L35.6474 37.5011Z" + fill="#DDE4F0" /> + <path fill-rule="evenodd" clip-rule="evenodd" + d="M43.209 24.0059C37.5707 24.0059 33 28.6024 33 34.2725V90.7392C33 96.4093 37.5707 101.006 43.209 101.006H136.791C142.429 101.006 147 96.4093 147 90.7392V34.2725C147 28.6024 142.429 24.0059 136.791 24.0059H43.209ZM66.6045 55.6614C63.0806 55.6614 60.2239 58.5343 60.2239 62.0781C60.2239 65.6219 63.0806 68.4947 66.6045 68.4947C70.1284 68.4947 72.9851 65.6219 72.9851 62.0781C72.9851 58.5343 70.1284 55.6614 66.6045 55.6614ZM83.194 62.0781C83.194 58.5343 86.0507 55.6614 89.5746 55.6614C93.0985 55.6614 95.9552 58.5343 95.9552 62.0781C95.9552 65.6219 93.0985 68.4947 89.5746 68.4947C86.0507 68.4947 83.194 65.6219 83.194 62.0781ZM112.545 55.6614C109.021 55.6614 106.164 58.5343 106.164 62.0781C106.164 65.6219 109.021 68.4947 112.545 68.4947C116.069 68.4947 118.925 65.6219 118.925 62.0781C118.925 58.5343 116.069 55.6614 112.545 55.6614Z" + fill="#DDE4F0" /> </svg> \ No newline at end of file diff --git a/apps/wallet/src/ui/assets/images/no_data_darkmode.svg b/apps/wallet/src/ui/assets/images/no_data_darkmode.svg new file mode 100644 index 00000000000..c3502ecf4c6 --- /dev/null +++ b/apps/wallet/src/ui/assets/images/no_data_darkmode.svg @@ -0,0 +1,8 @@ +<svg xmlns="http://www.w3.org/2000/svg" width="180" height="120" viewBox="0 0 180 120" fill="none"> + <path opacity="0.5" fill-rule="evenodd" clip-rule="evenodd" + d="M45.5566 49.4053L56.8233 91.4531L134.631 70.6045L123.364 28.5567L45.5566 49.4053ZM35.7414 35.5041C30.3614 36.9456 27.1686 42.4756 28.6102 47.8556L42.9221 101.268C44.3636 106.648 49.8936 109.841 55.2736 108.399L144.446 84.5057C149.826 83.0642 153.019 77.5342 151.578 72.1542L137.266 18.7415C135.824 13.3615 130.294 10.1687 124.914 11.6103L35.7414 35.5041Z" + fill="#253041" /> + <path fill-rule="evenodd" clip-rule="evenodd" + d="M43.3027 22.0088C37.6645 22.0088 33.0938 26.6053 33.0938 32.2755V88.7421C33.0938 94.4122 37.6645 99.0088 43.3027 99.0088H136.885C142.523 99.0088 147.094 94.4122 147.094 88.7421V32.2755C147.094 26.6053 142.523 22.0088 136.885 22.0088H43.3027ZM66.6982 53.6643C63.1743 53.6643 60.3176 56.5372 60.3176 60.081C60.3176 63.6248 63.1743 66.4977 66.6982 66.4977C70.2221 66.4977 73.0788 63.6248 73.0788 60.081C73.0788 56.5372 70.2221 53.6643 66.6982 53.6643ZM83.2878 60.081C83.2878 56.5372 86.1445 53.6643 89.6684 53.6643C93.1923 53.6643 96.049 56.5372 96.049 60.081C96.049 63.6248 93.1923 66.4977 89.6684 66.4977C86.1445 66.4977 83.2878 63.6248 83.2878 60.081ZM112.639 53.6643C109.115 53.6643 106.258 56.5372 106.258 60.081C106.258 63.6248 109.115 66.4977 112.639 66.4977C116.162 66.4977 119.019 63.6248 119.019 60.081C119.019 56.5372 116.162 53.6643 112.639 53.6643Z" + fill="#253041" /> +</svg> \ No newline at end of file diff --git a/apps/wallet/src/ui/styles/global.scss b/apps/wallet/src/ui/styles/global.scss index 7b0ad608988..61d13ed2261 100644 --- a/apps/wallet/src/ui/styles/global.scss +++ b/apps/wallet/src/ui/styles/global.scss @@ -61,7 +61,7 @@ body { display: flex; align-items: center; justify-content: center; - @apply rounded-xl bg-neutral-100; + @apply rounded-xl bg-neutral-100 dark:bg-neutral-6; } * {