Skip to content

Commit

Permalink
feat 💄(lld) update icons
Browse files Browse the repository at this point in the history 
test(lld): update screenshots (ubuntu-22.04)  lld, test, screenshot
  • Loading branch information
@LucasWerey
LucasWerey committed Jan 8, 2025
1 parent 7b4b114 commit 9de6e6e
Show file tree
Hide file tree
Showing 104 changed files with 75 additions and 84 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
2 changes: 1 addition & 1 deletion apps/ledger-live-desktop/src/renderer/components/MainSideBar/TopGradient.tsx
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,7 +3,7 @@ import styled from "styled-components";

const TopGradientBox = styled.div`
width: 100%;
height: 80px;
height: 70px;
position: absolute;
top: 0;
left: 0;
Expand Down
99 changes: 46 additions & 53 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 { Icons, Tag as TagComponent } from "@ledgerhq/react-ui";
import { accountsSelector, starredAccountsSelector } from "~/renderer/reducers/accounts";
import {
sidebarCollapsedSelector,
Expand All @@ -20,9 +20,7 @@ import { openModal } from "~/renderer/actions/modals";
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 { darken } from "~/renderer/styles/helpers";
import { SideBarList, SideBarListItem } from "~/renderer/components/SideBar";
import Box from "~/renderer/components/Box";
import Space from "~/renderer/components/Space";
Expand Down Expand Up @@ -56,12 +54,12 @@ const Tag = styled(Link)`
font-family: "Inter";
font-weight: bold;
font-size: 10px;
padding: 2px ${p => p.theme.space[3] - 1}px;
min-height: 32px;
border-radius: 4px;
margin: ${p => p.theme.space[2]}px ${p => p.theme.space[3]}px;
min-height: 36px;
padding: 0 12px;
border-radius: 8px;
margin: 0px 16px 12px;
color: ${p => p.theme.colors.palette.text.shade100};
background-color: ${p => p.theme.colors.palette.background.default};
background-color: ${p => p.theme.colors.palette.opacityPurple.c10};
text-decoration: none;
cursor: pointer;
border: solid 1px rgba(0, 0, 0, 0);
Expand All @@ -87,32 +85,35 @@ const Collapser = styled(Box).attrs(() => ({
collapsed?: boolean;
}>`
position: absolute;
top: ${58 - collapserSize / 2}px;
top: ${48 - collapserSize / 2}px;
left: ${p => (p.collapsed ? collapsedWidth : MAIN_SIDEBAR_WIDTH) - collapserSize / 2}px;
width: ${collapserSize}px;
height: ${collapserSize}px;
cursor: pointer;
border-radius: 50%;
background: ${p => p.theme.colors.palette.background.paper};
color: ${p => p.theme.colors.palette.text.shade80};
border-color: ${p => p.theme.colors.palette.divider};
background: linear-gradient(
${p => p.theme.colors.palette.opacityDefault.c05} 0%,
${p => p.theme.colors.palette.opacityDefault.c05} 100%
),
${p => p.theme.colors.palette.background.default};
box-shadow: 0 2px 4px 0 rgba(0, 0, 0, 0.05);
border: 1px solid;
border: 1px solid ${p => p.theme.colors.palette.opacityDefault.c05};
transition: all 0.5s;
z-index: 100;
&:hover {
border-color: ${p => p.theme.colors.wallet};
color: ${p => p.theme.colors.wallet};
background: ${p => rgba(p.theme.colors.wallet, 0.1)};
background: linear-gradient(
${p => p.theme.colors.palette.opacityDefault.c10} 0%,
${p => p.theme.colors.palette.opacityDefault.c10} 100%
),
${p => p.theme.colors.palette.background.default};
}
& > * {
transform: ${p => (p.collapsed ? "" : "rotate(180deg)")};
margin-left: ${p => (p.collapsed ? "" : "-2px")};
transition: transform 0.5s;
}
`;
Expand Down Expand Up @@ -150,7 +151,11 @@ const SideBar = styled(Box).attrs(() => ({
}))`
flex: 0 0 auto;
width: auto;
background-color: ${p => p.theme.colors.palette.background.paper};
background: linear-gradient(
${p => p.theme.colors.palette.opacityDefault.c05} 0%,
${p => p.theme.colors.palette.opacityDefault.c05} 100%
),
${p => p.theme.colors.palette.background.default};
transition: flex ${sideBarTransitionSpeed}ms;
will-change: flex;
transform: translate3d(0, 0, 10);
Expand Down Expand Up @@ -204,7 +209,7 @@ const TagContainerExperimental = ({ collapsed }: { collapsed: boolean }) => {
}}
onClick={() => setTrackingSource("sidebar")}
>
<IconExperimental width={16} height={16} />
<Icons.Experiment size="S" color="primary.c80" />
<TagText collapsed={collapsed}>{t("common.experimentalFeature")}</TagText>
</Tag>
) : null;
Expand All @@ -224,7 +229,7 @@ const TagContainerFeatureFlags = ({ collapsed }: { collapsed: boolean }) => {
}}
onClick={() => setTrackingSource("sidebar")}
>
<IconsLegacy.ChartNetworkMedium size={16} />
<Icons.Switch2 size="S" color="primary.c80" />
<TagText collapsed={collapsed}>{t("common.featureFlags")}</TagText>
</Tag>
) : null;
Expand Down Expand Up @@ -385,20 +390,20 @@ const MainSideBar = () => {
onClick={handleCollapse}
data-testid="drawer-collapse-button"
>
<IconChevron size={16} />
<Icons.ChevronRight size="S" />
</Collapser>

<SideBarScrollContainer>
{ldmkTransportFlag?.enabled && ldmkTransportFlag?.params?.warningVisible && (
<LDMKTransportFlag>{t("ldmkFeatureFlagWarning.title")}</LDMKTransportFlag>
)}
<TopGradient />
<Space of={70} />
<SideBarList title={t("sidebar.menu")} collapsed={secondAnim}>
<Space of={60} />
<SideBarList collapsed={secondAnim}>
<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 +413,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 +422,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 +432,7 @@ const MainSideBar = () => {
<SideBarListItem
id={"catalog"}
label={t("sidebar.catalog")}
icon={IconsLegacy.PlanetMedium}
iconSize={20}
icon={Icons.Globe}
iconActiveColor="wallet"
isActive={location.pathname.startsWith("/platform") && !isLiveAppTabSelected}
onClick={handleClickCatalog}
Expand All @@ -439,8 +441,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 +450,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 +459,7 @@ const MainSideBar = () => {
<SideBarListItem
id={"earn"}
label={earnLabel}
icon={IconsLegacy.LendMedium}
iconSize={20}
icon={Icons.Percentage}
iconActiveColor="wallet"
onClick={handleClickEarn}
isActive={location.pathname === "/earn"}
Expand All @@ -474,8 +473,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 +483,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 +494,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 +518,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 +529,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,15 +545,13 @@ const MainSideBar = () => {
<SideBarListItem
id={"manager"}
label={t("sidebar.manager")}
icon={IconsLegacy.NanoXFoldedMedium}
iconSize={20}
icon={Icons.LedgerDevices}
iconActiveColor="wallet"
onClick={handleClickManager}
isActive={location.pathname === "/manager"}
NotifComponent={displayBlueDot ? <Dot collapsed={collapsed} /> : null}
collapsed={secondAnim}
/>
<Space of={30} />
</SideBarList>
<Box>
<Space grow of={30} />
Expand All @@ -575,10 +567,11 @@ const MainSideBar = () => {
<Stars pathname={location.pathname} collapsed={secondAnim} />
</SideBarList>
</Box>
<Space of={30} grow />
</SideBarScrollContainer>
<Box pt={4}>
<TagContainerExperimental collapsed={!secondAnim} />
<TagContainerFeatureFlags collapsed={!secondAnim} />
</SideBarScrollContainer>
</Box>
</SideBar>
);
}}
Expand Down
25 changes: 14 additions & 11 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 All @@ -73,7 +77,7 @@ class SideBarListItem extends PureComponent<Props> {
}
const Container = styled(Tabbable).attrs(() => ({
alignItems: "center",
borderRadius: 1,
borderRadius: 2,
ff: "Inter|SemiBold",
flow: 3,
horizontal: true,
Expand All @@ -87,25 +91,24 @@ const Container = styled(Tabbable).attrs(() => ({
width: 100%;
cursor: ${p => (p.disabled ? "not-allowed" : "pointer")};
color: ${p =>
p.isActive ? p.theme.colors.palette.text.shade100 : p.theme.colors.palette.text.shade80};
background: ${p => (p.isActive ? p.theme.colors.palette.action.hover : "")};
p.isActive ? p.theme.colors.palette.text.shade100 : p.theme.colors.palette.opacityDefault.c70};
background: ${p => (p.isActive ? p.theme.colors.palette.opacityDefault.c05 : "")};
opacity: ${p => (p.disabled ? 0.5 : 1)};
&:active {
background: ${p => !p.disabled && p.theme.colors.palette.action.hover};
background: ${p => !p.disabled && p.theme.colors.palette.opacityDefault.c05};
}
&:hover {
color: ${p => !p.disabled && p.theme.colors.palette.text.shade100};
background: ${p => !p.disabled && p.theme.colors.palette.opacityDefault.c05};
}
${p => {
const iconActiveColor =
p.theme.colors[p.iconActiveColor as keyof DefaultTheme["colors"]] || p.iconActiveColor;
const color = p.isActive ? iconActiveColor : p.theme.colors.palette.text.shade60;
const color = p.isActive ? iconActiveColor : p.theme.colors.palette.opacityDefault.c70;
return `
svg { color: ${color}; }
&:hover svg { color: ${p.disabled ? color : iconActiveColor}; }
`;
}};
`;
Expand Down
13 changes: 0 additions & 13 deletions apps/ledger-live-desktop/src/renderer/icons/Experimental.tsx
View file

This file was deleted.

Loading

0 comments on commit 9de6e6e

Please sign in to comment.