@flozy/editor 1.7.0 → 1.7.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (32) hide show
  1. package/dist/Editor/CommonEditor.js +9 -79
  2. package/dist/Editor/Editor.css +11 -0
  3. package/dist/Editor/Elements/Button/EditorButton.js +7 -3
  4. package/dist/Editor/Elements/Carousel/Carousel.js +4 -4
  5. package/dist/Editor/Elements/Embed/Image.js +5 -1
  6. package/dist/Editor/Elements/Form/Form.js +3 -3
  7. package/dist/Editor/Elements/Form/Workflow/FormWorkflow.js +17 -12
  8. package/dist/Editor/Elements/Form/Workflow/MoreOptions.js +4 -7
  9. package/dist/Editor/Elements/Form/Workflow/Styles.js +97 -89
  10. package/dist/Editor/Elements/Form/Workflow/UserInputs.js +10 -15
  11. package/dist/Editor/Elements/Form/Workflow/index.js +23 -24
  12. package/dist/Editor/Elements/Grid/Grid.js +9 -1
  13. package/dist/Editor/Elements/Grid/GridItem.js +3 -0
  14. package/dist/Editor/Elements/Signature/SignaturePopup.js +8 -3
  15. package/dist/Editor/Elements/SimpleText.js +9 -4
  16. package/dist/Editor/MiniEditor.js +118 -0
  17. package/dist/Editor/Styles/EditorStyles.js +20 -0
  18. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +1 -1
  19. package/dist/Editor/common/DnD/DragHandle.js +99 -0
  20. package/dist/Editor/common/DnD/Draggable.js +41 -0
  21. package/dist/Editor/common/DnD/Droppable.js +28 -0
  22. package/dist/Editor/common/DnD/index.js +48 -0
  23. package/dist/Editor/common/StyleBuilder/sectionStyle.js +8 -0
  24. package/dist/Editor/common/iconslist.js +17 -1
  25. package/dist/Editor/hooks/useMouseMove.js +9 -1
  26. package/dist/Editor/utils/helper.js +1 -0
  27. package/dist/Editor/utils/pageSettings.js +2 -2
  28. package/dist/Editor/utils/serializeToHTML.js +5 -0
  29. package/dist/Editor/utils/{serializer.js → serializeToText.js} +3 -3
  30. package/dist/index.js +2 -0
  31. package/package.json +1 -1
  32. package/dist/Editor/Elements/Section.js +0 -42
@@ -2,7 +2,6 @@
2
2
  import React, { useRef, useCallback, useEffect, useMemo, useState, forwardRef, useImperativeHandle } from "react";
3
3
  import { createEditor, Transforms } from "slate";
4
4
  import { Slate, Editable, ReactEditor } from "slate-react";
5
- import { DndContext, DragOverlay } from "@dnd-kit/core";
6
5
  import { useDebounce } from "use-debounce";
7
6
  import { getMarked, getBlock } from "./utils/SlateUtilityFunctions";
8
7
  import CodeToText from "./Elements/CodeToText/CodeToText";
@@ -13,9 +12,9 @@ import { RemoteCursorOverlay } from "./RemoteCursorOverlay/Overlay";
13
12
  import { mentionsEvent, commands, indentation, escapeEvent } from "./utils/events";
14
13
  import withCommon from "./hooks/withCommon";
15
14
  import DialogWrapper from "./DialogWrapper";
16
- import { serialize } from "./utils/serializer";
15
+ import { serializeToText } from "./utils/serializeToText";
17
16
  import { getPageSettings } from "./utils/pageSettings";
18
- import { customCollisionDetectionAlgorithm, getThumbnailImage } from "./helper";
17
+ import { getThumbnailImage } from "./helper";
19
18
  import PopupTool from "./Toolbar/PopupTool";
20
19
  import "./font.css";
21
20
  import "./Editor.css";
@@ -25,8 +24,9 @@ import MiniToolbar from "./Toolbar/Mini/MiniToolbar";
25
24
  import { EditorProvider } from "./hooks/useMouseMove";
26
25
  import TopBanner from "./Elements/TopBanner/TopBanner";
