@flozy/editor 1.5.1 → 1.5.2

Sign up to get free protection for your applications and to get access to all the features.
Files changed (38) hide show
  1. package/dist/Editor/CommonEditor.js +14 -3
  2. package/dist/Editor/Editor.css +144 -14
  3. package/dist/Editor/Elements/AppHeader/AppHeader.js +16 -11
  4. package/dist/Editor/Elements/Button/EditorButton.js +16 -7
  5. package/dist/Editor/Elements/Embed/Embed.js +13 -10
  6. package/dist/Editor/Elements/Grid/Grid.js +15 -2
  7. package/dist/Editor/Elements/Grid/GridItem.js +14 -2
  8. package/dist/Editor/Elements/Table/TableSelector.js +6 -4
  9. package/dist/Editor/Toolbar/FormatTools/TextSize.js +73 -0
  10. package/dist/Editor/Toolbar/FormatTools/index.js +2 -1
  11. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +23 -9
  12. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +152 -42
  13. package/dist/Editor/Toolbar/PopupTool/index.js +35 -34
  14. package/dist/Editor/Toolbar/Toolbar.js +6 -1
  15. package/dist/Editor/Toolbar/toolbarGroups.js +9 -9
  16. package/dist/Editor/assets/svg/addGridItem.js +49 -0
  17. package/dist/Editor/common/ColorPickerButton.js +3 -3
  18. package/dist/Editor/common/StyleBuilder/embedImageStyle.js +4 -4
  19. package/dist/Editor/common/StyleBuilder/fieldTypes/alignment.js +32 -15
  20. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +48 -34
  21. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +90 -115
  22. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +93 -101
  23. package/dist/Editor/common/StyleBuilder/fieldTypes/buttonLink.js +24 -5
  24. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +7 -5
  25. package/dist/Editor/common/StyleBuilder/fieldTypes/elementSize.js +49 -20
  26. package/dist/Editor/common/StyleBuilder/fieldTypes/icons.js +9 -5
  27. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +23 -5
  28. package/dist/Editor/common/StyleBuilder/fieldTypes/radiusStyle.js +52 -0
  29. package/dist/Editor/common/StyleBuilder/fieldTypes/saveAsTemplate.js +33 -6
  30. package/dist/Editor/common/StyleBuilder/fieldTypes/selectBox.js +16 -17
  31. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +8 -5
  32. package/dist/Editor/common/StyleBuilder/fieldTypes/textAlign.js +12 -6
  33. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +28 -23
  34. package/dist/Editor/common/StyleBuilder/gridStyle.js +0 -6
  35. package/dist/Editor/common/StyleBuilder/index.js +70 -44
  36. package/dist/Editor/common/Uploader.js +51 -14
  37. package/dist/Editor/common/iconslist.js +409 -0
  38. package/package.json +1 -1
@@ -70,6 +70,8 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
70
70
  const [isInteracted, setIsInteracted] = useState(false);
71
71
  const [deboundedValue] = useDebounce(value, 500);
72
72
  const [fullScreen, setFullScreen] = useState(false);
73
+ const [isDrawerOpen, setIsDrawerOpen] = useState(false);
74
+ console.log(isDrawerOpen);
73
75
  const [viewport, setViewport] = useState({
74
76
  w: null,
75
77
  h: null
@@ -203,11 +205,15 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
203
205
  setIsInteracted(true);
204
206
  }
205
207
  };
208
+ const onDrawerOpen = status => {
209
+ setIsDrawerOpen(status);
210
+ };
206
211
  const isReadOnly = readOnly === "readonly";
207
212
  const customProps = {
208
213
  ...(otherProps || {}),
209
214
  readOnly: isReadOnly,
210
- page_id: id
215
+ page_id: id,
216
+ onDrawerOpen: onDrawerOpen
211
217
  };
