From 6743b6a2a555d5c00832ce65a27cf5931b085008 Mon Sep 17 00:00:00 2001
From: Akmal Isomadinov <isomadinovakmal1997@gmail.com>
Date: Wed, 25 Oct 2023 18:01:39 +0500
Subject: [PATCH] Web:Client:Article: Fixed catalog icons

---
 .../components/Article/Body/AccountsItem.js   |  8 +-
 .../components/Article/Body/Items.helper.ts   | 74 +++++++++++++++++++
 .../src/components/Article/Body/Items.js      | 63 +++-------------
 packages/common/constants/index.js            |  1 +
 .../icons/20/catalog.accounts.react.svg       |  3 +
 .../images/icons/20/catalog.archive.react.svg |  3 +
 .../icons/20/catalog.favorites.react.svg      |  3 +
 .../images/icons/20/catalog.folder.react.svg  |  3 +
 .../icons/20/catalog.portfolio.react.svg      |  3 +
 .../images/icons/20/catalog.private.react.svg | 10 +++
 .../images/icons/20/catalog.recent.react.svg  | 10 +++
 .../images/icons/20/catalog.rooms.react.svg   |  3 +
 .../images/icons/20/catalog.shared.react.svg  |  3 +
 .../images/icons/20/catalog.trash.react.svg   |  3 +
 public/images/icons/20/catalog.user.react.svg | 10 +++
 15 files changed, 146 insertions(+), 54 deletions(-)
 create mode 100644 packages/client/src/components/Article/Body/Items.helper.ts
 create mode 100644 public/images/icons/20/catalog.accounts.react.svg
 create mode 100644 public/images/icons/20/catalog.archive.react.svg
 create mode 100644 public/images/icons/20/catalog.favorites.react.svg
 create mode 100644 public/images/icons/20/catalog.folder.react.svg
 create mode 100644 public/images/icons/20/catalog.portfolio.react.svg
 create mode 100644 public/images/icons/20/catalog.private.react.svg
 create mode 100644 public/images/icons/20/catalog.recent.react.svg
 create mode 100644 public/images/icons/20/catalog.rooms.react.svg
 create mode 100644 public/images/icons/20/catalog.shared.react.svg
 create mode 100644 public/images/icons/20/catalog.trash.react.svg
 create mode 100644 public/images/icons/20/catalog.user.react.svg

diff --git a/packages/client/src/components/Article/Body/AccountsItem.js b/packages/client/src/components/Article/Body/AccountsItem.js
index cd11b04202..334884a7f7 100644
--- a/packages/client/src/components/Article/Body/AccountsItem.js
+++ b/packages/client/src/components/Article/Body/AccountsItem.js
@@ -2,20 +2,24 @@
 import { inject, observer } from "mobx-react";
 import { withTranslation } from "react-i18next";
 
+import { FolderType } from "@docspace/common/constants";
+
 import CatalogItem from "@docspace/components/catalog-item";
 
