@flozy/editor 5.1.2 → 5.1.4

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,21 +51,15 @@ 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)": {
-      margin: "10px !important",
+      padding: "10px",
       background: "unset",
-      boxShadow: "unset"
-      // border: "none",
+      boxShadow: "unset",
+      border: "none"
     }
   },
-
   textFormatWrapper: {
     padding: "0px 16px 16px 16px",
     width: "323px",
@@ -132,37 +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",
-        "& 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"
     },
@@ -177,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?.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}`
-          }
-        }
+        backgroundColor: "#E9F3FE"
       },
       "& svg": {
         width: "24px",
@@ -286,11 +151,6 @@ const usePopupStyle = theme => ({
     },
     "@media only screen and (max-width: 599px)": {
       width: "330px"
-    },
-    "& .textFormatMUIIcon": {
-      "& svg": {
-        color: theme?.palette?.editor?.closeButtonSvgStroke
-      }
     }
   },
   textFormatLabel: {
@@ -308,21 +168,8 @@ 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"
@@ -335,93 +182,6 @@ 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",
@@ -431,8 +191,7 @@ const usePopupStyle = theme => ({
     boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
   },
   dividerGrid: {
-    margin: "5px 0px 10px 0px",
-    background: `${theme?.palette?.editor?.deviderBgColor} !important`
+    margin: "5px 0px 10px 0px"
   },
   textFormatColorWrpr: {
     display: "flex",
@@ -542,100 +301,61 @@ const usePopupStyle = theme => ({
     }
   },
   btnGroup: {
-    border: `1px solid ${theme?.palette?.editor?.borderColor}`,
-    borderRadius: "7px",
-    backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+    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"
     }
   },
   btnGroup2: {
-    border: `1px solid ${theme?.palette?.editor?.borderColor}`,
-    borderRadius: "7px",
-    backgroundColor: theme?.palette?.editor?.inputFieldBgColor,
+    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"
+        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",
@@ -662,7 +382,7 @@ const usePopupStyle = theme => ({
     padding: "0px 10px"
   },
   defaultBtn2: {
-    color: `${theme?.palette?.editor?.deafultColorOptionTextColor} !important`,
+    color: "#A2B0B9 !important",
     textTransform: "none",
     textDecorationLine: "underline",
     textUnderlineOffset: "2px",
@@ -691,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: {
@@ -712,24 +430,10 @@ 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?.textColor
@@ -737,79 +441,41 @@ const usePopupStyle = theme => ({
     }
   },
   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
+      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?.background,
-      borderRadius: "7px !important",
       "@media only screen and (max-width: 600px)": {
         marginTop: "-40px"
       }
@@ -923,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",
@@ -947,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": {
-          "& 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}`
-          }
-        }
+        color: `#2563EB !important`,
+        background: `#E9F3FE !important`
       }
     },
     "& .menuOptions": {