@flozy/editor 1.1.9 → 1.2.1

Sign up to get free protection for your applications and to get access to all the features.
Files changed (36) hide show
  1. package/dist/Editor/CollaborativeEditor.js +10 -3
  2. package/dist/Editor/CommonEditor.js +33 -9
  3. package/dist/Editor/Editor.css +132 -16
  4. package/dist/Editor/Elements/Accordion/AccordionButton.js +2 -2
  5. package/dist/Editor/Elements/AppHeader/AppHeaderButton.js +2 -2
  6. package/dist/Editor/Elements/Button/ButtonToolIcon.js +2 -2
  7. package/dist/Editor/Elements/Carousel/CarouselButton.js +2 -2
  8. package/dist/Editor/Elements/ChipText/ChipTextButton.js +5 -1
  9. package/dist/Editor/Elements/Color Picker/ColorPicker.css +26 -6
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.js +58 -44
  11. package/dist/Editor/Elements/DrawerMenu/DrawerMenu.js +6 -1
  12. package/dist/Editor/Elements/DrawerMenu/DrawerMenuButton.js +2 -2
  13. package/dist/Editor/Elements/Embed/Embed.js +72 -34
  14. package/dist/Editor/Elements/Grid/GridButton.js +2 -2
  15. package/dist/Editor/Elements/Link/LinkButton.js +87 -38
  16. package/dist/Editor/Elements/NewLine/NewLineButton.js +7 -1
  17. package/dist/Editor/Elements/PageSettings/PageSettingsButton.js +2 -2
  18. package/dist/Editor/Elements/Signature/Signature.css +75 -0
  19. package/dist/Editor/Elements/Signature/SignatureButton.js +2 -2
  20. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +20 -3
  21. package/dist/Editor/Elements/Signature/SignaturePopup.js +203 -150
  22. package/dist/Editor/Elements/Table/TableSelector.js +112 -41
  23. package/dist/Editor/Toolbar/Toolbar.js +1 -1
  24. package/dist/Editor/Toolbar/styles.css +8 -2
  25. package/dist/Editor/common/ColorPickerButton.js +6 -2
  26. package/dist/Editor/common/EditorIcons.js +81 -0
  27. package/dist/Editor/common/Icon.js +40 -20
  28. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +38 -19
  29. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +27 -9
  30. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +38 -20
  31. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +14 -3
  32. package/dist/Editor/common/StyleBuilder/fieldTypes/text.js +8 -4
  33. package/dist/Editor/common/StyleBuilder/index.js +68 -28
  34. package/dist/Editor/common/Uploader.js +29 -23
  35. package/dist/Editor/common/iconslist.js +883 -0
  36. package/package.json +2 -1
@@ -1,14 +1,15 @@
1
1
  import React, { useState } from "react";
2
- import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField } from "@mui/material";
2
+ import { Dialog, DialogTitle, DialogContent, DialogActions, Button, IconButton, Grid, TextField, Typography, Tabs, Tab } from "@mui/material";
3
3
  import CloseIcon from "@mui/icons-material/Close";
4
- import BrushIcon from "@mui/icons-material/Brush";
5
4
  import DatePicker from "react-datepicker";
6
5
  import "react-datepicker/dist/react-datepicker.css";
7
6
  import SignatureOptions from "./SignatureOptions";
7
+ import './Signature.css';
8
+ import { DrawSignature, PencilIcon, TypeSignature, UploadSignature } from "../../common/EditorIcons";
8
9
  import { jsx as _jsx } from "react/jsx-runtime";
9
10
  import { jsxs as _jsxs } from "react/jsx-runtime";
10
11
  import { Fragment as _Fragment } from "react/jsx-runtime";