-import CatalogAccountsReactSvgUrl from "PUBLIC_DIR/images/catalog.accounts.react.svg?url";
+import { getCatalogIconByFolderType } from "./Items.helper";
 
 const PureAccountsItem = ({ showText, isActive, onClick, t }) => {
   const onClickAction = React.useCallback(() => {
     onClick && onClick("accounts");
   }, [onClick]);
 
+  const icon = getCatalogIconByFolderType(FolderType.Account);
+
   return (
     <CatalogItem
       key="accounts"
       text={t("Accounts")}
-      icon={CatalogAccountsReactSvgUrl}
+      icon={icon}
       showText={showText}
       onClick={onClickAction}
       isActive={isActive}
diff --git a/packages/client/src/components/Article/Body/Items.helper.ts b/packages/client/src/components/Article/Body/Items.helper.ts
new file mode 100644
index 0000000000..94457c2a67
--- /dev/null
+++ b/packages/client/src/components/Article/Body/Items.helper.ts
@@ -0,0 +1,74 @@
+import { FolderType } from "@docspace/common/constants";
+
+import { isMobile, isTablet } from "@docspace/components/utils/device";
+
+import CatalogFolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";
+import CatalogUserReactSvgUrl from "PUBLIC_DIR/images/catalog.user.react.svg?url";
+import CatalogRoomsReactSvgUrl from "PUBLIC_DIR/images/catalog.rooms.react.svg?url";
+import CatalogArchiveReactSvgUrl from "PUBLIC_DIR/images/catalog.archive.react.svg?url";
+import CatalogSharedReactSvgUrl from "PUBLIC_DIR/images/catalog.shared.react.svg?url";
+import CatalogPortfolioReactSvgUrl from "PUBLIC_DIR/images/catalog.portfolio.react.svg?url";
+import CatalogFavoritesReactSvgUrl from "PUBLIC_DIR/images/catalog.favorites.react.svg?url";
+import CatalogRecentReactSvgUrl from "PUBLIC_DIR/images/catalog.recent.react.svg?url";
+import CatalogPrivateReactSvgUrl from "PUBLIC_DIR/images/catalog.private.react.svg?url";
+import CatalogTrashReactSvgUrl from "PUBLIC_DIR/images/catalog.trash.react.svg?url";
+import CatalogAccountsReactSvgUrl from "PUBLIC_DIR/images/catalog.accounts.react.svg?url";
+
+import CatalogFolder20ReactSvgUrl from "PUBLIC_DIR/images/icons/20/catalog.folder.react.svg?url";
+import CatalogUser20ReactSvgUrl from "PUBLIC_DIR/images/icons/20/catalog.user.react.svg?url";
+import CatalogRooms20ReactSvgUrl from "PUBLIC_DIR/images/icons/20/catalog.rooms.react.svg?url";
+import CatalogArchive20ReactSvgUrl from "PUBLIC_DIR/images/icons/20/catalog.archive.react.svg?url";
+import CatalogShared20ReactSvgUrl from "PUBLIC_DIR/images/icons/20/catalog.shared.react.svg?url";
+import CatalogPortfolio20ReactSvgUrl from "PUBLIC_DIR/images/icons/20/catalog.portfolio.react.svg?url";
+import CatalogFavorites20ReactSvgUrl from "PUBLIC_DIR/images/icons/20/catalog.favorites.react.svg?url";
+import CatalogRecent20ReactSvgUrl from "PUBLIC_DIR/images/icons/20/catalog.recent.react.svg?url";
+import CatalogPrivate20ReactSvgUrl from "PUBLIC_DIR/images/icons/20/catalog.private.react.svg?url";
+import CatalogTrash20ReactSvgUrl from "PUBLIC_DIR/images/icons/20/catalog.trash.react.svg?url";
+import CatalogAccounts20ReactSvgUrl from "PUBLIC_DIR/images/icons/20/catalog.accounts.react.svg?url";
+
+type FolderUnionType = (typeof FolderType)[keyof typeof FolderType];
+type SizeType = 16 | 20;
+
+const defaultIcon: Record<SizeType, string> = {
+  16: CatalogFolderReactSvgUrl,
+  20: CatalogFolder20ReactSvgUrl,
+};
+
+const icons: Record<SizeType, Partial<Record<FolderUnionType, string>>> = {
+  16: {
+    [FolderType.USER]: CatalogUserReactSvgUrl,
+    [FolderType.Rooms]: CatalogRoomsReactSvgUrl,
+    [FolderType.Archive]: CatalogArchiveReactSvgUrl,
+    [FolderType.SHARE]: CatalogSharedReactSvgUrl,
+    [FolderType.COMMON]: CatalogPortfolioReactSvgUrl,
+    [FolderType.Favorites]: CatalogFavoritesReactSvgUrl,
+    [FolderType.Recent]: CatalogRecentReactSvgUrl,
+    [FolderType.Privacy]: CatalogPrivateReactSvgUrl,
+    [FolderType.TRASH]: CatalogTrashReactSvgUrl,
+    [FolderType.Account]: CatalogAccountsReactSvgUrl,
+  },
+  20: {
+    [FolderType.USER]: CatalogUser20ReactSvgUrl,
+    [FolderType.Rooms]: CatalogRooms20ReactSvgUrl,
+    [FolderType.Archive]: CatalogArchive20ReactSvgUrl,
+    [FolderType.SHARE]: CatalogShared20ReactSvgUrl,
+    [FolderType.COMMON]: CatalogPortfolio20ReactSvgUrl,
+    [FolderType.Favorites]: CatalogFavorites20ReactSvgUrl,
+    [FolderType.Recent]: CatalogRecent20ReactSvgUrl,
+    [FolderType.Privacy]: CatalogPrivate20ReactSvgUrl,
+    [FolderType.TRASH]: CatalogTrash20ReactSvgUrl,
+    [FolderType.Account]: CatalogAccounts20ReactSvgUrl,
+  },
+};
+
+const MobileIconSize = 20;
+const DesktopIconSize = 16;
+
+export const getCatalogIconByFolderType = (
+  folderType: FolderUnionType
+): string => {
+  const size: SizeType =
+    isMobile() || isTablet() ? MobileIconSize : DesktopIconSize;
+
+  return icons[size]?.[folderType] ?? defaultIcon[size];
+};
diff --git a/packages/client/src/components/Article/Body/Items.js b/packages/client/src/components/Article/Body/Items.js
index 1ab3adc4e6..40c05f28bf 100644
--- a/packages/client/src/components/Article/Body/Items.js
+++ b/packages/client/src/components/Article/Body/Items.js
@@ -1,31 +1,24 @@
-import CatalogFolderReactSvgUrl from "PUBLIC_DIR/images/catalog.folder.react.svg?url";
-import ClearTrashReactSvgUrl from "PUBLIC_DIR/images/clear.trash.react.svg?url";
-import CatalogUserReactSvgUrl from "PUBLIC_DIR/images/catalog.user.react.svg?url";
-import CatalogRoomsReactSvgUrl from "PUBLIC_DIR/images/catalog.rooms.react.svg?url";
-import CatalogArchiveReactSvgUrl from "PUBLIC_DIR/images/catalog.archive.react.svg?url";
-import CatalogSharedReactSvgUrl from "PUBLIC_DIR/images/catalog.shared.react.svg?url";
-import CatalogPortfolioReactSvgUrl from "PUBLIC_DIR/images/catalog.portfolio.react.svg?url";
-import CatalogFavoritesReactSvgUrl from "PUBLIC_DIR/images/catalog.favorites.react.svg?url";
-import CatalogRecentReactSvgUrl from "PUBLIC_DIR/images/catalog.recent.react.svg?url";
-import CatalogPrivateReactSvgUrl from "PUBLIC_DIR/images/catalog.private.react.svg?url";
-import CatalogTrashReactSvgUrl from "PUBLIC_DIR/images/catalog.trash.react.svg?url";
-import React, { useState } from "react";
+import PropTypes from "prop-types";
 import styled from "styled-components";
-import PropTypes from "prop-types";
+import React, { useState } from "react";
 import { inject, observer } from "mobx-react";
-import CatalogItem from "@docspace/components/catalog-item";
+import { withTranslation } from "react-i18next";
+
 import {
   FolderType,
   ShareAccessRights,
   FolderNames,
   DeviceType,
 } from "@docspace/common/constants";
-import { withTranslation } from "react-i18next";
+
+import CatalogItem from "@docspace/components/catalog-item";
 import DragAndDrop from "@docspace/components/drag-and-drop";
 
-import SettingsItem from "./SettingsItem";
-import AccountsItem from "./AccountsItem";
 import BonusItem from "./BonusItem";
+import AccountsItem from "./AccountsItem";
+import { getCatalogIconByFolderType } from "./Items.helper";
+
+import ClearTrashReactSvgUrl from "PUBLIC_DIR/images/clear.trash.react.svg?url";
 
 const StyledDragAndDrop = styled(DragAndDrop)`
   display: contents;
@@ -204,41 +197,7 @@ const Items = ({
   );
 
   const getFolderIcon = React.useCallback((item) => {
-    let iconUrl = CatalogFolderReactSvgUrl;
-
-    switch (item.rootFolderType) {
-      case FolderType.USER:
-        iconUrl = CatalogUserReactSvgUrl;
-        break;
-      case FolderType.Rooms:
-        iconUrl = CatalogRoomsReactSvgUrl;
-        break;
-      case FolderType.Archive:
-        iconUrl = CatalogArchiveReactSvgUrl;
-        break;
-      case FolderType.SHARE:
-        iconUrl = CatalogSharedReactSvgUrl;
-        break;
-      case FolderType.COMMON:
-        iconUrl = CatalogPortfolioReactSvgUrl;
-        break;
-      case FolderType.Favorites:
-        iconUrl = CatalogFavoritesReactSvgUrl;
-        break;
-      case FolderType.Recent:
-        iconUrl = CatalogRecentReactSvgUrl;
-        break;
-      case FolderType.Privacy:
-        iconUrl = CatalogPrivateReactSvgUrl;
-        break;
-      case FolderType.TRASH:
-        iconUrl = CatalogTrashReactSvgUrl;
-        break;
-      default:
-        break;
-    }
-
-    return iconUrl;
+    return getCatalogIconByFolderType(item.rootFolderType);
   }, []);
 
   const showDragItems = React.useCallback(
diff --git a/packages/common/constants/index.js b/packages/common/constants/index.js
index 420d572e21..93c8c586de 100644
--- a/packages/common/constants/index.js
+++ b/packages/common/constants/index.js
@@ -215,6 +215,7 @@ export const FolderType = Object.freeze({
   Privacy: 13,
   Rooms: 14,
   Archive: 20,
+  Account: 30,
 });
 
 // extends FolderType keys
diff --git a/public/images/icons/20/catalog.accounts.react.svg b/public/images/icons/20/catalog.accounts.react.svg
new file mode 100644
index 0000000000..f4a12bd169
--- /dev/null
+++ b/public/images/icons/20/catalog.accounts.react.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M7.01357 4.01859C6.98225 2.33891 8.3539 1 10.0011 1C11.6483 1 13.0201 2.33904 12.9885 4.01895C12.9622 5.41088 12.8797 6.69897 12.5276 7.65231C12.344 8.14961 12.0618 8.62964 11.6099 8.98171C11.1449 9.34397 10.5912 9.5 10.0001 9.5C9.40889 9.5 8.85518 9.34389 8.39022 8.98141C7.93837 8.62916 7.65645 8.14895 7.47308 7.65163C7.12154 6.69827 7.03953 5.41019 7.01357 4.01859ZM10.0011 3C9.44014 3 9.00338 3.45322 9.01323 3.9813C9.03978 5.4049 9.13097 6.36685 9.34957 6.95971C9.45127 7.23551 9.55365 7.35246 9.61988 7.4041C9.67299 7.4455 9.77112 7.5 10.0001 7.5C10.2291 7.5 10.3275 7.44549 10.3808 7.40396C10.4472 7.35223 10.5497 7.23521 10.6515 6.95948C10.8703 6.36678 10.962 5.40491 10.9888 3.98123C10.9988 3.45328 10.5621 3 10.0011 3ZM7.03338 12.2724L7.03186 12.2741C6.79188 12.5425 6.55136 12.9867 6.33504 13.5975C6.1233 14.1954 5.95734 14.8874 5.83105 15.5936C5.57781 17.0098 5.50007 18.3913 5.50007 19H3.50007C3.50007 18.2823 3.58673 16.7825 3.86228 15.2416C4.00039 14.4692 4.18993 13.6636 4.44977 12.9299C4.70503 12.2091 5.0522 11.4875 5.54099 10.9409C6.12668 10.286 6.90157 10.1561 7.55397 10.2391C8.1759 10.3182 8.76331 10.5918 9.2147 10.8626C9.69811 11.1526 10.302 11.1526 10.7854 10.8626C11.2368 10.5918 11.8242 10.3182 12.4462 10.2391C13.0986 10.1561 13.8735 10.286 14.4592 10.9409C14.9479 11.4875 15.2951 12.2091 15.5504 12.9299C15.8102 13.6636 15.9998 14.4692 16.1379 15.2416C16.4134 16.7825 16.5001 18.2823 16.5001 19H14.5001C14.5001 18.3913 14.4223 17.0098 14.1691 15.5936C14.0428 14.8874 13.8768 14.1954 13.6651 13.5975C13.4488 12.9867 13.2083 12.5425 12.9683 12.2741L12.9668 12.2724C12.9419 12.2444 12.9 12.1975 12.6986 12.2231C12.4626 12.2531 12.1483 12.3772 11.8144 12.5776C10.6977 13.2476 9.30249 13.2476 8.18571 12.5776C7.8518 12.3772 7.53755 12.2531 7.30153 12.2231C7.10011 12.1975 7.05828 12.2444 7.03338 12.2724ZM6.01375 4.03724C6.01213 3.95035 6.0133 3.86416 6.01717 3.77875C5.71558 3.60078 5.36536 3.5 4.99969 3.5C3.91388 3.5 2.96835 4.38658 3.01547 5.54047C3.03897 6.11608 3.09937 6.84509 3.28148 7.45557C3.37171 7.75804 3.51449 8.11185 3.76072 8.40716C4.02919 8.72916 4.44295 9 4.98792 9C5.53183 9 5.94501 8.73028 6.21393 8.4112C6.33744 8.26465 6.43554 8.10344 6.51437 7.9411C6.11428 6.816 6.03898 5.39008 6.01375 4.03724ZM13.9883 4.03781C13.9626 5.40047 13.8859 6.8368 13.4779 7.96551C13.553 8.11803 13.6455 8.26899 13.7607 8.40715C14.0292 8.72916 14.4429 9 14.9879 9C15.5318 9 15.945 8.73028 16.2139 8.41121C16.4613 8.11767 16.6068 7.76537 16.6996 7.46285C16.8868 6.85244 16.9528 6.12343 16.9798 5.54604C17.0339 4.38735 16.0848 3.5 14.9997 3.5C14.6348 3.5 14.2857 3.60015 13.9848 3.77695C13.9887 3.86313 13.9899 3.95011 13.9883 4.03781ZM15.309 10.4945C15.7092 11.0127 16.0303 11.6139 16.2892 12.2406C16.4164 12.1734 16.5396 12.0956 16.6574 12.0072C16.7535 11.9352 16.8494 11.88 16.9354 11.8434C16.9901 11.8201 17.0341 11.807 17.0667 11.8C17.4283 12.4071 17.7693 13.4621 17.9206 14.5002H16.9803C17.03 14.7241 17.0741 14.9421 17.1132 15.1513C17.1996 15.6124 17.2686 16.0675 17.323 16.5002H18.0001C19.071 16.5002 20.0819 15.6015 19.9221 14.3742C19.7549 13.09 19.3209 11.6292 18.7275 10.6825C18.3028 10.0049 17.6233 9.75425 16.9789 9.79752C16.3966 9.83663 15.8609 10.1046 15.4574 10.4072C15.4106 10.4423 15.3608 10.4714 15.309 10.4945ZM2.88691 15.1513C2.92608 14.9421 2.9701 14.7241 3.01984 14.5002H2.07973C2.23063 13.4645 2.56974 12.4105 2.92901 11.8015C2.96101 11.8084 3.00405 11.8211 3.05745 11.8436C3.14309 11.8798 3.2388 11.9344 3.33493 12.006C3.45509 12.0956 3.58068 12.1743 3.71037 12.242C3.9693 11.6149 4.29046 11.0133 4.69091 10.4949C4.63483 10.471 4.58092 10.4403 4.53044 10.4027C4.12596 10.1011 3.58924 9.83478 3.00651 9.79833C2.36127 9.75797 1.68409 10.013 1.26316 10.6915C0.676655 11.6368 0.245184 13.0924 0.0782696 14.3739C-0.0815918 15.6011 0.929078 16.5002 2.00039 16.5002H2.67714C2.73156 16.0675 2.80058 15.6124 2.88691 15.1513Z" fill="#657077"/>
+</svg>
diff --git a/public/images/icons/20/catalog.archive.react.svg b/public/images/icons/20/catalog.archive.react.svg
new file mode 100644
index 0000000000..07bfbe04e7
--- /dev/null
+++ b/public/images/icons/20/catalog.archive.react.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 1C0.895431 1 0 1.89543 0 3V6C0 7.10457 0.89543 8 2 8V17C2 18.1046 2.89543 19 4 19H16C17.1046 19 18 18.1046 18 17V8C19.1046 8 20 7.10457 20 6V3C20 1.89543 19.1046 1 18 1H2ZM4 16.5V8H16V16.5C16 16.7761 15.7761 17 15.5 17H4.5C4.22386 17 4 16.7761 4 16.5ZM17.5 3C17.7761 3 18 3.22386 18 3.5V5.5C18 5.77614 17.7761 6 17.5 6H2.5C2.22386 6 2 5.77614 2 5.5V3.5C2 3.22386 2.22386 3 2.5 3H17.5ZM7 10C6.44772 10 6 10.4477 6 11C6 11.5523 6.44772 12 7 12H13C13.5523 12 14 11.5523 14 11C14 10.4477 13.5523 10 13 10H7Z" fill="#657077"/>
+</svg>
diff --git a/public/images/icons/20/catalog.favorites.react.svg b/public/images/icons/20/catalog.favorites.react.svg
new file mode 100644
index 0000000000..98c9a79e1c
--- /dev/null
+++ b/public/images/icons/20/catalog.favorites.react.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0009 1C10.3911 1 10.7456 1.22689 10.909 1.58115L13.2138 6.57791L18.6782 7.2258C19.0656 7.27174 19.391 7.53879 19.5115 7.90983C19.6321 8.28087 19.5258 8.68815 19.2394 8.95303L15.1994 12.6891L16.2718 18.0863C16.3479 18.4689 16.1944 18.8609 15.8788 19.0902C15.5632 19.3195 15.143 19.3443 14.8026 19.1537L10.0009 16.466L5.19932 19.1537C4.85889 19.3443 4.43872 19.3195 4.1231 19.0902C3.80747 18.8609 3.65402 18.4689 3.73006 18.0863L4.80247 12.6891L0.762489 8.95303C0.476058 8.68815 0.369826 8.28087 0.490384 7.90983C0.610943 7.53879 0.936278 7.27174 1.3237 7.2258L6.78811 6.57791L9.09289 1.58115C9.2563 1.22689 9.61081 1 10.0009 1ZM10.0009 4.38751L8.36977 7.92389C8.22411 8.2397 7.92482 8.45714 7.57946 8.49809L3.7121 8.95663L6.57134 11.6008C6.82667 11.8369 6.94099 12.1887 6.87321 12.5298L6.11423 16.3496L9.51251 14.4474C9.81598 14.2775 10.1859 14.2775 10.4894 14.4474L13.8877 16.3496L13.1287 12.5298C13.0609 12.1887 13.1752 11.8369 13.4306 11.6008L16.2898 8.95663L12.4224 8.49809C12.0771 8.45714 11.7778 8.2397 11.6321 7.92389L10.0009 4.38751Z" fill="#657077"/>
+</svg>
diff --git a/public/images/icons/20/catalog.folder.react.svg b/public/images/icons/20/catalog.folder.react.svg
new file mode 100644
index 0000000000..f9492506d8
--- /dev/null
+++ b/public/images/icons/20/catalog.folder.react.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M0 4C0 2.89543 0.89543 2 2 2H7.36205L10.3621 4.5H18C19.1046 4.5 20 5.39543 20 6.5V16C20 17.1046 19.1046 18 18 18H2C0.895432 18 0 17.1046 0 16V4ZM6.63795 4L2 4V16H18V6.5H9.63795L6.63795 4Z" fill="#657077"/>
+</svg>
diff --git a/public/images/icons/20/catalog.portfolio.react.svg b/public/images/icons/20/catalog.portfolio.react.svg
new file mode 100644
index 0000000000..34836194dc
--- /dev/null
+++ b/public/images/icons/20/catalog.portfolio.react.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M18 2H14.8293C14.4175 0.834808 13.3062 0 12 0H8C6.69378 0 5.58254 0.834808 5.17071 2H2C0.895431 2 0 2.89543 0 4V8H7V6H13V8H20V4C20 2.89543 19.1046 2 18 2ZM7 9V10C7 11.6569 8.34315 13 10 13C11.6569 13 13 11.6569 13 10V9H19V15C19 16.6569 17.6569 18 16 18H4C2.34315 18 1 16.6569 1 15V9H7ZM8 2.5C8 2.22386 8.22386 2 8.5 2H11.5C11.7761 2 12 2.22386 12 2.5C12 2.77614 11.7761 3 11.5 3H8.5C8.22386 3 8 2.77614 8 2.5ZM12 7H8V10C8 11.1046 8.89543 12 10 12C11.1046 12 12 11.1046 12 10V7Z" fill="#657077"/>
+</svg>
diff --git a/public/images/icons/20/catalog.private.react.svg b/public/images/icons/20/catalog.private.react.svg
new file mode 100644
index 0000000000..2f43649691
--- /dev/null
+++ b/public/images/icons/20/catalog.private.react.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_462_3474)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M4.55231 2.37832C5.17657 0.921689 7.18238 0.737247 8.29632 1.86445C8.91333 2.4888 9.53704 2.96703 10 2.96703C10.463 2.96703 11.0867 2.4888 11.7037 1.86445C12.8176 0.737248 14.8234 0.921687 15.4477 2.37831L16.9998 6H19.0016C19.5538 6 20.0016 6.44772 20.0016 7V9H0V7C0 6.44772 0.447715 6 1 6H3.00015L4.55231 2.37832ZM2 11C1.44772 11 1 11.4477 1 12H0V13C0 13.7403 0.402199 14.3866 1 14.7324V17C1 17.5523 1.44772 18 2 18H6C7.65685 18 9 16.6569 9 15C9 14.4477 9.44771 14 10 14C10.5523 14 11 14.4477 11 15C11 16.6569 12.3431 18 14 18H18C18.5523 18 19 17.5523 19 17V14.7324C19.5978 14.3866 20 13.7403 20 13V12H19C19 11.4477 18.5523 11 18 11H12C11.4477 11 11 11.4477 11 12H9C9 11.4477 8.55229 11 8 11H2Z" fill="#657077"/>
+</g>
+<defs>
+<clipPath id="clip0_462_3474">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/icons/20/catalog.recent.react.svg b/public/images/icons/20/catalog.recent.react.svg
new file mode 100644
index 0000000000..f58d038a5f
--- /dev/null
+++ b/public/images/icons/20/catalog.recent.react.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_462_3538)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M2 10C2 5.58172 5.58172 2 10 2C14.4183 2 18 5.58172 18 10C18 14.4183 14.4183 18 10 18C5.58172 18 2 14.4183 2 10ZM10 0C4.47715 0 0 4.47715 0 10C0 15.5228 4.47715 20 10 20C15.5228 20 20 15.5228 20 10C20 4.47715 15.5228 0 10 0ZM9 3.5V10.0001C9 11.1047 9.89543 12.0001 11 12.0001H14.5V10.0001H11V3.5H9Z" fill="#657077"/>
+</g>
+<defs>
+<clipPath id="clip0_462_3538">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>
diff --git a/public/images/icons/20/catalog.rooms.react.svg b/public/images/icons/20/catalog.rooms.react.svg
new file mode 100644
index 0000000000..f1e47a8b5a
--- /dev/null
+++ b/public/images/icons/20/catalog.rooms.react.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M1 4C1 2.34315 2.34315 1 4 1H16C17.6569 1 19 2.34315 19 4V16C19 17.6569 17.6569 19 16 19H4C2.34315 19 1 17.6569 1 16V4ZM4 3C3.44772 3 3 3.44772 3 4V16C3 16.5523 3.44772 17 4 17H16C16.5523 17 17 16.5523 17 16V4C17 3.44772 16.5523 3 16 3H4ZM5 6C5 5.44772 5.44772 5 6 5H8C8.55228 5 9 5.44772 9 6V8C9 8.55228 8.55228 9 8 9H6C5.44772 9 5 8.55228 5 8V6ZM6 11C5.44772 11 5 11.4477 5 12V14C5 14.5523 5.44772 15 6 15H8C8.55228 15 9 14.5523 9 14V12C9 11.4477 8.55228 11 8 11H6ZM11 6C11 5.44772 11.4477 5 12 5H14C14.5523 5 15 5.44772 15 6V8C15 8.55228 14.5523 9 14 9H12C11.4477 9 11 8.55228 11 8V6ZM12 11C11.4477 11 11 11.4477 11 12V14C11 14.5523 11.4477 15 12 15H14C14.5523 15 15 14.5523 15 14V12C15 11.4477 14.5523 11 14 11H12Z" fill="#657077"/>
+</svg>
diff --git a/public/images/icons/20/catalog.shared.react.svg b/public/images/icons/20/catalog.shared.react.svg
new file mode 100644
index 0000000000..18c896ad22
--- /dev/null
+++ b/public/images/icons/20/catalog.shared.react.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M5 19C5 11.268 11.268 5 19 5V1C9.05887 1 1 9.05887 1 19H5ZM9 19C9 13.4772 13.4772 9 19 9V17C19 18.1046 18.1046 19 17 19H9Z" fill="#657077"/>
+</svg>
diff --git a/public/images/icons/20/catalog.trash.react.svg b/public/images/icons/20/catalog.trash.react.svg
new file mode 100644
index 0000000000..aced764b82
--- /dev/null
+++ b/public/images/icons/20/catalog.trash.react.svg
@@ -0,0 +1,3 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M13 4H19C19 2.89543 18.1046 2 17 2H13C13 0.895431 12.1046 0 11 0H9C7.89543 0 7 0.895431 7 2H3C1.89543 2 1 2.89543 1 4H7H13ZM5 16.2V5H3V16.2C3 18.2987 4.70132 20 6.8 20H13.2C15.2987 20 17 18.2987 17 16.2V5H15V16.2C15 17.1941 14.1941 18 13.2 18H13V6H11V18H9V6H7V18H6.8C5.80589 18 5 17.1941 5 16.2Z" fill="#657077"/>
+</svg>
diff --git a/public/images/icons/20/catalog.user.react.svg b/public/images/icons/20/catalog.user.react.svg
new file mode 100644
index 0000000000..37fd747262
--- /dev/null
+++ b/public/images/icons/20/catalog.user.react.svg
@@ -0,0 +1,10 @@
+<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
+<g clip-path="url(#clip0_462_3528)">
+<path fill-rule="evenodd" clip-rule="evenodd" d="M10.0003 2C8.8957 1.99998 8.00025 2.89542 8.00025 4V4.33328C8.00025 5.56326 8.23428 6.52959 8.60781 7.15206C8.95419 7.72929 9.40132 7.99994 10.0007 7.99994C10.5999 7.99994 11.0468 7.72936 11.393 7.15222C11.7664 6.52975 12.0002 5.56338 12.0002 4.33328V4C12.0002 2.89544 11.1048 2.00002 10.0003 2ZM6.00025 4C6.00025 1.79083 7.79116 -4.23185e-05 10.0003 7.50006e-10C12.2094 4.23797e-05 14.0002 1.79089 14.0002 4V4.33328C14.0002 5.76984 13.7345 7.13681 13.1081 8.181C12.4546 9.27052 11.4017 9.99994 10.0007 9.99994C8.59972 9.99994 7.54664 9.2706 6.89289 8.18116C6.26629 7.13696 6.00025 5.76996 6.00025 4.33328V4ZM12.6632 11.1797C12.8348 11.1061 13.1136 10.9997 13.4298 11C15.4493 11.0019 16.7678 12.3175 17.5632 13.7044C18.3576 15.0895 18.7508 16.728 18.9092 17.8671C19.0797 19.0936 18.0778 20 17.0002 20H3.00025C1.92265 20 0.920858 19.0936 1.0913 17.8672C1.24963 16.7278 1.64281 15.0886 2.43722 13.7031C3.23258 12.316 4.55141 11 6.57168 11C6.8873 11 7.16568 11.1063 7.33712 11.1798C7.51658 11.2568 7.70856 11.3577 7.8745 11.4448L7.89377 11.455L7.42882 12.3403L7.89377 11.455C8.5283 11.7882 9.18679 12.12 10.0002 12.12C10.8133 12.12 11.4716 11.7883 12.1061 11.4551L12.1254 11.4449C12.2914 11.3577 12.4836 11.2567 12.6632 11.1797ZM13.4516 13.0177C13.3523 13.0603 13.2282 13.1248 13.036 13.2257C13.0244 13.2318 13.0127 13.238 13.0008 13.2442C12.3761 13.5726 11.3347 14.12 10.0002 14.12C8.66548 14.12 7.62382 13.5725 6.99909 13.2441C6.9872 13.2379 6.97546 13.2317 6.96387 13.2256C6.77184 13.1248 6.64781 13.0604 6.54854 13.0178C6.53145 13.0105 6.51773 13.0049 6.50705 13.0009C5.53595 13.0269 4.77853 13.6406 4.17224 14.698C3.58062 15.7298 3.24353 17.0167 3.09306 18H16.9074C16.7569 17.0171 16.4198 15.7309 15.8282 14.6994C15.222 13.6424 14.4644 13.028 13.4928 13.0009C13.4822 13.005 13.4686 13.0105 13.4516 13.0177Z" fill="#657077"/>
+</g>
+<defs>
+<clipPath id="clip0_462_3528">
+<rect width="20" height="20" fill="white"/>
+</clipPath>
+</defs>
+</svg>