From e1db39ffc872624de84f086ffa719e82ba817f8b Mon Sep 17 00:00:00 2001
From: "M. Palanikannan" <73993394+Palanikannan1437@users.noreply.github.com>
Date: Wed, 6 Mar 2024 14:29:52 +0530
Subject: [PATCH] [WEB-566] feat: Added text to empty color picker boxes and
 other fixes (#3867)

* fix: z index issues with modals and on hover color in table item picker menu

* feat: added text indicators inside the table colors to give a gist of how text would look
---
 packages/editor/core/src/styles/table.css                  | 6 +++---
 .../core/src/ui/extensions/table/table/table-view.tsx      | 7 ++++---
 2 files changed, 7 insertions(+), 6 deletions(-)

diff --git a/packages/editor/core/src/styles/table.css b/packages/editor/core/src/styles/table.css
index ca384d34f..3ba17ee1b 100644
--- a/packages/editor/core/src/styles/table.css
+++ b/packages/editor/core/src/styles/table.css
@@ -98,7 +98,7 @@
   top: 0;
   bottom: -2px;
   width: 4px;
-  z-index: 99;
+  z-index: 5;
   background-color: #d9e4ff;
   pointer-events: none;
 }
@@ -111,7 +111,7 @@
 .tableWrapper .tableControls .rowsControl {
   transition: opacity ease-in 100ms;
   position: absolute;
-  z-index: 99;
+  z-index: 5;
   display: flex;
   justify-content: center;
   align-items: center;
@@ -198,7 +198,7 @@
 
 .tableWrapper .tableControls .tableToolbox .toolboxItem:hover,
 .tableWrapper .tableControls .tableColorPickerToolbox .toolboxItem:hover {
-  background-color: rgba(var(--color-background-100), 0.5);
+  background-color: rgba(var(--color-background-80), 0.6);
 }
 
 .tableWrapper .tableControls .tableToolbox .toolboxItem .iconContainer,
diff --git a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
index 674a8e115..2941179c7 100644
--- a/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
+++ b/packages/editor/core/src/ui/extensions/table/table/table-view.tsx
@@ -213,10 +213,11 @@ function createToolbox({
               { className: "colorPicker grid" },
               Object.entries(colors).map(([colorName, colorValue]) =>
                 h("div", {
-                  className: "colorPickerItem",
+                  className: "colorPickerItem flex items-center justify-center",
                   style: `background-color: ${colorValue.backgroundColor}; 
-                            color: ${colorValue.textColor || "inherit"};`,
-                  innerHTML: colorValue?.icon || "",
+          color: ${colorValue.textColor || "inherit"};`,
+                  innerHTML:
+                    colorValue.icon ?? `<span class="text-md" style:"color: ${colorValue.backgroundColor}>A</span>`,
                   onClick: () => onSelectColor(colorValue),
                 })
               )