From 280c18bca8c6600af8851c609e4a2c1a1c7161cd Mon Sep 17 00:00:00 2001
From: Lucas Werey <lucas.werey@ledger.fr>
Date: Tue, 24 Dec 2024 12:18:01 +0100
Subject: [PATCH] feat :lipstick:(lld) update icons

---
 .changeset/angry-seals-drop.md                |  5 +++
 .../renderer/components/MainSideBar/index.tsx | 44 +++++++------------
 .../components/SideBar/SideBarListItem.tsx    | 12 +++--
 .../screens/dashboard/FeaturedButtons.tsx     | 10 ++---
 4 files changed, 33 insertions(+), 38 deletions(-)
 create mode 100644 .changeset/angry-seals-drop.md

diff --git a/.changeset/angry-seals-drop.md b/.changeset/angry-seals-drop.md
new file mode 100644
index 000000000000..f39f5f799018
--- /dev/null
+++ b/.changeset/angry-seals-drop.md
@@ -0,0 +1,5 @@
+---
+"ledger-live-desktop": minor
+---
+
+Update navigator side bar icons
diff --git a/apps/ledger-live-desktop/src/renderer/components/MainSideBar/index.tsx b/apps/ledger-live-desktop/src/renderer/components/MainSideBar/index.tsx
index 96eb19fecd91..d2ad6fcf345d 100644
--- a/apps/ledger-live-desktop/src/renderer/components/MainSideBar/index.tsx
+++ b/apps/ledger-live-desktop/src/renderer/components/MainSideBar/index.tsx
@@ -7,7 +7,7 @@ import styled from "styled-components";
 import { useDeviceHasUpdatesAvailable } from "@ledgerhq/live-common/manager/useDeviceHasUpdatesAvailable";
 import { useRemoteLiveAppManifest } from "@ledgerhq/live-common/platform/providers/RemoteLiveAppProvider/index";
 import { FeatureToggle, useFeature } from "@ledgerhq/live-common/featureFlags/index";
-import { IconsLegacy, Tag as TagComponent } from "@ledgerhq/react-ui";
+import { IconsLegacy, Icons, Tag as TagComponent } from "@ledgerhq/react-ui";
 import { accountsSelector, starredAccountsSelector } from "~/renderer/reducers/accounts";
 import {
   sidebarCollapsedSelector,
@@ -21,7 +21,6 @@ import { setSidebarCollapsed } from "~/renderer/actions/settings";
 import useExperimental from "~/renderer/hooks/useExperimental";
 import { setTrackingSource } from "~/renderer/analytics/TrackPage";
 import { darken, rgba } from "~/renderer/styles/helpers";
-import IconChevron from "~/renderer/icons/ChevronRightSmall";
 import IconExperimental from "~/renderer/icons/Experimental";
 import { SideBarList, SideBarListItem } from "~/renderer/components/SideBar";
 import Box from "~/renderer/components/Box";
@@ -385,7 +384,7 @@ const MainSideBar = () => {
               onClick={handleCollapse}
               data-testid="drawer-collapse-button"
             >
-              <IconChevron size={16} />
+              <Icons.ChevronRight size={"S"} />
             </Collapser>
             <SideBarScrollContainer>
               {ldmkTransportFlag?.enabled && ldmkTransportFlag?.params?.warningVisible && (
@@ -397,8 +396,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"dashboard"}
                   label={t("dashboard.title")}
-                  icon={IconsLegacy.HouseMedium}
-                  iconSize={20}
+                  icon={Icons.Home}
                   iconActiveColor="wallet"
                   onClick={handleClickDashboard}
                   isActive={location.pathname === "/" || location.pathname.startsWith("/asset/")}
@@ -408,8 +406,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"market"}
                   label={t("sidebar.market")}
-                  icon={IconsLegacy.GraphGrowMedium}
-                  iconSize={20}
+                  icon={Icons.GraphAsc}
                   iconActiveColor="wallet"
                   onClick={handleClickMarket}
                   isActive={location.pathname.startsWith("/market")}
@@ -418,8 +415,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"accounts"}
                   label={t("sidebar.accounts")}
-                  icon={IconsLegacy.WalletMedium}
-                  iconSize={20}
+                  icon={Icons.Wallet}
                   iconActiveColor="wallet"
                   isActive={location.pathname.startsWith("/account")}
                   onClick={handleClickAccounts}
@@ -429,8 +425,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"catalog"}
                   label={t("sidebar.catalog")}
