From 0a03f2f8468e7f5a0ddd5fd58c47fd6c3ac57bd8 Mon Sep 17 00:00:00 2001
From: Kevin Le Seigle <kevin.le-seigle@ledger.fr>
Date: Tue, 29 Oct 2024 14:48:28 +0100
Subject: [PATCH] fix: ledger sync loading drawer in light mode

---
 .changeset/nervous-baboons-allow.md           |  5 +++++
 .../WalletSync/components/LoadingStep.tsx     | 22 ++++++++++++-------
 .../screens/Activation/04-LoadingStep.tsx     | 13 ++++++++---
 3 files changed, 29 insertions(+), 11 deletions(-)
 create mode 100644 .changeset/nervous-baboons-allow.md

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 (
-    <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"
         >
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 (
     <>
       <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}
+      />
     </>
   );
 }