212
218
  const renderElement = useCallback(props => {
213
219
  return /*#__PURE__*/_jsx(Element, {
@@ -349,9 +355,14 @@ const CommonEditor = /*#__PURE__*/forwardRef((props, ref) => {
349
355
  paddingBottom: `${bannerSpacing?.bottom}px`,
350
356
  width: viewport.w ? `${viewport.w}px` : "100%",
351
357
  height: viewport.h ? `${viewport.h}px` : "auto",
352
- alignSelf: "center"
358
+ alignSelf: "center",
359
+ // scale: isDrawerOpen ? "0.75" : "1",
360
+ transformOrigin: "left top",
361
+ transition: "all 0.3s"
353
362
  },
354
- children: [/*#__PURE__*/_jsx(PopupTool, {}), /*#__PURE__*/_jsx(Editable, {
363
+ children: [/*#__PURE__*/_jsx(PopupTool, {
364
+ onDrawerOpen: onDrawerOpen
365
+ }), /*#__PURE__*/_jsx(Editable, {
355
366
  className: "innert-editor-textbox",
356
367
  readOnly: isReadOnly,
357
368
  placeholder: "Write something",
@@ -110,11 +110,11 @@ blockquote {
110
110
  }
111
111
 
112
112
  .grid-container-toolbar {
113
- right: -32px;
113
+ right: -40px;
114
114
  }
115
115
 
116
116
  .grid-item-toolbar {
117
- left: -32px;
117
+ left: -40px;
118
118
  }
119
119
 
120
120
  .element-toolbar {
@@ -127,15 +127,17 @@ blockquote {
127
127
  .grid-container-toolbar button,
128
128
  .grid-item-toolbar button,
129
129
  .element-toolbar button {
130
- background-color: #2684ff;
131
- color: #FFFFFF;
132
- border: 1px solid transparent;
130
+ background-color: #fff;
131
+ border: 1px solid rgb(37, 99, 235, 0.23);
133
132
  font-size: 12px;
134
133
  border-radius: 0px;
135
134
  margin-bottom: 0px;
136
135
  width: 24px;
137
136
  height: 24px;
138
- padding: 12px;
137
+ padding: 16px;
138
+ margin-bottom: 4px;
139
+ color: #64748B;
140
+ border-radius: 50%;
139
141
  }
140
142
  .grid-container-toolbar button:hover,
141
143
  .grid-item-toolbar button:hover,
@@ -212,7 +214,7 @@ blockquote {
212
214
  }
213
215
 
214
216
  .close-popupbtn {
215
- background-color: #ededed !important;
217
+ background-color: #F8FAFC !important;
216
218
  border-radius: 4px !important;
217
219
  width: 24px;
218
220
  height: 24px;
@@ -225,7 +227,7 @@ blockquote {
225
227
 
226
228
  .popupTitle {
227
229
  font-size: 16px !important;
228
- font-weight: 600 !important;
230
+ font-weight: 700 !important;
229
231
  font-family: Inter, sans-serif;
230
232
  text-transform: uppercase;
231
233
  }
@@ -520,16 +522,45 @@ blockquote {
520
522
 
521
523
  .element-root .element-selector {
522
524
  position: absolute;
523
- width: calc(100% + 16px);
524
- height: calc(100% + 16px);
525
- border: 4px dotted #2684ff;
525
+ width: calc(100%);
526
+ height: calc(100%);
527
+ border: 2px solid #2563EB;
526
528
  display: none;
527
529
  pointer-events: none;
528
- top: -8px;
529
- left: -8px;
530
+ top: 0px;
531
+ left: 0px;
530
532
  z-index: 100;
531
533
  }
532
534
 
535
+ .element-selector .element-selector-dots {
536
+ position: absolute;
537
+ width: 10px;
538
+ height: 10px;
539
+ border: 2px solid #2563EB;
540
+ background-color: #2563EB;
541
+ }
542
+
543
+ .element-selector-dots.tl {
544
+ left: -5px;
545
+ top: -5px;
546
+ border: 2px solid #2563EB;
547
+ }
548
+ .element-selector-dots.tr {
549
+ right: -5px;
550
+ top: -5px;
551
+ border: 2px solid #2563EB;
552
+ }
553
+ .element-selector-dots.bl {
554
+ left: -5px;
555
+ bottom: -5px;
556
+ border: 2px solid #2563EB;
557
+ }
558
+ .element-selector-dots.br {
559
+ right: -5px;
560
+ bottom: -5px;
561
+ border: 2px solid #2563EB;
562
+ }
563
+
533
564
  .element-selector.selected {
534
565
  display: block;
535
566
  }
@@ -571,4 +602,103 @@ blockquote {
571
602
 
572
603
  .dragging.active_drag .grid-c-wrpr {
573
604
  opacity: 0.15;
574
- }
605
+ }
606
+
607
+ .optionePopupHeader {
608
+ border-bottom: 1px solid #DCE4EC;
609
+ }
610
+
611
+ .dialogComp .MuiInputBase-input {
612
+ border-radius: 8px;
613
+ box-shadow: 0px 4px 18px 0px rgba(0, 0, 0, 0.05);
614
+ font-size: 12px;
615
+ font-weight: 500;
616
+ }
617
+ .dialogComp .MuiOutlinedInput-notchedOutline {
618
+ border: 1px solid #ECECEC;
619
+ }
620
+ .iconRadioButton .MuiRadio-root {
621
+ visibility: hidden;
622
+ width: 0px;
623
+ padding: 6px;
624
+ }
625
+ .iconRadioButton .MuiTypography-root {
626
+ width: 32px;
627
+ height: 32px;
628
+ display: flex;
629
+ align-items: center;
630
+ justify-content: center
631
+ }
632
+
633
+ .iconRadioButton .MuiFormControlLabel-root.active .fillPath {
634
+ fill: #2684ff;
635
+ }
636
+ .iconRadioButton .MuiFormControlLabel-root.active .fillStroke {
637
+ stroke: #2684ff;
638
+ }
639
+ .iconRadioButton .Mui-checked ~ .MuiTypography-root .fillStroke {
640
+ stroke: #2684ff;
641
+ }
642
+ .selctedBtnIcon {
643
+ border: 1px solid #ECECEC;
644
+ border-radius: 4px;
645
+ height: 35px;
646
+ width: 35px;
647
+ display: flex;
648
+ align-items: center;
649
+ justify-content: center
650
+ }
651
+ .borderInput {
652
+ text-align: center;
653
+ }
654
+ .borderInput:focus-visible {
655
+ outline: none !important;
656
+ }
657
+
658
+ .uploadImageSection {
659
+ position: absolute;
660
+ transform: translate(-50%, -50%);
661
+ left: 50%;
662
+ top: 50%;
663
+ }
664
+ .uploadImageSection .removeImageText {
665
+ visibility: hidden;
666
+ opacity: 0;
667
+ transition: all 0.5s;
668
+ }
669
+ .uploadImageSection:hover .removeImageText {
670
+ visibility: visible;
671
+ opacity: 1;
672
+ }
673
+ .uploadImageText, .removeImageText {
674
+ border: 2px dashed #fff;
675
+ border-radius: 8px;
676
+ color: #fff;
677
+ padding: 2px 8px;
678
+ background-color: #00000090;
679
+ font-size: 13px;
680
+ font-weight: 600;
681
+ cursor: pointer;
682
+ display: flex;
683
+ align-items: center;
684
+ }
685
+
686
+ .textFontArrows {
687
+ display: flex;
688
+ flex-direction: column;
689
+ align-items: center;
690
+ margin-left: 5px;
691
+ }
692
+
693
+ .textFontArrows svg {
694
+ width: 12px;
695
+ height: 12px;
696
+ }
697
+ .textFontArrows .MuiIconButton-root {
698
+ padding: 2px;
699
+ }
700
+
701
+ .tools-drawer .MuiTypography-root {
702
+ color: #000000;
703
+ font-weight: bold !important;
704
+ }
@@ -72,7 +72,7 @@ function AppHeader(props) {
72
72
  className: "element-toolbar",
73
73
  contentEditable: false,
74
74
  style: {
75
- top: "-24px",
75
+ top: "-40px",
76
76
  right: "50px"
77
77
  },
78
78
  children: [/*#__PURE__*/_jsx(Tooltip, {
@@ -81,6 +81,9 @@ function AppHeader(props) {
81
81
  children: /*#__PURE__*/_jsx(IconButton, {
82
82
  size: "small",
83
83
  onClick: onSettings,
84
+ style: {
85
+ marginRight: "4px"
86
+ },
84
87
  children: /*#__PURE__*/_jsx(SettingsIcon, {})
85
88
  })
86
89
  }), /*#__PURE__*/_jsx(Tooltip, {
@@ -114,17 +117,19 @@ function AppHeader(props) {
114
117
  setOpenSettings(false);
115
118
  };
116
119
  const handleFocus = e => {
117
- e.preventDefault();
118
- try {
119
- const [[, gridItemPath]] = Editor.nodes(editor, {
120
- at: path,
121
- match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "grid-item"
122
- });
123
- if (gridItemPath) {
124
- Transforms.select(editor, gridItemPath);
120
+ if (!customProps?.readOnly) {
121
+ e.preventDefault();
122
+ try {
123
+ const [[, gridItemPath]] = Editor.nodes(editor, {
124
+ at: path,
125
+ match: n => !Editor.isEditor(n) && Element.isElement(n) && n.type === "grid-item"
126
+ });
127
+ if (gridItemPath) {
128
+ Transforms.select(editor, gridItemPath);
129
+ }
130
+ } catch (err) {
131
+ console.log(err);
125
132
  }
126
- } catch (err) {
127
- console.log(err);
128
133
  }
129
134
  };
130
135
 
@@ -88,7 +88,6 @@ const EditorButton = props => {
88
88
  setAnchorEl(null);
89
89
  };
90
90
  const onMenuClick = val => () => {
91
- console.log(val, url);
92
91
  switch (val) {
93
92
  case "open":
94
93
  const refUrl = url ? url.includes("http") ? url : `//${url}` : "Link";
@@ -121,12 +120,6 @@ const EditorButton = props => {
121
120
  const onClose = () => {
122
121
  setEdit(false);
123
122
  };
124
- const borderStyleColor = borderColor?.indexOf("linear") >= 0 ? {
125
- borderImageSource: borderColor,
126
- borderImageSlice: 1
127
- } : {
128
- borderColor: borderColor || "none"
129
- };
130
123
  return /*#__PURE__*/_jsxs("div", {
131
124
  className: "editor-btn-wrapper",
132
125
  ...attributes,
@@ -175,6 +168,22 @@ const EditorButton = props => {
175
168
  paddingLeft: "4px",
176
169
  paddingRight: "4px"
177
170
  }
171
+ }), !readOnly && /*#__PURE__*/_jsxs("div", {
172
+ className: `element-selector ${anchorEl ? "selected" : ""}`,
173
+ contentEditable: false,
174
+ children: [/*#__PURE__*/_jsx("div", {
175
+ className: "element-selector-dots tl",
176
+ children: " "
177
+ }), /*#__PURE__*/_jsx("div", {
178
+ className: "element-selector-dots tr",
179
+ children: " "
180
+ }), /*#__PURE__*/_jsx("div", {
181
+ className: "element-selector-dots bl",
182
+ children: " "
183
+ }), /*#__PURE__*/_jsx("div", {
184
+ className: "element-selector-dots br",
185
+ children: " "
186
+ })]
178
187
  })]
179
188
  })
180
189
  }), /*#__PURE__*/_jsx("div", {
@@ -128,25 +128,28 @@ const Embed = ({
128
128
  },
129
129
  children: /*#__PURE__*/_jsxs(Grid, {
130
130
  container: true,
131
- children: [/*#__PURE__*/_jsx(Grid, {
131
+ children: [/*#__PURE__*/_jsx(Uploader, {
132
+ value: formData,
133
+ data: {
134
+ key: "url"
135
+ },
136
+ customProps: customProps,
137
+ onUploaded: onUploaded,
138
+ disableUpload: format === "video"
139
+ }), /*#__PURE__*/_jsx(Grid, {
132
140
  item: true,
133
141
  xs: 12,
142
+ style: {
143
+ paddingTop: "12px"
144
+ },
134
145
  children: /*#__PURE__*/_jsx(TextField, {
135
146
  name: "url",
136
- placeholder: "Enter URL",
147
+ placeholder: "Add image url here",
137
148
  size: "small",
138
149
  fullWidth: true,
139
150
  onChange: handleChange,
140
151
  value: imageURL || ""
141
152
  })
142
- }), /*#__PURE__*/_jsx(Uploader, {
143
- value: formData,
144
- data: {
145
- key: "url"
146
- },
147
- customProps: customProps,
148
- onUploaded: onUploaded,
149
- disableUpload: format === "video"
150
153
  })]
151
154
  })
152
155
  }), /*#__PURE__*/_jsxs(DialogActions, {
@@ -11,6 +11,7 @@ import CompressIcon from "@mui/icons-material/Compress";
11
11
  import { insertGrid } from "../../utils/grid";
12
12
  import useDragAndDrop from "../../common/useDragAndDrop";
13
13
  import useResize from "../../utils/customHooks/useResize";
14
+ // import { AddGridItemIcon } from "../../common/iconslist";
14
15
  import { jsx as _jsx } from "react/jsx-runtime";
15
16
  import { jsxs as _jsxs } from "react/jsx-runtime";
16
17
  const Grid = props => {
@@ -244,10 +245,22 @@ const Grid = props => {
244
245
  backgroundRepeat: "no-repeat",
245
246
  backgroundSize: "cover"
246
247
  }
247
- }), dndElements, !readOnly && /*#__PURE__*/_jsx("div", {
248
+ }), dndElements, !readOnly && /*#__PURE__*/_jsxs("div", {
248
249
  className: `element-selector ${selected ? "selected" : ""}`,
249
250
  contentEditable: false,
250
- children: /*#__PURE__*/_jsx(GridToolBar, {})
251
+ children: [/*#__PURE__*/_jsx("div", {
252
+ className: "element-selector-dots tl",
253
+ children: " "
254
+ }), /*#__PURE__*/_jsx("div", {
255
+ className: "element-selector-dots tr",
256
+ children: " "
257
+ }), /*#__PURE__*/_jsx("div", {
258
+ className: "element-selector-dots bl",
259
+ children: " "
260
+ }), /*#__PURE__*/_jsx("div", {
261
+ className: "element-selector-dots br",
262
+ children: " "
263
+ }), /*#__PURE__*/_jsx(GridToolBar, {})]
251
264
  }), openSetttings ? /*#__PURE__*/_jsx(GridPopup, {
252
265
  element: element,
253
266
  onSave: onSave,
@@ -116,10 +116,22 @@ const GridItem = props => {
116
116
  background: `${bgColorHover || bgColor || "transparent"}`
117
117
  }
118
118
  },
119
- children: [!readOnly && /*#__PURE__*/_jsx("div", {
119
+ children: [!readOnly && /*#__PURE__*/_jsxs("div", {
120
120
  className: `element-selector ${selected ? "selected" : ""}`,
121
121
  contentEditable: false,
122
- children: /*#__PURE__*/_jsx(GridItemToolbar, {})
122
+ children: [/*#__PURE__*/_jsx("div", {
123
+ className: "element-selector-dots tl",
124
+ children: " "
125
+ }), /*#__PURE__*/_jsx("div", {
126
+ className: "element-selector-dots tr",
127
+ children: " "
128
+ }), /*#__PURE__*/_jsx("div", {
129
+ className: "element-selector-dots bl",
130
+ children: " "
131
+ }), /*#__PURE__*/_jsx("div", {
132
+ className: "element-selector-dots br",
133
+ children: " "
134
+ }), /*#__PURE__*/_jsx(GridItemToolbar, {})]
123
135
  }), /*#__PURE__*/_jsx(Box, {
124
136
  className: "gi-inner-cw",
125
137
  component: "div",
@@ -107,9 +107,10 @@ const TableSelector = ({
107
107
  },
108
108
  children: /*#__PURE__*/_jsx(Typography, {
109
109
  variant: "body1",
110
- color: "textSecondary",
110
+ color: "primary",
111
111
  sx: {
112
- fontSize: "14px"
112
+ fontSize: "14px",
113
+ fontWeight: 500
113
114
  },
114
115
  children: "No.of Rows"
115
116
  })
@@ -133,9 +134,10 @@ const TableSelector = ({
133
134
  },
134
135
  children: /*#__PURE__*/_jsx(Typography, {
135
136
  variant: "body1",
136
- color: "textSecondary",
137
+ color: "primary",
137
138
  sx: {
138
- fontSize: "14px"
139
+ fontSize: "14px",
140
+ fontWeight: 500
139
141
  },
140
142
  children: "No.of Columns"
141
143
  })
@@ -0,0 +1,73 @@
1
+ import React from "react";
2
+ import { TextField, IconButton } from "@mui/material";
3
+ import { addMarkData, activeMark } from "../../utils/SlateUtilityFunctions.js";
4
+ import { sizeMap } from "../../utils/font.js";
5
+ import { TextMinusIcon, TextPlusIcon } from "../../common/iconslist.jsx";
6
+ import { jsx as _jsx } from "react/jsx-runtime";
7
+ import { jsxs as _jsxs } from "react/jsx-runtime";
8
+ import { Fragment as _Fragment } from "react/jsx-runtime";
9
+ const TextSize = ({
10
+ editor,
11
+ format
12
+ }) => {
13
+ const value = activeMark(editor, format);
14
+ const onChangeSize = e => {
15
+ let inc = parseInt(e.target.value) || 8;
16
+ inc = inc > 200 ? 200 : inc;
17
+ addMarkData(editor, {
18
+ format,
19
+ value: `${inc || 8}px`
20
+ });
21
+ };
22
+ const getSizeVal = () => {
23
+ try {
24
+ const size = `${value}`?.indexOf("px") >= 0 ? value : sizeMap[value] || value;
25
+ return parseInt(size);
26
+ } catch (err) {
27
+ return "";
28
+ }
29
+ };
30
+ const combinedOldVal = getSizeVal();
31
+ const onIncreaseSize = () => {
32
+ let inc = combinedOldVal || 0 + 1;
33
+ inc = inc > 200 ? 200 : inc;
34
+ addMarkData(editor, {
35
+ format,
36
+ value: `${inc}px`
37
+ });
38
+ };
39
+ const onDecreaseSize = () => {
40
+ addMarkData(editor, {
41
+ format,
42
+ value: `${combinedOldVal - 1 || 0}px`
43
+ });
44
+ };
45
+ return /*#__PURE__*/_jsx(_Fragment, {
46
+ children: /*#__PURE__*/_jsx(TextField, {
47
+ value: combinedOldVal,
48
+ onChange: onChangeSize,
49
+ size: "small",
50
+ inputProps: {
51
+ style: {
52
+ width: "30px",
53
+ textAlign: "center"
54
+ }
55
+ },
56
+ InputProps: {
57
+ endAdornment: /*#__PURE__*/_jsxs("div", {
58
+ className: "textFontArrows",
59
+ children: [/*#__PURE__*/_jsx(IconButton, {
60
+ onClick: onIncreaseSize,
61
+ size: "small",
62
+ children: /*#__PURE__*/_jsx(TextPlusIcon, {})
63
+ }), /*#__PURE__*/_jsx(IconButton, {
64
+ onClick: onDecreaseSize,
65
+ size: "small",
66
+ children: /*#__PURE__*/_jsx(TextMinusIcon, {})
67
+ })]
68
+ })
69
+ }
70
+ })
71
+ });
72
+ };
73
+ export default TextSize;
@@ -3,4 +3,5 @@ import Dropdown from "./Dropdown";
3
3
  import MarkButton from "./MarkButton";
4
4
  import Autocomplete from "./Autocomplete";
5
5
  import Text from "./Text";
6
- export { BlockButton, Dropdown, MarkButton, Autocomplete, Text };
6
+ import TextSize from "./TextSize";
7
+ export { BlockButton, Dropdown, MarkButton, Autocomplete, Text, TextSize };
@@ -4,29 +4,43 @@ const usePopupStyle = () => ({
4
4
  zIndex: 999
5
5
  },
6
6
  textFormatWrapper: {
7
- padding: "0px 24px 24px 24px",
8
- width: "350px"
7
+ padding: "0px 16px 16px 16px",
8
+ width: "350px",
9
+ maxheight: "300px",
10
+ overflow: "auto",
11
+ marginBottom: "12px",
12
+ "& .textSettingHeader": {
13
+ borderBottom: "1px solid #DCE4EC",
14
+ padding: "8px 0px 5px",
15
+ marginBottom: "20px"
16
+ },
17
+ "& .MuiOutlinedInput-notchedOutline": {
18
+ border: "1px solid #ECECEC"
19
+ },
20
+ "& .MuiOutlinedInput-root": {
21
+ boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
22
+ }
9
23
  },
10
24
  textFormatLabel: {
11
25
  display: "flex",
12
26
  alignItems: "center",
13
27
  fontWeight: 600,
14
- fontSize: "14px",
28
+ fontSize: "16px",
15
29
  lineHeight: "25px",
16
- marginTop: "8px",
17
- marginBottom: "8px",
18
- color: "rgba(169, 169, 169, 1)"
30
+ marginTop: "12px",
31
+ marginBottom: "8px"
19
32
  },
20
33
  textFormatField: {
21
- marginBottom: "8px"
34
+ marginBottom: "16px"
22
35
  },
23
36
  textFormatFieldBorder: {
24
37
  display: "flex",
25
38
  alignItems: "center",
26
39
  marginBottom: "8px",
27
- border: "1px solid rgba(169, 169, 169, 1)",
40
+ border: "1px solid #ECECEC",
28
41
  padding: "0px 8px",
29
- borderRadius: "10px"
42
+ borderRadius: "8px",
43
+ boxShadow: "0px 4px 18px 0px rgba(0, 0, 0, 0.05)"
30
44
  },
31
45
  textFormatCG: {
32
46
  marginBottom: "8px"