Skip to content

Commit

Permalink
feat 💄(lld) update icons
Browse files Browse the repository at this point in the history
  • Loading branch information
@LucasWerey
LucasWerey committed Dec 24, 2024
1 parent 80f5a8f commit 280c18b
Show file tree
Hide file tree
Showing 4 changed files with 33 additions and 38 deletions.
5 changes: 5 additions & 0 deletions .changeset/angry-seals-drop.md
View file
Original file line number Diff line number Diff line change
@@ -0,0 +1,5 @@
---
"ledger-live-desktop": minor
---

Update navigator side bar icons
44 changes: 15 additions & 29 deletions apps/ledger-live-desktop/src/renderer/components/MainSideBar/index.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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,
Expand All @@ -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";
Expand Down Expand Up @@ -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 && (
Expand All @@ -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/")}
Expand All @@ -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")}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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"}
Expand All @@ -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"}
Expand All @@ -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")}
Expand All @@ -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={
Expand All @@ -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}
Expand All @@ -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}
Expand All @@ -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"}
Expand Down
12 changes: 8 additions & 4 deletions apps/ledger-live-desktop/src/renderer/components/SideBar/SideBarListItem.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -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;
Expand All @@ -22,7 +26,7 @@ class SideBarListItem extends PureComponent<Props> {
render() {
const {
icon: Icon,
iconSize,
iconSize = "S",
label,
desc,
iconActiveColor,
Expand Down Expand Up @@ -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">
Expand Down
10 changes: 5 additions & 5 deletions apps/ledger-live-desktop/src/renderer/screens/dashboard/FeaturedButtons.tsx
View file
Original file line number Diff line number Diff line change
@@ -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";
Expand All @@ -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(() => {
Expand All @@ -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")}
Expand Down

0 comments on commit 280c18b

Please sign in to comment.