@flozy/editor 5.1.5 → 5.1.7

package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js

@@ -1,14 +1,15 @@
 const usePopupStyle = theme => ({
   popupWrapper: {
-    boxShadow: "1px 2px 15px 0px #2563EB40",
+    boxShadow: theme?.palette?.type === "light" ? "1px 2px 15px 0px #2563EB40" : "unset",
     zIndex: 1300,
     marginBottom: "12px !important",
-    borderRadius: "6px",
-    border: "1px solid #D8DDE1",
+    borderRadius: "20px !important",
+    border: `1px solid ${theme?.palette?.editor?.popUpBorderColor} !important`,
     maxWidth: "100%",
     // maxHeight: "40px",
     "&.fullscreen": {
       marginBottom: "0px !important",
+      borderRadius: "0px !important",
       "& .papper-wrpr": {
         boxShadow: "none"
       }
@@ -17,7 +18,42 @@ const usePopupStyle = theme => ({
       transform: "none !important"
     },
     "& .MuiPaper-root": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: `${theme?.palette?.editor?.textFormatBgColor} !important`,
+      borderRadius: "19px !important"
+    },
+    "& .MuiDialog-paperFullScreen": {
+      borderRadius: "0px !important"
+    },
+    "& .inputField": {
+      height: "29px",
+      "& .MuiIconButton-root": {
+        padding: "5px"
+      },
+      "& .MuiOutlinedInput-root ": {
+        background: `${theme?.palette?.editor?.inputFieldBgColor}`,
+        borderRadius: "8px",
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder}`
+      },
+      "& .MuiFormControl-root": {
+        background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+        borderRadius: "8px",
+        height: "29px"
+      },
+      "& .MuiOutlinedInput-notchedOutline": {
+        borderRadius: "8px",
+        border: `1px solid transparent`
+      },
+      "& .MuiOutlinedInput-input": {
+        padding: "3px 35px 4px 2px !important"
+      },
+      "& .MuiInputBase-adornedStart": {
+        padding: "0px 0px 0px 9px"
+      },
+      "& svg": {
+        "& path": {
+          stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      }
     },
     "&.textSettings": {
       "@media only screen and (max-width: 600px)": {
@@ -26,7 +62,7 @@ const usePopupStyle = theme => ({
       }
     },
     "& .MuiTypography-root": {
-      color: theme?.palette?.editor?.textColor
+      color: theme?.palette?.editor?.textFormatTextColor
     },
     "& .MuiInputBase-root": {
       color: theme?.palette?.editor?.textColor,
@@ -51,15 +87,21 @@ const usePopupStyle = theme => ({
     "& .buttonsWrpr": {
       "& button": {
         color: theme?.palette?.editor?.textColor
+      },
+      "& .more-btn-cbs": {
+        color: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
+        border: `1.5px solid ${theme?.palette?.editor?.closeButtonSvgStroke}`,
+        paddingTop: "10px"
       }
     },
     "@media only screen and (max-width: 599px)": {
-      padding: "10px",
+      margin: "10px !important",
       background: "unset",
-      boxShadow: "unset",
-      border: "none"
+      boxShadow: "unset"
+      // border: "none",
     }
   },
+
   textFormatWrapper: {
     padding: "0px 16px 16px 16px",
     width: "323px",
@@ -90,13 +132,37 @@ const usePopupStyle = theme => ({
         width: "100%",
         maxHeight: "fit-content"
       },
+      "& .MuiTab-root": {
+        textTransform: "capitalize",
+        color: "#64748B",
+        borderBottom: `1.5px solid ${theme?.palette?.editor?.deviderBgColor}`
+      },
+      "& .Mui-selected": {
+        color: `${theme?.palette?.editor?.textColor} !important`,
+        fontWeight: "700 !important"
+      },
+      "& .MuiTabs-indicator": {
+        background: "#2563EB"
+      },
+      "& .MuiTabScrollButton-horizontal": {
+        borderBottom: "unset !important",
+        "& svg": {
+          color: theme?.palette?.editor?.closeButtonSvgStroke
+        }
+      },
       "@media only screen and (max-width: 599px)": {
         width: "330px"
+      },
+      "& .MuiCardContent-root": {
+        color: theme?.palette?.editor?.textColor,
+        fontFamily: "Inter, sans-serif",
+        fontSize: "12px",
+        fontWeight: "500"
       }
     },
     "& .headerContainer": {},
     "& .textSettingHeader": {
-      borderBottom: "1px solid #DCE4EC",
+      // borderBottom: "1px solid #DCE4EC",
       padding: "8px 0px 5px",
       marginBottom: "20px"
     },
@@ -111,8 +177,72 @@ const usePopupStyle = theme => ({
       justifyContent: "start",
       borderRadius: "10px !important",
       transition: "background-color 0.3s ease",
+      "& .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}`,
+          fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+        }
+      },
+      "& .newLineElementIcon": {
+        "& path": {
+          fill: `${theme?.palette?.editor?.closeButtonSvgStroke}`
+        }
+      },
       "&:hover": {
-        backgroundColor: "#E9F3FE"
+        backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
+        "& .signatureElementIcon": {
+          "& path": {
+            fill: `${theme?.palette?.editor?.menuOptionTextColor}`
+          }
+        },
+        "& .commonSvgStyle": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`
+          }
+        },
+        "& .commonSvgStyle2": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`
+          }
+        },
+        "& .colorBoxElementIcon": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`,
+            fill: "none"
+          }
+        },
+        "& .gridElementIcon": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionTextColor}`,
+            fill: `${theme?.palette?.editor?.menuOptionTextColor}`
+          }
+        },
+        "& .newLineElementIcon": {
+          "& path": {
+            fill: `${theme?.palette?.editor?.menuOptionTextColor}`
+          }
+        }
       },
       "& svg": {
         width: "24px",
@@ -151,6 +281,11 @@ const usePopupStyle = theme => ({
     },
     "@media only screen and (max-width: 599px)": {
       width: "330px"
+    },
+    "& .textFormatMUIIcon": {
+      "& svg": {
+        color: theme?.palette?.editor?.closeButtonSvgStroke
+      }
     }
   },
   textFormatLabel: {
@@ -168,8 +303,21 @@ const usePopupStyle = theme => ({
     },
     "& .MuiFormControl-root.MuiTextField-root input": {
       padding: "8px 35px 6px 12px"
+    },
+    "& .toogleFullScreenBtn": {
+      background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+      padding: "4px !important",
+      "& .toogleFullScreenSvg": {
+        "& path": {
+          stroke: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+        }
+      }
     }
   },
+  textSettingHeader: {
+    display: "flex",
+    borderBottom: `1px solid ${theme?.palette?.editor?.deviderBgColor} !important`
+  },
   textFormatField: {
     marginBottom: "16px",
     marginTop: "10px"
@@ -182,6 +330,93 @@ const usePopupStyle = theme => ({
     // marginBottom: "16px",
     marginTop: "10px"
   },
+  textFormatField3: {
+    marginBottom: "16px"
+  },
+  textAlignButtons: {
+    // "& .justifyIcon": {
+    //   "& path": {
+    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    // },
+    // "& .textAlignIconSameStyles": {
+    //   "& path": {
+    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    // },
+    // "& .orderedListIcon": {
+    //   "& path": {
+    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    //   "& text": {
+    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    // },
+    // "& .bulletedListTextIcon": {
+    //   "& path": {
+    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    //   "& circle": {
+    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    // },
+    // "& .checkedListTextIcon": {
+    //   "& path": {
+    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    // },
+    // "& .accordianListTextIcon": {
+    //   // stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
+    //   "& svg": {
+    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    //   "& path": {
+    //     fill: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //     stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor}`,
+    //   },
+    // },
+  },
+  autoCompleteaFontFamily: {
+    "& .MuiOutlinedInput-root": {
+      borderRadius: "8px",
+      backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor}`,
+      fontSize: "14px",
+      height: "36px",
+      paddingLeft: "15px !important"
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
+    },
+    '& .MuiInputBase-root': {
+      '& input': {
+        border: "none !important"
+      }
+    }
+  },
+  textFormatSelect: {
+    background: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+    width: "100%",
+    height: "36px",
+    borderRadius: "10px",
+    fontSize: "12px",
+    fontFamily: "Inter, sans-serif",
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
+    }
+  },
+  textFormatSelectOptions: {
+    margin: "5px !important",
+    borderRadius: "4px !important",
+    fontSize: "12px !important",
+    fontWeight: 500,
+    "&.Mui-selected": {
+      background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
+      color: `${theme?.palette?.editor?.menuOptionTextColor} !important`
+    }
+  },
   textFormatFieldBorder: {
     display: "flex",
     alignItems: "center",
@@ -191,7 +426,8 @@ const usePopupStyle = theme => ({
     boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
   },
   dividerGrid: {
-    margin: "5px 0px 10px 0px"
+    margin: "5px 0px 10px 0px",
+    background: `${theme?.palette?.editor?.deviderBgColor} !important`
   },
   textFormatColorWrpr: {
     display: "flex",
@@ -301,61 +537,100 @@ const usePopupStyle = theme => ({
     }
   },
   btnGroup: {
-    backgroundColor: theme?.palette?.editor?.background,
+    border: `1px solid ${theme?.palette?.editor?.borderColor}`,
+    borderRadius: "7px",
+    backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
     "& button": {
-      backgroundColor: theme?.palette?.editor?.background,
+      backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
       marginRight: "0px",
       color: theme?.palette?.editor?.textColor,
-      borderColor: theme?.palette?.editor?.borderColor,
+      borderColor: "#ffffff00 !important",
       textTransform: "capitalize",
       marginBottom: "0px",
-      "&:hover": {
-        color: theme?.palette?.editor?.borderColor,
-        background: theme?.palette?.editor?.background
-      },
       "&.active": {
         background: theme?.palette?.editor?.background,
         color: theme?.palette?.editor?.activeColor
       },
       "&.no-hover": {
-        border: `1px solid ${theme?.palette?.editor?.borderColor}`
+        border: `1px solid #ffffff00`
       }
+    },
+    "& .colorBox": {
+      background: theme?.palette?.editor?.inputFieldBgColor,
+      borderRadius: "7px 0px 0px 7px",
+      fontSize: "12px !important",
+      fontWeight: 500
+    },
+    "& .colorPicker": {
+      background: theme?.palette?.editor?.inputFieldBgColor,
+      borderRadius: "0px 7px 7px 0px",
+      padding: "0px"
+    },
+    "& .vl": {
+      background: theme?.palette?.editor?.borderColor,
+      width: "2px",
+      height: "25px",
+      margin: "5px 0px"
     }
   },
   btnGroup2: {
-    backgroundColor: theme?.palette?.editor?.background,
+    border: `1px solid ${theme?.palette?.editor?.borderColor}`,
+    borderRadius: "7px",
+    backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
     "& button": {
       backgroundColor: theme?.palette?.editor?.background,
       marginRight: "0px",
       color: theme?.palette?.editor?.textColor,
-      borderColor: theme?.palette?.editor?.borderColor,
+      borderColor: "#ffffff00 !important",
       textTransform: "capitalize",
       marginBottom: "0px",
-      "&:hover": {
-        color: theme?.palette?.editor?.borderColor,
-        background: theme?.palette?.editor?.background
-      },
+      // "&:hover": {
+      //   color: theme?.palette?.editor?.borderColor,
+      //   background: theme?.palette?.editor?.background,
+      // },
       "&.active": {
         background: theme?.palette?.editor?.background,
         color: theme?.palette?.editor?.activeColor
       },
       "&.no-hover": {
-        border: `1px solid ${theme?.palette?.editor?.borderColor}`,
-        padding: "0px 5px !important"
+        border: `1px solid #ffffff00`,
+        borderRadius: "7px 0px 0px 7px"
       }
+    },
+    "& .colorBox": {
+      background: theme?.palette?.editor?.inputFieldBgColor,
+      borderRadius: "7px 0px 0px 7px",
+      fontSize: "12px !important",
+      fontWeight: 500
+    },
+    "& .colorPicker": {
+      background: theme?.palette?.editor?.inputFieldBgColor,
+      borderRadius: "0px 7px 7px 0px",
+      padding: "0px"
+    },
+    "& .vl": {
+      background: theme?.palette?.editor?.borderColor,
+      width: "2px",
+      height: "25px",
+      margin: "5px 0px"
     }
   },
   allColor: {
+    borderRadius: "7px !important",
     "& .buttonsWrpr": {
+      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
+      border: `1px solid ${theme?.palette?.editor?.miniToolBarBorder} !important`,
+      borderRadius: "7px !important",
       "& button": {
         color: theme?.palette?.editor?.textColor
       }
     }
   },
   allColorInner: {
+    borderRadius: "7px !important",
     "& .buttonsWrpr": {
       "& button": {
-        border: "1px solid #ccc",
+        // border: "1px solid #ccc",
         margin: "4px",
         width: "24px",
         height: "24px",
@@ -382,7 +657,7 @@ const usePopupStyle = theme => ({
     padding: "0px 10px"
   },
   defaultBtn2: {
-    color: "#A2B0B9 !important",
+    color: `${theme?.palette?.editor?.deafultColorOptionTextColor} !important`,
     textTransform: "none",
     textDecorationLine: "underline",
     textUnderlineOffset: "2px",
@@ -411,14 +686,16 @@ const usePopupStyle = theme => ({
       padding: "7px 15px",
       color: "#FFF",
       width: "100px",
-      marginBottom: "10px"
+      marginBottom: "10px",
+      textTransform: "capitalize"
     },
     "& .outlineBtn": {
       border: "1px solid #D7DBEC",
       borderRadius: "7px",
       padding: "7px 15px",
       color: "#FFF",
-      width: "100px"
+      width: "100px",
+      textTransform: "capitalize"
     }
   },
   searchBox: {
@@ -430,10 +707,24 @@ const usePopupStyle = theme => ({
     }
   },
   textOptions: {
-    backgroundColor: theme?.palette?.editor?.background,
-    color: theme?.palette?.editor?.textColor
+    backgroundColor: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`,
+    color: theme?.palette?.editor?.textColor,
+    borderRadius: "8px !important",
+    fontFamily: "Inter, sans-serif",
+    "& .MuiList-root": {
+      padding: "0px !important"
+    }
   },
   textSize: {
+    height: "36px !important",
+    "& .MuiOutlinedInput-root": {
+      borderRadius: "8px !important",
+      height: "36px !important",
+      background: `${theme?.palette?.editor?.inputFieldBgColor} !important`
+    },
+    "& .MuiOutlinedInput-notchedOutline": {
+      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
+    },
     "& .textFontArrows": {
       "& svg": {
         stroke: theme?.palette?.editor?.textColor
@@ -441,41 +732,79 @@ const usePopupStyle = theme => ({
     }
   },
   closeBtn: {
-    backgroundColor: theme?.palette?.editor?.background,
-    color: theme?.palette?.editor?.textColor
+    background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
+    color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
   },
   colorPickerPopup: {
     margin: "30px",
     "& .MuiPaper-root": {
       overflow: "auto",
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.background,
+      borderRadius: "14px !important",
+      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
     },
     "& .popup_tabs": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.inputFieldBgColor
     },
     "& .popup_tabs-header": {
-      backgroundColor: theme?.palette?.editor?.background,
+      fontFamily: "Inter, sans-serif",
+      fontWeight: 700,
+      fontSize: "12px !important",
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
       "& .popup_tabs-header-label-active": {
         color: theme?.palette?.editor?.activeColor,
-        backgroundColor: theme?.palette?.editor?.background
+        backgroundColor: theme?.palette?.editor?.miniToolBarBackground
       }
     },
+    "& .popup_tabs-body": {
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
+    },
     "& .colorpicker": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
     },
     "& .color-picker-panel": {
-      backgroundColor: theme?.palette?.editor?.background
+      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
     },
     "& .input_rgba": {
       "& input": {
-        backgroundColor: theme?.palette?.editor?.background,
-        color: theme?.palette?.editor?.textColor
+        backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+        color: theme?.palette?.editor?.textColor,
+        height: "32px !important",
+        borderRadius: "10px !important",
+        border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`,
+        boxShadow: "none",
+        "&:hover": {
+          backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`
+        },
+        "&:focus": {
+          border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`,
+          backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor} !important`,
+          boxShadow: "none"
+        }
+      },
+      "& .input_rgba-hex-label": {
+        top: "4px !important"
+      },
+      "& .input_rgba-alpha-label": {
+        top: "6px !important"
+      },
+      "& .input_rgba-label": {
+        display: "none"
+      }
+    },
+    "& .default-color-panel": {
+      gridTemplateColumns: "repeat(auto-fill, 24px)",
+      "& .default-color-panel_item": {
+        borderRadius: "50%",
+        width: "16px",
+        height: "16px"
       }
     }
   },
   colorPopper: {
     "& .MuiPaper-root": {
       backgroundColor: theme?.palette?.editor?.background,
+      borderRadius: "7px !important",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
@@ -589,17 +918,18 @@ const usePopupStyle = theme => ({
     "& .MuiPopover-paper": {
       maxHeight: "140px",
       // minWidth: "130px",
-      border: "1px solid #E4E8EB",
-      background: `${theme?.palette?.editor?.background} !important`,
+      // border: "1px solid #E4E8EB",
+      background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`,
       overflowY: "scroll",
-      padding: "6px 12px 6px 0px",
+      padding: "3px 12px 8px 2px",
+      borderRadius: "8px",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
     },
     "& .customSelectOptionLabel": {
       color: theme?.palette?.editor?.textColor || "black",
-      margin: "0px 6px 0px 6px",
+      margin: "6px 6px 0px 6px",
       width: "100%",
       justifyContent: "start",
       paddingRight: "20px",
@@ -612,8 +942,40 @@ const usePopupStyle = theme => ({
         background: `${theme?.palette?.action?.selected} !important`
       },
       "&.selected": {
-        color: `#2563EB !important`,
-        background: `#E9F3FE !important`
+        color: `${theme?.palette?.editor?.menuOptionTextColor} !important`,
+        background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
+        "& .orderedListIcon": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          },
+          "& text": {
+            fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          }
+        },
+        "& .bulletedListTextIcon": {
+          "& path": {
+            fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`,
+            stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          },
+          "& circle": {
+            fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          }
+        },
+        "& .checkedListTextIcon": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          }
+        },
+        "& .accordianIconSvgTextFormat": {
+          "& path": {
+            stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor} !important`
+          }
+        },
+        "& .textAlignIconSameStyles": {
+          "& path": {
+            fill: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
+          }
+        }
       }
     },
     "& .menuOptions": {