27
26
  import editorStyles from "./Styles/EditorStyles";
27
+ import DragHandle from "./common/DnD/DragHandle";
28
+ import DragAndDrop from "./common/DnD";
28
29
  import "animate.css";
29
- import Section from "./Elements/Section";
30
30
  import { jsx as _jsx } from "react/jsx-runtime";
31
31
  import { jsxs as _jsxs } from "react/jsx-runtime";
32
32
  const PREVIEW_IMAGE_HIDE_CLASS = ["grid-container-toolbar", "grid-item-toolbar", "element-toolbar"];
@@ -135,12 +135,12 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
135
135
  }
136
136
  }, [deboundedValue]);
137
137
  const getOnSaveData = val => {
138
- const text = serialize(val);
138
+ const text = serializeToText(val);
139
139
  const title = val?.find(f => f.type === "title");
140
140
  return {
141
141
  value: JSON.stringify(val),
142
142
  text: text,
143
- title: serialize(title?.children) || "Untitled"
143
+ title: serializeToText(title?.children) || "Untitled"
144
144
  };
145
145
  };
146
146
  const getPreviewImage = async (needBackground = false, options = {}) => {
@@ -299,61 +299,6 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
299
299
  });
300
300
  }
301
301
  }, [chars, editor, target, mentions, setMentions, search, type, mentionsRef]);
302
- const handleDragStart = e => {
303
- try {
304
- const {
305
- active: {
306
- data: {
307
- current: {
308
- element
309
- }
310
- }
311
- }
312
- } = e;
313
- const dragEle = ReactEditor.toDOMNode(editor, element);
314
- const {
315
- width,
316
- height
317
- } = dragEle.getBoundingClientRect();
318
- setDrag({
319
- style: {
320
- width,
321
- height
322
- },
323
- dom: dragEle.outerHTML
324
- });
325
- } catch (err) {
326
- console.log(err);
327
- }
328
- };
329
- const handleDragEnd = e => {
330
- try {
331
- const {
332
- active: {
333
- data: {
334
- current: {
335
- element,
336
- onDragEnd
337
- }
338
- }
339
- },
340
- over: {
341
- data: {
342
- current: {
343
- onDrop
344
- }
345
- }
346
- }
347
- } = e;
348
- onDrop(JSON.stringify(element));
349
- setTimeout(() => {
350
- onDragEnd();
351
- }, 100);
352
- setDrag(null);
353
- } catch (err) {
354
- console.log(err);
355
- }
356
- };
357
302
  const Overlay = collaborativeEditor && !isReadOnly ? RemoteCursorOverlay : React.Fragment;
