set icon colors as per main branding color

Author: raheeliftikhar5

client/packages/lowcoder/src/components/BrandedIcon.tsx

@@ -0,0 +1,21 @@
+import { getBrandingSetting } from "@lowcoder-ee/redux/selectors/enterpriseSelectors";
+import { ReactNode } from "react";
+import { useSelector } from "react-redux";
+import { styled } from "styled-components";
+
+const IconWrapper = styled.span<{$color?: string}>`
+  svg > path[fill-rule='evenodd'] {
+    ${props => props.$color && `fill: ${props.$color}` };
+  }
+`;
+
+export const BrandedIcon = (props: {
+  children: ReactNode,
+}) => {
+  const brandingSettings = useSelector(getBrandingSetting);
+  return (
+    <IconWrapper $color={brandingSettings?.config_set?.mainBrandingColor}>
+      {props.children}
+    </IconWrapper>
+  );
+};

client/packages/lowcoder/src/pages/ApplicationV2/HomeResCard.tsx

@@ -1,5 +1,5 @@
 import { TacoButton } from "lowcoder-design/src/components/button"
-import { useState } from "react";
+import { ReactNode, useState } from "react";
 import { useDispatch } from "react-redux";
 import { updateAppMetaAction } from "redux/reduxActions/applicationActions";
 import styled from "styled-components";
@@ -24,6 +24,7 @@ import { TypographyText } from "../../components/TypographyText";
 import { useParams } from "react-router-dom";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
 import {FolderIcon} from "icons";
+import { BrandedIcon } from "@lowcoder-ee/components/BrandedIcon";
 
 const ExecButton = styled(TacoButton)`
   width: 52px;
@@ -167,13 +168,15 @@ export function HomeResCard(props: { res: HomeRes; onMove: (res: HomeRes) => voi
     <Wrapper>
       <Card>
         {Icon && (
-          <Icon width={"42px"} height={"42px"} style={
-            { 
-              color: iconColor,
-              marginRight: "10px", 
-              flexShrink: 0 
-            }
-          } />
+          <BrandedIcon>
+            <Icon width={"42px"} height={"42px"} style={
+              { 
+                color: iconColor,
+                marginRight: "10px", 
+                flexShrink: 0 
+              }
+            } />
+          </BrandedIcon>
         )}
         <CardInfo
           onClick={(e) => {

client/packages/lowcoder/src/pages/ApplicationV2/HomeTableView.tsx

@@ -22,6 +22,7 @@ import { MoveToFolderModal } from "./MoveToFolderModal";
 import { trans } from "../../i18n";
 import { useParams } from "react-router-dom";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
+import { BrandedIcon } from "@lowcoder-ee/components/BrandedIcon";
 
 const OperationWrapper = styled.div`
   display: flex;
@@ -119,11 +120,13 @@ export const HomeTableView = (props: { resources: HomeRes[], setModify?: any, mo
               return (
                 <NameWrapper>
                   {Icon && (
-                    <Icon
-                      width={"24px"}
-                      height={"24px"}
-                      style={{ marginRight: "10px", flexShrink: 0 }}
-                    />
+                    <BrandedIcon>
+                      <Icon
+                        width={"24px"}
+                        height={"24px"}
+                        style={{ marginRight: "10px", flexShrink: 0 }}
+                      />
+                    </BrandedIcon>
                   )}
                   <TypographyText
                     ellipsis={true}

client/packages/lowcoder/src/pages/ApplicationV2/TrashTableView.tsx

@@ -9,6 +9,7 @@ import { deleteApplication, restoreApplication } from "../../redux/reduxActions/
 import { HomeRes } from "./HomeLayout";
 import { trans, transToNode } from "../../i18n";
 import { messageInstance } from "lowcoder-design/src/components/GlobalInstances";
+import { BrandedIcon } from "@lowcoder-ee/components/BrandedIcon";
 
 const OperationWrapper = styled.div`
   display: flex;
@@ -59,11 +60,13 @@ export const TrashTableView = (props: { resources: HomeRes[] , setModify: any, m
             return (
               <NameWrapper>
                 {Icon && (
-                  <Icon
-                    width={"24px"}
-                    height={"24px"}
-                    style={{ marginRight: "10px", flexShrink: 0 }}
-                  />
+                  <BrandedIcon>
+                    <Icon
+                      width={"24px"}
+                      height={"24px"}
+                      style={{ marginRight: "10px", flexShrink: 0 }}
+                    />
+                  </BrandedIcon>
                 )}
                 {item.name}
               </NameWrapper>

client/packages/lowcoder/src/pages/editor/right/styledComponent.tsx

@@ -11,7 +11,7 @@ const NoShake = css`
   transform-style: preserve-3d;
 `;
 
-export const CompIconDiv = styled.div<{ $h: number; $w: number, $isSelected?: boolean }>`
+export const CompIconDiv = styled.div<{ $h: number; $w: number, $isSelected?: boolean, $color?: string }>`
   ${NoShake};
   padding: 3px;
   background: #ffffff;
@@ -50,6 +50,15 @@ export const CompIconDiv = styled.div<{ $h: number; $w: number, $isSelected?: bo
     transform-style: preserve-3d;
     backface-visibility: hidden;
   `}
+
+  ${props => props.$color && `
+    svg > *[fill='#B480DE'] {
+      fill: ${props.$color};
+    }
+    svg > *[stroke='#B480DE'] {
+      stroke: ${props.$color};
+    }
+  `}
 `;
 
 export const RightPanelContentWrapper = styled.div`

client/packages/lowcoder/src/pages/editor/right/uiCompPanel.tsx

@@ -24,6 +24,8 @@ import {
 } from "lowcoder-design";
 import { TransparentImg } from "../../../util/commonUtils";
 import { RightContext } from "./rightContext";
+import { useSelector } from "react-redux";
+import { getBrandingSetting } from "@lowcoder-ee/redux/selectors/enterpriseSelectors";
 
 const CompDiv = styled.div`
   display: flex;
@@ -65,8 +67,10 @@ const HovDiv = styled.div`
 
 const IconContain = (props: { Icon: React.FunctionComponent<React.SVGProps<SVGSVGElement>> }) => {
   const { Icon } = props;
+  const brandingSettings = useSelector(getBrandingSetting);
+
   return (
-    <CompIconDiv $w={64} $h={64}>
+    <CompIconDiv $w={64} $h={64} $color={brandingSettings?.config_set?.mainBrandingColor}>
       <Icon />
     </CompIconDiv>
   );

client/packages/lowcoder/src/pages/setting/theme/ThemeCompPanel.tsx

@@ -30,6 +30,8 @@ import { JSONObject } from "util/jsonTypes";
 import PreviewApp from "components/PreviewApp";
 import { parseCompType } from "comps/utils/remote";
 import { defaultTheme } from "@lowcoder-ee/constants/themeConstants";
+import { useSelector } from "react-redux";
+import { getBrandingSetting } from "@lowcoder-ee/redux/selectors/enterpriseSelectors";
 
 const CompDiv = styled.div`
   display: flex;
@@ -79,8 +81,10 @@ const IconContain = (props: {
   isSelected: boolean,
 }) => {
   const { Icon, isSelected } = props;
+  const brandingSettings = useSelector(getBrandingSetting);
+
   return (
-    <CompIconDiv $w={64} $h={64} $isSelected={isSelected}>
+    <CompIconDiv $w={64} $h={64} $isSelected={isSelected} $color={brandingSettings?.config_set?.mainBrandingColor}>
       <Icon />
     </CompIconDiv>
   );