-                  icon={IconsLegacy.PlanetMedium}
-                  iconSize={20}
+                  icon={Icons.Grid}
                   iconActiveColor="wallet"
                   isActive={location.pathname.startsWith("/platform") && !isLiveAppTabSelected}
                   onClick={handleClickCatalog}
@@ -439,8 +434,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"send"}
                   label={t("send.title")}
-                  icon={IconsLegacy.ArrowFromBottomMedium}
-                  iconSize={20}
+                  icon={Icons.ArrowUp}
                   iconActiveColor="wallet"
                   onClick={handleOpenSendModal}
                   disabled={noAccounts || navigationLocked}
@@ -449,8 +443,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"receive"}
                   label={t("receive.title")}
-                  icon={IconsLegacy.ArrowToBottomMedium}
-                  iconSize={20}
+                  icon={Icons.ArrowDown}
                   iconActiveColor="wallet"
                   onClick={handleOpenReceiveModal}
                   disabled={noAccounts || navigationLocked}
@@ -459,8 +452,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"earn"}
                   label={earnLabel}
-                  icon={IconsLegacy.LendMedium}
-                  iconSize={20}
+                  icon={Icons.HandCoins}
                   iconActiveColor="wallet"
                   onClick={handleClickEarn}
                   isActive={location.pathname === "/earn"}
@@ -474,8 +466,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"exchange"}
                   label={t("sidebar.exchange")}
-                  icon={IconsLegacy.BuyCryptoAltMedium}
-                  iconSize={20}
+                  icon={Icons.Dollar}
                   iconActiveColor="wallet"
                   onClick={handleClickExchange}
                   isActive={location.pathname === "/exchange"}
@@ -485,8 +476,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"swap"}
                   label={t("sidebar.swap")}
-                  icon={IconsLegacy.BuyCryptoMedium}
-                  iconSize={20}
+                  icon={Icons.Exchange}
                   iconActiveColor="wallet"
                   onClick={handleClickSwap}
                   isActive={location.pathname.startsWith("/swap")}
