Merge pull request #2493 from Ajay-aot/Feature/FWF-3920-css-fetcher-u…

…tility-implementation css variable added using fetcher utility(OPEN SRC)
AOT-Technologies · Jan 14, 2025 · 84ddf26 · 84ddf26
2 parents 4e3cae4 + 139966e
commit 84ddf26
Show file tree

Hide file tree

Showing 3 changed files with 13 additions and 6 deletions.
diff --git a/forms-flow-web/src/components/CustomComponents/MultiSelect.js b/forms-flow-web/src/components/CustomComponents/MultiSelect.js
@@ -3,14 +3,15 @@ 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 = [],
   selectedRoles = [],
   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
@@ -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
@@ -15,6 +15,8 @@ import {
   saveFormProcessMapperPut,
 } from "../../apiManager/services/processServices";
 import _ from "lodash";
+import { StyleServices } from "@formsflow/service";
+
 
   // Filter out applicationId and applicationStatus
   const ignoreKeywords = new Set([
@@ -31,6 +33,8 @@ import _ from "lodash";
 //TBD in case of Bundle form display
 const PillList = React.memo(({ alternativeLabels, onRemove }) => {
   const { t } = useTranslation();
+  const primaryColor = StyleServices.getCSSVariable('primary'); 
+  const secondaryColor = StyleServices.getCSSVariable('secondary'); 
 
   const filteredVariablePills = Object.values(alternativeLabels).filter(
     ({ key }) => !ignoreKeywords.has(key)
@@ -43,8 +47,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}
             />