11
- const BrushSizes = [1, 3, 5];
12
+ const BrushSizes = [1, 5, 7];
12
13
  const SignaturePopup = props => {
13
14
  const {
14
15
  onSave,
@@ -77,166 +78,218 @@ const SignaturePopup = props => {
77
78
  onClick: handleOpen,
78
79
  children: "Sign Here"
79
80
  })
80
- }), /*#__PURE__*/_jsxs(Dialog, {
81
+ }), /*#__PURE__*/_jsx(Dialog, {
81
82
  open: open,
82
83
  onClose: handleClose,
83
84
  fullWidth: true,
84
- children: [/*#__PURE__*/_jsx(DialogTitle, {
85
- children: /*#__PURE__*/_jsxs("div", {
86
- style: {
87
- display: "flex",
88
- justifyContent: "space-between"
85
+ children: /*#__PURE__*/_jsx(Grid, {
86
+ container: true,
87
+ children: /*#__PURE__*/_jsxs(Grid, {
88
+ item: true,
89
+ xs: 12,
90
+ sx: {
91
+ p: 3
89
92
  },
90
- children: [/*#__PURE__*/_jsx("div", {
91
- style: {
92
- display: "flex"
93
+ children: [/*#__PURE__*/_jsx(DialogTitle, {
94
+ sx: {
95
+ p: 0,
96
+ pb: 2
93
97
  },
94
- children: "Signature"
95
- }), /*#__PURE__*/_jsx("div", {
96
- style: {
97
- display: "flex"
98
- },
99
- children: /*#__PURE__*/_jsx(IconButton, {
100
- onClick: handleClose,
101
- children: /*#__PURE__*/_jsx(CloseIcon, {})
102
- })
103
- })]
104
- })
105
- }), /*#__PURE__*/_jsxs(DialogContent, {
106
- children: [/*#__PURE__*/_jsxs("div", {
107
- className: "signature-btn-grps",
108
- children: [/*#__PURE__*/_jsx(Button, {
109
- onClick: () => setTab(0),
110
- className: tab === 0 ? "active" : "",
111
- children: "Draw Signature"
112
- }), /*#__PURE__*/_jsx(Button, {
113
- onClick: () => setTab(1),
114
- className: tab === 1 ? "active" : "",
115
- children: "Type Signature"
116
- }), /*#__PURE__*/_jsx(Button, {
117
- onClick: () => setTab(2),
118
- className: tab === 2 ? "active" : "",
119
- children: "Upload Signature"
120
- })]
121
- }), /*#__PURE__*/_jsx("div", {
122
- className: "signature-tab-content",
123
- children: SeletectedTab ? /*#__PURE__*/_jsx(SeletectedTab, {
124
- onDataChange: onDataChange,
125
- customProps: {
126
- ...(customProps || {}),
127
- brush: brush
128
- },
129
- onUploadDone: onUploadDone
130
- }) : null
131
- }), /*#__PURE__*/_jsxs(Grid, {
132
- container: true,
133
- padding: 2,
134
- style: {
135
- display: "flex",
136
- justifyContent: "space-between"
137
- },
138
- children: [/*#__PURE__*/_jsxs(Grid, {
139
- item: true,
140
- xs: 5,
141
- style: {
142
- display: "flex",
143
- alignItems: "center"
144
- },
145
- children: [/*#__PURE__*/_jsx(Grid, {
98
+ children: /*#__PURE__*/_jsxs("div", {
146
99
  style: {
147
- marginRight: "8px"
100
+ display: "flex",
101
+ justifyContent: "space-between"
148
102
  },
149
- children: /*#__PURE__*/_jsx("label", {
150
- htmlFor: "signedBy",
151
- children: "Name:"
152
- })
153
- }), /*#__PURE__*/_jsx(Grid, {
154
- children: /*#__PURE__*/_jsx(TextField, {
155
- id: "signedBy",
156
- name: "signedBy",
157
- placeholder: "Enter Name",
158
- size: "small",
159
- onChange: onChange
160
- })
161
- })]
162
- }), /*#__PURE__*/_jsxs(Grid, {
163
- item: true,
164
- xs: 5,
165
- style: {
166
- display: "flex",
167
- alignItems: "center"
103
+ children: [/*#__PURE__*/_jsx(Typography, {
104
+ variant: "h6",
105
+ className: "popupTitle",
106
+ children: "SIGNATURE"
107
+ }), /*#__PURE__*/_jsx("div", {
108
+ style: {
109
+ display: "flex"
110
+ },
111
+ children: /*#__PURE__*/_jsx(IconButton, {
112
+ onClick: handleClose,
113
+ className: "close-popupbtn",
114
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
115
+ })
116
+ })]
117
+ })
118
+ }), /*#__PURE__*/_jsxs(DialogContent, {
119
+ sx: {
120
+ p: 0
168
121
  },
169
- children: [/*#__PURE__*/_jsx(Grid, {
122
+ className: "signature-popup",
123
+ children: [/*#__PURE__*/_jsx("div", {
124
+ className: "signature-btn-grps",
125
+ children: /*#__PURE__*/_jsxs(Tabs, {
126
+ scrollButtons: "auto",
127
+ variant: "scrollable",
128
+ value: tab,
129
+ onChange: (e, newValue) => {
130
+ setTab(newValue);
131
+ },
132
+ "aria-label": "Element Tabs",
133
+ children: [/*#__PURE__*/_jsx(Tab, {
134
+ label: /*#__PURE__*/_jsxs(Grid, {
135
+ className: "dflex alignCenter",
136
+ children: [/*#__PURE__*/_jsx(DrawSignature, {}), /*#__PURE__*/_jsx("span", {
137
+ className: "ml-1",
138
+ children: "Draw Signature"
139
+ })]
140
+ })
141
+ }), /*#__PURE__*/_jsx(Tab, {
142
+ label: /*#__PURE__*/_jsxs(Grid, {
143
+ className: "dflex alignCenter",
144
+ children: [/*#__PURE__*/_jsx(TypeSignature, {}), /*#__PURE__*/_jsx("span", {
145
+ className: "ml-1",
146
+ children: "Type Signature"
147
+ })]
148
+ })
149
+ }), /*#__PURE__*/_jsx(Tab, {
150
+ label: /*#__PURE__*/_jsxs(Grid, {
151
+ className: "dflex alignCenter",
152
+ children: [/*#__PURE__*/_jsx(UploadSignature, {}), /*#__PURE__*/_jsx("span", {
153
+ className: "ml-1",
154
+ children: "Upload Signature"
155
+ })]
156
+ })
157
+ })]
158
+ })
159
+ }), /*#__PURE__*/_jsx("div", {
160
+ className: "signature-tab-content",
161
+ children: SeletectedTab ? /*#__PURE__*/_jsx(SeletectedTab, {
162
+ onDataChange: onDataChange,
163
+ customProps: {
164
+ ...(customProps || {}),
165
+ brush: brush
166
+ },
167
+ onUploadDone: onUploadDone
168
+ }) : null
169
+ }), /*#__PURE__*/_jsxs(Grid, {
170
+ container: true,
171
+ sx: {
172
+ pt: 2
173
+ },
170
174
  style: {
171
- marginRight: "8px"
175
+ display: "flex",
176
+ justifyContent: "space-between"
172
177
  },
173
- children: /*#__PURE__*/_jsx("label", {
174
- htmlFor: "signedOn",
175
- children: "Date:"
176
- })
177
- }), /*#__PURE__*/_jsx(Grid, {
178
- children: /*#__PURE__*/_jsx(DatePicker, {
179
- showIcon: true,
180
- id: "signedOn",
181
- selected: signedData?.signedOn ? new Date(signedData?.signedOn) : new Date(),
182
- dateFormat: "MM/dd/yyyy",
183
- onChange: date => {
184
- setSignedData({
185
- ...signedData,
186
- signedOn: new Date(date).toISOString().split("T")[0]
187
- });
188
- }
189
- })
190
- })]
191
- })]
192
- })]
193
- }), /*#__PURE__*/_jsxs(DialogActions, {
194
- className: "dialog-actions-si",
195
- children: [tab === 0 ? /*#__PURE__*/_jsxs(Grid, {
196
- container: true,
197
- padding: 2,
198
- style: {
199
- display: "flex",
200
- alignItems: "center"
201
- },
202
- children: [/*#__PURE__*/_jsx(Grid, {
203
- item: true,
204
- children: /*#__PURE__*/_jsx("input", {
205
- type: "color",
206
- className: "brushcolorpic",
207
- onChange: onBrushColor,
208
- size: "4",
209
- value: brush?.color
210
- })
211
- }), /*#__PURE__*/_jsx(Grid, {
212
- item: true,
213
- children: /*#__PURE__*/_jsx(Grid, {
214
- className: "dflex alignCenter sizeIcons",
215
- children: BrushSizes.map(m => {
216
- return /*#__PURE__*/_jsx(IconButton, {
217
- onClick: onBrushSize(m),
218
- disableRipple: true,
219
- className: brush.size === m ? "active" : "",
220
- children: /*#__PURE__*/_jsx(BrushIcon, {
221
- style: {
222
- width: 24 + m,
223
- height: 24 + m
178
+ children: [/*#__PURE__*/_jsxs(Grid, {
179
+ item: true,
180
+ xs: 5,
181
+ style: {
182
+ display: "flex",
183
+ alignItems: "center"
184
+ },
185
+ children: [/*#__PURE__*/_jsx(Grid, {
186
+ style: {
187
+ marginRight: "8px"
188
+ },
189
+ children: /*#__PURE__*/_jsx("label", {
190
+ htmlFor: "signedBy",
191
+ children: "Name:"
192
+ })
193
+ }), /*#__PURE__*/_jsx(Grid, {
194
+ children: /*#__PURE__*/_jsx(TextField, {
195
+ id: "signedBy",
196
+ name: "signedBy",
197
+ placeholder: "Enter Name",
198
+ size: "small",
199
+ onChange: onChange
200
+ })
201
+ })]
202
+ }), /*#__PURE__*/_jsxs(Grid, {
203
+ item: true,
204
+ xs: 5,
205
+ style: {
206
+ display: "flex",
207
+ alignItems: "center"
208
+ },
209
+ children: [/*#__PURE__*/_jsx(Grid, {
210
+ style: {
211
+ marginRight: "8px"
212
+ },
213
+ children: /*#__PURE__*/_jsx("label", {
214
+ htmlFor: "signedOn",
215
+ children: "Date:"
216
+ })
217
+ }), /*#__PURE__*/_jsx(Grid, {
218
+ children: /*#__PURE__*/_jsx(DatePicker, {
219
+ showIcon: true,
220
+ id: "signedOn",
221
+ selected: signedData?.signedOn ? new Date(signedData?.signedOn) : new Date(),
222
+ dateFormat: "MM/dd/yyyy",
223
+ onChange: date => {
224
+ setSignedData({
225
+ ...signedData,
226
+ signedOn: new Date(date).toISOString().split("T")[0]
227
+ });
224
228
  }
225
229
  })
226
- }, `sit-bs-${m}`);
227
- })
228
- })
229
- })]
230
- }) : null, tab !== 2 ? /*#__PURE__*/_jsxs(_Fragment, {
231
- children: [/*#__PURE__*/_jsx(Button, {
232
- onClick: handleClear,
233
- children: "Clear"
234
- }), /*#__PURE__*/_jsx(Button, {
235
- onClick: handleSave,
236
- children: "Save"
230
+ })]
231
+ })]
232
+ })]
233
+ }), /*#__PURE__*/_jsxs(DialogActions, {
234
+ className: "dialog-actions-si",
235
+ sx: {
236
+ p: 0,
237
+ pt: 2
238
+ },
239
+ children: [tab === 0 ? /*#__PURE__*/_jsxs(Grid, {
240
+ container: true,
241
+ alignItems: "center",
242
+ children: [/*#__PURE__*/_jsx(Grid, {
243
+ item: true,
244
+ sx: {
245
+ mr: 4
246
+ },
247
+ children: /*#__PURE__*/_jsx("input", {
248
+ type: "color",
249
+ className: "brushcolorpic signColorPicker",
250
+ onChange: onBrushColor,
251
+ size: "4",
252
+ value: brush?.color
253
+ })
254
+ }), /*#__PURE__*/_jsx(Grid, {
255
+ item: true,
256
+ children: /*#__PURE__*/_jsx(Grid, {
257
+ className: "dflex alignCenter sizeIcons",
258
+ children: BrushSizes.map(m => {
259
+ return /*#__PURE__*/_jsx(IconButton, {
260
+ onClick: onBrushSize(m),
261
+ disableRipple: true,
262
+ className: brush.size === m ? "active" : "",
263
+ children: /*#__PURE__*/_jsx("span", {
264
+ style: {
265
+ width: 20 + m,
266
+ height: 20 + m
267
+ },
268
+ children: /*#__PURE__*/_jsx(PencilIcon, {
269
+ style: {
270
+ width: 20 + m,
271
+ height: 20 + m
272
+ }
273
+ })
274
+ })
275
+ }, `sit-bs-${m}`);
276
+ })
277
+ })
278
+ })]
279
+ }) : null, tab !== 2 ? /*#__PURE__*/_jsxs(_Fragment, {
280
+ children: [/*#__PURE__*/_jsx(Button, {
281
+ onClick: handleClear,
282
+ className: "secondaryBtn",
283
+ children: "Clear"
284
+ }), /*#__PURE__*/_jsx(Button, {
285
+ onClick: handleSave,
286
+ className: "primaryBtn",
287
+ children: "Save"
288
+ })]
289
+ }) : null]
237
290
  })]
238
- }) : null]
239
- })]
291
+ })
292
+ })
240
293
  })]
241
294
  });
242
295
  };
@@ -1,9 +1,10 @@
1
1
  import React, { useRef, useState } from "react";
2
- import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField } from "@mui/material";
2
+ import { Grid, Button, Dialog, DialogActions, DialogContent, DialogTitle, IconButton, TextField, Typography } from "@mui/material";
3
3
  import Icon from "../../common/Icon";
4
4
  import { Transforms } from "slate";
5
5
  import { TableUtil } from "../../utils/table.js";
6
6
  import "./TableSelector.css";
7
+ import CloseIcon from "@mui/icons-material/Close";
7
8
  import { jsx as _jsx } from "react/jsx-runtime";
8
9
  import { jsxs as _jsxs } from "react/jsx-runtime";
9
10
  const TableSelector = ({
@@ -37,7 +38,7 @@ const TableSelector = ({
37
38
  };
38
39
  return /*#__PURE__*/_jsxs("div", {
39
40
  ref: tableOptionsRef,
40
- className: "popup-wrapper1",
41
+ className: "popup-wrapper1 ",
41
42
  children: [/*#__PURE__*/_jsx(IconButton, {
42
43
  style: {
43
44
  border: showOptions ? "1px solid lightgray" : "none"
@@ -47,48 +48,118 @@ const TableSelector = ({
47
48
  children: /*#__PURE__*/_jsx(Icon, {
48
49
  icon: "table"
49
50
  })
50
- }), showOptions ? /*#__PURE__*/_jsxs(Dialog, {
51
+ }), showOptions ? /*#__PURE__*/_jsx(Dialog, {
51
52
  open: showOptions,
52
- children: [/*#__PURE__*/_jsx(DialogTitle, {
53
- children: "Table"
54
- }), /*#__PURE__*/_jsx(DialogContent, {
55
- children: /*#__PURE__*/_jsxs(Grid, {
56
- container: true,
57
- padding: 3,
58
- spacing: 2,
59
- children: [/*#__PURE__*/_jsx(Grid, {
60
- item: true,
61
- xs: 12,
62
- children: /*#__PURE__*/_jsx(TextField, {
63
- fullWidth: true,
64
- name: "row",
65
- value: tableData?.row,
66
- onChange: handleChange,
67
- label: "No.of Rows",
68
- placeholder: "No.of Rows"
69
- })
70
- }), /*#__PURE__*/_jsx(Grid, {
71
- item: true,
72
- xs: 12,
73
- children: /*#__PURE__*/_jsx(TextField, {
74
- fullWidth: true,
75
- name: "column",
76
- value: tableData?.column,
77
- onChange: handleChange,
78
- label: "No.of Columns",
79
- placeholder: "No.of Columns"
80
- })
53
+ className: "tablePopup",
54
+ children: /*#__PURE__*/_jsxs(Grid, {
55
+ item: true,
56
+ xs: 12,
57
+ sx: {
58
+ p: 3
59
+ },
60
+ children: [/*#__PURE__*/_jsx(DialogTitle, {
61
+ sx: {
62
+ p: 0,
63
+ pb: 2
64
+ },
65
+ children: /*#__PURE__*/_jsxs(Grid, {
66
+ container: true,
67
+ justifyContent: "space-between",
68
+ children: [/*#__PURE__*/_jsx(Typography, {
69
+ variant: "h6",
70
+ className: "popupTitle",
71
+ children: "Table"
72
+ }), /*#__PURE__*/_jsx(Grid, {
73
+ style: {
74
+ display: "flex"
75
+ },
76
+ children: /*#__PURE__*/_jsx(IconButton, {
77
+ onClick: onCancel,
78
+ className: "close-popupbtn",
79
+ children: /*#__PURE__*/_jsx(CloseIcon, {})
80
+ })
81
+ })]
82
+ })
83
+ }), /*#__PURE__*/_jsx(DialogContent, {
84
+ sx: {
85
+ p: 0
86
+ },
87
+ children: /*#__PURE__*/_jsxs(Grid, {
88
+ container: true,
89
+ children: [/*#__PURE__*/_jsxs(Grid, {
90
+ item: true,
91
+ xs: 12,
92
+ sx: {
93
+ pb: 2,
94
+ pt: 0
95
+ },
96
+ children: [/*#__PURE__*/_jsx(Grid, {
97
+ item: true,
98
+ xs: 12,
99
+ style: {
100
+ marginBottom: "5px"
101
+ },
102
+ children: /*#__PURE__*/_jsx(Typography, {
103
+ variant: "body1",
104
+ color: "textSecondary",
105
+ sx: {
106
+ fontSize: '14px'
107
+ },
108
+ children: "No.of Rows"
109
+ })
110
+ }), /*#__PURE__*/_jsx(TextField, {
111
+ fullWidth: true,
112
+ name: "row",
113
+ value: tableData?.row,
114
+ onChange: handleChange
115
+ // label="No.of Rows"
116
+ ,
117
+ placeholder: "No.of Rows"
118
+ })]
119
+ }), /*#__PURE__*/_jsxs(Grid, {
120
+ item: true,
121
+ xs: 12,
122
+ children: [/*#__PURE__*/_jsx(Grid, {
123
+ item: true,
124
+ xs: 12,
125
+ style: {
126
+ marginBottom: "5px"
127
+ },
128
+ children: /*#__PURE__*/_jsx(Typography, {
129
+ variant: "body1",
130
+ color: "textSecondary",
131
+ sx: {
132
+ fontSize: '14px'
133
+ },
134
+ children: "No.of Columns"
135
+ })
136
+ }), /*#__PURE__*/_jsx(TextField, {
137
+ fullWidth: true,
138
+ name: "column",
139
+ value: tableData?.column,
140
+ onChange: handleChange
141
+ // label="No.of Columns"
142
+ ,
143
+ placeholder: "No.of Columns"
144
+ })]
145
+ })]
146
+ })
147
+ }), /*#__PURE__*/_jsxs(DialogActions, {
148
+ sx: {
149
+ p: 0,
150
+ pt: 2
151
+ },
152
+ children: [/*#__PURE__*/_jsx(Button, {
153
+ onClick: onCancel,
154
+ className: "secondaryBtn",
155
+ children: "Cancel"
156
+ }), /*#__PURE__*/_jsx(Button, {
157
+ onClick: handleInsert,
158
+ className: "primaryBtn",
159
+ children: "Save"
81
160
  })]
82
- })
83
- }), /*#__PURE__*/_jsxs(DialogActions, {
84
- children: [/*#__PURE__*/_jsx(Button, {
85
- onClick: onCancel,
86
- children: "Cancel"
87
- }), /*#__PURE__*/_jsx(Button, {
88
- onClick: handleInsert,
89
- children: "Save"
90
161
  })]
91
- })]
162
+ })
92
163
  }) : null]
93
164
  });
94
165
  };
@@ -90,7 +90,7 @@ const Toolbar = props => {
90
90
  style: {
91
91
  fontFamily: fontFamilyMap[value],
92
92
  width: "200px",
93
- height: "40px",
93
+ height: "36px",
94
94
  overflow: "hidden"
95
95
  },
96
96
  children: options.map((item, index) => /*#__PURE__*/_jsx(MenuItem, {
@@ -14,14 +14,20 @@
14
14
  border-bottom: 2px solid #CCC;
15
15
  }
16
16
  .toolbar-grp1>*{
17
- margin-right: 10px;
17
+ /* margin-right: 10px; */
18
18
  cursor: pointer;
19
19
  }
20
20
  .toolbar-grp1{
21
- margin:0 10px;
21
+ margin:0 2px;
22
22
  display: flex;
23
23
  align-items: center;
24
24
  }
25
+ .toolbar .toolbar-grp1:first-child .MuiOutlinedInput-root {
26
+ margin-right: 10px;
27
+ }
28
+ .color-picker.popup-wrapper1 button {
29
+ padding: 8px;
30
+ }
25
31
  select{
26
32
  height: 30px;
27
33
  border: none;
@@ -26,8 +26,10 @@ const ColorPickerButton = props => {
26
26
  children: [/*#__PURE__*/_jsx(Button, {
27
27
  style: {
28
28
  background: value,
29
- height: "32px",
30
- border: "1px solid #000"
29
+ height: "26px",
30
+ minWidth: "26px",
31
+ borderRadius: '26px',
32
+ border: "1px solid #64748B"
31
33
  },
32
34
  onClick: handleColorPicker
33
35
  }), /*#__PURE__*/_jsx(Popover, {
@@ -51,9 +53,11 @@ const ColorPickerButton = props => {
51
53
  },
52
54
  children: [/*#__PURE__*/_jsx(Button, {
53
55
  onClick: handleClose,
56
+ className: "secondaryBtn",
54
57
  children: "Cancel"
55
58
  }), /*#__PURE__*/_jsx(Button, {
56
59
  onClick: handleSave,
60
+ className: "primaryBtn",
57
61
  children: "Save"
58
62
  })]
59
63
  })]