Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

feat 💄(lld) update icons #8760

Draft
wants to merge 1 commit into
base: develop
Choose a base branch
from
Draft

feat 💄(lld) update icons #8760

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
5 changes: 5 additions & 0 deletions .changeset/angry-seals-drop.md
View file
Open in desktop
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
Open in desktop
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
Open in desktop
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
Open in desktop
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
Loading