@flozy/editor 5.3.9 → 5.4.0

package/dist/Editor/common/ColorPickerButton.js

@@ -2,9 +2,61 @@ import React, { useMemo, useState } from "react";
 import { Grid, Button, Popover } from "@mui/material";
 import ColorPickerTool from "react-gcolor-picker";
 import { colors } from "../Elements/Color Picker/defaultColors";
+import SwipeableDrawerComponent from "./SwipeableDrawer";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
+const ColorPickerToolComponent = ({
+  value,
+  defaultColors = [],
+  onSave = () => {},
+  recentColors = [],
+  hideGradient,
+  handleClose
+}) => {
+  const [color, setColor] = useState(value);
+  const handleSave = () => {
+    onSave(color);
+    handleClose();
+  };
+  const handleColorChange = color => {
+    setColor(color);
+  };
+  const initialColors = useMemo(() => {
+    let colors = [...recentColors, ...defaultColors];
+    if (hideGradient) {
+      colors = colors.filter(c => c && !c.includes("gradient"));
+    }
+    return colors;
+  }, [recentColors, defaultColors, hideGradient]);
+  return /*#__PURE__*/_jsxs(Grid, {
+    item: true,
+    xs: 12,
+    children: [/*#__PURE__*/_jsx("div", {
+      children: /*#__PURE__*/_jsx(ColorPickerTool, {
+        gradient: hideGradient ? false : true,
+        value: color,
+        onChange: handleColorChange,
+        defaultColors: initialColors
+      })
+    }), /*#__PURE__*/_jsxs("div", {
+      style: {
+        display: "flex",
+        justifyContent: "end",
+        margin: "8px"
+      },
+      children: [/*#__PURE__*/_jsx(Button, {
+        onClick: handleClose,
+        className: "secondaryBtn",
+        children: "Cancel"
+      }), /*#__PURE__*/_jsx(Button, {
+        onClick: handleSave,
+        className: "primaryBtn",
+        children: "Save"
+      })]
+    })]
+  });
+};
 const ColorPickerButton = props => {
   const {
     value,
@@ -15,39 +67,46 @@ const ColorPickerButton = props => {
     hideGradient
   } = props;
   const [anchorEl, setAnchorEl] = useState(null);
-  const [color, setColor] = useState(value);
   const open = Boolean(anchorEl);
+  const isMobile = window.matchMedia("(max-width: 899px)")?.matches || false;
   const handleColorPicker = e => {
     setAnchorEl(e.currentTarget);
   };
-  const handleSave = () => {
-    onSave(color);
-    handleClose();
-  };
   const handleClose = () => {
     setAnchorEl(null);
   };
-  const handleColorChange = color => {
-    setColor(color);
-  };
-  const initialColors = useMemo(() => {
-    let colors = [...recentColors, ...defaultColors];
-    if (hideGradient) {
-      colors = colors.filter(c => c && !c.includes("gradient"));
-    }
-    return colors;
-  }, [recentColors, defaultColors, hideGradient]);
   return /*#__PURE__*/_jsxs(_Fragment, {
     children: [/*#__PURE__*/_jsx(Button, {
       style: {
         background: value,
         height: "22px",
         minWidth: "22px",
-        borderRadius: "26px",
-        border: "2px solid #E7E7E7"
+        borderRadius: "26px"
       },
-      onClick: handleColorPicker
-    }), /*#__PURE__*/_jsx(Popover, {
+      onClick: handleColorPicker,
+      className: "colorPickerButton",
+      sx: {
+        ...classes.colorPickerBtnBorder
+      }
+    }), isMobile ? /*#__PURE__*/_jsx(SwipeableDrawerComponent, {
+      open: open,
+      onClose: handleClose,
+      swipeableDrawer: false,
+      children: /*#__PURE__*/_jsx(Grid, {
+        container: true,
+        padding: 0,
+        className: "ed-cp-wrpr",
+        sx: classes.colorPickerPopup,
+        children: /*#__PURE__*/_jsx(ColorPickerToolComponent, {
+          value: value,
+          defaultColors: defaultColors,
+          onSave: onSave,
+          recentColors: recentColors,
+          hideGradient: hideGradient,
+          handleClose: handleClose
+        })
+      })
+    }) : /*#__PURE__*/_jsx(Popover, {
       open: open,
       anchorEl: anchorEl,
       anchorOrigin: {
@@ -64,32 +123,13 @@ const ColorPickerButton = props => {
         container: true,
         padding: 0,
         className: "ed-cp-wrpr",
-        children: /*#__PURE__*/_jsxs(Grid, {
-          item: true,
-          xs: 12,
-          children: [/*#__PURE__*/_jsx("div", {
-            children: /*#__PURE__*/_jsx(ColorPickerTool, {
-              gradient: hideGradient ? false : true,
-              value: color,
-              onChange: handleColorChange,
-              defaultColors: initialColors
-            })
-          }), /*#__PURE__*/_jsxs("div", {
-            style: {
-              display: "flex",
-              justifyContent: "end",
-              margin: "8px"
-            },
-            children: [/*#__PURE__*/_jsx(Button, {
-              onClick: handleClose,
-              className: "secondaryBtn",
-              children: "Cancel"
-            }), /*#__PURE__*/_jsx(Button, {
-              onClick: handleSave,
-              className: "primaryBtn",
-              children: "Save"
-            })]
-          })]
+        children: /*#__PURE__*/_jsx(ColorPickerToolComponent, {
+          value: value,
+          defaultColors: defaultColors,
+          onSave: onSave,
+          recentColors: recentColors,
+          hideGradient: hideGradient,
+          handleClose: handleClose
         })
       })
     })]

package/dist/Editor/common/DnD/Draggable.js

@@ -2,6 +2,7 @@ import React, { useEffect } from "react";
 import { useDraggable } from "@dnd-kit/core";
 import { Box } from "@mui/material";
 import DragIndicatorIcon from "@mui/icons-material/DragIndicator";
+import { SectionDragIcon } from "../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 const Draggable = props => {
   const {
@@ -35,7 +36,7 @@ const Draggable = props => {
     contentEditable: false,
     style: dragStyle,
     sx: classes.dragHandle,
-    children: /*#__PURE__*/_jsx(DragIndicatorIcon, {})
+    children: /*#__PURE__*/_jsx(SectionDragIcon, {})
   });
 };
 export default Draggable;

package/dist/Editor/common/FontLoader/FontLoader.js

@@ -41,9 +41,9 @@ const FontLoader = props => {
             // Retry loading the same batch
             loadNextBatch();
           } else {
-            console.log(
-              // `Max retries reached for batch: ${batch}. Moving to the next batch.`
-            );
+            // console.log(
+            //   `Max retries reached for batch: ${batch}. Moving to the next batch.`
+            // );
             currentIndex += batchSize;
             retryCount = 0; // Reset retry count for the next batch
             loadNextBatch();
@@ -67,7 +67,7 @@ const FontLoader = props => {
         });
         loadFontsInBatches(families);
       }).catch(err => {
-        console.log(err);
+        // console.log(err);
       });
     } else {
       function correctFontArray(fontString) {

package/dist/Editor/common/Icon.js

@@ -1,18 +1,19 @@
 import React from "react";
-import { MdFormatQuote, MdFormatAlignLeft, MdFormatAlignCenter, MdFormatAlignRight, MdAdd, MdArrowForward, MdOutlinePermMedia, MdFormatAlignJustify } from "react-icons/md";
-import { BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft, BsCodeSlash } from "react-icons/bs";
+import { MdFormatQuote, MdAdd, MdArrowForward, MdOutlinePermMedia } from "react-icons/md";
+import { BsCameraVideoFill, BsArrowBarRight, BsArrowBarLeft } from "react-icons/bs";
 import { FaSuperscript, FaSubscript } from "react-icons/fa";
 import { FcAddRow, FcAddColumn } from "react-icons/fc";
 import { AiFillEdit, AiOutlineInsertRowBelow, AiOutlineInsertRowRight, AiOutlineDelete, AiFillTag, AiOutlineUpload, AiOutlineArrowsAlt, AiOutlineInsertRowAbove, AiOutlineInsertRowLeft, AiFillHtml5 } from "react-icons/ai";
 import { SiLatex } from "react-icons/si";
 import { RiDeleteColumn, RiDeleteRow } from "react-icons/ri";
-import { CiGrid32 } from "react-icons/ci";
-import { FontFamilyIcon, FontSizeIcon, StrikethroughIcon, AppHeader, MoreHorizontal, UploadImage, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, CloseIcon, SearchIcon, ExpandIcon, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
+import { FontFamilyIcon, FontSizeIcon, StrikethroughIcon, MoreHorizontal, UploadImage, LeftArrow, RightArrow, CheckListButton, CheckListButtonActive, ExcelIcon, CsvIcon, CloseIcon, SearchIcon, ExpandIcon, Text, TextAreaIcon, Phone, BriefCase, Bank, CalendarTick, DollarSquare, Checkbox, Description, RadioButtonIcon, CheckedIcon, UncheckedIcon, InfinityIcon, ResetIcon } from "./iconslist";
 import ArrowRightIcon from "@mui/icons-material/ArrowRight";
 import ArrowDropDownIcon from "@mui/icons-material/ArrowDropDown";
 import EmailRoundedIcon from "@mui/icons-material/EmailRounded";
 import InfoOutlinedIcon from "@mui/icons-material/InfoOutlined";
-import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, H1, H2, H3, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon, CalendlyIcon } from "./iconListV2";
+import GridOnIcon from "@mui/icons-material/GridOn";
+import GppBadOutlinedIcon from "@mui/icons-material/GppBadOutlined";
+import { AccordionTextFormatIcon, BoldTextFormatIcon, BulletedListTextFormatIcon, ButtonElementIcon, CarouselElementIcon, CheckListTextFormatIcon, ColorBoxElementIcon, DividerElementIcon, DocUploadElementIcon, EmbedElementIcon, EmojiElementIcon, FormElementIcon, GridElementIcon, H1, H2, H3, ImageElementIcon, ItalicTextFormatIcon, LinkIconV2, OrderedListTextFormatIcon, SignatureElementIcon, TableElementIcon, TopBannerElementIcon, UnderlineTextFormatIcon, VideoElementIcon, CalendlyIcon, LeftAlignTextFormat, CenterAlignTextFormat, RightAlignTextFormat, JustifyTextFormat, FreeGridElement, AppHeaderElement, CodeElementIcon } from "./iconListV2";
 import MoreVertRoundedIcon from "@mui/icons-material/MoreVertRounded";
 import SettingsIcon from "../assets/svg/SettingsIcon";
 import UndoIcon from "../assets/svg/UndoIcon";
@@ -22,7 +23,7 @@ import AddElementIcon from "../assets/svg/AddElementIcon";
 import AddTemplateIcon from "../assets/svg/AddTemplateIcon";
 import OpenLinkIcon from "../assets/svg/OpenLinkIcon";
 import EditIcon from "@mui/icons-material/Edit";
-import DeleteIcon from '@mui/icons-material/Delete';
+import DeleteIcon from "@mui/icons-material/Delete";
 import { BrainIcon } from "../assets/svg/BrainIcon";
 import DocsIcon from "../assets/svg/DocsIcon";
 import UserIcon from "../assets/svg/UserIcon";
@@ -62,7 +63,8 @@ const iconList = {
   }),
   blockquote: /*#__PURE__*/_jsx(MdFormatQuote, {
     size: 20,
-    fill: "#64748B"
+    fill: "#64748B",
+    className: "blockQuoteSvg"
   }),
   doublequote: /*#__PURE__*/_jsx(MdFormatQuote, {
     size: 20,
@@ -76,19 +78,19 @@ const iconList = {
     size: 15,
     fill: "#64748B"
   }),
-  alignLeft: /*#__PURE__*/_jsx(MdFormatAlignLeft, {
+  alignLeft: /*#__PURE__*/_jsx(LeftAlignTextFormat, {
     size: 18,
     fill: "#64748B"
   }),
-  alignCenter: /*#__PURE__*/_jsx(MdFormatAlignCenter, {
+  alignCenter: /*#__PURE__*/_jsx(CenterAlignTextFormat, {
     size: 18,
     fill: "#64748B"
   }),
-  alignRight: /*#__PURE__*/_jsx(MdFormatAlignRight, {
+  alignRight: /*#__PURE__*/_jsx(RightAlignTextFormat, {
     size: 18,
     fill: "#64748B"
   }),
-  alignJustify: /*#__PURE__*/_jsx(MdFormatAlignJustify, {
+  alignJustify: /*#__PURE__*/_jsx(JustifyTextFormat, {
     size: 18,
     fill: "#64748B"
   }),
@@ -202,7 +204,7 @@ const iconList = {
   accordionArrowDown: /*#__PURE__*/_jsx(ArrowDropDownIcon, {
     size: 20
   }),
-  appHeader: /*#__PURE__*/_jsx(AppHeader, {}),
+  appHeader: /*#__PURE__*/_jsx(AppHeaderElement, {}),
   moreHorizantal: /*#__PURE__*/_jsx(MoreHorizontal, {}),
   docsUpload: /*#__PURE__*/_jsx(DocUploadElementIcon, {}),
   colorbox: /*#__PURE__*/_jsx(ColorBoxElementIcon, {
@@ -222,19 +224,14 @@ const iconList = {
   SearchIcon: /*#__PURE__*/_jsx(SearchIcon, {}),
   expandIcon: /*#__PURE__*/_jsx(ExpandIcon, {}),
   closeIcon: /*#__PURE__*/_jsx(CloseIcon, {}),
-  embedScript: /*#__PURE__*/_jsx(BsCodeSlash, {
+  embedScript: /*#__PURE__*/_jsx(CodeElementIcon, {
     className: "fg-op-ico",
     size: 20,
     style: {
       fill: "#64748B"
     }
   }),
-  freegrid: /*#__PURE__*/_jsx(CiGrid32, {
-    size: 20,
-    style: {
-      fill: "#64748B"
-    }
-  }),
+  freegrid: /*#__PURE__*/_jsx(FreeGridElement, {}),
   text: /*#__PURE__*/_jsx(Text, {
     stroke: "#64748B"
   }),
@@ -275,11 +272,17 @@ const iconList = {
   addElement: /*#__PURE__*/_jsx(AddElementIcon, {}),
   addTemplate: /*#__PURE__*/_jsx(AddTemplateIcon, {}),
   openLinkIcon: /*#__PURE__*/_jsx(OpenLinkIcon, {}),
+  dataView: /*#__PURE__*/_jsx(GridOnIcon, {
+    sx: {
+      fill: "#64748B"
+    }
+  }),
   editIcon: /*#__PURE__*/_jsx(EditIcon, {}),
   deleteIcon: /*#__PURE__*/_jsx(DeleteIcon, {}),
   brain: /*#__PURE__*/_jsx(BrainIcon, {}),
   docsIcon: /*#__PURE__*/_jsx(DocsIcon, {}),
-  userIcon: /*#__PURE__*/_jsx(UserIcon, {})
+  userIcon: /*#__PURE__*/_jsx(UserIcon, {}),
+  shieldNoAccess: /*#__PURE__*/_jsx(GppBadOutlinedIcon, {})
 };
 export const icons = {
   ...iconList

package/dist/Editor/common/ImageSelector/Options/Upload.js

@@ -18,7 +18,8 @@ const Upload = props => {
     item: true,
     xs: 12,
     sx: {
-      padding: 0
+      padding: 0,
+      height: '100%'
     },
     className: "ims-right",
     children: /*#__PURE__*/_jsx(Uploader, {

package/dist/Editor/common/ImageSelector/Styles.js

@@ -58,11 +58,32 @@ const ImageSelectorStyles = theme => ({
       borderRadius: "12px",
       backgroundColor: theme?.palette?.editor?.background
     },
+    "& .MuiDialogTitle-root": {
+      fontSize: "16px",
+      fontWeight: "700",
+      "& button": {
+        "& svg": {
+          "& rect": {
+            fill: theme?.palette?.editor?.closeButtonBgColor
+          },
+          "& path": {
+            stroke: theme?.palette?.editor?.closeButtonSvgStroke
+          }
+        }
+      }
+    },
+    "& .MuiDivider-root": {
+      background: theme?.palette?.editor?.deviderBgColor,
+      "@media only screen and (min-width: 899px)": {
+        margin: "0px 24px",
+        width: 'calc(100% - 48px)'
+      }
+    },
     "& .primaryBtn": {
       background: "#2563eb !important",
       boxShadow: "0px 8px 24px rgba(30, 64, 175, 0.08)",
       borderRadius: "8px !important",
-      height: "28px !important",
+      height: "32px !important",
       fontWeight: "600 !important",
       fontSize: "12px !important",
       color: "#ffffff !important",
@@ -71,23 +92,43 @@ const ImageSelectorStyles = theme => ({
       marginLeft: "0px !important"
     },
     "& .secondaryBtn": {
-      background: "#ffffff !important",
+      background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
       boxShadow: "0px 8px 24px rgba(30, 64, 175, 0.08)",
       borderRadius: "8px !important",
-      height: "28px !important",
+      height: "32px !important",
       fontWeight: "600 !important",
       fontSize: "12px !important",
-      color: "#2563eb !important",
-      border: "1px solid #2563eb !important",
+      color: `${theme?.palette?.editor?.deletePopUpButtonTextColor} !important`,
+      border: `1px solid ${theme?.palette?.editor?.closeButtonBorder} !important`,
       width: "auto !important",
       marginRight: "8px !important"
+    },
+    "& .MuiGrid-root": {
+      "&::-webkit-scrollbar-thumb": {
+        background: `none !important`
+      },
+      "&::-webkit-scrollbar-track": {
+        visibility: "hidden"
+      },
+      "&::-webkit-scrollbar-thumb": {
+        background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+      },
+      "&::-webkit-scrollbar-track": {
+        visibility: "hidden"
+      }
+    },
+    "& .MuiImageList-root": {
+      margin: '0px'
+    },
+    "& .MuiDialogContent-root": {
+      padding: '20px 24px 5px 24px'
     }
   },
   titleTypo: {
     fontSize: "16px",
     fontWeight: 500,
     color: theme?.palette?.editor?.textColor,
-    fontFamily: 'Inter, sans-serif'
+    fontFamily: "Inter, sans-serif"
   },
   addLinkField: {
     "& .MuiOutlinedInput-input": {

package/dist/Editor/common/ImageSelector/UploadStyles.js

@@ -1,26 +1,38 @@
 const UploadStyles = theme => ({
   uploadContainer: {
-    border: "1px solid #2563EB",
+    border: `1px solid ${theme?.palette?.editor?.uploadFileBorder}`,
     padding: "10px",
-    borderRadius: "7px",
-    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)"
+    borderRadius: "11px",
+    boxShadow: "0px 4px 10px rgba(0, 0, 0, 0.16)",
+    background: theme?.palette?.editor?.uploadFileBg,
+    height: '100%',
+    minHeight: '150px'
   },
   uploadField: {
     width: "100%",
     backgroundSize: "100% auto",
     backgroundRepeat: "no-repeat",
     backgroundPosition: "center",
-    height: "250px",
+    height: "auto",
     position: "relative",
-    backgroundColor: theme?.palette?.editor?.background,
+    backgroundColor: theme?.palette?.editor?.uploadFileInnerBg,
     borderRadius: "9px",
-    border: "1px dashed #2563EB"
+    border: "1px dashed #2563EB",
+    minHeight: '150px'
   },
   uploadIcon: {
+    display: "grid !important",
     "& svg": {
+      display: 'flex',
+      width: '100%',
       "& path": {
         stroke: "#2563EB"
       }
+    },
+    '& span': {
+      display: 'flex',
+      width: '100%',
+      marginTop: '5px'
     }
   }
 });

package/dist/Editor/common/LinkSettings/NavComponents.js

@@ -1,6 +1,7 @@
-import { Autocomplete, Checkbox, FormControlLabel, MenuItem, Select, TextField, Typography, createFilterOptions } from "@mui/material";
+import { Autocomplete, Checkbox, FormControlLabel, MenuItem, TextField, Typography, createFilterOptions } from "@mui/material";
 import { useEffect, useMemo, useState } from "react";
 import { useSlate } from "slate-react";
+import Select from "../Select";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";

package/dist/Editor/common/LinkSettings/index.js

@@ -5,13 +5,14 @@ import DialogContent from "@mui/material/DialogContent";
 import DialogActions from "@mui/material/DialogActions";
 import IconButton from "@mui/material/IconButton";
 import CloseIcon from "@mui/icons-material/Close";
-import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Select, Typography } from "@mui/material";
+import { Box, FormControl, FormControlLabel, Grid, MenuItem, Radio, RadioGroup, Typography } from "@mui/material";
 import { useState } from "react";
 import LinkSettingsStyles from "./style";
 import { getNavOptions } from "./navOptions";
 import { ScrollTopBottom, SelectPage, TextInput, Trigger } from "./NavComponents";
 import SwipeableDrawer from "../SwipeableDrawer";
 import { useEditorContext } from "../../hooks/useMouseMove";
+import Select from "../Select";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";

package/dist/Editor/common/MentionsPopup/Styles.js

@@ -3,9 +3,41 @@ const usePopupStyles = theme => ({
     position: "absolute",
     zIndex: 1300,
     borderRadius: "10px",
-    padding: "0px",
+    // padding: "0px",
     boxShadow: "0px 4px 10px 0px #00000029",
-    overflow: "hidden"
+    overflow: "hidden",
+    // padding: "8px 0px !important",
+    background: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+    "& .MuiPaper-root": {
+      background: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+      "& .MuiBox-root": {
+        "& .renderComp": {
+          padding: "2px 0px 2px 1px",
+          background: "transparent !important",
+          "&:hover": {
+            borderRadius: "10px",
+            background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
+          }
+        },
+        "& button": {
+          padding: "0px 0px 0px 4px !important",
+          "& svg": {
+            width: "21px !important",
+            margin: "5px 12px 6px 4px !important"
+          },
+          "&:hover": {
+            borderRadius: "10px",
+            background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
+          }
+        },
+        "&:hover": {
+          "& .MuiPaper-root": {
+            background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`,
+            borderRadius: "7px"
+          }
+        }
+      }
+    }
   },
   papper: {
     boxShadow: "none",
@@ -21,6 +53,111 @@ const usePopupStyles = theme => ({
     },
     "& button": {
       color: theme?.palette?.editor?.textColor
+    },
+    "@media only screen and (min-width: 899px)": {
+      maxHeight: "400px"
+    },
+    "&  .orderedListIcon, .bulletedListTextIcon, .checkedListTextIcon, .accordianIconSvgTextFormat": {
+      width: "20px !important"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      background: `none !important`
+    },
+    "&::-webkit-scrollbar-track": {
+      visibility: "hidden"
+    },
+    "&::-webkit-scrollbar-thumb": {
+      background: `${theme?.palette?.editor?.brainPopupScroll} !important`
+    },
+    "&::-webkit-scrollbar-track": {
+      visibility: "hidden"
+    },
+    "& svg": {
+      width: "20px",
+      height: "20px"
+    },
+    "& .signatureElementIcon": {
+      "& path": {
+        fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+      }
+    },
+    "& .commonSvgStyle": {
+      "& path": {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+      }
+    },
+    "& .commonSvgStyle2": {
+      "& path": {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+      }
+    },
+    "& .colorBoxElementIcon": {
+      "& path": {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
+        fill: "none"
+      }
+    },
+    "& .gridElementIcon": {
+      "& path": {
+        stroke: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+      }
+    },
+    "& .newLineElementIcon": {
+      "& path": {
+        fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+      }
+    },
+    "& .orderedListIcon": {
+      "& .strokePathList": {
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke
+      },
+      "& .fillPathList": {
+        fill: theme?.palette?.editor?.closeButtonSvgStroke
+      }
+    },
+    "& .bulletedListTextIcon": {
+      "& path": {
+        fill: theme?.palette?.editor?.closeButtonSvgStroke,
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke
+      },
+      "& circle": {
+        fill: theme?.palette?.editor?.closeButtonSvgStroke
+      }
+    },
+    "& .checkedListTextIcon": {
+      "& path": {
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke
+      }
+    },
+    "& .accordianIconSvgTextFormat": {
+      "& path": {
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke
+      }
+    },
+    "& .blockQuoteSvg": {
+      fill: theme?.palette?.editor?.closeButtonSvgStroke,
+      stroke: theme?.palette?.editor?.closeButtonSvgStroke
+    },
+    "& .BrainIcon": {
+      "& .bainIconPathStroke": {
+        fill: theme?.palette?.editor?.closeButtonSvgStroke,
+        stroke: "unset !important"
+      },
+      "& .bainIconPathStroke2": {
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke,
+        fill: theme?.palette?.editor?.closeButtonSvgStroke
+      }
+    },
+    "& .calederIconSvg": {
+      '& rect': {
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke
+      },
+      '& .strokePath': {
+        stroke: theme?.palette?.editor?.closeButtonSvgStroke
+      },
+      '& .fillPath': {
+        fill: theme?.palette?.editor?.closeButtonSvgStroke
+      }
     }
   },
   groupHeader: {
@@ -28,7 +165,7 @@ const usePopupStyles = theme => ({
     marginBottom: "10px",
     fontSize: "14px",
     fontWeight: "bold",
-    borderBottom: "1px solid #DCE4EC"
+    borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor}`
   },
   listItem: {
     cursor: "pointer",
@@ -59,12 +196,9 @@ const usePopupStyles = theme => ({
         justifyContent: "start",
         "& svg": {
           margin: "5.5px",
-          width: "19px",
+          width: "24px",
           height: "24px"
         },
-        '& .MuiTypography-root ': {
-          padding: '0px 0px 0px 7px'
-        },
         span: {
           padding: "8px",
           fontSize: "14px",
@@ -79,7 +213,8 @@ const usePopupStyles = theme => ({
     margin: "8px",
     display: "flex",
     justifyContent: "center",
-    alignItems: "center"
+    alignItems: "center",
+    color: "#64748B"
   }
 });
 export default usePopupStyles;