refresh table menus

apps/client/src/features/editor/components/table/table-background-color.tsx

@@ -95,7 +95,8 @@ export const TableBackgroundColor: FC<TableBackgroundColorProps> = ({
       <Popover.Target>
         <Tooltip label={t("Background color")} withArrow>
           <ActionIcon
-            variant="default"
+            variant="subtle"
+            c="dark"
             size="lg"
             aria-label={t("Background color")}
             onClick={() => setOpened(!opened)}

apps/client/src/features/editor/components/table/table-cell-menu.tsx

@@ -16,6 +16,7 @@ import { useTranslation } from "react-i18next";
 import { TableBackgroundColor } from "./table-background-color";
 import { TableTextAlignment } from "./table-text-alignment";
 import { BubbleMenu } from "@tiptap/react/menus";
+import classes from "../common/toolbar-menu.module.css";
 
 export const TableCellMenu = React.memo(
   ({ editor, appendTo }: EditorMenuProps): JSX.Element => {
@@ -69,14 +70,17 @@ export const TableCellMenu = React.memo(
         }}
         shouldShow={shouldShow}
       >
-        <ActionIcon.Group>
+        <div className={classes.toolbar}>
           <TableBackgroundColor editor={editor} />
           <TableTextAlignment editor={editor} />
 
+          <div className={classes.divider} />
+
           <Tooltip position="top" label={t("Merge cells")}>
             <ActionIcon
               onClick={mergeCells}
-              variant="default"
+              variant="subtle"
+              c="dark"
               size="lg"
               aria-label={t("Merge cells")}
             >
@@ -87,7 +91,8 @@ export const TableCellMenu = React.memo(
           <Tooltip position="top" label={t("Split cell")}>
             <ActionIcon
               onClick={splitCell}
-              variant="default"
+              variant="subtle"
+              c="dark"
               size="lg"
               aria-label={t("Split cell")}
             >
@@ -95,10 +100,13 @@ export const TableCellMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
+          <div className={classes.divider} />
+
           <Tooltip position="top" label={t("Delete column")}>
             <ActionIcon
               onClick={deleteColumn}
-              variant="default"
+              variant="subtle"
+              c="dark"
               size="lg"
               aria-label={t("Delete column")}
             >
@@ -109,7 +117,8 @@ export const TableCellMenu = React.memo(
           <Tooltip position="top" label={t("Delete row")}>
             <ActionIcon
               onClick={deleteRow}
-              variant="default"
+              variant="subtle"
+              c="dark"
               size="lg"
               aria-label={t("Delete row")}
             >
@@ -117,17 +126,20 @@ export const TableCellMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
+          <div className={classes.divider} />
+
           <Tooltip position="top" label={t("Toggle header cell")}>
             <ActionIcon
               onClick={toggleHeaderCell}
-              variant="default"
+              variant="subtle"
+              c="dark"
               size="lg"
               aria-label={t("Toggle header cell")}
             >
               <IconTableRow size={18} />
             </ActionIcon>
           </Tooltip>
-        </ActionIcon.Group>
+        </div>
       </BubbleMenu>
     );
   }

apps/client/src/features/editor/components/table/table-menu.tsx

@@ -20,6 +20,7 @@ import {
 import { BubbleMenu } from "@tiptap/react/menus";
 import { isCellSelection } from "@docmost/editor-ext";
 import { useTranslation } from "react-i18next";
+import classes from "../common/toolbar-menu.module.css";
 
 export const TableMenu = React.memo(
   ({ editor }: EditorMenuProps): JSX.Element => {
@@ -118,11 +119,12 @@ export const TableMenu = React.memo(
         }}
         shouldShow={shouldShow}
       >
-        <ActionIcon.Group>
+        <div className={classes.toolbar}>
           <Tooltip position="top" label={t("Add left column")}>
             <ActionIcon
               onClick={addColumnLeft}
-              variant="default"
+              variant="subtle"
+              c="dark"
               size="lg"
               aria-label={t("Add left column")}
             >
@@ -133,7 +135,8 @@ export const TableMenu = React.memo(
           <Tooltip position="top" label={t("Add right column")}>
             <ActionIcon
               onClick={addColumnRight}
-              variant="default"
+              variant="subtle"
+              c="dark"
               size="lg"
               aria-label={t("Add right column")}
             >
@@ -144,7 +147,8 @@ export const TableMenu = React.memo(
           <Tooltip position="top" label={t("Delete column")}>
             <ActionIcon
               onClick={deleteColumn}
-              variant="default"
+              variant="subtle"
+              c="dark"
               size="lg"
               aria-label={t("Delete column")}
             >
@@ -152,10 +156,13 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
+          <div className={classes.divider} />
+
           <Tooltip position="top" label={t("Add row above")}>
             <ActionIcon
               onClick={addRowAbove}
-              variant="default"
+              variant="subtle"
+              c="dark"
               size="lg"
               aria-label={t("Add row above")}
             >
@@ -166,7 +173,8 @@ export const TableMenu = React.memo(
           <Tooltip position="top" label={t("Add row below")}>
             <ActionIcon
               onClick={addRowBelow}
-              variant="default"
+              variant="subtle"
+              c="dark"
               size="lg"
               aria-label={t("Add row below")}
             >
@@ -177,7 +185,8 @@ export const TableMenu = React.memo(
           <Tooltip position="top" label={t("Delete row")}>
             <ActionIcon
               onClick={deleteRow}
-              variant="default"
+              variant="subtle"
+              c="dark"
               size="lg"
               aria-label={t("Delete row")}
             >
@@ -185,10 +194,13 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
+          <div className={classes.divider} />
+
           <Tooltip position="top" label={t("Toggle header row")}>
             <ActionIcon
               onClick={toggleHeaderRow}
-              variant="default"
+              variant="subtle"
+              c="dark"
               size="lg"
               aria-label={t("Toggle header row")}
             >
@@ -199,7 +211,8 @@ export const TableMenu = React.memo(
           <Tooltip position="top" label={t("Toggle header column")}>
             <ActionIcon
               onClick={toggleHeaderColumn}
-              variant="default"
+              variant="subtle"
+              c="dark"
               size="lg"
               aria-label={t("Toggle header column")}
             >
@@ -207,18 +220,20 @@ export const TableMenu = React.memo(
             </ActionIcon>
           </Tooltip>
 
+          <div className={classes.divider} />
+
           <Tooltip position="top" label={t("Delete table")}>
             <ActionIcon
               onClick={deleteTable}
-              variant="default"
+              variant="subtle"
+              c="dark"
               size="lg"
-              color="red"
               aria-label={t("Delete table")}
             >
               <IconTrashX size={18} />
             </ActionIcon>
           </Tooltip>
-        </ActionIcon.Group>
+        </div>
       </BubbleMenu>
     );
   }

apps/client/src/features/editor/components/table/table-text-alignment.tsx

@@ -88,7 +88,8 @@ export const TableTextAlignment: FC<TableTextAlignmentProps> = ({ editor }) => {
       <Popover.Target>
         <Tooltip label={t("Text alignment")} withArrow>
           <ActionIcon
-            variant="default"
+            variant="subtle"
+            c="dark"
             size="lg"
             aria-label={t("Text alignment")}
             onClick={() => setOpened(!opened)}