Web:Components:Added theme changer for CatalogItem.

packages/asc-web-common/components/ColorTheme/constants.js

@@ -1,7 +1,6 @@
 export const ThemeType = {
   Button: "button",
   MainButton: "mainButton",
-  CatalogItemText: "catalogItemText",
-  CatalogItemImg: "catalogItemImg",
+  CatalogItem: "catalogItem",
   Badge: "badge",
 };

packages/asc-web-common/components/ColorTheme/styled/catalogItem.js

@@ -1,9 +1,13 @@
 import styled, { css } from "styled-components";
 
-import { StyledCatalogItemContainer } from "@appserver/components/catalog-item/styled-catalog-item";
+import {
+  StyledCatalogItemContainer,
+  StyledCatalogItemImg,
+  StyledCatalogItemText,
+} from "@appserver/components/catalog-item/styled-catalog-item";
 
 const getDefaultStyles = ({ currentColorScheme, isActive }) => css`
-  .color-theme-text {
+  ${StyledCatalogItemText} {
     color: ${isActive && currentColorScheme.accentColor};
 
     &:hover {
@@ -11,7 +15,7 @@ const getDefaultStyles = ({ currentColorScheme, isActive }) => css`
     }
   }
 
-  .color-theme-img {
+  ${StyledCatalogItemImg} {
     svg {
       path {
         fill: ${isActive && currentColorScheme.accentColor} !important;

packages/asc-web-components/catalog-item/index.js

@@ -16,7 +16,7 @@ import {
   StyledCatalogItemInitialText,
   StyledCatalogItemHeaderContainer,
 } from "./styled-catalog-item";
-
+import { ColorTheme, ThemeType } from "@appserver/common/components/ColorTheme";
 const getInitial = (text) => text.substring(0, 1).toUpperCase();
 
 const CatalogItem = (props) => {
@@ -47,6 +47,7 @@ const CatalogItem = (props) => {
   };
 
   const onClickBadgeAction = (e) => {
+    console.log("PRO", onClickBadge);
     e.stopPropagation();
     onClickBadge && onClickBadge(id);
   };
@@ -70,12 +71,14 @@ const CatalogItem = (props) => {
 
   const renderItem = () => {
     return (
-      <StyledCatalogItemContainer
+      <ColorTheme
         className={className}
         id={id}
         style={style}
         showText={showText}
         isEndOfBlock={isEndOfBlock}
+        isActive={isActive}
+        type={ThemeType.CatalogItem}
       >
         <StyledCatalogItemSibling
           isActive={isActive}
@@ -120,7 +123,7 @@ const CatalogItem = (props) => {
             )}
           </StyledCatalogItemBadgeWrapper>
         )}
-      </StyledCatalogItemContainer>
+      </ColorTheme>
     );
   };