diff --git a/.changeset/ten-students-sneeze.md b/.changeset/ten-students-sneeze.md new file mode 100644 index 00000000000..5702f19b8e5 --- /dev/null +++ b/.changeset/ten-students-sneeze.md @@ -0,0 +1,5 @@ +--- +"saleor-dashboard": minor +--- + +Introduce new icons for menu, remove not used icons diff --git a/src/components/Sidebar/menu/hooks/useMenuStructure.tsx b/src/components/Sidebar/menu/hooks/useMenuStructure.tsx index 8e98a5b1489..645f52e2877 100644 --- a/src/components/Sidebar/menu/hooks/useMenuStructure.tsx +++ b/src/components/Sidebar/menu/hooks/useMenuStructure.tsx @@ -1,4 +1,3 @@ -// @ts-strict-ignore import { extensionMountPoints, useExtensions, @@ -13,22 +12,21 @@ import { customerListUrl } from "@dashboard/customers/urls"; import { saleListUrl, voucherListUrl } from "@dashboard/discounts/urls"; import { giftCardListUrl } from "@dashboard/giftCards/urls"; import { PermissionEnum } from "@dashboard/graphql"; +import { ConfigurationIcon } from "@dashboard/icons/Configuration"; +import { ContentsIcon } from "@dashboard/icons/Contents"; +import { CustomersIcon } from "@dashboard/icons/Customers"; +import { DiscountsIcon } from "@dashboard/icons/Discounts"; +import { HomeIcon } from "@dashboard/icons/Home"; +import { MarketplaceIcon } from "@dashboard/icons/Marketplace"; +import { OrdersIcon } from "@dashboard/icons/Orders"; +import { ProductsIcon } from "@dashboard/icons/Products"; +import { TranslationsIcon } from "@dashboard/icons/Translations"; import { commonMessages, sectionNames } from "@dashboard/intl"; import { orderDraftListUrl, orderListUrl } from "@dashboard/orders/urls"; import { pageListPath } from "@dashboard/pages/urls"; import { productListUrl } from "@dashboard/products/urls"; import { languageListUrl } from "@dashboard/translations/urls"; -import { - ConfigurationIcon, - CustomersIcon, - HomeIcon, - MarketplaceIcon, - OrdersIcon, - ProductsIcons, - StorefrontIcon, - TranslationsIcon, - VouchersIcon, -} from "@saleor/macaw-ui-next"; +import { Box } from "@saleor/macaw-ui-next"; import isEmpty from "lodash/isEmpty"; import React from "react"; import { useIntl } from "react-intl"; @@ -36,11 +34,6 @@ import { useIntl } from "react-intl"; import { SidebarMenuItem } from "../types"; import { mapToExtensionsItems } from "../utils"; -const iconSettings = { - color: "default2", - size: "medium", -} as const; - export function useMenuStructure() { const extensions = useExtensions(extensionMountPoints.NAVIGATION_SIDEBAR); const intl = useIntl(); @@ -54,7 +47,7 @@ export function useMenuStructure() { }; const getAppSection = (): SidebarMenuItem => ({ - icon: , + icon: renderIcon(), label: intl.formatMessage(sectionNames.apps), permissions: [PermissionEnum.MANAGE_APPS], id: "apps", @@ -64,7 +57,7 @@ export function useMenuStructure() { const menuItems: SidebarMenuItem[] = [ { - icon: , + icon: renderIcon(), label: intl.formatMessage(sectionNames.home), id: "home", url: "/", @@ -98,7 +91,7 @@ export function useMenuStructure() { appExtensionsHeaderItem, ), ], - icon: , + icon: renderIcon(), url: productListUrl(), label: intl.formatMessage(commonMessages.products), permissions: [ @@ -122,7 +115,7 @@ export function useMenuStructure() { appExtensionsHeaderItem, ), ], - icon: , + icon: renderIcon(), label: intl.formatMessage(sectionNames.orders), permissions: [PermissionEnum.MANAGE_ORDERS], id: "orders", @@ -130,20 +123,22 @@ export function useMenuStructure() { type: "itemGroup", }, { - children: !isEmpty(extensions.NAVIGATION_CUSTOMERS) && [ - { - label: intl.formatMessage(sectionNames.customers), - permissions: [PermissionEnum.MANAGE_USERS], - id: "customers", - url: customerListUrl(), - type: "item", - }, - ...mapToExtensionsItems( - extensions.NAVIGATION_CUSTOMERS, - appExtensionsHeaderItem, - ), - ], - icon: , + children: !isEmpty(extensions.NAVIGATION_CUSTOMERS) + ? [ + { + label: intl.formatMessage(sectionNames.customers), + permissions: [PermissionEnum.MANAGE_USERS], + id: "customers", + url: customerListUrl(), + type: "item", + }, + ...mapToExtensionsItems( + extensions.NAVIGATION_CUSTOMERS, + appExtensionsHeaderItem, + ), + ] + : undefined, + icon: renderIcon(), label: intl.formatMessage(sectionNames.customers), permissions: [PermissionEnum.MANAGE_USERS], id: "customers", @@ -163,7 +158,7 @@ export function useMenuStructure() { appExtensionsHeaderItem, ), ], - icon: , + icon: renderIcon(), label: intl.formatMessage(commonMessages.discounts), permissions: [PermissionEnum.MANAGE_DISCOUNTS], url: saleListUrl(), @@ -171,13 +166,15 @@ export function useMenuStructure() { type: "itemGroup", }, { - children: !isEmpty(extensions.NAVIGATION_PAGES) && [ - ...mapToExtensionsItems( - extensions.NAVIGATION_PAGES, - appExtensionsHeaderItem, - ), - ], - icon: , + children: !isEmpty(extensions.NAVIGATION_PAGES) + ? [ + ...mapToExtensionsItems( + extensions.NAVIGATION_PAGES, + appExtensionsHeaderItem, + ), + ] + : undefined, + icon: renderIcon(), label: intl.formatMessage(sectionNames.content), permissions: [PermissionEnum.MANAGE_PAGES], id: "pages", @@ -185,13 +182,15 @@ export function useMenuStructure() { type: !isEmpty(extensions.NAVIGATION_PAGES) ? "itemGroup" : "item", }, { - children: !isEmpty(extensions.NAVIGATION_TRANSLATIONS) && [ - ...mapToExtensionsItems( - extensions.NAVIGATION_TRANSLATIONS, - appExtensionsHeaderItem, - ), - ], - icon: , + children: !isEmpty(extensions.NAVIGATION_TRANSLATIONS) + ? [ + ...mapToExtensionsItems( + extensions.NAVIGATION_TRANSLATIONS, + appExtensionsHeaderItem, + ), + ] + : undefined, + icon: renderIcon(), label: intl.formatMessage(sectionNames.translations), permissions: [PermissionEnum.MANAGE_TRANSLATIONS], id: "translations", @@ -200,7 +199,7 @@ export function useMenuStructure() { }, getAppSection(), { - icon: , + icon: renderIcon(), label: intl.formatMessage(sectionNames.configuration), permissions: getConfigMenuItemsPermissions(intl), id: "configure", @@ -239,3 +238,11 @@ export function useMenuStructure() { [], ); } + +function renderIcon(icon: React.ReactNode) { + return ( + + {icon} + + ); +} diff --git a/src/icons/AccountCircle.tsx b/src/icons/AccountCircle.tsx deleted file mode 100644 index 1994d5ca49d..00000000000 --- a/src/icons/AccountCircle.tsx +++ /dev/null @@ -1,21 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const AccountCircle = createSvgIcon( - <> - - - - - - , - "AccountCircle", -); - -export default AccountCircle; diff --git a/src/icons/Ballot.tsx b/src/icons/Ballot.tsx deleted file mode 100644 index 816b92060de..00000000000 --- a/src/icons/Ballot.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const Ballot = createSvgIcon( - <> - - - - - - - - - , - "Ballot", -); - -export default Ballot; diff --git a/src/icons/BoldIcon.tsx b/src/icons/BoldIcon.tsx deleted file mode 100644 index a85bb8e7bcd..00000000000 --- a/src/icons/BoldIcon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const BoldIcon = createSvgIcon( - <> - - , - "BoldIcon", -); - -export default BoldIcon; diff --git a/src/icons/Bot.tsx b/src/icons/Bot.tsx deleted file mode 100644 index cbd9b13b21b..00000000000 --- a/src/icons/Bot.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const Bot = createSvgIcon( - , - "Bot", -); - -export default Bot; diff --git a/src/icons/Calendar.tsx b/src/icons/Calendar.tsx deleted file mode 100644 index 184ed1a47b7..00000000000 --- a/src/icons/Calendar.tsx +++ /dev/null @@ -1,28 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -export const Calendar = createSvgIcon( - <> - - - - - - - - , - "Calendar", -); -export default Calendar; diff --git a/src/icons/Checkbox.tsx b/src/icons/Checkbox.tsx deleted file mode 100644 index 1b41e035115..00000000000 --- a/src/icons/Checkbox.tsx +++ /dev/null @@ -1,18 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const Checkbox = createSvgIcon( - <> - - , - "Checkbox", -); - -export default Checkbox; diff --git a/src/icons/CheckboxChecked.tsx b/src/icons/CheckboxChecked.tsx deleted file mode 100644 index 177961d4ed6..00000000000 --- a/src/icons/CheckboxChecked.tsx +++ /dev/null @@ -1,17 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const CheckboxChecked = createSvgIcon( - <> - - - , - "CheckboxChecked", -); - -export default CheckboxChecked; diff --git a/src/icons/CheckboxIndeterminate.tsx b/src/icons/CheckboxIndeterminate.tsx deleted file mode 100644 index c76da201c2d..00000000000 --- a/src/icons/CheckboxIndeterminate.tsx +++ /dev/null @@ -1,19 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const CheckboxIndeterminate = createSvgIcon( - <> - - - , - "CheckboxIndeterminate", -); - -export default CheckboxIndeterminate; diff --git a/src/icons/CheckboxSemiChecked.tsx b/src/icons/CheckboxSemiChecked.tsx deleted file mode 100644 index 3ca3f61544c..00000000000 --- a/src/icons/CheckboxSemiChecked.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const CheckboxSemiChecked = createSvgIcon( - - - - , - "CheckboxSemiChecked", -); - -export default CheckboxSemiChecked; diff --git a/src/icons/ChevronDown.tsx b/src/icons/ChevronDown.tsx deleted file mode 100644 index a6739f1d953..00000000000 --- a/src/icons/ChevronDown.tsx +++ /dev/null @@ -1,6 +0,0 @@ -import { ChevronIcon } from "@saleor/macaw-ui"; -import React from "react"; - -const ChevronDown: React.FC = () => ; - -export default ChevronDown; diff --git a/src/icons/Configuration.tsx b/src/icons/Configuration.tsx new file mode 100644 index 00000000000..fdbdf7b9320 --- /dev/null +++ b/src/icons/Configuration.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +export const ConfigurationIcon = () => ( + + + +); diff --git a/src/icons/Contents.tsx b/src/icons/Contents.tsx new file mode 100644 index 00000000000..a8ccdfeb500 --- /dev/null +++ b/src/icons/Contents.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +export const ContentsIcon = () => ( + + + +); diff --git a/src/icons/Customers.tsx b/src/icons/Customers.tsx new file mode 100644 index 00000000000..4a888108715 --- /dev/null +++ b/src/icons/Customers.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +export const CustomersIcon = () => ( + + + +); diff --git a/src/icons/Discounts.tsx b/src/icons/Discounts.tsx new file mode 100644 index 00000000000..130f821f77d --- /dev/null +++ b/src/icons/Discounts.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +export const DiscountsIcon = () => ( + + + +); diff --git a/src/icons/Folder.tsx b/src/icons/Folder.tsx deleted file mode 100644 index 696b78b5e49..00000000000 --- a/src/icons/Folder.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const Folder = createSvgIcon( - <> - - - - , - "Folder", -); - -export default Folder; diff --git a/src/icons/HeaderOne.tsx b/src/icons/HeaderOne.tsx deleted file mode 100644 index 0af6e9053da..00000000000 --- a/src/icons/HeaderOne.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const HeaderOne = createSvgIcon( - <> - - - , - "HeaderOne", -); - -export default HeaderOne; diff --git a/src/icons/HeaderThree.tsx b/src/icons/HeaderThree.tsx deleted file mode 100644 index 0cb0e9ab5d6..00000000000 --- a/src/icons/HeaderThree.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const HeaderThree = createSvgIcon( - <> - - - , - "HeaderThree", -); - -export default HeaderThree; diff --git a/src/icons/HeaderTwo.tsx b/src/icons/HeaderTwo.tsx deleted file mode 100644 index 34848285990..00000000000 --- a/src/icons/HeaderTwo.tsx +++ /dev/null @@ -1,12 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const HeaderTwo = createSvgIcon( - <> - - - , - "HeaderTwo", -); - -export default HeaderTwo; diff --git a/src/icons/Home.tsx b/src/icons/Home.tsx index af0f9f9cc90..f1bc3b1fcb3 100644 --- a/src/icons/Home.tsx +++ b/src/icons/Home.tsx @@ -1,13 +1,16 @@ -import { createSvgIcon } from "@material-ui/core/utils"; import React from "react"; -const Home = createSvgIcon( - <> - - - - , - "Home", +export const HomeIcon = () => ( + + + ); - -export default Home; diff --git a/src/icons/Image.tsx b/src/icons/Image.tsx deleted file mode 100644 index 3e3c1136079..00000000000 --- a/src/icons/Image.tsx +++ /dev/null @@ -1,27 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const Image = createSvgIcon( - <> - - - - - - - - , - "Image", -); - -export default Image; diff --git a/src/icons/ItalicIcon.tsx b/src/icons/ItalicIcon.tsx deleted file mode 100644 index 467d64c28c2..00000000000 --- a/src/icons/ItalicIcon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const ItalicIcon = createSvgIcon( - <> - - , - "ItalicIcon", -); - -export default ItalicIcon; diff --git a/src/icons/LinkIcon.tsx b/src/icons/LinkIcon.tsx deleted file mode 100644 index 176b51d57dd..00000000000 --- a/src/icons/LinkIcon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const LinkIcon = createSvgIcon( - <> - - , - "LinkIcon", -); - -export default LinkIcon; diff --git a/src/icons/LocalShipping.tsx b/src/icons/LocalShipping.tsx deleted file mode 100644 index c96add1466f..00000000000 --- a/src/icons/LocalShipping.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const LocalShipping = createSvgIcon( - <> - - - - , - "LocalShipping", -); - -export default LocalShipping; diff --git a/src/icons/Marketplace.tsx b/src/icons/Marketplace.tsx new file mode 100644 index 00000000000..610c684c5f9 --- /dev/null +++ b/src/icons/Marketplace.tsx @@ -0,0 +1,28 @@ +import React from "react"; + +export const MarketplaceIcon = () => ( + + + + + + + + + + + +); diff --git a/src/icons/Monetization.tsx b/src/icons/Monetization.tsx deleted file mode 100644 index 9914a886458..00000000000 --- a/src/icons/Monetization.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const Monetization = createSvgIcon( - <> - - - - - - , - "Monetization", -); - -export default Monetization; diff --git a/src/icons/Moon.tsx b/src/icons/Moon.tsx deleted file mode 100644 index ce0c72d35ec..00000000000 --- a/src/icons/Moon.tsx +++ /dev/null @@ -1,25 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const Moon = createSvgIcon( - <> - - - - , - "Moon", -); - -export default Moon; diff --git a/src/icons/NoPhoto.tsx b/src/icons/NoPhoto.tsx deleted file mode 100644 index c37816d68d8..00000000000 --- a/src/icons/NoPhoto.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const NoPhoto = createSvgIcon( - - - , - "NoPhoto", -); - -export default NoPhoto; diff --git a/src/icons/OrderedListIcon.tsx b/src/icons/OrderedListIcon.tsx deleted file mode 100644 index c88f7ec738d..00000000000 --- a/src/icons/OrderedListIcon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const OrderedListIcon = createSvgIcon( - <> - - , - "OrderedListIcon", -); - -export default OrderedListIcon; diff --git a/src/icons/Orders.tsx b/src/icons/Orders.tsx index cd9e9a991c3..08f2cb1edc1 100644 --- a/src/icons/Orders.tsx +++ b/src/icons/Orders.tsx @@ -1,16 +1,16 @@ -import { createSvgIcon } from "@material-ui/core/utils"; import React from "react"; -const Orders = createSvgIcon( - <> +export const OrdersIcon = () => ( + - , - "Orders", + ); - -export default Orders; diff --git a/src/icons/Pages.tsx b/src/icons/Pages.tsx deleted file mode 100644 index a9f2f0724bf..00000000000 --- a/src/icons/Pages.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const Pages = createSvgIcon( - <> - - , - "Pages", -); - -export default Pages; diff --git a/src/icons/Products.tsx b/src/icons/Products.tsx new file mode 100644 index 00000000000..05b3ba11ade --- /dev/null +++ b/src/icons/Products.tsx @@ -0,0 +1,21 @@ +import React from "react"; + +export const ProductsIcon = () => ( + + + + + + + + + + + +); diff --git a/src/icons/QuotationIcon.tsx b/src/icons/QuotationIcon.tsx deleted file mode 100644 index ea238a2a2d0..00000000000 --- a/src/icons/QuotationIcon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const QuotationIcon = createSvgIcon( - <> - - , - "QuotationIcon", -); - -export default QuotationIcon; diff --git a/src/icons/Sales.tsx b/src/icons/Sales.tsx deleted file mode 100644 index 9e860b70b22..00000000000 --- a/src/icons/Sales.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const Sales = createSvgIcon( - <> - - , - "Sales", -); - -export default Sales; diff --git a/src/icons/Shop.tsx b/src/icons/Shop.tsx deleted file mode 100644 index 90f3feea38b..00000000000 --- a/src/icons/Shop.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const Shop = createSvgIcon( - <> - - - - - - , - "Shop", -); - -export default Shop; diff --git a/src/icons/StoreMall.tsx b/src/icons/StoreMall.tsx deleted file mode 100644 index ba85bd44aa0..00000000000 --- a/src/icons/StoreMall.tsx +++ /dev/null @@ -1,13 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const StoreMall = createSvgIcon( - <> - - - - , - "StoreMall", -); - -export default StoreMall; diff --git a/src/icons/Sun.tsx b/src/icons/Sun.tsx deleted file mode 100644 index fc6431a262e..00000000000 --- a/src/icons/Sun.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const Sun = createSvgIcon( - <> - - , - "Sun", -); - -export default Sun; diff --git a/src/icons/Translations.tsx b/src/icons/Translations.tsx new file mode 100644 index 00000000000..0d6d05d8b8a --- /dev/null +++ b/src/icons/Translations.tsx @@ -0,0 +1,16 @@ +import React from "react"; + +export const TranslationsIcon = () => ( + + + +); diff --git a/src/icons/Truck.tsx b/src/icons/Truck.tsx deleted file mode 100644 index 9ccc2757da1..00000000000 --- a/src/icons/Truck.tsx +++ /dev/null @@ -1,14 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const Truck = createSvgIcon( - <> - - , - "Truck", -); - -export default Truck; diff --git a/src/icons/UnorderedListIcon.tsx b/src/icons/UnorderedListIcon.tsx deleted file mode 100644 index aaf3e57fc60..00000000000 --- a/src/icons/UnorderedListIcon.tsx +++ /dev/null @@ -1,11 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const UnorderedListIcon = createSvgIcon( - <> - - , - "UnorderedListIcon", -); - -export default UnorderedListIcon; diff --git a/src/icons/Unstyled.tsx b/src/icons/Unstyled.tsx deleted file mode 100644 index bbb68974082..00000000000 --- a/src/icons/Unstyled.tsx +++ /dev/null @@ -1,15 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const Unstyled = createSvgIcon( - <> - - , - "Unstyled", -); - -export default Unstyled; diff --git a/src/icons/Webhooks.tsx b/src/icons/Webhooks.tsx deleted file mode 100644 index 4b221c4bf29..00000000000 --- a/src/icons/Webhooks.tsx +++ /dev/null @@ -1,16 +0,0 @@ -import { createSvgIcon } from "@material-ui/core/utils"; -import React from "react"; - -const Webhooks = createSvgIcon( - <> - - , - "Webhooks", -); - -export default Webhooks;