358
303
  const dotBg = needDotsBG ? {
359
304
  background: "white",
@@ -389,11 +334,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
389
334
  editor: editor,
390
335
  initialValue: value,
391
336
  onChange: handleEditorChange,
392
- children: [/*#__PURE__*/_jsxs(DndContext, {
393
- collisionDetection: customCollisionDetectionAlgorithm,
394
- onDragStart: handleDragStart,
395
- onDragEnd: handleDragEnd,
396
- children: [/*#__PURE__*/_jsx(Overlay, {
337
+ children: [/*#__PURE__*/_jsx(DragAndDrop, {
338
+ children: /*#__PURE__*/_jsx(Overlay, {
397
339
  children: /*#__PURE__*/_jsx(Box, {
398
340
  className: `${hasTopBanner() ? "has-topbanner" : ""}`,
399
341
  sx: classes.slateWrapper,
@@ -448,19 +390,7 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
448
390
  }) : null]
449
391
  })
450
392
  })
451
- }), /*#__PURE__*/_jsx(DragOverlay, {
452
- className: "drag-overlay",
453
- style: {
454
- ...(drag?.style || {})
455
- },
456
- children: drag ? /*#__PURE__*/_jsx(Item, {
457
- children: /*#__PURE__*/_jsx("div", {
458
- dangerouslySetInnerHTML: {
459
- __html: drag?.dom
460
- }
461
- })
462
- }) : null
463
- })]
393
+ })
464
394
  }), htmlAction.showInput && /*#__PURE__*/_jsx(CodeToText, {
465
395
  ...htmlAction,
466
396
  handleCodeToText: handleCodeToText
@@ -413,6 +413,14 @@ blockquote {
413
413
  width: auto !important;
414
414
  }
415
415
 
416
+ .MuiButton-root.primaryBtn.disabled,
417
+ .MuiButton-root.secondaryBtn.disabled {
418
+ background: #eee !important;
419
+ color: #ccc !important;
420
+ border: 1px solid #ccc !important;
421
+
422
+ }
423
+
416
424
  .MuiButton-root.secondaryBtn {
417
425
  background: #ffffff;
418
426
  border: 1px solid #2563eb !important;
@@ -823,6 +831,9 @@ blockquote {
823
831
  width: 200px;
824
832
  cursor: pointer;
825
833
  color:#464646;
834
+ background-color: #FFF;
835
+ padding: 4px 6px;
836
+ border-radius: 12px;
826
837
  span {
827
838
  text-transform: capitalize;
828
839
  }
@@ -8,6 +8,7 @@ import OpenInNewIcon from "@mui/icons-material/OpenInNew";
8
8
  import DeleteIcon from "@mui/icons-material/Delete";
9
9
  import ButtonPopup from "./ButtonPopup";
10
10
  import { actionButtonRedirect } from "../../service/actionTrigger";
11
+ import { WorkflowIcon } from "../../common/iconslist";
11
12
  import { jsx as _jsx } from "react/jsx-runtime";
12
13
  import { jsxs as _jsxs } from "react/jsx-runtime";
13
14
  const EditorButton = props => {
@@ -47,6 +48,7 @@ const EditorButton = props => {
47
48
  linkType,
48
49
  redirectOnURLResult
49
50
  } = buttonLink || {};
51
+ const isTrigger = linkType === "actionTrigger";
50
52
  const {
51
53
  topLeft,
52
54
  topRight,
@@ -62,7 +64,7 @@ const EditorButton = props => {
62
64
  const BtnIcon = buttonIcon ? fIcons[buttonIcon] : null;
63
65
  const onClick = async e => {
64
66
  if (readOnly) {
65
- if (linkType === "actionTrigger") {
67
+ if (isTrigger) {
66
68
  if (metadata?.buttonLink?.handler) {
67
69
  metadata.buttonLink.handler("click");
68
70
  } else if (redirectOnURLResult) {
@@ -162,7 +164,6 @@ const EditorButton = props => {
162
164
  sx: {
163
165
  background: bgColor || "rgb(30, 75, 122)",
164
166
  borderBlockStyle: "solid",
165
- // ...borderStyleColor,
166
167
  borderColor: borderColor || "transparent",
167
168
  borderWidth: borderWidth || "1px",
168
169
  borderRadius: `${topLeft}px ${topRight}px ${bottomLeft}px ${bottomRight}px`,
@@ -199,7 +200,10 @@ const EditorButton = props => {
199
200
  paddingLeft: "4px",
200
201
  paddingRight: "4px"
201
202
  }
202
- }), /*#__PURE__*/_jsx(Toolbar, {})]
203
+ }), !readOnly && isTrigger ? /*#__PURE__*/_jsx(IconButton, {
204
+ className: "workflow-icon-btn",
205
+ children: /*#__PURE__*/_jsx(WorkflowIcon, {})
206
+ }) : null, /*#__PURE__*/_jsx(Toolbar, {})]
203
207
  })
204
208
  }), /*#__PURE__*/_jsx("div", {
205
209
  contentEditable: false,
@@ -51,14 +51,14 @@ const Carousel = props => {
51
51
  }
52
52
  }, [edit]);
53
53
  const onAddSlide = () => {
54
- const insertPath = [path[0], children.length];
55
- if (insertPath[0] !== undefined) {
56
- insertPath[insertPath.length - 1] = element.children.length;
54
+ try {
57
55
  Transforms.insertNodes(editor, [{
58
56
  ...carouselItem()
59
57
  }], {
60
- at: insertPath
58
+ at: [...path, children.length]
61
59
  });
60
+ } catch (err) {
61
+ console.log(err);
62
62
  }
63
63
  };
64
64
  const onEdit = () => {
@@ -148,6 +148,7 @@ const Image = ({
148
148
  },
149
149
  ...element.attr,
150
150
  "data-path": path.join(","),
151
+ contentEditable: false,
151
152
  children: [openSetttings ? /*#__PURE__*/_jsx(EmbedPopup, {
152
153
  element: element,
153
154
  onSave: onSave,
@@ -188,7 +189,10 @@ const Image = ({
188
189
  className: "resize-br visible-on-hover",
189
190
  children: /*#__PURE__*/_jsx(AspectRatioIcon, {})
190
191
  })]
191
- }), children]
192
+ }), /*#__PURE__*/_jsx("span", {
193
+ contentEditable: false,
194
+ children: children
195
+ })]
192
196
  });
193
197
  };
