diff --git a/.changeset/nervous-baboons-allow.md b/.changeset/nervous-baboons-allow.md new file mode 100644 index 000000000000..6451a1776cfc --- /dev/null +++ b/.changeset/nervous-baboons-allow.md @@ -0,0 +1,5 @@ +--- +"ledger-live-desktop": minor +--- + +Fix Ledger Sync loading drawer during activation diff --git a/apps/ledger-live-desktop/src/newArch/features/WalletSync/components/LoadingStep.tsx b/apps/ledger-live-desktop/src/newArch/features/WalletSync/components/LoadingStep.tsx index 2a3314986875..bf828b78a3e2 100644 --- a/apps/ledger-live-desktop/src/newArch/features/WalletSync/components/LoadingStep.tsx +++ b/apps/ledger-live-desktop/src/newArch/features/WalletSync/components/LoadingStep.tsx @@ -1,7 +1,6 @@ import React from "react"; - +import { useTheme } from "styled-components"; import { Box, Flex, Text } from "@ledgerhq/react-ui"; - import animation from "~/renderer/animations/common/loader.json"; import Lottie from "react-lottie"; import { getEnv } from "@ledgerhq/live-env"; @@ -9,20 +8,26 @@ import { getEnv } from "@ledgerhq/live-env"; type Loading = { title: string; subtitle: string; + theme: "light" | "dark"; +}; + +type Animation = { + theme: "light" | "dark"; }; -const Animation = () => { +const Animation = ({ theme }: Animation) => { const isPlaywright = !!getEnv("PLAYWRIGHT_RUN"); + const backgroundColor = theme === "light" ? "rgba(255, 255, 255, 1)" : "rgba(28, 29, 31, 1)"; return ( - + @@ -40,10 +45,11 @@ const Animation = () => { ); }; -export default function Loading({ title, subtitle }: Loading) { +export default function Loading({ title, subtitle, theme }: Loading) { + const { colors } = useTheme(); return ( - + diff --git a/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/04-LoadingStep.tsx b/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/04-LoadingStep.tsx index e11dc45a46a4..bb9297579e4e 100644 --- a/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/04-LoadingStep.tsx +++ b/apps/ledger-live-desktop/src/newArch/features/WalletSync/screens/Activation/04-LoadingStep.tsx @@ -1,19 +1,26 @@ import React from "react"; -import Loading from "../../components/LoadingStep"; import { useTranslation } from "react-i18next"; -import { AnalyticsFlow, AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics"; +import { useSelector } from "react-redux"; +import { themeSelector } from "~/renderer/actions/general"; import TrackPage from "~/renderer/analytics/TrackPage"; +import Loading from "../../components/LoadingStep"; +import { AnalyticsFlow, AnalyticsPage } from "../../hooks/useLedgerSyncAnalytics"; import { useLoadingStep } from "../../hooks/useLoadingStep"; export default function ActivationLoadingStep() { useLoadingStep(); const { t } = useTranslation(); + const currentTheme = useSelector(themeSelector); const title = "walletSync.loading.title"; return ( <> - + ); }