@flozy/editor 5.3.3 → 5.3.4

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/MentionsPopup/Styles.js

@@ -6,7 +6,7 @@ const usePopupStyles = theme => ({
     // padding: "0px",
     boxShadow: "0px 4px 10px 0px #00000029",
     overflow: "hidden",
-    padding: "8px 0px !important",
+    // padding: "8px 0px !important",
     background: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
     "& .MuiPaper-root": {
       background: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
@@ -22,129 +22,14 @@ const usePopupStyles = theme => ({
         "& button": {
           padding: "0px 0px 0px 4px !important",
           "& svg": {
-            width: "18px !important",
-            margin: "5px 12px 6px 6px !important"
+            width: "21px !important",
+            margin: "5px 12px 6px 4px !important"
           },
           "&:hover": {
             borderRadius: "10px",
             background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`
           }
         },
-        "& .active": {
-          border: "unset !important",
-          "& .MuiPaper-root": {
-            background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
-            borderRadius: "7px",
-            "& .MuiBox-root": {
-              "& .MuiCardContent-root": {
-                "& .MuiTypography-root": {
-                  color: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-                }
-              }
-            }
-          },
-          "& button": {
-            background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
-            borderRadius: "7px",
-            "& svg": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
-              }
-            },
-            "& span": {
-              "& .MuiTypography-root": {
-                color: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .BrainIcon": {
-              "& .bainIconPathStroke": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
-                stroke: "unset !important"
-              },
-              "& .bainIconPathStroke2": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            }
-          },
-          "& .MuiCardMedia-root": {
-            "& .signatureElementIcon": {
-              "& path": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .commonSvgStyle": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .calederIconSvg": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              },
-              "& rect": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .colorBoxElementIcon": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
-                fill: "none"
-              }
-            },
-            "& .gridElementIcon": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .newLineElementIcon": {
-              "& path": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .blockQuoteSvg": {
-              fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-            },
-            "& .orderedListIcon": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              },
-              "& text": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .bulletedListTextIcon": {
-              "& path": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              },
-              "& circle": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .checkedListTextIcon": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .accordianListTextIcon": {
-              // stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
-              "& svg": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              },
-              "& path": {
-                fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`,
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            },
-            "& .accordianIconSvgTextFormat": {
-              "& path": {
-                stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
-              }
-            }
-          }
-        },
         "&:hover": {
           "& .MuiPaper-root": {
             background: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`,
@@ -168,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: {

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

@@ -3,13 +3,13 @@ import { useTheme } from "@mui/material";
 import { Transforms } from "slate";
 import { ReactEditor, useSlateStatic } from "slate-react";
 import { Box, IconButton, Popper, Tooltip } from "@mui/material";
-import TuneIcon from "@mui/icons-material/Tune";
 import SectionPopup from "../../Elements/Grid/SectionPopup";
 import { getBreakPointsValue, getTRBLBreakPoints, groupByBreakpoint } from "../../helper/theme";
 import DragHandle from "../DnD/DragHandleButton";
 import { useEditorSelection } from "../../hooks/useMouseMove";
 import SectionStyle from "./styles";
 import useWindowResize from "../../hooks/useWindowResize";
+import { SectionSettingIcon } from "../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
@@ -72,13 +72,13 @@ const Section = props => {
         height: "100%"
       } : {
         left: "-28px",
-        top: "3px"
+        top: "1px"
       },
       children: /*#__PURE__*/_jsx(Tooltip, {
         title: "Section Settings",
         children: /*#__PURE__*/_jsx(IconButton, {
           onClick: onSettings,
-          children: /*#__PURE__*/_jsx(TuneIcon, {})
+          children: /*#__PURE__*/_jsx(SectionSettingIcon, {})
         })
       })
     }) : null;

package/dist/Editor/common/Section/styles.js

@@ -2,8 +2,12 @@ const SectionStyle = (themeReact, theme) => ({
   root: {
     "&:hover": {
       "& .dh-para": {
-        opacity: 1
+        opacity: 1,
+        background: 'transparent',
+        width: '30px'
+        // top: '2px'
       },
+
       "& .sectionIcon": {
         opacity: 1
       },

package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js

@@ -60,9 +60,10 @@ const BackgroundImage = props => {
         item: true,
         xs: 12,
         style: {
-          backgroundImage: base64 ? `url(${base64})` : "none",
-          height: "200px"
+          backgroundImage: base64 ? `url(${base64})` : "none"
+          // height: "200px",
         },
+
         sx: classes.uploadField,
         children: /*#__PURE__*/_jsx(Grid, {
           className: "uploadImageSection",
@@ -91,7 +92,7 @@ const BackgroundImage = props => {
                 style: {
                   paddingLeft: "8px"
                 },
-                children: "upload your image"
+                children: "Upload a image"
               })]
             })
           })

package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js

@@ -1,8 +1,9 @@
 import React, { useState } from "react";
-import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box } from "@mui/material";
+import { Checkbox, FormControlLabel, Grid, Slider, Typography, Box, IconButton } from "@mui/material";
 import { squreStyle } from "./radiusStyle";
 import { getBreakPointsValue } from "../../../helper/theme";
 import useWindowResize from "../../../hooks/useWindowResize";
+import { CheckedBoxCheckIcon } from "../../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BANNER_SPACING_KEYS = ["top", "left", "right", "bottom"];
@@ -81,7 +82,18 @@ const BannerSpacing = props => {
         onChange: handleChange
       }), /*#__PURE__*/_jsx(Box, {
         component: "input",
-        sx: classes.sapcingInput,
+        sx: {
+          ...classes.sapcingInput,
+          "::-webkit-outer-spin-button": {
+            WebkitAppearance: "none",
+            margin: 0
+          },
+          "::-webkit-inner-spin-button": {
+            WebkitAppearance: "none",
+            margin: 0
+          },
+          MozAppearance: "textfield"
+        },
         name: "top",
         value: !lockSpacing ? "" : pro_value?.top,
         className: "sliderInput",
@@ -92,10 +104,22 @@ const BannerSpacing = props => {
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
+      sx: {
+        ...classes.customCheckBox
+      },
       control: /*#__PURE__*/_jsx(Checkbox, {
         value: !lockSpacing,
         checked: !lockSpacing,
-        onChange: onLockSpacing
+        onChange: onLockSpacing,
+        variant: "outlined",
+        className: "checkBox",
+        checkedIcon: /*#__PURE__*/_jsx(IconButton, {
+          className: "checkedIcon",
+          children: /*#__PURE__*/_jsx(CheckedBoxCheckIcon, {})
+        }),
+        icon: /*#__PURE__*/_jsx(IconButton, {
+          className: "unCheckedIcon"
+        })
       }),
       label: /*#__PURE__*/_jsx(Typography, {
         variant: "body1",

package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js

@@ -1,8 +1,9 @@
 import React from "react";
-import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box } from "@mui/material";
+import { Grid, Typography, Slider, FormControlLabel, Checkbox, Box, IconButton } from "@mui/material";
 import { radiusStyle } from "./radiusStyle";
 import useWindowResize from "../../../hooks/useWindowResize";
 import { getBreakPointsValue, getCustomizationValue } from "../../../helper/theme";
+import { CheckedBoxCheckIcon } from "../../iconListV2";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const BORDER_RADIUS_KEYS = ["topLeft", "topRight", "bottomLeft", "bottomRight"];
@@ -90,10 +91,22 @@ const BorderRadius = props => {
       })]
     }), /*#__PURE__*/_jsx(FormControlLabel, {
       className: "ccheckbox-primary",
+      sx: {
+        ...classes.customCheckBox
+      },
       control: /*#__PURE__*/_jsx(Checkbox, {
         value: !lockRadius,
         checked: !lockRadius,
-        onChange: onLockRadius
+        onChange: onLockRadius,
+        variant: "outlined",
+        className: "checkBox",
+        checkedIcon: /*#__PURE__*/_jsx(IconButton, {
+          className: "checkedIcon",
+          children: /*#__PURE__*/_jsx(CheckedBoxCheckIcon, {})
+        }),
+        icon: /*#__PURE__*/_jsx(IconButton, {
+          className: "unCheckedIcon"
+        })
       }),
       label: /*#__PURE__*/_jsx(Typography, {
         variant: "body1",

package/dist/Editor/common/StyleBuilder/fieldTypes/color.js

@@ -16,6 +16,7 @@ const Color = props => {
     hideGradient
   } = data;
   const [recentColors, setRecentColors] = useState({});
+  const getLable = label === 'Text' ? 'Select text color' : label === 'Background' ? 'Select background color' : label;
   useEffect(() => {
     const storedColors = JSON.parse(localStorage.getItem("recentColors"));
     if (storedColors) {
@@ -73,7 +74,7 @@ const Color = props => {
     }), /*#__PURE__*/_jsx(TextField, {
       fullWidth: true,
       value: value,
-      placeholder: `${label} color code`,
+      placeholder: getLable || `${label} color code`,
       InputLabelProps: {
         shrink: true
       },

package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js

@@ -73,7 +73,7 @@ const FontSize = props => {
         size: "small",
         inputProps: {
           style: {
-            textAlign: "center",
+            // textAlign: "center", 
             padding: "11px"
           }
         },

package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js

@@ -91,12 +91,14 @@ const Icons = props => {
         overflowY: "auto",
         paddingTop: "5px"
       },
+      className: "muiIconsListParent",
       children: list.map(m => {
         return /*#__PURE__*/_jsx(Tooltip, {
           title: m,
           arrow: true,
           children: /*#__PURE__*/_jsx(IconButton, {
             onClick: onSelectIcon(m),
+            className: "muiIconsList",
             children: /*#__PURE__*/_jsx(MUIIcon, {
               iconName: m,
               props: customProps

package/dist/Editor/common/StyleBuilder/fieldTypes/radiusStyle.js

@@ -53,7 +53,7 @@ export const radiusStyle = {
 export const squreStyle = {
   topLeft: {
     position: "absolute",
-    left: "-35px",
+    left: "-37px",
     top: "50%",
     transform: "translateY(-50%)",
     width: "30px",
@@ -71,7 +71,7 @@ export const squreStyle = {
     // top: "-28px",
     left: "50%",
     transform: "translateX(-50%)",
-    top: "-35px",
+    top: "-37px",
     width: "30px",
     height: "30px",
     // borderTop: `2px solid #2563eb`,
@@ -85,7 +85,7 @@ export const squreStyle = {
     // left: "-25px",
     top: "50%",
     transform: "translateY(-50%)",
-    right: "-35px",
+    right: "-37px",
     width: "30px",
     height: "30px",
     // borderBottom: `2px solid #2563eb`,
@@ -96,7 +96,7 @@ export const squreStyle = {
   },
   bottomRight: {
     position: "absolute",
-    bottom: "-35px",
+    bottom: "-37px",
     // right: "-25px",
     left: "50%",
     transform: "translateX(-50%)",