From 3884995ae536ba66cadd55d3e4279b48ccff1d75 Mon Sep 17 00:00:00 2001
From: Ajay krishna <ajay.k@aot-technologies.com>
Date: Wed, 8 Jan 2025 23:08:01 +0530
Subject: [PATCH] css variable added using fetcher utility

---
 .../src/components/CustomComponents/MultiSelect.js         | 5 +++--
 forms-flow-web/src/components/Modals/ActionModal.js        | 6 ++++--
 forms-flow-web/src/components/Modals/TaskVariableModal.js  | 7 +++++--
 3 files changed, 12 insertions(+), 6 deletions(-)

diff --git a/forms-flow-web/src/components/CustomComponents/MultiSelect.js b/forms-flow-web/src/components/CustomComponents/MultiSelect.js
index 5644a1c4b..0ef401645 100644
--- a/forms-flow-web/src/components/CustomComponents/MultiSelect.js
+++ b/forms-flow-web/src/components/CustomComponents/MultiSelect.js
@@ -3,7 +3,7 @@ import {  useSelector } from "react-redux";
 import { ListGroup } from "react-bootstrap";
 import { CustomPill,DeleteIcon } from "@formsflow/components";
 import PropTypes from 'prop-types';
-import { HelperServices } from "@formsflow/service";
+import { HelperServices, StyleServices } from "@formsflow/service";
 
 const RoleSelector = ({
   allRoles = [],
@@ -11,6 +11,7 @@ const RoleSelector = ({
   setSelectedRoles,
   openByDefault = false,
 }) => {
+  const primaryColor = StyleServices.getCSSVariable('primary'); 
   const [roleInput, setRoleInput] = useState("");
   const [filteredRoles, setFilteredRoles] = useState([]);
   const [isDropdownOpen, setIsDropdownOpen] = useState(false); // To control dropdown visibility
@@ -74,7 +75,7 @@ const RoleSelector = ({
           <CustomPill
             key={role + index}
             label={HelperServices.removeTenantKeyFromData(role,tenantKey)}
-            icon={<DeleteIcon color="#253DF4" />}
+            icon={<DeleteIcon color={primaryColor} />}
             bg="primary"
             onClick={() => removeRole(role)}
           />
diff --git a/forms-flow-web/src/components/Modals/ActionModal.js b/forms-flow-web/src/components/Modals/ActionModal.js
index e9f1ffa5c..0334dfd21 100644
--- a/forms-flow-web/src/components/Modals/ActionModal.js
+++ b/forms-flow-web/src/components/Modals/ActionModal.js
@@ -10,6 +10,7 @@ import {
   CustomInfo,
   CustomButton,
 } from "@formsflow/components";
+import { StyleServices } from "@formsflow/service";
 
 const ActionModal = React.memo(
   ({
@@ -21,6 +22,7 @@ const ActionModal = React.memo(
     isCreate,
     isMigrated
   }) => {
+    const primaryColor = StyleServices.getCSSVariable('primary'); 
     const handleAction = (actionType) => {
       onAction(actionType);
       onClose();
@@ -46,7 +48,7 @@ const ActionModal = React.memo(
               <div> Action</div>
             </Modal.Title>
             <div className="d-flex align-items-center">
-              <CloseIcon onClick={onClose} color="#253DF4" />
+              <CloseIcon onClick={onClose} color={primaryColor} />
             </div>
           </Modal.Header>
           <Modal.Body className="action-modal-body">
@@ -58,7 +60,7 @@ const ActionModal = React.memo(
                   size="sm"
                   label="Duplicate"
                   disabled={published || !isMigrated}
-                  icon={<DuplicateIcon color="#253DF4" />}
+                  icon={<DuplicateIcon color={primaryColor} />}
                   className=""
                   dataTestid="duplicate-form-button"
                   ariaLabel="Duplicate Button"
diff --git a/forms-flow-web/src/components/Modals/TaskVariableModal.js b/forms-flow-web/src/components/Modals/TaskVariableModal.js
index 239fcf570..feade9c61 100644
--- a/forms-flow-web/src/components/Modals/TaskVariableModal.js
+++ b/forms-flow-web/src/components/Modals/TaskVariableModal.js
@@ -14,10 +14,13 @@ import { useDispatch ,useSelector } from "react-redux";
 import {
   saveFormProcessMapperPut,
 } from "../../apiManager/services/processServices";
+import { StyleServices } from "@formsflow/service";
 
  
 //TBD in case of Bundle form display
 const PillList = React.memo(({ alternativeLabels, onRemove }) => {
+  const primaryColor = StyleServices.getCSSVariable('primary'); 
+  const secondaryColor = StyleServices.getCSSVariable('secondary'); 
   const { t } = useTranslation();
   // Filter out applicationId and applicationStatus
   const ignoreKeywords = new Set([
@@ -39,8 +42,8 @@ const PillList = React.memo(({ alternativeLabels, onRemove }) => {
             <CustomPill
               key={key}
               label={altVariable || labelOfComponent}
-              icon={<CloseIcon color="#253DF4" data-testid="pill-remove-icon" />}
-              bg="#E7E9FE"
+              icon={<CloseIcon color={primaryColor} data-testid="pill-remove-icon" />}
+              bg={secondaryColor}
               onClick={() => onRemove(key)}
               secondaryLabel={key}
             />