From 56b9bee5b07c4de9d957c802fbd8c7d3eb6f01c5 Mon Sep 17 00:00:00 2001 From: evavirseda Date: Thu, 14 Nov 2024 10:08:34 +0100 Subject: [PATCH 01/14] feat: move themecontext to core --- apps/core/src/contexts/ThemeContext.tsx | 54 +++++++++++++++++++ apps/core/src/contexts/index.ts | 4 ++ apps/core/src/index.ts | 1 + .../app/(protected)/layout.tsx | 9 +++- .../staking-overview/StartStaking.tsx | 2 +- .../contexts/ThemeContext.tsx | 38 ------------- apps/wallet-dashboard/contexts/index.ts | 1 - .../providers/AppProviders.tsx | 4 +- 8 files changed, 69 insertions(+), 44 deletions(-) create mode 100644 apps/core/src/contexts/ThemeContext.tsx create mode 100644 apps/core/src/contexts/index.ts delete mode 100644 apps/wallet-dashboard/contexts/ThemeContext.tsx diff --git a/apps/core/src/contexts/ThemeContext.tsx b/apps/core/src/contexts/ThemeContext.tsx new file mode 100644 index 00000000000..bc339616141 --- /dev/null +++ b/apps/core/src/contexts/ThemeContext.tsx @@ -0,0 +1,54 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import React, { createContext, useContext, useState, useEffect, PropsWithChildren } from 'react'; + +export enum Theme { + Light = 'light', + Dark = 'dark', +} + +interface ThemeContextType { + theme: Theme; + setTheme: (theme: Theme) => void; +} + +export const ThemeContext = createContext({ + theme: Theme.Light, + setTheme: () => {}, +}); + +interface ThemeProviderProps { + appId: string; +} + +export function ThemeProvider({ children, appId }: PropsWithChildren) { + const storageKey = `theme_${appId}`; + const [theme, setTheme] = useState( + () => (localStorage.getItem(storageKey) as Theme) || Theme.Light, + ); + + useEffect(() => { + localStorage.setItem(storageKey, theme); + document.documentElement.classList.toggle(Theme.Dark, theme === Theme.Dark); + }, [theme, storageKey]); + + return ( + + {children} + + ); +} + +export const useTheme = (): ThemeContextType => { + const context = useContext(ThemeContext); + if (!context) { + throw new Error('useTheme must be used within a ThemeProvider'); + } + return context; +}; diff --git a/apps/core/src/contexts/index.ts b/apps/core/src/contexts/index.ts new file mode 100644 index 00000000000..c592171afa8 --- /dev/null +++ b/apps/core/src/contexts/index.ts @@ -0,0 +1,4 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export * from './ThemeContext'; diff --git a/apps/core/src/index.ts b/apps/core/src/index.ts index bc58d29353b..ab5b0ab904a 100644 --- a/apps/core/src/index.ts +++ b/apps/core/src/index.ts @@ -7,3 +7,4 @@ export * from './components'; export * from './utils'; export * from './hooks'; export * from './constants'; +export * from './contexts'; diff --git a/apps/wallet-dashboard/app/(protected)/layout.tsx b/apps/wallet-dashboard/app/(protected)/layout.tsx index c566410af67..2d496916be7 100644 --- a/apps/wallet-dashboard/app/(protected)/layout.tsx +++ b/apps/wallet-dashboard/app/(protected)/layout.tsx @@ -9,11 +9,16 @@ import { Button } from '@iota/apps-ui-kit'; import { redirect } from 'next/navigation'; import { Sidebar } from './components'; import { TopNav } from './components/top-nav/TopNav'; -import { useTheme } from '@/contexts'; +import { Theme, useTheme } from '@iota/core'; function DashboardLayout({ children }: PropsWithChildren): JSX.Element { const { connectionStatus } = useCurrentWallet(); - const { theme, toggleTheme } = useTheme(); + const { theme, setTheme } = useTheme(); + + const toggleTheme = () => { + const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light; + setTheme(newTheme); + }; const account = useCurrentAccount(); useEffect(() => { if (connectionStatus !== 'connected' && !account) { diff --git a/apps/wallet-dashboard/components/staking-overview/StartStaking.tsx b/apps/wallet-dashboard/components/staking-overview/StartStaking.tsx index dd28cca199c..5190cc06867 100644 --- a/apps/wallet-dashboard/components/staking-overview/StartStaking.tsx +++ b/apps/wallet-dashboard/components/staking-overview/StartStaking.tsx @@ -2,9 +2,9 @@ // SPDX-License-Identifier: Apache-2.0 import { Button, ButtonSize, ButtonType, Panel } from '@iota/apps-ui-kit'; -import { Theme, useTheme } from '@/contexts'; import { useState } from 'react'; import { StakeDialog } from '../Dialogs'; +import { Theme, useTheme } from '@iota/core'; export function StartStaking() { const { theme } = useTheme(); diff --git a/apps/wallet-dashboard/contexts/ThemeContext.tsx b/apps/wallet-dashboard/contexts/ThemeContext.tsx deleted file mode 100644 index 2de1469e42e..00000000000 --- a/apps/wallet-dashboard/contexts/ThemeContext.tsx +++ /dev/null @@ -1,38 +0,0 @@ -// Copyright (c) 2024 IOTA Stiftung -// SPDX-License-Identifier: Apache-2.0 - -import React, { createContext, useContext, useState, useEffect, ReactNode } from 'react'; - -export enum Theme { - Light = 'light', - Dark = 'dark', -} - -interface ThemeContextType { - theme: Theme; - toggleTheme: () => void; -} - -const ThemeContext = createContext(undefined); - -export const ThemeProvider: React.FC<{ children: ReactNode }> = ({ children }) => { - const [theme, setTheme] = useState(Theme.Light); - - useEffect(() => { - document.documentElement.classList.toggle(Theme.Dark, theme === Theme.Dark); - }, [theme]); - - const toggleTheme = () => { - setTheme((prevTheme) => (prevTheme === Theme.Dark ? Theme.Light : Theme.Dark)); - }; - - return {children}; -}; - -export const useTheme = (): ThemeContextType => { - const context = useContext(ThemeContext); - if (!context) { - throw new Error('useTheme must be used within a ThemeProvider'); - } - return context; -}; diff --git a/apps/wallet-dashboard/contexts/index.ts b/apps/wallet-dashboard/contexts/index.ts index fa0a87e74c4..d356e2485ed 100644 --- a/apps/wallet-dashboard/contexts/index.ts +++ b/apps/wallet-dashboard/contexts/index.ts @@ -2,4 +2,3 @@ // SPDX-License-Identifier: Apache-2.0 export * from './PopupContext'; -export * from './ThemeContext'; diff --git a/apps/wallet-dashboard/providers/AppProviders.tsx b/apps/wallet-dashboard/providers/AppProviders.tsx index 48561b1ff27..1cdcf6da752 100644 --- a/apps/wallet-dashboard/providers/AppProviders.tsx +++ b/apps/wallet-dashboard/providers/AppProviders.tsx @@ -12,7 +12,7 @@ import { useState } from 'react'; import { growthbook } from '@/lib/utils'; import { Popup } from '@/components/Popup'; import { Toaster } from 'react-hot-toast'; -import { ThemeProvider } from '@/contexts'; +import { ThemeProvider } from '@iota/core'; growthbook.init(); @@ -36,7 +36,7 @@ export function AppProviders({ children }: React.PropsWithChildren) { }, ]} > - + {children} Date: Thu, 14 Nov 2024 10:39:10 +0100 Subject: [PATCH 02/14] feat: fix styles after using shared context --- apps/wallet-dashboard/app/page.tsx | 6 ++++-- 1 file changed, 4 insertions(+), 2 deletions(-) diff --git a/apps/wallet-dashboard/app/page.tsx b/apps/wallet-dashboard/app/page.tsx index 38001d4b184..95496a7e099 100644 --- a/apps/wallet-dashboard/app/page.tsx +++ b/apps/wallet-dashboard/app/page.tsx @@ -42,12 +42,14 @@ function HomeDashboardPage(): JSX.Element {
Welcome to -

IOTA Wallet

+

+ IOTA Wallet +

Connecting you to the decentralized web and IOTA network
-
+
From f07e77a42a66a062256ece8b774ecfd59505adac Mon Sep 17 00:00:00 2001 From: evavirseda Date: Thu, 14 Nov 2024 10:55:46 +0100 Subject: [PATCH 03/14] feat: add theme to wallet --- apps/core/src/contexts/ThemeContext.tsx | 13 ++++++--- .../menu/content/WalletSettingsMenuList.tsx | 17 +++++------ apps/wallet/src/ui/index.tsx | 28 ++++++++++--------- 3 files changed, 33 insertions(+), 25 deletions(-) diff --git a/apps/core/src/contexts/ThemeContext.tsx b/apps/core/src/contexts/ThemeContext.tsx index bc339616141..a76430d7d5c 100644 --- a/apps/core/src/contexts/ThemeContext.tsx +++ b/apps/core/src/contexts/ThemeContext.tsx @@ -24,12 +24,17 @@ interface ThemeProviderProps { export function ThemeProvider({ children, appId }: PropsWithChildren) { const storageKey = `theme_${appId}`; - const [theme, setTheme] = useState( - () => (localStorage.getItem(storageKey) as Theme) || Theme.Light, - ); + const [theme, setTheme] = useState(() => { + if (typeof window !== 'undefined' && localStorage.getItem(storageKey)) { + return localStorage.getItem(storageKey) as Theme; + } + return Theme.Light; + }); useEffect(() => { - localStorage.setItem(storageKey, theme); + if (typeof window !== 'undefined') { + localStorage.setItem(storageKey, theme); + } document.documentElement.classList.toggle(Theme.Dark, theme === Theme.Dark); }, [theme, storageKey]); 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 75410062488..18dca842c23 100644 --- a/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx +++ b/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx @@ -29,8 +29,11 @@ import { ImageType, } from '@iota/apps-ui-kit'; import { ampli } from '_src/shared/analytics/ampli'; +import { Theme, useTheme } from '@iota/core'; function MenuList() { + const { theme, setTheme } = useTheme(); + const navigate = useNavigate(); const activeAccount = useActiveAccount(); const networkUrl = useNextMenuUrl(true, '/network'); @@ -77,6 +80,10 @@ function MenuList() { window.open(FAQ_LINK, '_blank', 'noopener noreferrer'); } + function toggleTheme() { + const newTheme = theme === Theme.Light ? Theme.Dark : Theme.Light; + setTheme(newTheme); + } const autoLockSubtitle = handleAutoLockSubtitle(); const MENU_ITEMS = [ { @@ -99,8 +106,7 @@ function MenuList() { { title: 'Themes', icon: , - onClick: () => {}, - isDisabled: true, + onClick: toggleTheme, }, { title: 'Reset', @@ -114,12 +120,7 @@ function MenuList() {
{MENU_ITEMS.map((item, index) => ( - +
{item.icon} diff --git a/apps/wallet/src/ui/index.tsx b/apps/wallet/src/ui/index.tsx index 49dff3a6b7d..05aca107907 100644 --- a/apps/wallet/src/ui/index.tsx +++ b/apps/wallet/src/ui/index.tsx @@ -13,7 +13,7 @@ import { setAttributes } from '_src/shared/experimentation/features'; import initSentry from '_src/ui/app/helpers/sentry'; import store from '_store'; import { thunkExtras } from '_store/thunk-extras'; -import { KioskClientProvider } from '@iota/core'; +import { KioskClientProvider, ThemeProvider } from '@iota/core'; import { GrowthBookProvider } from '@growthbook/growthbook-react'; import { IotaClientProvider } from '@iota/dapp-kit'; import { PersistQueryClientProvider } from '@tanstack/react-query-persist-client'; @@ -97,18 +97,20 @@ function AppWrapper() { -
- - - -
-
-
+ +
+ + + +
+
+
+ From 7161ffc2d638e2abdc16fa1c4df7b6364f4f580d Mon Sep 17 00:00:00 2001 From: evavirseda Date: Thu, 14 Nov 2024 11:26:01 +0100 Subject: [PATCH 04/14] feat: clenaup --- apps/core/src/components/index.ts | 3 +- .../{ => providers}/KioskClientProvider.tsx | 2 +- .../components/providers/ThemeProvider.tsx | 38 ++++++++++++++ apps/core/src/components/providers/index.ts | 5 ++ apps/core/src/contexts/ThemeContext.tsx | 50 ++----------------- apps/core/src/enums/index.ts | 4 ++ apps/core/src/enums/theme.enums.ts | 7 +++ apps/core/src/hooks/index.ts | 1 + apps/core/src/hooks/useTheme.ts | 12 +++++ apps/core/src/index.ts | 1 + apps/wallet/src/ui/index.tsx | 8 +-- 11 files changed, 78 insertions(+), 53 deletions(-) rename apps/core/src/components/{ => providers}/KioskClientProvider.tsx (91%) create mode 100644 apps/core/src/components/providers/ThemeProvider.tsx create mode 100644 apps/core/src/components/providers/index.ts create mode 100644 apps/core/src/enums/index.ts create mode 100644 apps/core/src/enums/theme.enums.ts create mode 100644 apps/core/src/hooks/useTheme.ts diff --git a/apps/core/src/components/index.ts b/apps/core/src/components/index.ts index fac843e4062..ce35b5a07d1 100644 --- a/apps/core/src/components/index.ts +++ b/apps/core/src/components/index.ts @@ -1,5 +1,6 @@ // Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -export * from './KioskClientProvider'; export * from './QR'; + +export * from './providers'; diff --git a/apps/core/src/components/KioskClientProvider.tsx b/apps/core/src/components/providers/KioskClientProvider.tsx similarity index 91% rename from apps/core/src/components/KioskClientProvider.tsx rename to apps/core/src/components/providers/KioskClientProvider.tsx index 3fd0b064c31..d1355db31a2 100644 --- a/apps/core/src/components/KioskClientProvider.tsx +++ b/apps/core/src/components/providers/KioskClientProvider.tsx @@ -4,7 +4,7 @@ import { useIotaClientContext } from '@iota/dapp-kit'; import { KioskClient } from '@iota/kiosk'; -import { createContext, useMemo, type ReactNode } from 'react'; +import React, { createContext, useMemo, type ReactNode } from 'react'; export const KioskClientContext = createContext(null); diff --git a/apps/core/src/components/providers/ThemeProvider.tsx b/apps/core/src/components/providers/ThemeProvider.tsx new file mode 100644 index 00000000000..1c3c6c83add --- /dev/null +++ b/apps/core/src/components/providers/ThemeProvider.tsx @@ -0,0 +1,38 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +import React, { PropsWithChildren, useState, useEffect } from 'react'; +import { Theme } from '../../enums'; +import { ThemeContext } from '../../contexts'; + +interface ThemeProviderProps { + appId: string; +} + +export function ThemeProvider({ children, appId }: PropsWithChildren) { + const storageKey = `theme_${appId}`; + const [theme, setTheme] = useState(() => { + if (typeof window !== 'undefined' && localStorage.getItem(storageKey)) { + return localStorage.getItem(storageKey) as Theme; + } + return Theme.Light; + }); + + useEffect(() => { + if (typeof window !== 'undefined') { + localStorage.setItem(storageKey, theme); + } + document.documentElement.classList.toggle(Theme.Dark, theme === Theme.Dark); + }, [theme, storageKey]); + + return ( + + {children} + + ); +} diff --git a/apps/core/src/components/providers/index.ts b/apps/core/src/components/providers/index.ts new file mode 100644 index 00000000000..5bbf1329e64 --- /dev/null +++ b/apps/core/src/components/providers/index.ts @@ -0,0 +1,5 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export * from './KioskClientProvider'; +export * from './ThemeProvider'; diff --git a/apps/core/src/contexts/ThemeContext.tsx b/apps/core/src/contexts/ThemeContext.tsx index a76430d7d5c..3406e50d5c1 100644 --- a/apps/core/src/contexts/ThemeContext.tsx +++ b/apps/core/src/contexts/ThemeContext.tsx @@ -1,14 +1,10 @@ // Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -import React, { createContext, useContext, useState, useEffect, PropsWithChildren } from 'react'; +import { createContext } from 'react'; +import { Theme } from '../enums'; -export enum Theme { - Light = 'light', - Dark = 'dark', -} - -interface ThemeContextType { +export interface ThemeContextType { theme: Theme; setTheme: (theme: Theme) => void; } @@ -17,43 +13,3 @@ export const ThemeContext = createContext({ theme: Theme.Light, setTheme: () => {}, }); - -interface ThemeProviderProps { - appId: string; -} - -export function ThemeProvider({ children, appId }: PropsWithChildren) { - const storageKey = `theme_${appId}`; - const [theme, setTheme] = useState(() => { - if (typeof window !== 'undefined' && localStorage.getItem(storageKey)) { - return localStorage.getItem(storageKey) as Theme; - } - return Theme.Light; - }); - - useEffect(() => { - if (typeof window !== 'undefined') { - localStorage.setItem(storageKey, theme); - } - document.documentElement.classList.toggle(Theme.Dark, theme === Theme.Dark); - }, [theme, storageKey]); - - return ( - - {children} - - ); -} - -export const useTheme = (): ThemeContextType => { - const context = useContext(ThemeContext); - if (!context) { - throw new Error('useTheme must be used within a ThemeProvider'); - } - return context; -}; diff --git a/apps/core/src/enums/index.ts b/apps/core/src/enums/index.ts new file mode 100644 index 00000000000..6e446b406da --- /dev/null +++ b/apps/core/src/enums/index.ts @@ -0,0 +1,4 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export * from './theme.enums'; diff --git a/apps/core/src/enums/theme.enums.ts b/apps/core/src/enums/theme.enums.ts new file mode 100644 index 00000000000..ab9083c4725 --- /dev/null +++ b/apps/core/src/enums/theme.enums.ts @@ -0,0 +1,7 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 + +export enum Theme { + Light = 'light', + Dark = 'dark', +} diff --git a/apps/core/src/hooks/index.ts b/apps/core/src/hooks/index.ts index fe71839183a..8e68020acc0 100644 --- a/apps/core/src/hooks/index.ts +++ b/apps/core/src/hooks/index.ts @@ -38,5 +38,6 @@ export * from './useGetAllOwnedObjects'; export * from './useGetTimelockedStakedObjects'; export * from './useGetActiveValidatorsInfo'; export * from './useCursorPagination'; +export * from './useTheme'; export * from './stake'; diff --git a/apps/core/src/hooks/useTheme.ts b/apps/core/src/hooks/useTheme.ts new file mode 100644 index 00000000000..72cddc121c3 --- /dev/null +++ b/apps/core/src/hooks/useTheme.ts @@ -0,0 +1,12 @@ +// Copyright (c) 2024 IOTA Stiftung +// SPDX-License-Identifier: Apache-2.0 +import { useContext } from 'react'; +import { ThemeContext, ThemeContextType } from '../contexts'; + +export const useTheme = (): ThemeContextType => { + const context = useContext(ThemeContext); + if (!context) { + throw new Error('useTheme must be used within a ThemeProvider'); + } + return context; +}; diff --git a/apps/core/src/index.ts b/apps/core/src/index.ts index ab5b0ab904a..b89aa6903b2 100644 --- a/apps/core/src/index.ts +++ b/apps/core/src/index.ts @@ -8,3 +8,4 @@ export * from './utils'; export * from './hooks'; export * from './constants'; export * from './contexts'; +export * from './enums'; diff --git a/apps/wallet/src/ui/index.tsx b/apps/wallet/src/ui/index.tsx index 05aca107907..8598908f346 100644 --- a/apps/wallet/src/ui/index.tsx +++ b/apps/wallet/src/ui/index.tsx @@ -96,8 +96,8 @@ function AppWrapper() { > - - + +
- - + + From a763367f240750dfca69e634aec3e017773aa7d4 Mon Sep 17 00:00:00 2001 From: evavirseda Date: Thu, 14 Nov 2024 11:47:36 +0100 Subject: [PATCH 05/14] feat: add device preferences theme --- apps/core/src/components/providers/ThemeProvider.tsx | 10 ++++++++-- 1 file changed, 8 insertions(+), 2 deletions(-) diff --git a/apps/core/src/components/providers/ThemeProvider.tsx b/apps/core/src/components/providers/ThemeProvider.tsx index 1c3c6c83add..dcdfb8fa0fa 100644 --- a/apps/core/src/components/providers/ThemeProvider.tsx +++ b/apps/core/src/components/providers/ThemeProvider.tsx @@ -12,8 +12,14 @@ interface ThemeProviderProps { export function ThemeProvider({ children, appId }: PropsWithChildren) { const storageKey = `theme_${appId}`; const [theme, setTheme] = useState(() => { - if (typeof window !== 'undefined' && localStorage.getItem(storageKey)) { - return localStorage.getItem(storageKey) as Theme; + if (typeof window !== 'undefined') { + const storedTheme = localStorage.getItem(storageKey); + if (storedTheme) { + return storedTheme as Theme; + } else { + const prefersDarkScheme = window.matchMedia('(prefers-color-scheme: dark)').matches; + return prefersDarkScheme ? Theme.Dark : Theme.Light; + } } return Theme.Light; }); From f2b3b85a6a60d40299ef5efa7d4c4f543eae2f1a Mon Sep 17 00:00:00 2001 From: evavirseda Date: Thu, 14 Nov 2024 12:39:02 +0100 Subject: [PATCH 06/14] feat: update bg colors --- apps/wallet/src/ui/app/components/Overlay.tsx | 4 ++-- apps/wallet/src/ui/app/components/PageTemplate.tsx | 2 +- apps/wallet/src/ui/app/components/PasswordInputDialog.tsx | 2 +- apps/wallet/src/ui/app/components/SummaryCard.tsx | 2 +- apps/wallet/src/ui/app/components/SummaryPanel.tsx | 2 +- apps/wallet/src/ui/app/components/accounts/AccountItem.tsx | 2 +- .../ui/app/components/accounts/ImportRecoveryPhraseForm.tsx | 2 +- apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx | 2 +- apps/wallet/src/ui/app/components/iota-apps/IotaAppEmpty.tsx | 2 +- apps/wallet/src/ui/app/components/menu/content/index.tsx | 2 +- apps/wallet/src/ui/app/components/navigation/index.tsx | 2 +- .../src/ui/app/components/user-approve-container/index.tsx | 2 +- apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx | 2 +- .../ui/app/pages/accounts/forgot-password/RecoverManyPage.tsx | 2 +- apps/wallet/src/ui/app/pages/restricted/index.tsx | 2 +- apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx | 2 +- apps/wallet/src/ui/app/shared/dapp-status/index.tsx | 2 +- apps/wallet/src/ui/app/shared/header/Header.tsx | 2 +- apps/wallet/src/ui/app/shared/image-icon/index.tsx | 2 +- .../src/ui/app/shared/page-main-layout/PageMainLayout.tsx | 2 +- apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx | 2 +- 21 files changed, 22 insertions(+), 22 deletions(-) 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..168a7a00b4b 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' : '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/iota-apps/IotaApp.tsx b/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx index ee69a96a670..cb0b35cbe67 100644 --- a/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx +++ b/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx @@ -54,7 +54,7 @@ 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> 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/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/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/WelcomePage.tsx b/apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx index d2b5bcad7e8..b953a655015 100644 --- a/apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx @@ -22,7 +22,7 @@ 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"> 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/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..3cba3510e9a 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="max-w-28 flex 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/dapp-status/index.tsx b/apps/wallet/src/ui/app/shared/dapp-status/index.tsx index dd6901acbb8..aba6647c81e 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="max-w-72 absolute right-6 top-[48px] z-50 rounded-2xl bg-neutral-96 p-sm shadow-xl dark:bg-neutral-12" style={{ top: y || 0, left: x || 0 }} {...getFloatingProps()} ref={refs.setFloating} 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/image-icon/index.tsx b/apps/wallet/src/ui/app/shared/image-icon/index.tsx index 5ae46570b21..8b543658964 100644 --- a/apps/wallet/src/ui/app/shared/image-icon/index.tsx +++ b/apps/wallet/src/ui/app/shared/image-icon/index.tsx @@ -45,7 +45,7 @@ function FallBackAvatar({ return ( <div className={cn( - 'flex h-full w-full items-center justify-center bg-neutral-96 bg-gradient-to-r capitalize text-neutral-10 dark:bg-neutral-92 dark:text-primary-100', + 'flex items-center justify-center bg-neutral-96 bg-gradient-to-r text-label-md text-neutral-10 dark:bg-neutral-12 dark:text-primary-100', { 'rounded-full': rounded }, generateTextSize(size), )} 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..3dc6d087320 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, diff --git a/apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx b/apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx index 8a33d355cec..c90d697354a 100644 --- a/apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx +++ b/apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx @@ -14,7 +14,7 @@ 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="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">{title}</div> <div className="flex items-baseline gap-xxs"> From 821ddea80d276e3c5edb035ff6795a60def00e44 Mon Sep 17 00:00:00 2001 From: evavirseda <evirseda@boxfish.studio> Date: Thu, 14 Nov 2024 12:48:58 +0100 Subject: [PATCH 07/14] feat: update text color --- .../src/ui/app/components/DAppPermissionList.tsx | 2 +- .../src/ui/app/components/accounts/AccountItem.tsx | 2 +- .../ui/app/components/active-coins-card/CoinItem.tsx | 2 +- .../src/ui/app/components/iota-apps/DisconnectApp.tsx | 4 +++- .../wallet/src/ui/app/components/iota-apps/IotaApp.tsx | 2 +- .../components/menu/content/WalletSettingsMenuList.tsx | 2 +- .../wallet/src/ui/app/components/nft-display/index.tsx | 6 +++++- .../src/ui/app/components/receipt-card/TxnAmount.tsx | 2 +- .../src/ui/app/pages/accounts/BackupMnemonicPage.tsx | 2 +- .../ui/app/pages/accounts/ImportLedgerAccountsPage.tsx | 8 ++++++-- .../src/ui/app/pages/accounts/ImportPassphrasePage.tsx | 2 +- apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx | 4 +++- .../src/ui/app/pages/accounts/manage/AccountGroup.tsx | 8 ++++++-- .../wallet/src/ui/app/pages/home/nft-details/index.tsx | 2 +- .../ui/app/pages/home/tokens/coin-balance/index.tsx | 5 ++++- .../src/ui/app/pages/home/tokens/icon-link/index.tsx | 7 ++++++- .../src/ui/app/pages/home/transfer-coin/index.tsx | 2 +- apps/wallet/src/ui/app/shared/card-layout/index.tsx | 4 +++- apps/wallet/src/ui/app/shared/dapp-status/index.tsx | 2 +- apps/wallet/src/ui/app/shared/image-icon/index.tsx | 2 +- .../ui/app/shared/page-main-layout/PageMainLayout.tsx | 4 +++- .../src/ui/app/staking/validators/StatsDetail.tsx | 10 +++++++--- 22 files changed, 58 insertions(+), 26 deletions(-) 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) => ( <SummaryListItem key={permissionKey} - icon={<Checkmark className="h-5 w-5 text-neutral-10" />} + icon={<Checkmark className="h-5 w-5 text-neutral-10 dark:text-neutral-92" />} text={PERMISSION_TYPE_TO_TEXT[permissionKey]} /> ))} diff --git a/apps/wallet/src/ui/app/components/accounts/AccountItem.tsx b/apps/wallet/src/ui/app/components/accounts/AccountItem.tsx index 168a7a00b4b..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 dark:bg-neutral-12 [&_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/active-coins-card/CoinItem.tsx b/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx index 5e7dce765f5..eb5bcaf8958 100644 --- a/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx +++ b/apps/wallet/src/ui/app/components/active-coins-card/CoinItem.tsx @@ -32,7 +32,7 @@ export function CoinItem({ coinType, balance, usd, clickableAction, icon }: Coin return ( <Card type={CardType.Default}> <CardImage type={ImageType.BgTransparent}> - <div className="flex h-10 w-10 items-center justify-center rounded-full border border-shader-neutral-light-8 text-neutral-10"> + <div className="flex 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} rounded size={ImageIconSize.Small} /> </div> </CardImage> 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 cb0b35cbe67..f50f35d117b 100644 --- a/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx +++ b/apps/wallet/src/ui/app/components/iota-apps/IotaApp.tsx @@ -57,7 +57,7 @@ function ListView({ name, icon, description, tags }: ListViewProps) { <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/menu/content/WalletSettingsMenuList.tsx b/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx index 18dca842c23..77880799865 100644 --- a/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx +++ b/apps/wallet/src/ui/app/components/menu/content/WalletSettingsMenuList.tsx @@ -122,7 +122,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/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 623ed671b9a..deda7576b52 100644 --- a/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx +++ b/apps/wallet/src/ui/app/components/receipt-card/TxnAmount.tsx @@ -30,7 +30,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/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 aa09ec904d4..ce0cf480e94 100644 --- a/apps/wallet/src/ui/app/pages/accounts/ImportLedgerAccountsPage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/ImportLedgerAccountsPage.tsx @@ -139,7 +139,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> ); } @@ -148,7 +150,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 b953a655015..a9ac8919e66 100644 --- a/apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/WelcomePage.tsx @@ -27,7 +27,9 @@ export function WelcomePage() { <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/manage/AccountGroup.tsx b/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx index b8877caba83..d6cb9a11fdd 100644 --- a/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx @@ -127,7 +127,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 +141,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> )} 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/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/home/transfer-coin/index.tsx b/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx index 2a7cea08f5f..96df61bc507 100644 --- a/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx +++ b/apps/wallet/src/ui/app/pages/home/transfer-coin/index.tsx @@ -227,7 +227,7 @@ function CoinSelectOption({ coin: { coinType, totalBalance } }: { coin: CoinBala <div className="flex h-6 w-6 items-center justify-center"> <CoinIcon size={ImageIconSize.Small} coinType={coinType} rounded /> </div> - <span className="text-body-lg text-neutral-10"> + <span className="text-body-lg text-neutral-10 dark:text-neutral-92"> {isIota ? (coinMeta?.name || '').toUpperCase() : coinMeta?.name || symbol} </span> </div> 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 aba6647c81e..3c076a06f07 100644 --- a/apps/wallet/src/ui/app/shared/dapp-status/index.tsx +++ b/apps/wallet/src/ui/app/shared/dapp-status/index.tsx @@ -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/image-icon/index.tsx b/apps/wallet/src/ui/app/shared/image-icon/index.tsx index 8b543658964..0432d31c4df 100644 --- a/apps/wallet/src/ui/app/shared/image-icon/index.tsx +++ b/apps/wallet/src/ui/app/shared/image-icon/index.tsx @@ -45,7 +45,7 @@ function FallBackAvatar({ return ( <div className={cn( - 'flex items-center justify-center bg-neutral-96 bg-gradient-to-r text-label-md text-neutral-10 dark:bg-neutral-12 dark:text-primary-100', + 'flex h-full w-full items-center justify-center bg-neutral-96 bg-gradient-to-r capitalize text-neutral-10 dark:bg-neutral-12 dark:text-primary-100', { 'rounded-full': rounded }, generateTextSize(size), )} 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 3dc6d087320..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 @@ -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 c90d697354a..ba8a478c00e 100644 --- a/apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx +++ b/apps/wallet/src/ui/app/staking/validators/StatsDetail.tsx @@ -15,11 +15,15 @@ export function StatsDetail({ balance, title }: DisplayStatsProps) { return ( <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">{title}</div> + <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> ); From 3d2918eec939b7252e7aa93986bd27cde593130f Mon Sep 17 00:00:00 2001 From: evavirseda <evirseda@boxfish.studio> Date: Thu, 14 Nov 2024 13:36:41 +0100 Subject: [PATCH 08/14] fix missing colors and update asset --- apps/wallet/src/ui/app/components/NoData.tsx | 6 +++++- apps/wallet/src/ui/app/components/coin-icon/index.tsx | 2 +- .../wallet/src/ui/app/components/error-boundary/index.tsx | 2 +- .../src/ui/app/pages/accounts/manage/AccountGroup.tsx | 6 ++++-- .../src/ui/app/pages/accounts/manage/AccountGroupItem.tsx | 2 +- .../src/ui/app/pages/home/assets/HiddenAssetsProvider.tsx | 4 ++-- .../src/ui/app/pages/home/tokens/TokenStakingOverview.tsx | 2 +- apps/wallet/src/ui/assets/images/no_data.svg | 8 ++++++-- apps/wallet/src/ui/assets/images/no_data_darkmode.svg | 8 ++++++++ 9 files changed, 29 insertions(+), 11 deletions(-) create mode 100644 apps/wallet/src/ui/assets/images/no_data_darkmode.svg 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 ( <div className="flex h-full flex-col items-center justify-center gap-md text-center"> - <NoDataImage /> + {theme === Theme.Dark ? <NoDataDarkImage /> : <NoDataImage />} <span className="text-label-lg text-neutral-60">{message}</span> </div> ); diff --git a/apps/wallet/src/ui/app/components/coin-icon/index.tsx b/apps/wallet/src/ui/app/components/coin-icon/index.tsx index 5214a1e7420..629d276652f 100644 --- a/apps/wallet/src/ui/app/components/coin-icon/index.tsx +++ b/apps/wallet/src/ui/app/components/coin-icon/index.tsx @@ -17,7 +17,7 @@ interface NonIotaCoinProps { function NonIotaCoin({ coinType, size = ImageIconSize.Full, rounded }: NonIotaCoinProps) { const { data: coinMeta } = useCoinMetadata(coinType); return ( - <div className="flex h-full w-full items-center justify-center rounded-full bg-neutral-96 dark:bg-neutral-92"> + <div className="flex h-full w-full items-center justify-center rounded-full bg-neutral-96 dark:bg-neutral-12"> <ImageIcon src={coinMeta?.iconUrl} label={coinMeta?.name || coinType} 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/pages/accounts/manage/AccountGroup.tsx b/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx index d6cb9a11fdd..8d8a68443fc 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 ? ( 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..ce4137b02f6 100644 --- a/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroupItem.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroupItem.tsx @@ -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/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/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 From c6620db9ae41f275e4c505df886ff8d4106a3753 Mon Sep 17 00:00:00 2001 From: evavirseda <evirseda@boxfish.studio> Date: Thu, 14 Nov 2024 13:43:45 +0100 Subject: [PATCH 09/14] add missing bg --- apps/wallet/src/ui/styles/global.scss | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/apps/wallet/src/ui/styles/global.scss b/apps/wallet/src/ui/styles/global.scss index 7b0ad608988..4804c609617 100644 --- a/apps/wallet/src/ui/styles/global.scss +++ b/apps/wallet/src/ui/styles/global.scss @@ -1,15 +1,15 @@ -@use './themes'; -@use '_variables' as v; +@use "./themes"; +@use "_variables" as v; -@import '@iota/apps-ui-kit/styles'; +@import "@iota/apps-ui-kit/styles"; @tailwind base; @tailwind components; @tailwind utilities; @layer base { - input[type='number']::-webkit-inner-spin-button, - input[type='number']::-webkit-outer-spin-button { + input[type="number"]::-webkit-inner-spin-button, + input[type="number"]::-webkit-outer-spin-button { appearance: none; margin: 0; } @@ -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; } * { @@ -101,11 +101,11 @@ textarea { } textarea { - font-family: 'Inter Variable', sans-serif; + font-family: "Inter Variable", sans-serif; } input { - font-family: 'Inter Variable', sans-serif; + font-family: "Inter Variable", sans-serif; } // remove default password reveal button edge From 3f47150c0626cbf6214020a065d3840624cf66b9 Mon Sep 17 00:00:00 2001 From: evavirseda <evirseda@boxfish.studio> Date: Thu, 14 Nov 2024 13:48:55 +0100 Subject: [PATCH 10/14] feat: fix prettier --- apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx | 2 +- apps/wallet/src/ui/app/shared/dapp-status/index.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx b/apps/wallet/src/ui/app/shared/ButtonConnectedTo.tsx index 3cba3510e9a..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="max-w-28 flex 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" + 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/dapp-status/index.tsx b/apps/wallet/src/ui/app/shared/dapp-status/index.tsx index 3c076a06f07..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="max-w-72 absolute right-6 top-[48px] z-50 rounded-2xl bg-neutral-96 p-sm shadow-xl dark:bg-neutral-12" + 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} From 065ede24e301e4aae9bb0c93854b26c09751bad9 Mon Sep 17 00:00:00 2001 From: evavirseda <evirseda@boxfish.studio> Date: Thu, 14 Nov 2024 13:55:37 +0100 Subject: [PATCH 11/14] fix cleanup --- apps/core/src/components/providers/KioskClientProvider.tsx | 2 +- apps/core/src/components/providers/ThemeProvider.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/apps/core/src/components/providers/KioskClientProvider.tsx b/apps/core/src/components/providers/KioskClientProvider.tsx index d1355db31a2..3fd0b064c31 100644 --- a/apps/core/src/components/providers/KioskClientProvider.tsx +++ b/apps/core/src/components/providers/KioskClientProvider.tsx @@ -4,7 +4,7 @@ import { useIotaClientContext } from '@iota/dapp-kit'; import { KioskClient } from '@iota/kiosk'; -import React, { createContext, useMemo, type ReactNode } from 'react'; +import { createContext, useMemo, type ReactNode } from 'react'; export const KioskClientContext = createContext<KioskClient | null>(null); diff --git a/apps/core/src/components/providers/ThemeProvider.tsx b/apps/core/src/components/providers/ThemeProvider.tsx index dcdfb8fa0fa..b028d200e92 100644 --- a/apps/core/src/components/providers/ThemeProvider.tsx +++ b/apps/core/src/components/providers/ThemeProvider.tsx @@ -1,7 +1,7 @@ // Copyright (c) 2024 IOTA Stiftung // SPDX-License-Identifier: Apache-2.0 -import React, { PropsWithChildren, useState, useEffect } from 'react'; +import { PropsWithChildren, useState, useEffect } from 'react'; import { Theme } from '../../enums'; import { ThemeContext } from '../../contexts'; From f3b7be660aa2f2dee01fee2cfa18c555e1192fe8 Mon Sep 17 00:00:00 2001 From: evavirseda <evirseda@boxfish.studio> Date: Fri, 22 Nov 2024 09:21:54 +0100 Subject: [PATCH 12/14] feat: polish ledger dialog --- .../src/ui/app/components/ledger/ConnectLedgerModal.tsx | 5 +++-- 1 file changed, 3 insertions(+), 2 deletions(-) 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> ); From 8ba6e48b2dabb889490636f8a9837ef25064427c Mon Sep 17 00:00:00 2001 From: evavirseda <evirseda@boxfish.studio> Date: Fri, 22 Nov 2024 09:22:04 +0100 Subject: [PATCH 13/14] fix overflow --- apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx | 2 +- .../src/ui/app/pages/accounts/manage/AccountGroupItem.tsx | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) 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 8d8a68443fc..b6cd64ae3b6 100644 --- a/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx +++ b/apps/wallet/src/ui/app/pages/accounts/manage/AccountGroup.tsx @@ -167,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 ce4137b02f6..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' : '', )} > From 0f7fd3123176c746051e4904541eed90d77d90db Mon Sep 17 00:00:00 2001 From: evavirseda <evirseda@boxfish.studio> Date: Fri, 22 Nov 2024 09:30:20 +0100 Subject: [PATCH 14/14] fix format --- apps/wallet/src/ui/styles/global.scss | 14 +++++++------- 1 file changed, 7 insertions(+), 7 deletions(-) diff --git a/apps/wallet/src/ui/styles/global.scss b/apps/wallet/src/ui/styles/global.scss index 4804c609617..61d13ed2261 100644 --- a/apps/wallet/src/ui/styles/global.scss +++ b/apps/wallet/src/ui/styles/global.scss @@ -1,15 +1,15 @@ -@use "./themes"; -@use "_variables" as v; +@use './themes'; +@use '_variables' as v; -@import "@iota/apps-ui-kit/styles"; +@import '@iota/apps-ui-kit/styles'; @tailwind base; @tailwind components; @tailwind utilities; @layer base { - input[type="number"]::-webkit-inner-spin-button, - input[type="number"]::-webkit-outer-spin-button { + input[type='number']::-webkit-inner-spin-button, + input[type='number']::-webkit-outer-spin-button { appearance: none; margin: 0; } @@ -101,11 +101,11 @@ textarea { } textarea { - font-family: "Inter Variable", sans-serif; + font-family: 'Inter Variable', sans-serif; } input { - font-family: "Inter Variable", sans-serif; + font-family: 'Inter Variable', sans-serif; } // remove default password reveal button edge