@flozy/editor 5.3.7 → 5.3.8

package/dist/Editor/Elements/Signature/SignaturePopup.js

@@ -1,6 +1,6 @@
 import React, { useState } from "react";
 import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab, InputAdornment, Box } from "@mui/material";
-import CloseRoundedIcon from "@mui/icons-material/CloseRounded";
+import CloseIcon from "@mui/icons-material/Close";
 import DatePicker from "react-datepicker";
 import "react-datepicker/dist/react-datepicker.css";
 import SignatureOptions from "./SignatureOptions";
@@ -147,7 +147,7 @@ const SignaturePopup = props => {
         style: {
           width: "fit-content"
         },
-        children: "Sign here"
+        children: "Sign Here"
       })]
     }), /*#__PURE__*/_jsx(Dialog, {
       className: `${className} dialogComp`,
@@ -158,7 +158,7 @@ const SignaturePopup = props => {
         sx: {
           borderRadius: "8px",
           boxShadow: "0px 4px 10px 0px #00000029",
-          maxWidth: "530px"
+          maxWidth: "560px"
         }
       },
       sx: classes.signaturePopup,
@@ -200,7 +200,7 @@ const SignaturePopup = props => {
                     children: /*#__PURE__*/_jsx(IconButton, {
                       onClick: handleClose,
                       className: "close-popupbtn",
-                      children: /*#__PURE__*/_jsx(CloseRoundedIcon, {})
+                      children: /*#__PURE__*/_jsx(CloseIcon, {})
                     })
                   })]
                 })