194
198
  export default Image;
@@ -4,8 +4,7 @@ import { useSlateStatic, ReactEditor } from "slate-react";
4
4
  import { IconButton, Tooltip, Grid, Menu, MenuItem, CircularProgress } from "@mui/material";
5
5
  import DeleteIcon from "@mui/icons-material/Delete";
6
6
  import BackupIcon from "@mui/icons-material/Backup";
7
- import { GridSettingsIcon, GridAddSectionIcon } from "../../common/iconslist";
8
- import SendTimeExtensionIcon from '@mui/icons-material/SendTimeExtension';
7
+ import { GridSettingsIcon, GridAddSectionIcon, WorkflowIcon } from "../../common/iconslist";
9
8
  import FormPopup from "./FormPopup";
10
9
  import ButtonPopup from "../Button/ButtonPopup";
11
10
  import { formField } from "../../utils/formfield";
@@ -222,8 +221,9 @@ const Form = props => {
222
221
  title: "Workflow",
223
222
  arrow: true,
224
223
  children: /*#__PURE__*/_jsx(IconButton, {
224
+ className: "svg-big-btn",
225
225
  onClick: onWorkflow,
226
- children: /*#__PURE__*/_jsx(SendTimeExtensionIcon, {})
226
+ children: /*#__PURE__*/_jsx(WorkflowIcon, {})
227
227
  })
228
228
  })]
229
229
  });
@@ -1,7 +1,7 @@
1
1
  import React from "react";
2
2
  import { Grid, Radio, RadioGroup, Typography, FormControlLabel, Select, MenuItem, FormControl, TextField } from "@mui/material";
3
3
  import FormStyles from "./Styles";
4
- import KeyboardArrowDownIcon from '@mui/icons-material/KeyboardArrowDown';
4
+ import KeyboardArrowDownIcon from "@mui/icons-material/KeyboardArrowDown";
5
5
  import UserInputs from "./UserInputs";
6
6
  import { jsx as _jsx } from "react/jsx-runtime";
7
7
  import { jsxs as _jsxs } from "react/jsx-runtime";
@@ -61,26 +61,26 @@ const FormWorkflow = props => {
61
61
  value: schedule,
62
62
  defaultValue: 1,
63
63
  children: [/*#__PURE__*/_jsx(FormControlLabel, {
64
- value: 'immediately',
64
+ value: "immediately",
65
65
  label: "Immediately",
66
66
  onChange: () => {
67
- setSchedule('immediately');
67
+ setSchedule("immediately");
68
68
  },
69
69
  control: /*#__PURE__*/_jsx(Radio, {
70
70
  size: "small"
71
71
  })
72
72
  }), /*#__PURE__*/_jsx(FormControlLabel, {
73
- value: 'after',
73
+ value: "after",
74
74
  label: "After",
75
75
  onChange: () => {
76
- setSchedule('after');
76
+ setSchedule("after");
77
77
  },
78
78
  control: /*#__PURE__*/_jsx(Radio, {
79
79
  size: "small"
80
80
  })
81
81
  })]
82
82
  })
