Merge pull request #8237 from LedgerHQ/fix/live-14634

fix: ledger sync loading drawer in light mode

.changeset/nervous-baboons-allow.md

@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Fix Ledger Sync loading drawer during activation

apps/ledger-live-desktop/src/newArch/features/WalletSync/components/LoadingStep.tsx

@@ -1,28 +1,33 @@
 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";
 
 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 (
-    <Box position="absolute" height="75%" bottom={0}>
+    <Box position="absolute" height="100%" width="100%" bottom={0}>
       <Box
         position="absolute"
         zIndex={1}
         height={"100%"}
         width="100%"
         style={{
-          backgroundImage: "linear-gradient(180deg, rgba(28, 29, 31, 1), 80%, rgba(0,0,0,0))",
+          backgroundImage: `linear-gradient(180deg, ${backgroundColor}, 80%, rgba(0,0,0,0))`,
         }}
       />
 
@@ -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 (
     <Box position="relative" height="100%" width="500px">
-      <Animation />
+      <Animation theme={theme} />
       <Flex
         position={"relative"}
         zIndex={2}
@@ -59,7 +65,7 @@ export default function Loading({ title, subtitle }: Loading) {
         <Text
           variant="body"
           fontSize={14}
-          color={"hsla(0, 0%, 75%, 1)"}
+          color={colors.neutral.c80}
           whiteSpace="pre-line"
           textAlign="center"
         >

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 (
     <>
       <TrackPage category={String(AnalyticsPage.Loading)} flow={AnalyticsFlow} />
-      <Loading title={t(title)} subtitle={t("walletSync.loading.activation")} />
+      <Loading
+        title={t(title)}
+        subtitle={t("walletSync.loading.activation")}
+        theme={currentTheme}
+      />
     </>
   );
 }