From 3e0089e43a3581e13475612bb8f461f68669ecba Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?= <9116238+krzysztofzuraw@users.noreply.github.com> Date: Thu, 9 Oct 2025 13:44:04 +0200 Subject: [PATCH 1/8] Migrate sidebar icons to Lucide React MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Replace custom SVG icons with Lucide React equivalents in the sidebar: - Replace Cloud icon with CloudIcon from lucide-react - Replace Graphql icon with new GraphqlIcon component - Refactor TerminalIcon to match lucide-react style - Replace Gift icon with GiftIcon from lucide-react - Add LucideIconsWrapper component for consistent icon sizing and styling This change improves consistency across the dashboard by using a standard icon library instead of custom SVG components. 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/components/Sidebar/LucideIconsWrapper.tsx | 7 +++++ .../Sidebar/menu/EnvironmentLink.tsx | 7 +++-- .../Sidebar/shortcuts/useShortcuts.tsx | 20 ++++++------- src/icons/Cloud.tsx | 18 ----------- src/icons/Graphql.tsx | 19 ------------ src/icons/GraphqlIcon.tsx | 21 +++++++++++++ src/icons/TerminalIcon.tsx | 30 +++++++++---------- 7 files changed, 57 insertions(+), 65 deletions(-) create mode 100644 src/components/Sidebar/LucideIconsWrapper.tsx delete mode 100644 src/icons/Cloud.tsx delete mode 100644 src/icons/Graphql.tsx create mode 100644 src/icons/GraphqlIcon.tsx diff --git a/src/components/Sidebar/LucideIconsWrapper.tsx b/src/components/Sidebar/LucideIconsWrapper.tsx new file mode 100644 index 00000000000..7503c230886 --- /dev/null +++ b/src/components/Sidebar/LucideIconsWrapper.tsx @@ -0,0 +1,7 @@ +import { Box } from "@saleor/macaw-ui-next"; + +export const LucideIconsWrapper = ({ children }: { children: React.ReactNode }) => ( + // Applying slight transform to center lucide icons vertically + // TODO: remove when we use lucide icons everywhere in sidebar + {children} +); diff --git a/src/components/Sidebar/menu/EnvironmentLink.tsx b/src/components/Sidebar/menu/EnvironmentLink.tsx index 948b7c69ec0..bcf4ebd8677 100644 --- a/src/components/Sidebar/menu/EnvironmentLink.tsx +++ b/src/components/Sidebar/menu/EnvironmentLink.tsx @@ -1,7 +1,8 @@ -import { Cloud } from "@dashboard/icons/Cloud"; import { Box, Text } from "@saleor/macaw-ui-next"; +import { CloudIcon } from "lucide-react"; import { FormattedMessage } from "react-intl"; +import { LucideIconsWrapper } from "../LucideIconsWrapper"; import { useEnvLink } from "./hooks/useEnvLink"; export const EnvironmentLink = () => { @@ -19,7 +20,9 @@ export const EnvironmentLink = () => { alignItems="center" > - + + + diff --git a/src/components/Sidebar/shortcuts/useShortcuts.tsx b/src/components/Sidebar/shortcuts/useShortcuts.tsx index 84d9d672fba..002723e4f34 100644 --- a/src/components/Sidebar/shortcuts/useShortcuts.tsx +++ b/src/components/Sidebar/shortcuts/useShortcuts.tsx @@ -1,16 +1,16 @@ import { useDevModeContext } from "@dashboard/components/DevModePanel/hooks"; import { useNavigatorSearchContext } from "@dashboard/components/NavigatorSearch/useNavigatorSearchContext"; -import { Graphql } from "@dashboard/icons/Graphql"; +import { GraphqlIcon } from "@dashboard/icons/GraphqlIcon"; import { TerminalIcon } from "@dashboard/icons/TerminalIcon"; import { Ripple } from "@dashboard/ripples/components/Ripple"; import { rippleIntroducedRipples } from "@dashboard/ripples/ripples/introducedRipples"; import { useAllRipplesModalState } from "@dashboard/ripples/state"; import { Box } from "@saleor/macaw-ui-next"; -import { Gift } from "lucide-react"; +import { GiftIcon } from "lucide-react"; import { useCallback, useMemo } from "react"; -import * as React from "react"; import { useIntl } from "react-intl"; +import { LucideIconsWrapper } from "../LucideIconsWrapper"; import { shortcutsMessages } from "./messages"; import { getShortcutLeadingKey } from "./utils"; @@ -44,18 +44,14 @@ export const useShortcuts = (): Shortcut[] => { { id: "search", name: intl.formatMessage(shortcutsMessages.search), - icon: ( - - - - ), + icon: , shortcut: `${controlKey} + K`, action: handleOpenSearch, }, { id: "playground", name: intl.formatMessage(shortcutsMessages.playground), - icon: , + icon: , shortcut: `${controlKey} + '`, action: handleOpenPlayground, }, @@ -69,7 +65,11 @@ export const useShortcuts = (): Shortcut[] => { ), - icon: , + icon: ( + + + + ), action: () => { setModalState(true); }, diff --git a/src/icons/Cloud.tsx b/src/icons/Cloud.tsx deleted file mode 100644 index 7b4ab51d4ff..00000000000 --- a/src/icons/Cloud.tsx +++ /dev/null @@ -1,18 +0,0 @@ -export const Cloud = () => ( - - - - - - - - - - -); diff --git a/src/icons/Graphql.tsx b/src/icons/Graphql.tsx deleted file mode 100644 index 4af48120e22..00000000000 --- a/src/icons/Graphql.tsx +++ /dev/null @@ -1,19 +0,0 @@ -export const Graphql = () => { - return ( - // Mark component as candidate for macaw-ui - - - - - - - - - - ); -}; diff --git a/src/icons/GraphqlIcon.tsx b/src/icons/GraphqlIcon.tsx new file mode 100644 index 00000000000..791a433dac0 --- /dev/null +++ b/src/icons/GraphqlIcon.tsx @@ -0,0 +1,21 @@ +export const GraphqlIcon = () => ( + + + + + + + + + + +); diff --git a/src/icons/TerminalIcon.tsx b/src/icons/TerminalIcon.tsx index 0425cce726c..e9f913248e4 100644 --- a/src/icons/TerminalIcon.tsx +++ b/src/icons/TerminalIcon.tsx @@ -1,16 +1,14 @@ -export const TerminalIcon = () => { - return ( - - - - - ); -}; +export const TerminalIcon = () => ( + + + + +); From 469c994379b2fa29da400aa1153a72df149cfb62 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?= <9116238+krzysztofzuraw@users.noreply.github.com> Date: Thu, 9 Oct 2025 13:47:59 +0200 Subject: [PATCH 2/8] Fix PR review comments MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit - Fix viewBox in GraphqlIcon.tsx to use standard '0 0 24 24' format - Extract magic numbers to constants in LucideIconsWrapper.tsx for better maintainability 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/components/Sidebar/LucideIconsWrapper.tsx | 10 +++++++++- src/icons/GraphqlIcon.tsx | 2 +- 2 files changed, 10 insertions(+), 2 deletions(-) diff --git a/src/components/Sidebar/LucideIconsWrapper.tsx b/src/components/Sidebar/LucideIconsWrapper.tsx index 7503c230886..c6a95d61be1 100644 --- a/src/components/Sidebar/LucideIconsWrapper.tsx +++ b/src/components/Sidebar/LucideIconsWrapper.tsx @@ -1,7 +1,15 @@ import { Box } from "@saleor/macaw-ui-next"; +// Constants for Lucide icon transform offsets +const LUCIDE_ICON_TRANSLATE_X = -3.5; // px +const LUCIDE_ICON_TRANSLATE_Y = -2; // px + export const LucideIconsWrapper = ({ children }: { children: React.ReactNode }) => ( // Applying slight transform to center lucide icons vertically // TODO: remove when we use lucide icons everywhere in sidebar - {children} + + {children} + ); diff --git a/src/icons/GraphqlIcon.tsx b/src/icons/GraphqlIcon.tsx index 791a433dac0..50ed8b4ebf4 100644 --- a/src/icons/GraphqlIcon.tsx +++ b/src/icons/GraphqlIcon.tsx @@ -1,7 +1,7 @@ export const GraphqlIcon = () => ( Date: Thu, 9 Oct 2025 13:48:59 +0200 Subject: [PATCH 3/8] Add changeset for sidebar icons migration MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- .changeset/migrate-sidebar-icons-to-lucide.md | 5 +++++ 1 file changed, 5 insertions(+) create mode 100644 .changeset/migrate-sidebar-icons-to-lucide.md diff --git a/.changeset/migrate-sidebar-icons-to-lucide.md b/.changeset/migrate-sidebar-icons-to-lucide.md new file mode 100644 index 00000000000..e2ec4f93bf2 --- /dev/null +++ b/.changeset/migrate-sidebar-icons-to-lucide.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": patch +--- + +Migrated sidebar icons to Lucide React for better consistency. Replaced custom SVG icons (Cloud, Graphql, Gift) with Lucide equivalents and refactored TerminalIcon to match Lucide conventions. From 9a0256e11190dfa5cb0999574ca2e09620594de4 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?= <9116238+krzysztofzuraw@users.noreply.github.com> Date: Thu, 9 Oct 2025 14:02:24 +0200 Subject: [PATCH 4/8] Fix GraphQL icon alignment in shortcuts MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Wrap GraphqlIcon with LucideIconsWrapper for consistent positioning 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/components/Sidebar/shortcuts/useShortcuts.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Sidebar/shortcuts/useShortcuts.tsx b/src/components/Sidebar/shortcuts/useShortcuts.tsx index 002723e4f34..c371c01174f 100644 --- a/src/components/Sidebar/shortcuts/useShortcuts.tsx +++ b/src/components/Sidebar/shortcuts/useShortcuts.tsx @@ -51,7 +51,11 @@ export const useShortcuts = (): Shortcut[] => { { id: "playground", name: intl.formatMessage(shortcutsMessages.playground), - icon: , + icon: ( + + + + ), shortcut: `${controlKey} + '`, action: handleOpenPlayground, }, From 1c308548d0c7211a553ff0f894ac80cd9d50bccb Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?= <9116238+krzysztofzuraw@users.noreply.github.com> Date: Thu, 9 Oct 2025 14:04:04 +0200 Subject: [PATCH 5/8] Center GraphQL icon properly in 24x24 viewBox MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit Adjust coordinates to better center the icon within the viewBox 🤖 Generated with [Claude Code](https://claude.com/claude-code) Co-Authored-By: Claude --- src/icons/GraphqlIcon.tsx | 16 ++++++++-------- 1 file changed, 8 insertions(+), 8 deletions(-) diff --git a/src/icons/GraphqlIcon.tsx b/src/icons/GraphqlIcon.tsx index 50ed8b4ebf4..3d418f38d32 100644 --- a/src/icons/GraphqlIcon.tsx +++ b/src/icons/GraphqlIcon.tsx @@ -9,13 +9,13 @@ export const GraphqlIcon = () => ( strokeLinejoin="round" data-macaw-ui-candidate > - - - - - - - - + + + + + + + + ); From bb059d6584e79af8f55fedfe9e6b20570df3d99f Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?= <9116238+krzysztofzuraw@users.noreply.github.com> Date: Thu, 9 Oct 2025 14:07:33 +0200 Subject: [PATCH 6/8] updates --- src/components/Sidebar/LucideIconsWrapper.tsx | 4 ++-- src/components/Sidebar/shortcuts/useShortcuts.tsx | 6 +----- 2 files changed, 3 insertions(+), 7 deletions(-) diff --git a/src/components/Sidebar/LucideIconsWrapper.tsx b/src/components/Sidebar/LucideIconsWrapper.tsx index c6a95d61be1..e39f6ca2e4e 100644 --- a/src/components/Sidebar/LucideIconsWrapper.tsx +++ b/src/components/Sidebar/LucideIconsWrapper.tsx @@ -1,8 +1,8 @@ import { Box } from "@saleor/macaw-ui-next"; // Constants for Lucide icon transform offsets -const LUCIDE_ICON_TRANSLATE_X = -3.5; // px -const LUCIDE_ICON_TRANSLATE_Y = -2; // px +const LUCIDE_ICON_TRANSLATE_X = -2; +const LUCIDE_ICON_TRANSLATE_Y = -2; export const LucideIconsWrapper = ({ children }: { children: React.ReactNode }) => ( // Applying slight transform to center lucide icons vertically diff --git a/src/components/Sidebar/shortcuts/useShortcuts.tsx b/src/components/Sidebar/shortcuts/useShortcuts.tsx index c371c01174f..002723e4f34 100644 --- a/src/components/Sidebar/shortcuts/useShortcuts.tsx +++ b/src/components/Sidebar/shortcuts/useShortcuts.tsx @@ -51,11 +51,7 @@ export const useShortcuts = (): Shortcut[] => { { id: "playground", name: intl.formatMessage(shortcutsMessages.playground), - icon: ( - - - - ), + icon: , shortcut: `${controlKey} + '`, action: handleOpenPlayground, }, From efdbd6946ca73c12a20167d534394c5a062f6468 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?= <9116238+krzysztofzuraw@users.noreply.github.com> Date: Thu, 9 Oct 2025 14:10:33 +0200 Subject: [PATCH 7/8] revert changes --- src/components/Sidebar/LucideIconsWrapper.tsx | 2 +- src/icons/GraphqlIcon.tsx | 18 +++++++++--------- 2 files changed, 10 insertions(+), 10 deletions(-) diff --git a/src/components/Sidebar/LucideIconsWrapper.tsx b/src/components/Sidebar/LucideIconsWrapper.tsx index e39f6ca2e4e..8df1c12e15a 100644 --- a/src/components/Sidebar/LucideIconsWrapper.tsx +++ b/src/components/Sidebar/LucideIconsWrapper.tsx @@ -1,7 +1,7 @@ import { Box } from "@saleor/macaw-ui-next"; // Constants for Lucide icon transform offsets -const LUCIDE_ICON_TRANSLATE_X = -2; +const LUCIDE_ICON_TRANSLATE_X = -3.5; const LUCIDE_ICON_TRANSLATE_Y = -2; export const LucideIconsWrapper = ({ children }: { children: React.ReactNode }) => ( diff --git a/src/icons/GraphqlIcon.tsx b/src/icons/GraphqlIcon.tsx index 3d418f38d32..791a433dac0 100644 --- a/src/icons/GraphqlIcon.tsx +++ b/src/icons/GraphqlIcon.tsx @@ -1,7 +1,7 @@ export const GraphqlIcon = () => ( ( strokeLinejoin="round" data-macaw-ui-candidate > - - - - - - - - + + + + + + + + ); From 76809ce2729dfaec2a676cb9d1f2c991863985e9 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?Krzysztof=20=C5=BBuraw?= <9116238+krzysztofzuraw@users.noreply.github.com> Date: Thu, 9 Oct 2025 14:39:29 +0200 Subject: [PATCH 8/8] add marign left --- src/components/Sidebar/shortcuts/useShortcuts.tsx | 6 +++++- 1 file changed, 5 insertions(+), 1 deletion(-) diff --git a/src/components/Sidebar/shortcuts/useShortcuts.tsx b/src/components/Sidebar/shortcuts/useShortcuts.tsx index 002723e4f34..ed34f29613e 100644 --- a/src/components/Sidebar/shortcuts/useShortcuts.tsx +++ b/src/components/Sidebar/shortcuts/useShortcuts.tsx @@ -44,7 +44,11 @@ export const useShortcuts = (): Shortcut[] => { { id: "search", name: intl.formatMessage(shortcutsMessages.search), - icon: , + icon: ( + + + + ), shortcut: `${controlKey} + K`, action: handleOpenSearch, },