83
- }), schedule === 'after' && /*#__PURE__*/_jsx(Grid, {
83
+ }), schedule === "after" && /*#__PURE__*/_jsx(Grid, {
84
84
  item: true,
85
85
  children: /*#__PURE__*/_jsxs(Grid, {
86
86
  container: true,
@@ -113,19 +113,19 @@ const FormWorkflow = props => {
113
113
  sx: classes.select,
114
114
  IconComponent: KeyboardArrowDownIcon,
115
115
  style: {
116
- minWidth: '160px'
116
+ minWidth: "160px"
117
117
  },
118
118
  children: [/*#__PURE__*/_jsx(MenuItem, {
119
119
  sx: classes.selectList,
120
- value: 'min',
120
+ value: "min",
121
121
  children: "Minutes"
122
122
  }), /*#__PURE__*/_jsx(MenuItem, {
123
123
  sx: classes.selectList,
124
- value: 'hr',
124
+ value: "hr",
125
125
  children: "Hours"
126
126
  }), /*#__PURE__*/_jsx(MenuItem, {
127
127
  sx: classes.selectList,
128
- value: 'day',
128
+ value: "day",
129
129
  children: "Day"
130
130
  })]
131
131
  })
@@ -149,12 +149,17 @@ const FormWorkflow = props => {
149
149
  maxRows: 5,
150
150
  sx: {
151
151
  "& fieldset": {
152
- border: '1px solid #6F6F6F33',
152
+ border: "1px solid #6F6F6F33",
153
153
  borderRadius: "8px"
154
154
  },
155
155
  "& textarea": {
156
- fontSize: '16px',
156
+ fontSize: "16px",
157
157
  fontWeight: 500
158
+ },
159
+ "& textarea:focus-visible": {
160
+ outline: "none",
161
+ borderRadius: "none",
162
+ border: "none"
158
163
  }
159
164
  }
160
165
  })]
@@ -3,8 +3,8 @@ import { IconButton, Menu, MenuItem, Tooltip } from "@mui/material";
3
3
  import { MoreHorizontal } from "../../../common/iconslist";
4
4
  import Icon from "../../../common/Icon";
5
5
  import { jsx as _jsx } from "react/jsx-runtime";
6
- import { jsxs as _jsxs } from "react/jsx-runtime";
7
6
  import { Fragment as _Fragment } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
8
  function MoreOptions(props) {
9
9
  const {
10
10
  classes,
@@ -27,15 +27,12 @@ function MoreOptions(props) {
27
27
  children: [/*#__PURE__*/_jsx(Tooltip, {
28
28
  arrow: true,
29
29
  title: "More Options",
30
- children: /*#__PURE__*/_jsxs(IconButton, {
30
+ children: /*#__PURE__*/_jsx(IconButton, {
31
31
  sx: classes.moreOption,
32
32
  onClick: handleClick,
33
- children: [/*#__PURE__*/_jsx(Icon, {
33
+ children: /*#__PURE__*/_jsx(Icon, {
34
34
  icon: "moreHorizantal"
35
- }), /*#__PURE__*/_jsx(MoreHorizontal, {
36
- width: "24px",
37
- height: "24px"
38
- })]
35
+ })
39
36
  })
40
37
  }), /*#__PURE__*/_jsx(Menu, {
41
38
  id: "basic-menu",
@@ -1,147 +1,155 @@
1
1
  const FormStyles = () => ({
2
2
  addButton: {
3
- display: 'flex',
4
- justifyContent: 'flex-end'
3
+ display: "flex",
4
+ justifyContent: "flex-end"
5
5
  },
6
6
  infoText: {
7
- fontSize: '12px',
8
- fontWeight: '400',
9
- color: '#94A3B8'
7
+ fontSize: "12px",
8
+ fontWeight: "400",
9
+ color: "#94A3B8"
10
10
  },
11
11
  bodyTextArea: {
12
- '& textarea': {
13
- border: 'none',
14
- width: '96%',
15
- maxWidth: '96%',
16
- outline: 'none'
12
+ "& textarea": {
13
+ border: "none",
14
+ width: "100%",
15
+ maxWidth: "100%",
16
+ outline: "none",
17
+ padding: "12px"
17
18
  },
18
- '& textarea: focus-visible': {
19
- outline: 'none',
20
- border: 'none'
19
+ "& textarea:focus-visible": {
20
+ outline: "none",
21
+ border: "none"
21
22
  }
22
23
  },
23
24
  formHeadings: {
24
- fontSize: '14px',
25
+ fontSize: "14px",
25
26
  fontWeight: 500,
26
- paddingBottom: '10px',
27
- paddingTop: '10px'
27
+ paddingBottom: "10px",
28
+ paddingTop: "10px"
28
29
  },
29
30
  flowListCard: {
30
- border: '1px solid #6F6F6F33',
31
- borderRadius: '8px',
32
- padding: '10px'
31
+ border: "1px solid #6F6F6F33",
32
+ borderRadius: "8px",
33
+ padding: "10px"
33
34
  },
34
35
  listHeading: {
35
- fontSize: '14px',
36
+ fontSize: "14px",
36
37
  fontWeight: 700
37
38
  },
38
39
  listSubHeading: {
39
- fontSize: '12px',
40
+ fontSize: "12px",
40
41
  fontWeight: 500,
41
- color: '#64748B',
42
- maxWidth: '380px',
43
- textTransform: 'capitalize',
42
+ color: "#64748B",
43
+ maxWidth: "380px",
44
+ textTransform: "capitalize",
44
45
  whiteSpace: "nowrap",
45
- overflow: 'hidden',
46
- textOverflow: 'ellipsis'
46
+ overflow: "hidden",
47
+ textOverflow: "ellipsis"
47
48
  },
48
49
  addBtnTypo: {
49
- color: '#94A3B8',
50
+ color: "#94A3B8",
50
51
  fontWeight: 500,
51
- fontSize: '12px'
52
+ fontSize: "12px"
52
53
  },
53
54
  emptyList: {
54
- justifyContent: 'center',
55
- display: 'flex',
56
- border: '1px solid #6F6F6F33',
57
- borderRadius: '8px',
58
- padding: '10px',
59
- color: '#94A3B8'
55
+ justifyContent: "center",
56
+ display: "flex",
57
+ border: "1px solid #6F6F6F33",
58
+ borderRadius: "8px",
59
+ padding: "10px",
60
+ color: "#94A3B8"
60
61
  },
61
62
  popupTitle: {
62
63
  fontWeight: 600,
63
- fontSize: '16px',
64
- display: 'flex',
65
- alignItems: 'center'
64
+ fontSize: "16px",
65
+ display: "flex",
66
+ alignItems: "center"
66
67
  },
67
68
  subHeadings: {
68
69
  fontWeight: 500,
69
- fontSize: '14px'
70
+ fontSize: "14px"
70
71
  },
71
72
  radioBtn: {
72
- '& .MuiFormControlLabel-label': {
73
- fontSize: '14px',
74
- color: '#64748B'
73
+ "& .MuiFormControlLabel-label": {
74
+ fontSize: "14px",
75
+ color: "#64748B"
75
76
  }
76
77
  },
77
78
  dialogTitle: {
78
- '& MuiDialogTitle-root': {
79
- padding: '16px 12px'
79
+ "& MuiDialogTitle-root": {
80
+ padding: "16px 12px"
80
81
  }
81
82
  },
82
83
  closeBtn: {
83
- background: '#F4F6F9',
84
- color: '#64748B',
85
- fontSize: '14px',
84
+ background: "#F4F6F9",
85
+ color: "#64748B",
86
+ fontSize: "14px",
86
87
  fontWeight: 500,
87
- padding: '4px 22px',
88
- textTransform: 'none',
89
- border: '1px solid #D8DDE1',
90
- '&:hover': {
91
- border: '1px solid #64748B'
88
+ padding: "4px 22px",
89
+ textTransform: "none",
90
+ border: "1px solid #D8DDE1",
91
+ "&:hover": {
92
+ border: "1px solid #64748B"
92
93
  }
93
94
  },
94
95
  variableBtn: {
95
- background: '#F4F6F9',
96
- color: '#64748B',
97
- fontSize: '14px',
96
+ background: "#F4F6F9",
97
+ color: "#64748B",
98
+ fontSize: "14px",
98
99
  fontWeight: 500,
99
- padding: '4px 22px',
100
- textTransform: 'none',
101
- border: '1px solid #D8DDE1',
102
- '& svg': {
103
- '& path': {
104
- stroke: '#64748B'
100
+ padding: "4px 22px",
101
+ textTransform: "none",
102
+ border: "1px solid #D8DDE1",
103
+ "& svg": {
104
+ "& path": {
105
+ stroke: "#64748B"
105
106
  }
106
107
  },
107
- '&:hover': {
108
- border: '1px solid #64748B'
108
+ "&:hover": {
109
+ border: "1px solid #64748B"
109
110
  }
110
111
  },
111
112
  saveBtn: {
112
- background: '#2563EB',
113
- fontSize: '14px',
113
+ background: "#2563EB",
114
+ fontSize: "14px",
114
115
  fontWeight: 500,
115
- padding: '4px 24px',
116
- textTransform: 'none'
116
+ padding: "4px 24px",
117
+ textTransform: "none",
118
+ "& .MuiButton-containedSizeSmall": {
119
+ borderRadius: "5px"
120
+ },
121
+ "& .MuiButton-containedPrimary": {
122
+ background: "#2563EB",
123
+ borderRadius: "5px"
124
+ }
117
125
  },
118
126
  select: {
119
- minWidth: '110px',
120
- '& .MuiOutlinedInput-notchedOutline': {
121
- borderRadius: '8px',
122
- border: '1px solid #6F6F6F33',
123
- boxShadow: '0px 4px 16px 0px #0000000D'
127
+ minWidth: "110px",
128
+ "& .MuiOutlinedInput-notchedOutline": {
129
+ borderRadius: "8px",
130
+ border: "1px solid #6F6F6F33",
131
+ boxShadow: "0px 4px 16px 0px #0000000D"
124
132
  },
125
- '&:hover .MuiOutlinedInput-notchedOutline': {
126
- borderRadius: '8px',
127
- border: '1px solid #6F6F6F33',
128
- boxShadow: '0px 4px 16px 0px #0000000D'
133
+ "&:hover .MuiOutlinedInput-notchedOutline": {
134
+ borderRadius: "8px",
135
+ border: "1px solid #6F6F6F33",
136
+ boxShadow: "0px 4px 16px 0px #0000000D"
129
137
  },
130
- '& .MuiSelect-select': {
131
- color: '#94A3B8',
132
- fontSize: '14px'
138
+ "& .MuiSelect-select": {
139
+ color: "#94A3B8",
140
+ fontSize: "14px"
133
141
  }
134
142
  },
135
143
  selectList: {
136
- color: '#94A3B8',
137
- fontSize: '14px'
144
+ color: "#94A3B8",
145
+ fontSize: "14px"
138
146
  },
139
147
  toolbarContainer: {
140
- border: '1px solid #6F6F6F33',
141
- borderRadius: '10px'
148
+ border: "1px solid #6F6F6F33",
149
+ borderRadius: "10px"
142
150
  },
143
151
  toolBar: {
144
- padding: '5px'
152
+ padding: "5px"
145
153
  },
146
154
  colorButtons: {
147
155
  "& .buttonsWrpr": {
@@ -191,17 +199,17 @@ const FormStyles = () => ({
191
199
  }
192
200
  },
193
201
  moreOption: {
194
- background: '#F4F4F4',
195
- borderRadius: '8px'
202
+ background: "#F4F4F4",
203
+ borderRadius: "8px"
196
204
  },
197
205
  dialogFooter: {
198
- '&.MuiDialogActions-root': {
199
- padding: '8px 24px'
206
+ "&.MuiDialogActions-root": {
207
+ padding: "8px 24px"
200
208
  }
201
209
  },
202
210
  toolButtons: {
203
- width: '36px',
204
- height: '36px'
211
+ width: "36px",
212
+ height: "36px"
205
213
  }
206
214
  });
207
215
  export default FormStyles;