feat 💄(lld) update icons

LedgerHQ · Dec 24, 2024 · d845d79 · d845d79
1 parent 80f5a8f
commit d845d79
Show file tree

Hide file tree

Showing 3 changed files with 30 additions and 33 deletions.
diff --git a/.changeset/angry-seals-drop.md 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
@@ -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
@@ -4,11 +4,17 @@ 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;
+  color?: string;
+  style?: React.CSSProperties;
+}
+
 export type Props = {
   label: string | ((a: Props) => React.ReactNode);
   desc?: (a: Props) => React.ReactNode;
-  icon?: React.ComponentType<{ size?: number }>;
-  iconSize?: number;
+  icon?: ({ size, color, style }: IconProps) => JSX.Element;
+  iconSize?: IconProps["size"];
   disabled?: boolean;
   iconActiveColor: string | undefined;
   NotifComponent?: React.ReactNode;
@@ -22,7 +28,7 @@ class SideBarListItem extends PureComponent<Props> {
   render() {
     const {
       icon: Icon,
-      iconSize,
+      iconSize = "S",
       label,
       desc,
       iconActiveColor,
@@ -56,7 +62,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">