@flozy/editor 5.4.5 → 5.4.7

package/dist/Editor/Elements/DataView/Layouts/Options/Constants.js

@@ -1,12 +1,3 @@
-import NotesIcon from "@mui/icons-material/Notes";
-import TagIcon from "@mui/icons-material/Tag";
-import ArrowDropDownCircleIcon from "@mui/icons-material/ArrowDropDownCircle";
-import ChecklistIcon from "@mui/icons-material/Checklist";
-import InsertInvitationIcon from "@mui/icons-material/InsertInvitation";
-import PersonIcon from "@mui/icons-material/Person";
-import CheckCircleOutlineIcon from "@mui/icons-material/CheckCircleOutline";
-import ArrowUpwardIcon from "@mui/icons-material/ArrowUpward";
-import ArrowDownwardIcon from "@mui/icons-material/ArrowDownward";
 // import FilterListIcon from "@mui/icons-material/FilterList";
 
 export const TYPE_LABELS = {
@@ -18,6 +9,15 @@ export const TYPE_LABELS = {
   person: "Person",
   check: "Checkbox"
 };
+export const TYPE_ICONS = {
+  text: 'text',
+  number: 'hashtagIcon',
+  select: 'selectRounded',
+  "multi-select": 'check-list-item',
+  date: 'calenderNewIcon',
+  person: 'userIcon',
+  check: 'tickOutline'
+};
 export const PROPERTY_DEFAULTS = {
   text: {
     label: TYPE_LABELS?.text,
@@ -51,43 +51,43 @@ export const PROPERTY_DEFAULTS = {
 export const PROPERTY_TYPES = [{
   type: "text",
   label: TYPE_LABELS.text,
-  Icon: NotesIcon
+  Icon: 'text'
 }, {
   type: "number",
   label: TYPE_LABELS.number,
-  Icon: TagIcon
+  Icon: 'hashtagIcon'
 }, {
   type: "select",
   label: TYPE_LABELS.select,
-  Icon: ArrowDropDownCircleIcon
+  Icon: 'selectRounded'
 }, {
   type: "multi-select",
   label: TYPE_LABELS["multi-select"],
-  Icon: ChecklistIcon
+  Icon: 'check-list-item'
 }, {
   type: "date",
   label: TYPE_LABELS.date,
-  Icon: InsertInvitationIcon
-}, {
-  type: "check",
-  label: TYPE_LABELS.check,
-  Icon: CheckCircleOutlineIcon
+  Icon: 'calenderNewIcon'
 }, {
   type: "person",
   label: TYPE_LABELS.person,
-  Icon: PersonIcon
+  Icon: 'userIcon'
+}, {
+  type: "check",
+  label: TYPE_LABELS.check,
+  Icon: 'tickOutline'
 }];
 export const FILTER_TYPES = [{
   type: "sort",
   operator: "asc",
   label: "Sort Ascending",
   value: "",
-  Icon: ArrowUpwardIcon
+  Icon: 'arrowUp'
 }, {
   type: "sort",
   operator: "desc",
   label: "Sort Descending",
-  Icon: ArrowDownwardIcon
+  Icon: 'arrowDown'
 }
 // {
 //   type: "filter",

package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js

@@ -1,11 +1,10 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Box, IconButton, TextField, List, ListItemButton, ListItemIcon, ListItemText, FormControlLabel } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import ArrowBackIcon from "@mui/icons-material/ArrowBack";
-import DeleteIcon from "@mui/icons-material/Delete";
 import ColorButtons from "../../../Color Picker/ColorButtons";
 import ColorPickerStyles from "../../../Color Picker/Styles";
 import { DEFAULT_OPTION_COLORS } from "./Constants";
+import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditOption = props => {
@@ -104,7 +103,9 @@ const EditOption = props => {
           className: "tv-act-ico",
           size: "small",
           onClick: onBack,
-          children: /*#__PURE__*/_jsx(ArrowBackIcon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: 'leftArrow'
+          })
         }), "Edit Option"]
       }), /*#__PURE__*/_jsx(IconButton, {
         className: "tv-act-ico bg",
@@ -146,7 +147,9 @@ const EditOption = props => {
       children: /*#__PURE__*/_jsxs(ListItemButton, {
         onClick: onDeleteOption,
         children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(DeleteIcon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: 'trashIcon'
+          })
         }), /*#__PURE__*/_jsx(ListItemText, {
           children: "Delete Option"
         })]

package/dist/Editor/Elements/DataView/Layouts/Options/EditProperty.js

@@ -1,15 +1,11 @@
 import React, { useEffect, useRef, useState } from "react";
 import { Box, IconButton, TextField, List, ListItemButton, ListItemText, ListItemIcon, FormControlLabel } from "@mui/material";
 import CloseIcon from "@mui/icons-material/Close";
-import KeyboardArrowRightIcon from "@mui/icons-material/KeyboardArrowRight";
-import DeleteIcon from "@mui/icons-material/Delete";
-import ContentCopyIcon from "@mui/icons-material/ContentCopy";
-import VisibilityIcon from "@mui/icons-material/Visibility";
-import VisibilityOffIcon from "@mui/icons-material/VisibilityOff";
 import ArrowBackIosIcon from "@mui/icons-material/ArrowBackIos";
-import { TYPE_LABELS } from "./Constants";
+import { TYPE_ICONS, TYPE_LABELS } from "./Constants";
 import AddOptions from "./AddOptions";
 import FilterProperty from "./FilterProperty";
+import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const EditProperty = props => {
@@ -125,6 +121,11 @@ const EditProperty = props => {
       children: [/*#__PURE__*/_jsx(FormControlLabel, {
         label: "Field Name",
         labelPlacement: "top",
+        sx: {
+          '& .MuiFormControl-root': {
+            marginBottom: '4px'
+          }
+        },
         control: /*#__PURE__*/_jsx(TextField, {
           size: "small",
           value: edit?.label,
@@ -132,50 +133,77 @@ const EditProperty = props => {
           fullWidth: true,
           placeholder: "Field Name"
         })
-      }), /*#__PURE__*/_jsx(AddOptions, {
-        edit: edit,
-        onUpdate: onUpdate,
-        onEvent: onEvent
-      }), /*#__PURE__*/_jsx(FilterProperty, {
-        edit: edit,
-        onUpdate: onUpdate,
-        onEvent: onEvent
       }), /*#__PURE__*/_jsx(List, {
-        className: "fe-dv-opt-list st sb",
+        className: "fe-dv-opt-list st",
         children: /*#__PURE__*/_jsxs(ListItemButton, {
           onClick: onChangeProperty,
           children: [/*#__PURE__*/_jsx(ListItemText, {
             children: "Type"
           }), /*#__PURE__*/_jsxs(ListItemIcon, {
             sx: {
-              alignItems: "center"
+              display: 'flex',
+              alignItems: "center",
+              gap: 1
             },
-            children: [/*#__PURE__*/_jsx("span", {
+            children: [/*#__PURE__*/_jsx(Box, {
+              sx: {
+                background: "#64748B1F",
+                borderRadius: '4px',
+                display: 'flex',
+                alignItems: 'center',
+                padding: '2px',
+                '& svg': {
+                  width: '16px',
+                  height: '16px'
+                }
+              },
+              children: /*#__PURE__*/_jsx(Icon, {
+                icon: `${TYPE_ICONS[edit?.type]}`
+              })
+            }), /*#__PURE__*/_jsx("span", {
               className: "label-tp",
               children: TYPE_LABELS[edit?.type]
-            }), /*#__PURE__*/_jsx(KeyboardArrowRightIcon, {})]
+            }), /*#__PURE__*/_jsx(Icon, {
+              icon: 'rightArrow'
+            })]
           })]
         })
+      }), /*#__PURE__*/_jsx(AddOptions, {
+        edit: edit,
+        onUpdate: onUpdate,
+        onEvent: onEvent
+      }), /*#__PURE__*/_jsx(FilterProperty, {
+        edit: edit,
+        onUpdate: onUpdate,
+        onEvent: onEvent
       }), /*#__PURE__*/_jsxs(List, {
         className: "fe-dv-opt-list",
         children: [/*#__PURE__*/_jsxs(ListItemButton, {
           onClick: onAction("Visibilty"),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: edit?.visible ? /*#__PURE__*/_jsx(VisibilityOffIcon, {}) : /*#__PURE__*/_jsx(VisibilityIcon, {})
+            children: edit?.visible ? /*#__PURE__*/_jsx(Icon, {
+              icon: 'eyeSlash'
+            }) : /*#__PURE__*/_jsx(Icon, {
+              icon: 'eyeIcon'
+            })
           }), /*#__PURE__*/_jsxs(ListItemText, {
             children: [edit?.visible ? "Hide" : "Show", " in View"]
           })]
         }), /*#__PURE__*/_jsxs(ListItemButton, {
           onClick: onAction("Duplicate"),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(ContentCopyIcon, {})
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: 'duplicateIcon'
+            })
           }), /*#__PURE__*/_jsx(ListItemText, {
             children: "Duplicate Property"
           })]
         }), /*#__PURE__*/_jsxs(ListItemButton, {
           onClick: onAction("Delete"),
           children: [/*#__PURE__*/_jsx(ListItemIcon, {
-            children: /*#__PURE__*/_jsx(DeleteIcon, {})
+            children: /*#__PURE__*/_jsx(Icon, {
+              icon: 'trashIcon'
+            })
           }), /*#__PURE__*/_jsx(ListItemText, {
             children: "Delete Property"
           })]

package/dist/Editor/Elements/DataView/Layouts/Options/FilterProperty.js

@@ -2,6 +2,7 @@ import React from "react";
 import { List, ListItemButton, ListItemText, ListItemIcon } from "@mui/material";
 import { FILTER_TYPES } from "./Constants";
 import { useDataView } from "../../Providers/DataViewProvider";
+import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const FilterProperty = props => {
@@ -22,13 +23,14 @@ const FilterProperty = props => {
   return /*#__PURE__*/_jsx(List, {
     className: "fe-dv-opt-list mt",
     children: FILTER_TYPES?.map(({
-      Icon,
       ...m
     }, i) => {
       return /*#__PURE__*/_jsxs(ListItemButton, {
         onClick: handleChangeOption(m),
         children: [/*#__PURE__*/_jsx(ListItemIcon, {
-          children: /*#__PURE__*/_jsx(Icon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: m?.Icon
+          })
         }), /*#__PURE__*/_jsx(ListItemText, {
           primary: m.label
         })]

package/dist/Editor/Elements/DataView/Layouts/Options/PropertyList.js

@@ -1,6 +1,7 @@
 import React from "react";
 import { List, ListItemButton, ListItemIcon, ListItemText } from "@mui/material";
 import { PROPERTY_TYPES } from "./Constants";
+import Icon from "../../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
 const PropertyList = props => {
@@ -10,7 +11,6 @@ const PropertyList = props => {
   } = props;
   return /*#__PURE__*/_jsx(List, {
     children: PROPERTY_TYPES?.map(({
-      Icon,
       ...rest
     }, i) => {
       return /*#__PURE__*/_jsxs(ListItemButton, {
@@ -18,7 +18,9 @@ const PropertyList = props => {
         onClick: onSelect(rest),
         children: [/*#__PURE__*/_jsx(ListItemIcon, {
           className: "needBg",
-          children: /*#__PURE__*/_jsx(Icon, {})
+          children: /*#__PURE__*/_jsx(Icon, {
+            icon: rest?.Icon
+          })
         }), /*#__PURE__*/_jsx(ListItemText, {
           primary: rest?.label
         })]

package/dist/Editor/Elements/DataView/Layouts/Options/styles.js

@@ -3,8 +3,9 @@ const useOptionsStyles = (theme, appTheme) => ({
     "& .MuiPaper-root": {
       boxShadow: "0px 4px 10px 0px rgba(0, 0, 0, 0.16)",
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
-      borderRadius: "12px",
+      borderRadius: "20px !important",
       background: appTheme?.palette?.editor?.tv_pop_bg,
+      fontFamily: 'Inter !important',
       color: appTheme?.palette?.editor?.tv_text_primary,
       [theme?.breakpoints?.between("xs", "md")]: {
         borderRadius: "16px 16px 0px 0px",
@@ -23,27 +24,38 @@ const useOptionsStyles = (theme, appTheme) => ({
         },
         "& svg": {
           width: "16px",
-          height: "16px"
+          height: "16px",
+          '& path': {
+            stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
+          }
         }
       },
       "& .MuiInputBase-root": {
         color: appTheme?.palette?.editor?.tv_text_primary,
         fontSize: "14px",
-        background: appTheme?.palette?.editor?.tv_input_bg,
-        borderRadius: "8px"
+        // background: appTheme?.palette?.editor?.tv_input_bg,
+        background: 'transparent',
+        borderRadius: "8px",
+        boxShadow: '0px 4px 18px 0px #0000000D'
+      },
+      '& .MuiInputBase-input': {
+        padding: '0px 12px',
+        height: '34px'
       },
       "& .MuiOutlinedInput-notchedOutline": {
         borderRadius: "8px",
-        border: `1px solid ${appTheme?.palette?.editor?.tv_border}`
+        border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
+        background: 'transparent'
       },
       "& .MuiList-root": {
         padding: "4px 2px",
+        fontFamily: 'Inter',
         "& .MuiListItemButton-root": {
           color: appTheme?.palette?.editor?.tv_text_primary,
           padding: "2px 4px",
           borderRadius: "8px",
           "& .MuiListItemIcon-root": {
-            minWidth: "38px",
+            minWidth: "26px",
             "&.needBg": {
               minWidth: "20px",
               width: "20px",
@@ -56,17 +68,27 @@ const useOptionsStyles = (theme, appTheme) => ({
             },
             color: `${appTheme?.palette?.editor?.tv_text} !important`,
             "& svg": {
-              width: "16px"
+              width: "16px",
+              '& path': {
+                stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
+              }
             }
           },
           "& .MuiTypography-root": {
-            fontSize: "14px"
+            fontSize: "14px",
+            fontFamily: 'Inter'
           },
           "&:hover": {
             background: appTheme?.palette?.editor?.tv_hover_bg,
             color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
             "& .MuiListItemIcon-root": {
-              color: `${appTheme?.palette?.editor?.tv_hover_text} !important`
+              color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
+              "& svg": {
+                color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
+                '& path': {
+                  stroke: `${appTheme?.palette?.editor?.tv_hover_text} !important`
+                }
+              }
             }
           }
         }
@@ -79,7 +101,8 @@ const useOptionsStyles = (theme, appTheme) => ({
       "& .sb": {
         borderBottom: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
         marginBottom: "8px",
-        paddingBottom: "8px"
+        // paddingBottom: "8px",
+        paddingBottom: "0px"
       },
       "& .mt": {
         marginTop: "8px"
@@ -119,10 +142,10 @@ const useOptionsStyles = (theme, appTheme) => ({
         fontFamily: '"Roboto","Helvetica","Arial",sans-serif',
         fontSize: "14px"
       },
-      "& .MuiInputBase-input": {
-        height: "32px",
-        padding: "4px 8px"
-      },
+      // "& .MuiInputBase-input": {
+      //   height: "32px",
+      //   padding: "4px 8px",
+      // },
       "& .more-btn-cbs": {
         color: appTheme?.palette?.editor?.tv_text_primary
       }
@@ -133,7 +156,8 @@ const useOptionsStyles = (theme, appTheme) => ({
     width: "253px",
     "& .fe-dv-ap-title": {
       display: "flex",
-      fontWeight: "bold",
+      fontWeight: "600",
+      fontFamily: 'Inter',
       padding: "0px 0px 12px 0px",
       justifyContent: "space-between",
       fontSize: "14px",
@@ -142,7 +166,8 @@ const useOptionsStyles = (theme, appTheme) => ({
       marginBottom: "8px",
       "& span": {
         display: "flex",
-        alignItems: "center"
+        alignItems: "center",
+        fontFamily: 'Inter'
       }
     },
     "& .fe-dv-ap-desc": {
@@ -163,6 +188,11 @@ const useOptionsStyles = (theme, appTheme) => ({
         color: "red",
         marginLeft: "2px",
         marginTop: "4px"
+      },
+      '& svg': {
+        '& path': {
+          stroke: appTheme?.palette?.editor?.closeButtonSvgStroke
+        }
       }
     },
     "& .fe-tv-opt-sub-title": {
@@ -171,6 +201,11 @@ const useOptionsStyles = (theme, appTheme) => ({
       justifyContent: "space-between",
       marginBottom: "8px"
     },
+    "& .more-btn-cbs": {
+      color: `${appTheme?.palette?.editor?.closeButtonSvgStroke}`,
+      border: `1.5px solid ${appTheme?.palette?.editor?.closeButtonSvgStroke}`,
+      paddingTop: "10px"
+    },
     [theme?.breakpoints?.between("xs", "md")]: {
       width: "100%"
     }

package/dist/Editor/Elements/DataView/Layouts/TableStyles.js

@@ -19,6 +19,9 @@ const useTableStyles = (theme, appTheme) => ({
       "& svg": {
         "& .fillStroke": {
           stroke: appTheme?.palette?.editor?.tv_stroke
+        },
+        '& path': {
+          stroke: appTheme?.palette?.editor?.tv_text
         }
       }
     },
@@ -26,7 +29,8 @@ const useTableStyles = (theme, appTheme) => ({
       height: "40px",
       "& input": {
         color: appTheme?.palette?.editor?.tv_text_primary,
-        background: "transparent"
+        background: "transparent",
+        fontSize: '14px'
       }
     },
     "& th, tr, td": {
@@ -35,15 +39,30 @@ const useTableStyles = (theme, appTheme) => ({
     "& .tv-act-btn": {
       color: appTheme?.palette?.editor?.tv_text,
       textTransform: "none",
+      '& .MuiButton-startIcon': {
+        background: appTheme?.palette?.editor?.tv_ico_bg,
+        borderRadius: '4px',
+        padding: '2px',
+        "& svg": {
+          width: '16px',
+          height: '16px'
+        }
+      },
       "&.ico": {
         "& svg": {
-          color: appTheme?.palette?.editor?.tv_text
+          color: appTheme?.palette?.editor?.tv_text,
+          '& path': {
+            stroke: appTheme?.palette?.editor?.tv_text
+          }
         }
       },
       "&:hover": {
         color: "rgba(37, 99, 235, 1)",
         "& svg": {
-          color: "rgba(37, 99, 235, 1)"
+          color: "rgba(37, 99, 235, 1)",
+          '& path': {
+            stroke: "rgba(37, 99, 235, 1)"
+          }
         }
       }
     },

package/dist/Editor/Elements/DataView/Layouts/TableView.js

@@ -1,14 +1,12 @@
 import React, { useState } from "react";
 import { Box, Button, useTheme } from "@mui/material";
-import KeyboardArrowUpIcon from "@mui/icons-material/KeyboardArrowUp";
-import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
-import AddCircleOutlineIcon from "@mui/icons-material/AddCircleOutline";
 import { useDataView } from "../Providers/DataViewProvider";
 import PropertySettings from "./Options";
 import { PROPERTY_TYPES } from "./Options/Constants";
 import useTableStyles from "./TableStyles";
 import { GridSettingsIcon, GridAddSectionIcon } from "../../../common/iconslist";
 import { useEditorContext } from "../../../hooks/useMouseMove";
+import Icon from "../../../common/Icon";
 import { jsx as _jsx } from "react/jsx-runtime";
 import { Fragment as _Fragment } from "react/jsx-runtime";
 import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -16,14 +14,28 @@ const SortIcon = props => {
   const {
     sortBy
   } = props;
-  return sortBy ? sortBy === "asc" ? /*#__PURE__*/_jsx(KeyboardArrowUpIcon, {
+  return sortBy ? sortBy === "asc" ? /*#__PURE__*/_jsx(Box, {
     sx: {
-      color: "rgba(37, 99, 235, 1)"
-    }
-  }) : /*#__PURE__*/_jsx(KeyboardArrowDownIcon, {
+      '& svg': {
+        '& path': {
+          stroke: "rgba(37, 99, 235, 1) !important"
+        }
+      }
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: 'chervUp'
+    })
+  }) : /*#__PURE__*/_jsx(Box, {
     sx: {
-      color: "rgba(37, 99, 235, 1)"
-    }
+      '& svg': {
+        '& path': {
+          stroke: "rgba(37, 99, 235, 1) !important"
+        }
+      }
+    },
+    children: /*#__PURE__*/_jsx(Icon, {
+      icon: 'chervDown'
+    })
   }) : null;
 };
 const TableView = props => {
@@ -165,7 +177,7 @@ const TableView = props => {
           children: /*#__PURE__*/_jsxs("tr", {
             children: [shownProperties?.map((m, i) => {
               const {
-                Icon
+                Icon: iconType
               } = PROPERTY_TYPES?.find(f => f.type === m.type) || {};
               const isSort = sortBy?.key === m.key ? sortBy?.operator : null;
               return /*#__PURE__*/_jsx("th", {
@@ -174,7 +186,9 @@ const TableView = props => {
                 },
                 children: /*#__PURE__*/_jsx(Button, {
                   className: "tv-act-btn la",
-                  startIcon: /*#__PURE__*/_jsx(Icon, {}),
+                  startIcon: /*#__PURE__*/_jsx(Icon, {
+                    icon: iconType
+                  }),
                   endIcon: /*#__PURE__*/_jsx(SortIcon, {
                     sortBy: isSort
                   }),
@@ -210,9 +224,21 @@ const TableView = props => {
       onClick: onAddRow,
       sx: {
         textTransform: "none",
-        justifyContent: "start"
+        justifyContent: "start",
+        color: appTheme?.palette?.editor?.activeColor,
+        '& svg': {
+          width: '18px',
+          height: '18px',
+          strokeWidth: 1.2,
+          '& path': {
+            stroke: appTheme?.palette?.editor?.activeColor
+          }
+        },
+        fontFamily: 'inter'
       },
-      startIcon: /*#__PURE__*/_jsx(AddCircleOutlineIcon, {}),
+      startIcon: /*#__PURE__*/_jsx(Icon, {
+        icon: 'addRounded'
+      }),
       children: "Add new row"
     }) : null, open && !readOnly ? /*#__PURE__*/_jsx(PropertySettings, {
       open: open,

package/dist/Editor/Elements/DataView/Layouts/ViewData.js

@@ -52,6 +52,11 @@ const ViewData = props => {
     component: "tbody",
     ...attributes,
     contentEditable: false,
+    sx: {
+      "& .MuiInputBase-root": {
+        background: "transparent !important"
+      }
+    },
     children: [rows?.map((row, i) => {
       return /*#__PURE__*/_jsx(Box, {
         component: "tr",

package/dist/Editor/Elements/DataView/styles.js

@@ -47,11 +47,19 @@ const useDataViewStyles = (theme, appTheme) => ({
         },
         "& .tv-ck-box": {
           "& svg": {
-            color: appTheme?.palette?.editor?.tv_border
+            color: appTheme?.palette?.editor?.tv_border,
+            '& rect': {
+              fill: appTheme?.palette?.editor?.tv_chk_box_fill,
+              stroke: appTheme?.palette?.editor?.tv_chk_box_stroke
+            }
           },
           "&.Mui-checked": {
             "& svg": {
-              color: "rgba(37, 99, 235, 1)"
+              color: "rgba(37, 99, 235, 1)",
+              '& rect': {
+                fill: appTheme?.palette?.editor?.activeColor,
+                stroke: 'none'
+              }
             }
           }
         }
@@ -85,7 +93,8 @@ const useDataViewStyles = (theme, appTheme) => ({
         width: "fit-content",
         border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
         boxShadow: "0px 4px 18px 0px #0000000D",
-        borderRadius: "8px"
+        borderRadius: "8px",
+        minWidth: '148px'
       },
       "& input": {
         paddingBottom: "0px",
@@ -110,7 +119,8 @@ const useDataViewStyles = (theme, appTheme) => ({
       "& .MuiInputBase-input": {
         paddingBottom: "0px",
         fontWeight: "bold",
-        fontSize: "16px"
+        fontSize: "16px",
+        color: appTheme?.palette?.editor?.textFormatTextColor
       },
       [theme?.breakpoints?.between("xs", "md")]: {
         width: "100%",
@@ -130,10 +140,12 @@ const useDataViewStyles = (theme, appTheme) => ({
       width: "150px",
       border: `1px solid ${appTheme?.palette?.editor?.tv_border}`,
       borderRadius: "8px",
+      fontFamily: 'Inter !important',
       background: appTheme?.palette?.editor?.tv_pop_bg,
       color: appTheme?.palette?.editor?.tv_text_primary,
       "& .MuiButtonBase-root": {
         fontSize: "14px",
+        padding: '6px 8px',
         "& svg": {
           width: "16px",
           height: "16px",
@@ -144,7 +156,10 @@ const useDataViewStyles = (theme, appTheme) => ({
           borderRadius: "8px",
           color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
           "& svg": {
-            color: `${appTheme?.palette?.editor?.tv_hover_text} !important`
+            color: `${appTheme?.palette?.editor?.tv_hover_text} !important`,
+            '& path': {
+              stroke: `${appTheme?.palette?.editor?.tv_hover_text} !important`
+            }
           }
         }
       }