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. diff --git a/src/components/Sidebar/LucideIconsWrapper.tsx b/src/components/Sidebar/LucideIconsWrapper.tsx new file mode 100644 index 00000000000..8df1c12e15a --- /dev/null +++ b/src/components/Sidebar/LucideIconsWrapper.tsx @@ -0,0 +1,15 @@ +import { Box } from "@saleor/macaw-ui-next"; + +// Constants for Lucide icon transform offsets +const LUCIDE_ICON_TRANSLATE_X = -3.5; +const LUCIDE_ICON_TRANSLATE_Y = -2; + +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..ed34f29613e 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"; @@ -45,7 +45,7 @@ export const useShortcuts = (): Shortcut[] => { id: "search", name: intl.formatMessage(shortcutsMessages.search), icon: ( - + ), @@ -55,7 +55,7 @@ export const useShortcuts = (): Shortcut[] => { { id: "playground", name: intl.formatMessage(shortcutsMessages.playground), - icon: , + icon: , shortcut: `${controlKey} + '`, action: handleOpenPlayground, }, @@ -69,7 +69,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 = () => ( + + + + +);