From 641cc722f6d37bcb61d8aaf352d1a6f314fdb9ea Mon Sep 17 00:00:00 2001
From: Devika <devika.vellikkunnathillam@dbtez.com>
Date: Fri, 23 May 2025 13:18:52 +0530
Subject: [PATCH] Changes in the TableCreationPopUp.jsx

---
 src/components/TableCreationPopup.jsx | 58 +++++++++++++++++++++++----
 1 file changed, 50 insertions(+), 8 deletions(-)

diff --git a/src/components/TableCreationPopup.jsx b/src/components/TableCreationPopup.jsx
index e0d595d..732926a 100644
--- a/src/components/TableCreationPopup.jsx
+++ b/src/components/TableCreationPopup.jsx
@@ -1,6 +1,48 @@
 import React, { useState } from 'react';
-import { FaPlus, FaTimes, FaTable, FaDatabase, FaLayerGroup, FaBuilding } from 'react-icons/fa';
-import { HiOutlineDocumentReport } from 'react-icons/hi';
+import { FaPlus, FaTimes, FaTable, FaLayerGroup } from 'react-icons/fa';
+
+// Custom SVG component for database icon
+const CustomDatabaseIcon = ({ color = "#fa8c16", width = "24", height = "24" }) => (
+  <svg width={width} height={height} viewBox="0 0 49 47" fill="none" xmlns="http://www.w3.org/2000/svg">
+    <rect x="0.86377" y="0.736328" width="47.52" height="45.408" rx="4.224" fill="url(#paint0_linear_892_4198)"/>
+    <path d="M20.0185 25.0338H29.2166V30.3663H20.0185V25.0338ZM20.0185 37.1679H29.2166V31.8354H20.0185V37.1679ZM20.0185 23.5648H29.2166V18.2249H20.0185V23.5648ZM30.443 23.5648H39.641V18.2249H30.443V23.5648ZM9.59408 23.5648H18.7921V18.2249H9.59408V23.5648ZM9.59408 30.3663H18.7921V25.0338H9.59408V30.3663ZM30.4736 30.3663H39.6717V25.0338H30.4736V30.3663ZM37.8321 9.71191H11.4153C10.9274 9.71191 10.4595 9.94407 10.1145 10.3573C9.7695 10.7706 9.57568 11.331 9.57568 11.9154V16.7559H19.3133C19.3439 16.7517 19.3748 16.7517 19.4053 16.7559H19.4973H29.7501H29.842C29.8726 16.7517 29.9035 16.7517 29.934 16.7559H39.6717V11.9154C39.6717 11.331 39.4779 10.7706 39.1329 10.3573C38.7879 9.94407 38.32 9.71191 37.8321 9.71191ZM9.57568 34.9644C9.57568 35.5488 9.7695 36.1093 10.1145 36.5225C10.2853 36.7271 10.4881 36.8894 10.7113 37.0002C10.9345 37.1109 11.1737 37.1679 11.4153 37.1679H18.7737V31.8354H9.57568V34.9644ZM30.4552 37.1679H37.8137C38.3016 37.1679 38.7695 36.9358 39.1145 36.5225C39.4595 36.1093 39.6533 35.5488 39.6533 34.9644V31.8354H30.4552V37.1679Z" fill="white"/>
+    <defs>
+      <linearGradient id="paint0_linear_892_4198" x1="48.3838" y1="23.4403" x2="0.86377" y2="23.4403" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#659667"/>
+        <stop offset="1" stopColor="#81C784"/>
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+// Custom SVG component for document/report icon
+const CustomDocumentIcon = ({ width = "24", height = "24" }) => (
+  <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.0966797" width="47.52" height="44.952" rx="4.224" fill="url(#paint0_linear_892_4208)"/>
+    <path d="M12.6235 36.0723C11.7985 36.0723 11.0925 35.7788 10.5055 35.1918C9.91854 34.6048 9.62454 33.8983 9.62354 33.0723V12.0723C9.62354 11.2473 9.91754 10.5413 10.5055 9.95427C11.0935 9.36727 11.7995 9.07327 12.6235 9.07227H36.6235C37.4485 9.07227 38.155 9.36627 38.743 9.95427C39.331 10.5423 39.6245 11.2483 39.6235 12.0723V33.0723C39.6235 33.8973 39.33 34.6038 38.743 35.1918C38.156 35.7798 37.4495 36.0733 36.6235 36.0723H12.6235ZM20.1235 30.0723C20.5485 30.0723 20.905 29.9283 21.193 29.6403C21.481 29.3523 21.6245 28.9963 21.6235 28.5723C21.6225 28.1483 21.4785 27.7923 21.1915 27.5043C20.9045 27.2163 20.5485 27.0723 20.1235 27.0723H15.6235C15.1985 27.0723 14.8425 27.2163 14.5555 27.5043C14.2685 27.7923 14.1245 28.1483 14.1235 28.5723C14.1225 28.9963 14.2665 29.3528 14.5555 29.6418C14.8445 29.9308 15.2005 30.0743 15.6235 30.0723H20.1235ZM28.4485 22.8348L27.361 21.7473C27.061 21.4473 26.711 21.3038 26.311 21.3168C25.911 21.3298 25.561 21.4858 25.261 21.7848C24.986 22.0848 24.842 22.4348 24.829 22.8348C24.816 23.2348 24.96 23.5848 25.261 23.8848L27.3985 26.0223C27.6985 26.3223 28.0485 26.4723 28.4485 26.4723C28.8485 26.4723 29.1985 26.3223 29.4985 26.0223L34.8235 20.6973C35.1235 20.3973 35.2735 20.0473 35.2735 19.6473C35.2735 19.2473 35.1235 18.8973 34.8235 18.5973C34.5235 18.2973 34.1675 18.1473 33.7555 18.1473C33.3435 18.1473 32.987 18.2973 32.686 18.5973L28.4485 22.8348ZM20.1235 24.0723C20.5485 24.0723 20.905 23.9283 21.193 23.6403C21.481 23.3523 21.6245 22.9963 21.6235 22.5723C21.6225 22.1483 21.4785 21.7923 21.1915 21.5043C20.9045 21.2163 20.5485 21.0723 20.1235 21.0723H15.6235C15.1985 21.0723 14.8425 21.2163 14.5555 21.5043C14.2685 21.7923 14.1245 22.1483 14.1235 22.5723C14.1225 22.9963 14.2665 23.3528 14.5555 23.6418C14.8445 23.9308 15.2005 24.0743 15.6235 24.0723H20.1235ZM20.1235 18.0723C20.5485 18.0723 20.905 17.9283 21.193 17.6403C21.481 17.3523 21.6245 16.9963 21.6235 16.5723C21.6225 16.1483 21.4785 15.7923 21.1915 15.5043C20.9045 15.2163 20.5485 15.0723 20.1235 15.0723H15.6235C15.1985 15.0723 14.8425 15.2163 14.5555 15.5043C14.2685 15.7923 14.1245 16.1483 14.1235 16.5723C14.1225 16.9963 14.2665 17.3528 14.5555 17.6418C14.8445 17.9308 15.2005 18.0743 15.6235 18.0723H20.1235Z" fill="white"/>
+    <defs>
+      <linearGradient id="paint0_linear_892_4208" x1="48.3838" y1="22.5727" x2="0.86377" y2="22.5727" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#659667"/>
+        <stop offset="1" stopColor="#81C784"/>
+      </linearGradient>
+    </defs>
+  </svg>
+);
+
+// Custom SVG component for dimension icon
+const CustomDimensionIcon = ({ width = "24", height = "24" }) => (
+  <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="47.52" height="44.952" rx="4.224" fill="url(#paint0_linear_892_4224)"/>
+    <path fillRule="evenodd" clipRule="evenodd" d="M15.1349 14.2803C15.1347 14.3699 15.1094 14.4575 15.0619 14.5334C15.0143 14.6092 14.9465 14.6703 14.8661 14.7096C14.7857 14.7489 14.6959 14.7649 14.6068 14.7558C14.5177 14.7467 14.433 14.7128 14.3622 14.6581L11.3078 12.2825C11.2504 12.2377 11.204 12.1803 11.172 12.1149C11.1401 12.0495 11.1235 11.9776 11.1235 11.9048C11.1235 11.832 11.1401 11.7601 11.172 11.6947C11.204 11.6292 11.2504 11.5719 11.3078 11.5271L14.3622 9.14959C14.4333 9.09461 14.5184 9.0607 14.6078 9.05173C14.6972 9.04277 14.7873 9.0591 14.8678 9.09888C14.9484 9.13866 15.0162 9.20028 15.0634 9.27671C15.1106 9.35313 15.1354 9.4413 15.1349 9.53114V10.95H26.6395V9.5273C26.6395 9.43746 26.6647 9.34941 26.7123 9.27321C26.7599 9.19701 26.828 9.13572 26.9088 9.09634C26.9895 9.05696 27.0797 9.04108 27.1691 9.05049C27.2585 9.05991 27.3434 9.09424 27.4142 9.14959L30.4667 11.5252C30.5241 11.57 30.5705 11.6273 30.6024 11.6927C30.6343 11.7582 30.6509 11.83 30.6509 11.9029C30.6509 11.9757 30.6343 12.0475 30.6024 12.113C30.5705 12.1784 30.5241 12.2357 30.4667 12.2806L27.4142 14.6581C27.3432 14.7135 27.2582 14.7479 27.1686 14.7572C27.0791 14.7666 26.9887 14.7505 26.9079 14.7109C26.8271 14.6713 26.759 14.6097 26.7116 14.5332C26.6641 14.4567 26.6391 14.3684 26.6395 14.2784V12.8634H15.1349V14.2803ZM27.5982 18.6154H14.1762C13.922 18.6154 13.6781 18.7164 13.4983 18.8962C13.3185 19.076 13.2175 19.3198 13.2175 19.5741V32.9953C13.2175 33.2496 13.3185 33.4934 13.4983 33.6732C13.6781 33.853 13.922 33.954 14.1762 33.954H27.5982C27.8525 33.954 28.0963 33.853 28.2761 33.6732C28.4559 33.4934 28.5569 33.2496 28.5569 32.9953V19.5741C28.5569 19.3198 28.4559 19.076 28.2761 18.8962C28.0963 18.7164 27.8525 18.6154 27.5982 18.6154ZM14.1762 16.6981C13.4134 16.6981 12.6819 17.0011 12.1425 17.5404C11.6031 18.0798 11.3001 18.8113 11.3001 19.5741V32.9953C11.3001 33.7581 11.6031 34.4896 12.1425 35.0289C12.6819 35.5683 13.4134 35.8713 14.1762 35.8713H27.5982C28.361 35.8713 29.0926 35.5683 29.632 35.0289C30.1713 34.4896 30.4744 33.7581 30.4744 32.9953V19.5741C30.4744 18.8113 30.1713 18.0798 29.632 17.5404C29.0926 17.0011 28.361 16.6981 27.5982 16.6981H14.1762ZM37.6436 20.5327H36.2267V32.0367H37.6436C37.7332 32.0369 37.8208 32.0622 37.8967 32.1097C37.9726 32.1573 38.0336 32.2251 38.0729 32.3055C38.1122 32.3859 38.1282 32.4757 38.1191 32.5648C38.11 32.6538 38.0762 32.7385 38.0214 32.8093L35.6457 35.8636C35.6008 35.921 35.5435 35.9674 35.4781 35.9993C35.4126 36.0313 35.3408 36.0479 35.2679 36.0479C35.1951 36.0479 35.1233 36.0313 35.0578 35.9993C34.9924 35.9674 34.935 35.921 34.8902 35.8636L32.5126 32.8093C32.4577 32.7384 32.4238 32.6535 32.4148 32.5643C32.4057 32.4751 32.4219 32.3851 32.4615 32.3046C32.501 32.2241 32.5623 32.1564 32.6385 32.109C32.7146 32.0616 32.8026 32.0366 32.8922 32.0367H34.3092V20.5327H32.8922C32.8027 20.5325 32.7151 20.5072 32.6392 20.4596C32.5633 20.4121 32.5023 20.3443 32.463 20.2639C32.4236 20.1835 32.4076 20.0937 32.4167 20.0046C32.4259 19.9156 32.4597 19.8308 32.5145 19.76L34.8902 16.7058C34.935 16.6484 34.9924 16.602 35.0578 16.57C35.1233 16.5381 35.1951 16.5215 35.2679 16.5215C35.3408 16.5215 35.4126 16.5381 35.4781 16.57C35.5435 16.602 35.6008 16.6484 35.6457 16.7058L38.0233 19.76C38.0782 19.831 38.1121 19.9159 38.1211 20.0051C38.1301 20.0943 38.114 20.1843 38.0744 20.2648C38.0349 20.3453 37.9735 20.413 37.8974 20.4604C37.8212 20.5078 37.7333 20.5328 37.6436 20.5327Z" fill="white"/>
+    <path d="M29.2158 18.0381H13.2158V34.0381H29.2158V18.0381Z" fill="white"/>
+    <defs>
+      <linearGradient id="paint0_linear_892_4224" x1="48.3838" y1="22.5483" x2="0.86377" y2="22.5483" gradientUnits="userSpaceOnUse">
+        <stop stopColor="#659667"/>
+        <stop offset="1" stopColor="#81C784"/>
+      </linearGradient>
+    </defs>
+  </svg>
+);
 
 const TableCreationPopup = ({ onClose, onCreateTable }) => {
   const [tableName, setTableName] = useState('');
@@ -43,11 +85,11 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
   const getTableTypeIcon = () => {
     switch(tableType) {
       case 'stage':
-        return <FaDatabase color="#fa8c16" />;
+        return <CustomDatabaseIcon width="20" height="20" />;
       case 'fact':
-        return <HiOutlineDocumentReport color="#1890ff" />;
+        return <CustomDocumentIcon width="20" height="20" />;
       case 'dimension':
-        return <FaBuilding color="#52c41a" />;
+        return <CustomDimensionIcon width="20" height="20" />;
       default:
         return <FaTable />;
     }
@@ -139,7 +181,7 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
                   onChange={() => setTableType('stage')}
                   style={{ margin: 0 }}
                 />
-                <FaDatabase color="#fa8c16" />
+                <CustomDatabaseIcon width="20" height="20" />
                 Stage
               </label>
               
@@ -162,7 +204,7 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
                   onChange={() => setTableType('fact')}
                   style={{ margin: 0 }}
                 />
-                <HiOutlineDocumentReport color="#1890ff" />
+                <CustomDocumentIcon width="20" height="20" />
                 Fact
               </label>
               
@@ -185,7 +227,7 @@ const TableCreationPopup = ({ onClose, onCreateTable }) => {
                   onChange={() => setTableType('dimension')}
                   style={{ margin: 0 }}
                 />
-                <FaBuilding color="#52c41a" />
+                <CustomDimensionIcon width="20" height="20" />
                 Dimension
               </label>
             </div>