From dfa1434be7920e3b26f3a76be81796019103c2b2 Mon Sep 17 00:00:00 2001
From: Devika <devika.vellikkunnathillam@dbtez.com>
Date: Fri, 23 May 2025 17:31:52 +0530
Subject: [PATCH] Replaced the Schema Icons in the Schema Wrapper in the
 Infinite Canvas

---
 src/components/CustomIcons.jsx           | 14 ++++++++++++++
 src/components/DataflowCanvas.jsx        |  9 ++++++---
 src/components/DataflowCanvasUpdated.jsx |  9 ++++++---
 3 files changed, 26 insertions(+), 6 deletions(-)

diff --git a/src/components/CustomIcons.jsx b/src/components/CustomIcons.jsx
index 3534a3c..fa650af 100644
--- a/src/components/CustomIcons.jsx
+++ b/src/components/CustomIcons.jsx
@@ -1,5 +1,19 @@
 import React from 'react';
 
+// Custom SVG component for schema icon
+export const CustomSchemaIcon = ({ width = "49", height = "46" }) => (
+  <svg width={width} height={height} viewBox="0 0 49 46" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.86377" y="0.0722656" width="48.048" height="45.0864" rx="4.224" fill="url(#paint0_linear_892_4172)"/>
+    <path fill-rule="evenodd" clip-rule="evenodd" d="M41.4524 29.6995H38.6536C38.4553 27.918 37.6756 26.2385 36.3718 24.8796C34.5615 22.9936 32.0024 21.9549 29.1667 21.9549H25.5936V13.5075H32.0566C32.4084 13.5075 32.6934 13.2222 32.6934 12.8708V8.0723C32.6934 7.72053 32.4084 7.43555 32.0566 7.43555H17.9481C17.5959 7.43555 17.311 7.72053 17.311 8.0723V12.8708C17.311 13.2222 17.5959 13.5075 17.9481 13.5075H24.4002V21.9549H20.8141C15.7173 21.9549 11.9295 25.1589 11.3636 29.7182C9.30036 29.9044 7.68359 31.6361 7.68359 33.7475C7.68359 35.9829 9.49629 37.7955 11.7316 37.7955C13.9673 37.7955 15.7796 35.9829 15.7796 33.7475C15.7796 31.7928 14.394 30.1622 12.5517 29.7829C13.0711 25.8284 16.3123 23.1483 20.8141 23.1483H24.4002V29.6995H20.268C20.0446 29.6995 19.913 29.9594 20.0401 30.1497L24.7743 37.6713C24.8844 37.8368 25.1199 37.8368 25.2305 37.6713L29.9646 30.1497C30.0917 29.9594 29.9597 29.6995 29.7367 29.6995H25.5936V23.1483H29.1667C31.6749 23.1483 33.928 24.0566 35.5104 25.7058C36.5981 26.8388 37.2611 28.2269 37.4546 29.6995H34.6348C34.2818 29.6995 33.9956 29.9857 33.9956 30.3387V37.1564C33.9956 37.5094 34.2818 37.7955 34.6348 37.7955H41.4524C41.8054 37.7955 42.0916 37.5094 42.0916 37.1564V30.3387C42.0916 29.9857 41.8054 29.6995 41.4524 29.6995Z" fill="white"/>
+    <defs>
+      <linearGradient id="paint0_linear_892_4172" x1="0.86377" y1="22.6155" x2="48.9118" y2="22.6155" gradientUnits="userSpaceOnUse">
+        <stop stop-color="#FF9D2C"/>
+        <stop offset="1" stop-color="#CD750F"/>
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
 // Custom SVG component for process/workflow icon
 export const CustomProcessIcon = ({ width = "24", height = "24" }) => (
   <svg width={width} height={height} viewBox="0 0 91 91" fill="none" xmlns="http://www.w3.org/2000/svg">
diff --git a/src/components/DataflowCanvas.jsx b/src/components/DataflowCanvas.jsx
index 92c3ade..8d430c5 100644
--- a/src/components/DataflowCanvas.jsx
+++ b/src/components/DataflowCanvas.jsx
@@ -130,11 +130,11 @@ const generateCustomStyles = () => {
 };
 
 // Import icons from react-icons
-import { FaTable, FaArrowRight, FaExchangeAlt, FaLayerGroup, FaFilter, FaCode, FaSync, FaCalculator, FaChartLine } from 'react-icons/fa';
+import { FaTable, FaArrowRight, FaExchangeAlt, FaFilter, FaCode, FaSync, FaCalculator, FaChartLine } from 'react-icons/fa';
 import { BiSolidData, BiTransfer } from 'react-icons/bi';
 import { AiFillFolder } from 'react-icons/ai';
 import { TbTransform } from 'react-icons/tb';
-import { CustomDatabaseIcon, CustomDocumentIcon, CustomDimensionIcon, CustomProcessIcon } from './CustomIcons';
+import { CustomDatabaseIcon, CustomDocumentIcon, CustomDimensionIcon, CustomProcessIcon, CustomSchemaIcon } from './CustomIcons';
 
 // Import mock data
 import mockApiData from './mockData';
@@ -172,8 +172,11 @@ const SchemaBackgroundNode = ({ data }) => {
         padding: '8px 12px', // More padding
         background: 'rgba(255, 255, 255, 0.9)', // More opaque background
         boxShadow: '0 3px 6px rgba(0, 0, 0, 0.1)', // Stronger shadow
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px'
       }}>
-        <FaLayerGroup size={14} />
+        <CustomSchemaIcon width="24" height="22" />
         {data.name}
       </div>
     </div>
diff --git a/src/components/DataflowCanvasUpdated.jsx b/src/components/DataflowCanvasUpdated.jsx
index 1e319ec..b44c117 100644
--- a/src/components/DataflowCanvasUpdated.jsx
+++ b/src/components/DataflowCanvasUpdated.jsx
@@ -64,11 +64,11 @@ const generateCustomStyles = () => {
 };
 
 // Import icons from react-icons
-import { FaDatabase, FaTable, FaArrowRight, FaExchangeAlt, FaLayerGroup } from 'react-icons/fa';
+import { FaDatabase, FaTable, FaArrowRight, FaExchangeAlt } from 'react-icons/fa';
 import { BiSolidData } from 'react-icons/bi';
 import { AiFillFolder } from 'react-icons/ai';
 import { BsFileEarmarkSpreadsheet } from 'react-icons/bs';
-import { CustomProcessIcon } from './CustomIcons';
+import { CustomProcessIcon, CustomSchemaIcon } from './CustomIcons';
 
 // Import mock data
 import mockApiData from './mockData';
@@ -106,8 +106,11 @@ const SchemaBackgroundNode = ({ data }) => {
         padding: '8px 12px', // More padding
         background: 'rgba(255, 255, 255, 0.9)', // More opaque background
         boxShadow: '0 3px 6px rgba(0, 0, 0, 0.1)', // Stronger shadow
+        display: 'flex',
+        alignItems: 'center',
+        gap: '8px'
       }}>
-        <FaLayerGroup size={14} />
+        <CustomSchemaIcon width="24" height="22" />
         {data.name}
       </div>
     </div>