@@ -497,8 +487,7 @@ const MainSideBar = () => {
                   <SideBarListItem
                     id={"refer"}
                     label={t("sidebar.refer")}
-                    icon={IconsLegacy.GiftCardMedium}
-                    iconSize={20}
+                    icon={Icons.Gift}
                     iconActiveColor="wallet"
                     onClick={handleClickRefer}
                     isActive={
@@ -522,8 +511,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"card"}
                   label={t("sidebar.card")}
-                  icon={IconsLegacy.CardMedium}
-                  iconSize={20}
+                  icon={Icons.CreditCard}
                   iconActiveColor="wallet"
                   isActive={location.pathname === "/card"}
                   onClick={handleClickCard}
@@ -534,8 +522,7 @@ const MainSideBar = () => {
                   <SideBarListItem
                     id={"recover"}
                     label={t("sidebar.recover")}
-                    icon={IconsLegacy.ShieldCheckMedium}
-                    iconSize={20}
+                    icon={Icons.ShieldCheck}
                     iconActiveColor="wallet"
                     onClick={handleClickRecover}
                     collapsed={secondAnim}
@@ -551,8 +538,7 @@ const MainSideBar = () => {
                 <SideBarListItem
                   id={"manager"}
                   label={t("sidebar.manager")}
-                  icon={IconsLegacy.NanoXFoldedMedium}
-                  iconSize={20}
+                  icon={Icons.Nano}
                   iconActiveColor="wallet"
                   onClick={handleClickManager}
                   isActive={location.pathname === "/manager"}
diff --git a/apps/ledger-live-desktop/src/renderer/components/SideBar/SideBarListItem.tsx b/apps/ledger-live-desktop/src/renderer/components/SideBar/SideBarListItem.tsx
index 5afeade225a7..ba17e88efed1 100644
--- a/apps/ledger-live-desktop/src/renderer/components/SideBar/SideBarListItem.tsx
+++ b/apps/ledger-live-desktop/src/renderer/components/SideBar/SideBarListItem.tsx
@@ -4,11 +4,15 @@ import Hide from "~/renderer/components/MainSideBar/Hide";
 import Box, { Tabbable } from "~/renderer/components/Box";
 import Tooltip from "~/renderer/components/Tooltip";
 
+interface IconProps {
+  size: "S" | "XS" | "M" | "L" | "XL" | undefined;
+}
+
 export type Props = {
   label: string | ((a: Props) => React.ReactNode);
   desc?: (a: Props) => React.ReactNode;
-  icon?: React.ComponentType<{ size?: number }>;
-  iconSize?: number;
+  icon?: ({ size }: IconProps) => JSX.Element;
+  iconSize?: IconProps["size"];
   disabled?: boolean;
   iconActiveColor: string | undefined;
   NotifComponent?: React.ReactNode;
@@ -22,7 +26,7 @@ class SideBarListItem extends PureComponent<Props> {
   render() {
     const {
       icon: Icon,
-      iconSize,
+      iconSize = "S",
       label,
       desc,
       iconActiveColor,
@@ -56,7 +60,7 @@ class SideBarListItem extends PureComponent<Props> {
           onClick={disabled ? undefined : onClick}
           disabled={disabled}
         >
-          {!!Icon && <Icon size={iconSize || 16} />}
+          {!!Icon && <Icon size={iconSize} />}
           <Box grow shrink>
             <Hide visible={!collapsed}>
               <Box horizontal justifyContent="space-between" alignItems="center">
diff --git a/apps/ledger-live-desktop/src/renderer/screens/dashboard/FeaturedButtons.tsx b/apps/ledger-live-desktop/src/renderer/screens/dashboard/FeaturedButtons.tsx
index 54427c8d6296..1bc0eb197201 100644
--- a/apps/ledger-live-desktop/src/renderer/screens/dashboard/FeaturedButtons.tsx
+++ b/apps/ledger-live-desktop/src/renderer/screens/dashboard/FeaturedButtons.tsx
@@ -1,5 +1,5 @@
 import React, { useCallback } from "react";
-import { Grid, IconsLegacy } from "@ledgerhq/react-ui";
+import { Grid, Icons } from "@ledgerhq/react-ui";
 import styled from "styled-components";
 import { useTranslation } from "react-i18next";
 import EntryButton from "~/renderer/components/EntryButton/EntryButton";
@@ -26,7 +26,7 @@ const FeaturedButtons = () => {
 
   const { enabled: bannerEnabled } = bannerFeatureFlag || { enabled: false };
 
-  const stakeDisabled = stakeProgramsFeatureFlag?.params?.list?.length === 0 ?? true;
+  const stakeDisabled = stakeProgramsFeatureFlag?.params?.list?.length === 0;
   const startStakeFlow = useStakeFlow();
 
   const handleClickExchange = useCallback(() => {
@@ -52,21 +52,21 @@ const FeaturedButtons = () => {
   return (
     <ButtonGrid>
       <EntryButton
-        Icon={() => <IconsLegacy.BuyCryptoAltMedium size={18} />}
+        Icon={() => <Icons.Dollar size="S" />}
         title={t("dashboard.featuredButtons.buySell.title")}
         body={t("dashboard.featuredButtons.buySell.description")}
         onClick={handleClickExchange}
         entryButtonTestId="buy-sell-entry-button"
       />
       <EntryButton
-        Icon={() => <IconsLegacy.BuyCryptoMedium size={18} />}
+        Icon={() => <Icons.Exchange size="S" />}
         title={t("dashboard.featuredButtons.swap.title")}
         body={t("dashboard.featuredButtons.swap.description")}
         onClick={handleClickSwap}
         entryButtonTestId="swap-entry-button"
       />
       <EntryButton
-        Icon={() => <IconsLegacy.LendMedium size={18} />}
+        Icon={() => <Icons.HandCoins size="S" />}
         disabled={stakeDisabled}
         title={stakeLabel}
         body={t("dashboard.featuredButtons.earn.description")}