Replace navigation icons with new one, remove not used icons (#4735)

* Replace icons * Remove not used icon * Changeset add
saleor · Mar 19, 2024 · b048a50 · b048a50
1 parent a9745e4
commit b048a50
Show file tree

Hide file tree

Showing 43 changed files with 216 additions and 551 deletions.
diff --git a/.changeset/ten-students-sneeze.md 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
@@ -1,4 +1,3 @@
-// @ts-strict-ignore
 import {
   extensionMountPoints,
   useExtensions,
@@ -13,34 +12,28 @@ 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";
 
 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: <MarketplaceIcon {...iconSettings} />,
+    icon: renderIcon(<MarketplaceIcon />),
     label: intl.formatMessage(sectionNames.apps),
     permissions: [PermissionEnum.MANAGE_APPS],
     id: "apps",
@@ -64,7 +57,7 @@ export function useMenuStructure() {
 
   const menuItems: SidebarMenuItem[] = [
     {
-      icon: <HomeIcon {...iconSettings} />,
+      icon: renderIcon(<HomeIcon />),
       label: intl.formatMessage(sectionNames.home),
       id: "home",
       url: "/",
@@ -98,7 +91,7 @@ export function useMenuStructure() {
           appExtensionsHeaderItem,
         ),
       ],
-      icon: <ProductsIcons {...iconSettings} />,
+      icon: renderIcon(<ProductsIcon />),
       url: productListUrl(),
       label: intl.formatMessage(commonMessages.products),
       permissions: [
@@ -122,28 +115,30 @@ export function useMenuStructure() {
           appExtensionsHeaderItem,
         ),
       ],
-      icon: <OrdersIcon {...iconSettings} />,
+      icon: renderIcon(<OrdersIcon />),
       label: intl.formatMessage(sectionNames.orders),
       permissions: [PermissionEnum.MANAGE_ORDERS],
       id: "orders",
       url: orderListUrl(),
       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: <CustomersIcon {...iconSettings} />,
+      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(<CustomersIcon />),
       label: intl.formatMessage(sectionNames.customers),
       permissions: [PermissionEnum.MANAGE_USERS],
       id: "customers",
@@ -163,35 +158,39 @@ export function useMenuStructure() {
           appExtensionsHeaderItem,
         ),
       ],
-      icon: <VouchersIcon {...iconSettings} />,
+      icon: renderIcon(<DiscountsIcon />),
       label: intl.formatMessage(commonMessages.discounts),
       permissions: [PermissionEnum.MANAGE_DISCOUNTS],
       url: saleListUrl(),
       id: "discounts",
       type: "itemGroup",
     },
     {
-      children: !isEmpty(extensions.NAVIGATION_PAGES) && [
-        ...mapToExtensionsItems(
-          extensions.NAVIGATION_PAGES,
-          appExtensionsHeaderItem,
-        ),
-      ],
-      icon: <StorefrontIcon {...iconSettings} />,
+      children: !isEmpty(extensions.NAVIGATION_PAGES)
+        ? [
+            ...mapToExtensionsItems(
+              extensions.NAVIGATION_PAGES,
+              appExtensionsHeaderItem,
+            ),
+          ]
+        : undefined,
+      icon: renderIcon(<ContentsIcon />),
       label: intl.formatMessage(sectionNames.content),
       permissions: [PermissionEnum.MANAGE_PAGES],
       id: "pages",
       url: pageListPath,
       type: !isEmpty(extensions.NAVIGATION_PAGES) ? "itemGroup" : "item",
     },
     {
-      children: !isEmpty(extensions.NAVIGATION_TRANSLATIONS) && [
-        ...mapToExtensionsItems(
-          extensions.NAVIGATION_TRANSLATIONS,
-          appExtensionsHeaderItem,
-        ),
-      ],
-      icon: <TranslationsIcon {...iconSettings} />,
+      children: !isEmpty(extensions.NAVIGATION_TRANSLATIONS)
+        ? [
+            ...mapToExtensionsItems(
+              extensions.NAVIGATION_TRANSLATIONS,
+              appExtensionsHeaderItem,
+            ),
+          ]
+        : undefined,
+      icon: renderIcon(<TranslationsIcon />),
       label: intl.formatMessage(sectionNames.translations),
       permissions: [PermissionEnum.MANAGE_TRANSLATIONS],
       id: "translations",
@@ -200,7 +199,7 @@ export function useMenuStructure() {
     },
     getAppSection(),
     {
-      icon: <ConfigurationIcon {...iconSettings} />,
+      icon: renderIcon(<ConfigurationIcon />),
       label: intl.formatMessage(sectionNames.configuration),
       permissions: getConfigMenuItemsPermissions(intl),
       id: "configure",
@@ -239,3 +238,11 @@ export function useMenuStructure() {
     [],
   );
 }
+
+function renderIcon(icon: React.ReactNode) {
+  return (
+    <Box color="default2" __width={20} __height={20}>
+      {icon}
+    </Box>
+  );
+}
diff --git a/src/icons/AccountCircle.tsx b/src/icons/AccountCircle.tsx
diff --git a/src/icons/Ballot.tsx b/src/icons/Ballot.tsx
diff --git a/src/icons/BoldIcon.tsx b/src/icons/BoldIcon.tsx
diff --git a/src/icons/Bot.tsx b/src/icons/Bot.tsx
diff --git a/src/icons/Calendar.tsx b/src/icons/Calendar.tsx
diff --git a/src/icons/Checkbox.tsx b/src/icons/Checkbox.tsx
diff --git a/src/icons/CheckboxChecked.tsx b/src/icons/CheckboxChecked.tsx
diff --git a/src/icons/CheckboxIndeterminate.tsx b/src/icons/CheckboxIndeterminate.tsx
diff --git a/src/icons/CheckboxSemiChecked.tsx b/src/icons/CheckboxSemiChecked.tsx
diff --git a/src/icons/ChevronDown.tsx b/src/icons/ChevronDown.tsx
diff --git a/src/icons/Configuration.tsx b/src/icons/Configuration.tsx
@@ -0,0 +1,16 @@
+import React from "react";
+
+export const ConfigurationIcon = () => (
+  <svg
+    width="20"
+    height="20"
+    fill="none"
+    xmlns="http://www.w3.org/2000/svg"
+    data-macaw-ui-candidate
+  >
+    <path
+      d="M11.562 18.333H8.437a.779.779 0 0 1-.541-.208.83.83 0 0 1-.271-.52l-.25-1.938c-.18-.07-.351-.153-.511-.25a6.692 6.692 0 0 1-.468-.313l-1.813.75a.933.933 0 0 1-.583.021.774.774 0 0 1-.458-.354L2 12.833a.783.783 0 0 1-.104-.583.8.8 0 0 1 .312-.5l1.563-1.188a1.992 1.992 0 0 1-.021-.281v-.562c0-.09.007-.184.02-.282L2.209 8.25a.8.8 0 0 1-.312-.5A.783.783 0 0 1 2 7.167l1.542-2.688a.656.656 0 0 1 .447-.365c.201-.049.4-.038.594.032l1.813.75c.152-.111.312-.215.479-.313.167-.097.333-.18.5-.25l.25-1.937a.83.83 0 0 1 .27-.521.779.779 0 0 1 .542-.208h3.125c.209 0 .39.07.542.208a.83.83 0 0 1 .27.52l.25 1.938c.181.07.352.153.512.25.16.098.316.202.468.313l1.813-.75A.933.933 0 0 1 16 4.125a.774.774 0 0 1 .458.354L18 7.167c.111.18.146.375.104.583a.8.8 0 0 1-.313.5L16.23 9.437c.014.098.02.192.02.282v.562c0 .09-.013.184-.04.281l1.562 1.188a.8.8 0 0 1 .312.5.782.782 0 0 1-.104.583L16.437 15.5a.82.82 0 0 1-.469.365.908.908 0 0 1-.593-.01l-1.771-.75a5.698 5.698 0 0 1-.48.312c-.166.097-.333.18-.5.25l-.25 1.937a.83.83 0 0 1-.27.521.778.778 0 0 1-.542.208Zm-1.52-5.416a2.81 2.81 0 0 0 2.062-.854A2.81 2.81 0 0 0 12.958 10a2.81 2.81 0 0 0-.854-2.063 2.81 2.81 0 0 0-2.063-.854c-.819 0-1.51.285-2.073.854A2.824 2.824 0 0 0 7.125 10c0 .806.281 1.493.843 2.063.562.569 1.254.854 2.073.854Zm0-1.667c-.348 0-.643-.122-.886-.365A1.202 1.202 0 0 1 8.792 10c0-.347.121-.643.365-.886.243-.243.538-.365.884-.364.348 0 .643.122.886.365.244.243.365.538.364.885 0 .347-.121.643-.364.886a1.202 1.202 0 0 1-.886.364Zm-.875 5.417h1.645l.292-2.209c.43-.11.83-.274 1.198-.49a4.98 4.98 0 0 0 1.01-.78l2.063.854.812-1.417-1.791-1.354c.07-.195.118-.4.145-.614a5.116 5.116 0 0 0 0-1.313 2.949 2.949 0 0 0-.145-.615l1.791-1.354-.812-1.417-2.063.875a4.623 4.623 0 0 0-1.01-.801 4.692 4.692 0 0 0-1.198-.49l-.27-2.209H9.186l-.291 2.209c-.43.11-.83.274-1.198.49a5.033 5.033 0 0 0-1.01.78l-2.063-.854-.813 1.417 1.792 1.333c-.07.209-.118.417-.146.625a5.05 5.05 0 0 0 0 1.313c.028.208.077.416.146.625l-1.792 1.354.813 1.417 2.062-.875c.306.32.643.587 1.011.802a4.65 4.65 0 0 0 1.198.49l.27 2.208Z"
+      fill="currentColor"
+    />
+  </svg>
+);