@@ -294,7 +294,7 @@ const SignaturePopup = props => {
                 },
                 children: [/*#__PURE__*/_jsx(Grid, {
                   sx: {
-                    minWidth: "49px"
+                    minWidth: "46px"
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedBy",
@@ -316,7 +316,25 @@ const SignaturePopup = props => {
                     defaultValue: defaultName || "",
                     size: "small",
                     onChange: onChange,
-                    sx: classes.signaturePopUpNameField
+                    sx: {
+                      "& .MuiOutlinedInput-root": {
+                        borderRadius: "10px",
+                        "& fieldset": {
+                          border: "1px solid #D8DDE1"
+                        }
+                        // '&:hover fieldset': {
+                        //   borderColor: 'yourHoverColor',
+                        // },
+                        // '&.Mui-focused fieldset': {
+                        //   borderColor: 'yourFocusedColor',
+                        // },
+                      },
+
+                      "& .MuiInputBase-input::placeholder": {
+                        fontFamily: '"Inter", sans-serif"',
+                        fontSize: "14px"
+                      }
+                    }
                   })
                 })]
               }), /*#__PURE__*/_jsxs(Grid, {
@@ -420,7 +438,7 @@ const SignaturePopup = props => {
                 xs: 12,
                 children: [/*#__PURE__*/_jsx(Grid, {
                   sx: {
-                    minWidth: "49px"
+                    minWidth: "46px"
                   },
                   children: /*#__PURE__*/_jsx("label", {
                     htmlFor: "signedByEmail",
@@ -441,7 +459,25 @@ const SignaturePopup = props => {
                     placeholder: "Enter Email",
                     size: "small",
                     onChange: onChange,
-                    sx: classes.signaturePopUpNameField,
+                    sx: {
+                      "& .MuiOutlinedInput-root": {
+                        borderRadius: "10px",
+                        "& fieldset": {
+                          border: "1px solid #D8DDE1"
+                        }
+                        // '&:hover fieldset': {
+                        //   borderColor: 'yourHoverColor',
+                        // },
+                        // '&.Mui-focused fieldset': {
+                        //   borderColor: 'yourFocusedColor',
+                        // },
+                      },
+
+                      "& .MuiInputBase-input::placeholder": {
+                        fontFamily: '"Inter", sans-serif"',
+                        fontSize: "14px"
+                      }
+                    },
                     defaultValue: defaultEmail || ""
                   })
                 })]
@@ -471,8 +507,7 @@ const SignaturePopup = props => {
                     classes: classes,
                     value: brush.color,
                     onSave: onBrushColor,
-                    recentColors: [],
-                    hideGradient: true
+                    recentColors: []
                   }), /*#__PURE__*/_jsx("span", {
                     style: {
                       marginLeft: "10px",
@@ -492,16 +527,16 @@ const SignaturePopup = props => {
                     return /*#__PURE__*/_jsx(IconButton, {
                       onClick: onBrushSize(m),
                       disableRipple: true,
-                      className: `${brush.size === m ? "activeBrush" : ""} brushIcon`,
+                      className: brush.size === m ? "activeBrush" : "",
                       children: /*#__PURE__*/_jsx("span", {
                         style: {
-                          width: 17 + m,
-                          height: 17 + m
+                          width: 20 + m,
+                          height: 20 + m
                         },
                         children: /*#__PURE__*/_jsx(PencilIcon, {
                           style: {
-                            width: 17 + m,
-                            height: 17 + m
+                            width: 20 + m,
+                            height: 20 + m
                           }
                         })
                       })
@@ -512,11 +547,11 @@ const SignaturePopup = props => {
             }) : null, /*#__PURE__*/_jsxs(_Fragment, {
               children: [!readOnly ? /*#__PURE__*/_jsx(Button, {
                 onClick: handleClear,
-                className: `secondaryBtn actionBtn deleteBtn deleteButtonSignature`,
+                className: "secondaryBtn actionBtn deleteBtn",
                 children: "Delete"
               }) : null, /*#__PURE__*/_jsx(Button, {
                 onClick: handleSave,
-                className: `primaryBtn actionBtn ${isEmpty ? "disabled disabledSaveBtn" : ""}`,
+                className: `primaryBtn actionBtn ${isEmpty ? "disabled" : ""}`,
                 disabled: isEmpty,
                 children: "Save"
               })]

package/dist/Editor/Elements/SimpleText/index.js

@@ -5,7 +5,6 @@ import { getPageSettings } from "../../utils/pageSettings";
 import { isTextSelected } from "../../utils/helper";
 import { useEditorContext } from "../../hooks/useMouseMove";
 import SimpleTextStyle from "./style";
-import { getBreakpointLineSpacing } from "../../helper/theme";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -33,14 +32,8 @@ const SimpleText = props => {
   const {
     pageColor
   } = pageSt?.pageProps || {};
-  const {
-    activeBreakPoint
-  } = useEditorContext();
-  const lineHeight = element?.children[0]?.lineHeight;
-  const lineH = getBreakpointLineSpacing(lineHeight, activeBreakPoint);
   const classes = SimpleTextStyle({
-    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF",
-    lineHeight: lineH
+    pageColor: pageColor || theme?.palette?.editor?.background || "#FFFFFF"
   });
   const selected = useSelected();
   const path = ReactEditor.findPath(editor, element);

package/dist/Editor/Elements/SimpleText/style.js

@@ -1,27 +1,10 @@
 import { invertColor } from "../../helper";
 const SimpleTextStyle = ({
-  pageColor,
-  lineHeight
+  pageColor
 }) => ({
   root: {
     position: "relative",
     padding: "0px",
-    lineHeight: lineHeight,
-    "&.dataView": {
-      "& .placeholder-simple-text": {
-        opacity: 0
-      }
-    },
-    "&.signature": {
-      "& .placeholder-simple-text": {
-        opacity: 0
-      }
-    },
-    "&.grid": {
-      "& .placeholder-simple-text": {
-        opacity: 0
-      }
-    },
     "& .placeholder-simple-text": {
       color: "#94A3B8",
       background: "transparent",
@@ -35,8 +18,6 @@ const SimpleTextStyle = ({
       height: "24px",
       overflow: "hidden",
       fontSize: "14px",
-      display: "inline-flex",
-      alignItems: "center",
       "& .bg-pad-sl": {
         padding: "2px 4px 2px 4px",
         background: "transparent",

package/dist/Editor/Elements/Table/Styles.js

@@ -1,91 +1,88 @@
-const TableStyles = theme => {
-  const {
-    background,
-    closeButtonSvgStroke,
-    activeColor,
-    signaturePopUpTabButtonSelectedBg,
-    signaturePopUpTabButtonSelectedSvg,
-    aiInputBackground,
-    buttonBorder1
-  } = theme?.palette?.editor || {};
-  return {
-    tableToolBar: {
-      position: "absolute",
-      top: "-24px",
-      left: 0,
-      transition: "all 0.3s",
-      "& button": {
-        backgroundColor: aiInputBackground,
-        border: `1px solid ${buttonBorder1}`,
-        boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
-        borderRadius: "50%",
-        padding: "4px",
-        margin: "2px",
-        "&:hover": {
-          backgroundColor: background
-        },
-        "& svg": {
-          width: "18px",
-          height: "18px",
-          "& path": {
-            stroke: closeButtonSvgStroke
-          }
-        },
-        "&.selected": {
-          outline: `1.5px solid ${activeColor || "#2563EB"}`,
-          background: signaturePopUpTabButtonSelectedBg,
-          border: "none",
-          "& svg": {
-            "& path": {
-              stroke: signaturePopUpTabButtonSelectedSvg
-            }
-          }
-        }
-      },
-      "&.active": {
-        width: "auto",
-        "& .toggle": {
-          rotate: "180deg"
-        }
-      },
-      "& .toolbtn": {
-        "& svg": {
-          stroke: "rgb(100, 116, 139)"
-        }
+const TableStyles = themeType => ({
+  tableToolBar: {
+    position: "absolute",
+    top: "-34px",
+    left: 0,
+    backgroundColor: "#FFF",
+    border: "1px solid rgba(37, 99, 235, 0.32)",
+    boxShadow: "0px 0px 10px 0px rgba(0, 0, 0, 0.16)",
+    borderRadius: "0px",
+    width: "32px",
+    height: "32px",
+    overflow: "hidden",
+    transition: "all 0.3s",
+    "& button": {
+      "& svg": {
+        width: "16px",
+        height: "16px"
+      }
+    },
+    "&.active": {
+      width: "auto",
+      "& .toggle": {
+        rotate: "180deg"
       }
     },
-    table: {
-      "& td": {
-        padding: "8px 8px"
-      },
-      "& .selection-area-tc": {
-        position: "absolute",
-        width: "100%",
-        height: "100%",
-        top: 0,
-        left: 0,
-        outline: "1px solid #2563EB",
-        pointerEvents: "none"
-      },
-      "& .hide-drag-btn-wrapper": {
-        "& .row-drag-btn": {
-          display: "none"
+    "& .toolbtn": {
+      "& svg": {
+        stroke: "rgb(100, 116, 139)"
+      }
+    }
+  },
+  table: {
+    "& td": {
+      padding: "8px 8px",
+      border: "1px solid #E0E0E0",
+      "&.selection": {
+        "& *::selection": {
+          background: "transparent"
         }
       }
     },
-    cellResizer: {
+    "& .selection-area-tc": {
       position: "absolute",
-      cursor: "col-resize",
-      right: "-2px",
+      width: "100%",
+      height: "100%",
       top: 0,
-      background: "transparent",
-      width: "3px",
-      borderRadius: "0px",
-      zIndex: 1,
-      "&:hover": {
-        background: "#2563EB"
-      }
+      left: 0,
+      background: "rgba(149, 218, 255, .3)",
+      pointerEvents: "none"
+    }
+  },
+  cellResizer: {
+    position: "absolute",
+    cursor: "col-resize",
+    right: "-2px",
+    top: 0,
+    background: "transparent",
+    width: "4px",
+    borderRadius: "0px",
+    zIndex: 1,
+    "&:hover": {
+      background: "#ccc"
+    }
+  },
+  deleteCellsPopUp: {
+    backgroundColor: themeType === "dark" ? "#292C32" : "#FFFFFF",
+    borderRadius: "7px !important",
+    border: themeType === "dark" ? "1px solid #5B5E64" : "1px solid #E4E8EB",
+    zIndex: 100,
+    minWidth: "186px !important"
+  },
+  menuItemPopUp: {
+    padding: "5px 7px !important",
+    margin: "6px !important",
+    borderRadius: 1,
+    userSelect: "none",
+    color: themeType === "dark" ? "#2563EB" : "#0F172A",
+    "&:hover": {
+      // backgroundColor: "rgba(0, 123, 255, 0.1)",
+      backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE"
+    },
+    "&.Mui-selected": {
+      backgroundColor: themeType === "dark" ? "#2563EB" : "#E9F3FE",
+      color: themeType === "dark" ? "#F6F6F6" : "#0F172A"
     }
-  };
-};
+  }
+});
 export default TableStyles;