@flozy/editor 5.5.6 → 5.5.8

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

@@ -1,15 +1,14 @@
 const usePopupStyle = theme => ({
   popupWrapper: {
-    boxShadow: theme?.palette?.type === "light" ? "1px 2px 15px 0px #2563EB40" : "unset",
+    boxShadow: "1px 2px 15px 0px #2563EB40",
     zIndex: 1300,
     marginBottom: "12px !important",
-    borderRadius: "20px !important",
-    border: `1px solid ${theme?.palette?.editor?.popUpBorderColor} !important`,
+    borderRadius: "6px",
+    border: "1px solid #D8DDE1",
     maxWidth: "100%",
     // maxHeight: "40px",
     "&.fullscreen": {
       marginBottom: "0px !important",
-      borderRadius: "0px !important",
       "& .papper-wrpr": {
         boxShadow: "none"
       }
@@ -18,42 +17,7 @@ const usePopupStyle = theme => ({
       transform: "none !important"
     },
     "& .MuiPaper-root": {
-      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`
-        }
-      }
+      backgroundColor: theme?.palette?.editor?.background
     },
     "&.textSettings": {
       "@media only screen and (max-width: 600px)": {
@@ -62,7 +26,7 @@ const usePopupStyle = theme => ({
       }
     },
     "& .MuiTypography-root": {
-      color: theme?.palette?.editor?.textFormatTextColor
+      color: theme?.palette?.editor?.textColor
     },
     "& .MuiInputBase-root": {
       color: theme?.palette?.editor?.textColor,
@@ -87,25 +51,15 @@ const usePopupStyle = theme => ({
     "& .buttonsWrpr": {
       "& button": {
         color: theme?.palette?.editor?.textColor
-      },
-      "& .more-btn-cbs": {
-        color: `${theme?.palette?.editor?.closeButtonSvgStroke}`,
-        border: `1px solid ${theme?.palette?.editor?.closeButtonSvgStroke}`,
-        paddingTop: "10px",
-        "& svg": {
-          width: "20px",
-          height: "24px"
-        }
       }
     },
     "@media only screen and (max-width: 599px)": {
-      // margin: "10px !important",
+      padding: "10px",
       background: "unset",
-      boxShadow: "unset"
-      // border: "none",
+      boxShadow: "unset",
+      border: "none"
     }
   },
-
   textFormatWrapper: {
     padding: "0px 16px 16px 16px",
     width: "323px",
@@ -129,9 +83,6 @@ const usePopupStyle = theme => ({
         width: "330px"
       }
     },
-    "& .MuiTypography-root": {
-      padding: "0px"
-    },
     "&.templates": {
       width: "500px",
       maxWidth: "100%",
@@ -139,38 +90,13 @@ 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",
-        width: "10px",
-        "& 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"
     },
@@ -185,77 +111,8 @@ const usePopupStyle = theme => ({
       justifyContent: "start",
       borderRadius: "10px !important",
       transition: "background-color 0.3s ease",
-      // "& .colorBoxElementIcon": {
-      //   "& path": {
-      //     fill: theme?.palette?.type === "dark" ? "none" : "",
-      //   },
-      // },
-      "& .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: `${theme?.palette?.editor?.menuOptionHoverBackground} !important`,
-        "& .signatureElementIcon": {
-          "& path": {
-            fill: `${theme?.palette?.editor?.textColor}`
-          }
-        },
-        "& .commonSvgStyle": {
-          "& path": {
-            stroke: `${theme?.palette?.editor?.textColor}`
-          }
-        },
-        "& .commonSvgStyle2": {
-          "& path": {
-            stroke: `${theme?.palette?.editor?.textColor}`
-          }
-        },
-        "& .colorBoxElementIcon": {
-          "& path": {
-            stroke: `${theme?.palette?.editor?.textColor}`,
-            fill: "none"
-          }
-        },
-        "& .gridElementIcon": {
-          "& path": {
-            stroke: `${theme?.palette?.editor?.textColor}`,
-            fill: `${theme?.palette?.editor?.textColor}`
-          }
-        },
-        "& .newLineElementIcon": {
-          "& path": {
-            fill: `${theme?.palette?.editor?.textColor}`
-          }
-        }
+        backgroundColor: "#E9F3FE"
       },
       "& svg": {
         width: "24px",
@@ -294,14 +151,6 @@ const usePopupStyle = theme => ({
     },
     "@media only screen and (max-width: 599px)": {
       width: "330px"
-    },
-    "& .textFormatMUIIcon": {
-      "& svg": {
-        color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
-      }
-    },
-    "& .npr-0": {
-      paddingRight: "0px !important"
     }
   },
   textFormatLabel: {
@@ -319,24 +168,11 @@ 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: "8px",
-    marginTop: "8px"
+    marginBottom: "16px",
+    marginTop: "10px"
   },
   textFormatField1: {
     marginBottom: "16px",
@@ -346,142 +182,6 @@ const usePopupStyle = theme => ({
     // marginBottom: "16px",
     marginTop: "10px"
   },
-  textFormatField3: {
-    marginBottom: "16px"
-  },
-  textAlignButtons: {
-    paddingLeft: "0px",
-    paddingRight: "12px",
-    "&:hover": {
-      background: "unset"
-    },
-    "&:not(.btnActive):hover": {
-      background: "unset",
-      color: `${theme?.palette?.editor?.textColor} !important`,
-      "& .justifyIcon": {
-        "& path": {
-          fill: `${theme?.palette?.editor?.textColor}`,
-          stroke: `${theme?.palette?.editor?.textColor}`
-        }
-      },
-      "& .textAlignIconSameStyles": {
-        "& path": {
-          fill: `${theme?.palette?.editor?.textColor}`
-        }
-      },
-      "& .orderedListIcon": {
-        "& .strokePathList": {
-          stroke: `${theme?.palette?.editor?.textColor} !important`
-        },
-        "& .fillPathList": {
-          fill: `${theme?.palette?.editor?.textColor} !important`
-        }
-      },
-      "& .bulletedListTextIcon": {
-        "& path": {
-          fill: `${theme?.palette?.editor?.textColor}`,
-          stroke: `${theme?.palette?.editor?.textColor}`
-        },
-        "& circle": {
-          fill: `${theme?.palette?.editor?.textColor}`
-        }
-      },
-      "& .checkedListTextIcon": {
-        "& path": {
-          stroke: `${theme?.palette?.editor?.textColor}`
-        }
-      },
-      "& .accordianListTextIcon": {
-        // stroke: `${theme?.palette?.editor?.svgTextAlignStrokeColor} !important`,
-        "& svg": {
-          fill: `${theme?.palette?.editor?.textColor}`,
-          stroke: `${theme?.palette?.editor?.textColor}`
-        },
-        "& path": {
-          fill: `${theme?.palette?.editor?.textColor}`,
-          stroke: `${theme?.palette?.editor?.textColor}`
-        }
-      }
-    }
-  },
-  autoCompleteaFontFamily: {
-    "& .MuiOutlinedInput-root": {
-      borderRadius: "8px",
-      backgroundColor: `${theme?.palette?.editor?.inputFieldBgColor}`,
-      fontSize: "12px",
-      fontWeight: "400",
-      height: "36px",
-      paddingLeft: "12px !important"
-    },
-    "& .MuiOutlinedInput-notchedOutline": {
-      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
-    },
-    '& .MuiInputBase-root': {
-      '& input': {
-        border: "none !important"
-      }
-    },
-    "& svg": {
-      width: "20px",
-      height: "24px"
-    }
-  },
-  fontFamilyListOptions: {
-    "& .MuiAutocomplete-listbox": {
-      padding: "0px",
-      "&::-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"
-      },
-      "& li": {
-        margin: "5px",
-        borderRadius: "8px",
-        color: theme?.palette?.editor?.menuOptionTextColor,
-        fontSize: '14px',
-        padding: '8px 12px',
-        '&[aria-selected="true"]': {
-          backgroundColor: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`
-        }
-      }
-    },
-    "& .MuiPaper-root": {
-      borderRadius: "8px",
-      background: theme?.palette?.editor?.textWeightPopUpBackground
-    }
-  },
-  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`
-    },
-    "& svg": {
-      width: "20px",
-      height: "24px"
-    }
-  },
-  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",
@@ -492,31 +192,13 @@ const usePopupStyle = theme => ({
   },
   dividerGrid: {
     margin: "5px 0px 10px 0px"
-    // background: `${theme?.palette?.editor?.deviderBgColor} !important`,
   },
-
   textFormatColorWrpr: {
     display: "flex",
     alignItems: "center",
     marginBottom: "8px"
   },
-  textFormatCG: {
-    alignItems: "flexStart",
-    justifyContent: "center",
-    flexDirection: "row",
-    "& .accordionIcon": {
-      paddingLeft: "0px",
-      paddingRight: "12px",
-      "&:not(.btnActive):hover": {
-        background: "unset",
-        "& .accordianIconSvgTextFormat": {
-          "& path": {
-            stroke: theme?.palette?.editor?.textColor
-          }
-        }
-      }
-    }
-  },
+  textFormatCG: {},
   evenSpace: {
     display: "flex",
     flexDirection: "row",
@@ -528,36 +210,7 @@ const usePopupStyle = theme => ({
     "&.typo-icons": {
       "& button": {
         width: "31px",
-        height: "36px",
-        "&:hover": {
-          background: "unset"
-        },
-        "&:not(.btnActive):hover": {
-          background: "unset",
-          "& svg": {
-            color: `${theme?.palette?.editor?.textColor} !important`
-          },
-          "& .linkIcon": {
-            "& path": {
-              stroke: theme?.palette?.editor?.textColor
-            }
-          }
-        }
-      },
-      alignItems: "flexStart",
-      justifyContent: "center",
-      flexDirection: "row",
-      "&:hover": {
-        background: "unset"
-      },
-      "& .customSelectTool": {
-        color: theme?.palette?.editor?.closeButtonSvgStroke,
-        fontWeight: "510",
-        "& svg": {
-          marginTop: "8px",
-          width: "16px",
-          height: "8px"
-        }
+        height: "36px"
       }
     },
     "&.text-decorations-wrpr": {
@@ -570,24 +223,15 @@ const usePopupStyle = theme => ({
     fontSize: "14px",
     marginBottom: "5px",
     paddingLeft: "5px",
-    marginTop: "4px",
     fontWeight: 500,
     color: theme?.palette?.editor?.textColor || "#000"
   },
   typoLabel2: {
     fontSize: "14px",
-    marginBottom: "2px",
-    // paddingLeft: "10px",
+    marginBottom: "5px",
+    paddingLeft: "10px",
     fontWeight: 500
   },
-  typoLabel3: {
-    fontSize: "14px",
-    marginBottom: "10px",
-    paddingLeft: "5px",
-    marginTop: "4px",
-    fontWeight: 500,
-    color: theme?.palette?.editor?.textColor || "#000"
-  },
   templateCard: {
     borderRadius: "10px",
     boxShadow: "none",
@@ -657,110 +301,61 @@ const usePopupStyle = theme => ({
     }
   },
   btnGroup: {
-    border: `1px solid ${theme?.palette?.editor?.borderColor}`,
-    borderRadius: "7px",
-    backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
-    height: "36px",
+    backgroundColor: theme?.palette?.editor?.background,
     "& button": {
-      backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+      backgroundColor: theme?.palette?.editor?.background,
       marginRight: "0px",
       color: theme?.palette?.editor?.textColor,
-      borderColor: "#ffffff00 !important",
+      borderColor: theme?.palette?.editor?.borderColor,
       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 #ffffff00`
+        border: `1px solid ${theme?.palette?.editor?.borderColor}`
       }
-    },
-    "& .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"
-    },
-    "& svg": {
-      width: "20px",
-      height: "24px"
     }
   },
   btnGroup2: {
-    border: `1px solid ${theme?.palette?.editor?.borderColor}`,
-    borderRadius: "7px",
-    backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
-    height: "36px",
+    backgroundColor: theme?.palette?.editor?.background,
     "& button": {
       backgroundColor: theme?.palette?.editor?.background,
       marginRight: "0px",
       color: theme?.palette?.editor?.textColor,
-      borderColor: "#ffffff00 !important",
+      borderColor: theme?.palette?.editor?.borderColor,
       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 #ffffff00`,
-        borderRadius: "7px 0px 0px 7px"
-      },
-      "& svg": {
-        width: "20px",
-        height: "24px"
+        border: `1px solid ${theme?.palette?.editor?.borderColor}`,
+        padding: "0px 5px !important"
       }
-    },
-    "& .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",
@@ -784,14 +379,14 @@ const usePopupStyle = theme => ({
     textTransform: "none",
     textDecorationLine: "underline",
     textUnderlineOffset: "2px",
-    padding: "0px"
+    padding: "0px 10px"
   },
   defaultBtn2: {
-    color: `${theme?.palette?.editor?.deafultColorOptionTextColor} !important`,
+    color: "#A2B0B9 !important",
     textTransform: "none",
     textDecorationLine: "underline",
     textUnderlineOffset: "2px",
-    padding: "0px"
+    padding: "0px 10px"
   },
   defaultBtn: {
     color: "#0F172A",
@@ -816,16 +411,14 @@ const usePopupStyle = theme => ({
       padding: "7px 15px",
       color: "#FFF",
       width: "100px",
-      marginBottom: "10px",
-      textTransform: "capitalize"
+      marginBottom: "10px"
     },
     "& .outlineBtn": {
       border: "1px solid #D7DBEC",
       borderRadius: "7px",
       padding: "7px 15px",
       color: "#FFF",
-      width: "100px",
-      textTransform: "capitalize"
+      width: "100px"
     }
   },
   searchBox: {
@@ -837,111 +430,52 @@ const usePopupStyle = theme => ({
     }
   },
   textOptions: {
-    backgroundColor: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`,
-    color: theme?.palette?.editor?.textColor,
-    borderRadius: "8px !important",
-    fontFamily: "Inter, sans-serif",
-    "& .MuiList-root": {
-      padding: "0px !important"
-    }
+    backgroundColor: theme?.palette?.editor?.background,
+    color: theme?.palette?.editor?.textColor
   },
   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?.closeButtonSvgStroke,
-        color: theme?.palette?.editor?.closeButtonSvgStroke,
-        width: "10px",
-        height: "12px"
+        stroke: theme?.palette?.editor?.textColor
       }
     }
   },
   closeBtn: {
-    background: `${theme?.palette?.editor?.closeButtonBgColor} !important`,
-    color: `${theme?.palette?.editor?.closeButtonSvgStroke} !important`
+    backgroundColor: theme?.palette?.editor?.background,
+    color: theme?.palette?.editor?.textColor
   },
   colorPickerPopup: {
     margin: "30px",
     "& .MuiPaper-root": {
       overflow: "auto",
-      backgroundColor: theme?.palette?.editor?.background,
-      borderRadius: "14px !important",
-      border: `1px solid ${theme?.palette?.editor?.inputFieldBorder} !important`
+      backgroundColor: theme?.palette?.editor?.background
     },
     "& .popup_tabs": {
-      backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
-      "@media only screen and (max-width: 899px)": {
-        width: "100% !important"
-      }
+      backgroundColor: theme?.palette?.editor?.background
     },
     "& .popup_tabs-header": {
-      fontFamily: "Inter, sans-serif",
-      fontWeight: 700,
-      fontSize: "12px !important",
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground,
+      backgroundColor: theme?.palette?.editor?.background,
       "& .popup_tabs-header-label-active": {
         color: theme?.palette?.editor?.activeColor,
-        backgroundColor: theme?.palette?.editor?.miniToolBarBackground
+        backgroundColor: theme?.palette?.editor?.background
       }
     },
-    "& .popup_tabs-body": {
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
-    },
     "& .colorpicker": {
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
+      backgroundColor: theme?.palette?.editor?.background
     },
     "& .color-picker-panel": {
-      backgroundColor: theme?.palette?.editor?.miniToolBarBackground
+      backgroundColor: theme?.palette?.editor?.background
     },
     "& .input_rgba": {
       "& input": {
-        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"
+        backgroundColor: theme?.palette?.editor?.background,
+        color: theme?.palette?.editor?.textColor
       }
     }
   },
   colorPopper: {
     "& .MuiPaper-root": {
-      backgroundColor: `${theme?.palette?.editor?.miniToolBarBackground} !important`,
-      background: `${theme?.palette?.editor?.miniToolBarBackground}`,
-      borderRadius: "7px !important",
+      backgroundColor: theme?.palette?.editor?.background,
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
@@ -1055,18 +589,17 @@ const usePopupStyle = theme => ({
     "& .MuiPopover-paper": {
       maxHeight: "140px",
       // minWidth: "130px",
-      // border: "1px solid #E4E8EB",
-      background: `${theme?.palette?.editor?.textWeightPopUpBackground} !important`,
+      border: "1px solid #E4E8EB",
+      background: `${theme?.palette?.editor?.background} !important`,
       overflowY: "scroll",
-      padding: "3px 12px 8px 2px",
-      borderRadius: "8px",
+      padding: "6px 12px 6px 0px",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
     },
     "& .customSelectOptionLabel": {
       color: theme?.palette?.editor?.textColor || "black",
-      margin: "6px 6px 0px 6px",
+      margin: "0px 6px 0px 6px",
       width: "100%",
       justifyContent: "start",
       paddingRight: "20px",
@@ -1079,40 +612,8 @@ const usePopupStyle = theme => ({
         background: `${theme?.palette?.action?.selected} !important`
       },
       "&.selected": {
-        color: `${theme?.palette?.editor?.menuOptionTextColor} !important`,
-        background: `${theme?.palette?.editor?.menuOptionSelectedOption} !important`,
-        "& .orderedListIcon": {
-          "& .strokePathList": {
-            stroke: `${theme?.palette?.editor?.menuOptionsSelectedTextColor}`
-          },
-          "& .fillPathList": {
-            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}`
-          }
-        }
+        color: `#2563EB !important`,
+        background: `#E9F3FE !important`
       }
     },
     "& .menuOptions": {