[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

@@ -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,

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),
                 })
               )