@flozy/editor 10.2.3 → 10.2.5

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (172) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +24 -128
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -46
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/Accordion/Accordion.js +2 -6
  7. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  8. package/dist/Editor/Elements/Button/EditorButton.js +9 -25
  9. package/dist/Editor/Elements/Carousel/CarouselItem.js +1 -2
  10. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  11. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  12. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  13. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  14. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
  15. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +6 -21
  16. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +2 -5
  17. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +2 -3
  18. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
  19. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  20. package/dist/Editor/Elements/Embed/Image.js +2 -3
  21. package/dist/Editor/Elements/Embed/Video.js +1 -1
  22. package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
  23. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
  24. package/dist/Editor/Elements/Form/Form.js +168 -181
  25. package/dist/Editor/Elements/Form/FormElements/FormText.js +6 -23
  26. package/dist/Editor/Elements/Form/FormElements/FormTextArea.js +2 -3
  27. package/dist/Editor/Elements/Form/FormField.js +6 -13
  28. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  29. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +31 -36
  30. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  31. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  32. package/dist/Editor/Elements/FreeGrid/styles.js +7 -75
  33. package/dist/Editor/Elements/Grid/Grid.js +2 -14
  34. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  35. package/dist/Editor/Elements/List/CheckList.js +2 -3
  36. package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
  37. package/dist/Editor/Elements/Search/SearchButton.js +8 -9
  38. package/dist/Editor/Elements/Search/SearchList.js +7 -9
  39. package/dist/Editor/Elements/Signature/Signature.css +1 -2
  40. package/dist/Editor/Elements/Signature/SignatureOptions/DrawSignature.js +5 -18
  41. package/dist/Editor/Elements/Signature/SignatureOptions/UploadSignature.js +3 -16
  42. package/dist/Editor/Elements/SimpleText/index.js +1 -6
  43. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  44. package/dist/Editor/Elements/Table/DragButton.js +1 -0
  45. package/dist/Editor/Elements/Table/Draggable.js +2 -6
  46. package/dist/Editor/Elements/Table/Styles.js +0 -7
  47. package/dist/Editor/Elements/Table/Table.js +3 -3
  48. package/dist/Editor/Elements/Table/TableCell.js +5 -24
  49. package/dist/Editor/Elements/Title/title.js +6 -6
  50. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  51. package/dist/Editor/MiniEditor.js +1 -2
  52. package/dist/Editor/Styles/EditorStyles.js +5 -5
  53. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  54. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  55. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  56. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  57. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  58. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  59. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  60. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  61. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  62. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  63. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  64. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
  65. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  66. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  67. package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
  68. package/dist/Editor/common/ColorPickerButton.js +16 -38
  69. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  70. package/dist/Editor/common/FontLoader/FontLoader.js +15 -31
  71. package/dist/Editor/common/Icon.js +1 -31
  72. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  73. package/dist/Editor/common/LinkSettings/NavComponents.js +8 -34
  74. package/dist/Editor/common/LinkSettings/index.js +68 -84
  75. package/dist/Editor/common/LinkSettings/style.js +30 -245
  76. package/dist/Editor/common/RnD/ElementOptions/Actions.js +14 -13
  77. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
  78. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  79. package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
  80. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
  81. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Signature.js +3 -4
  82. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  83. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  84. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  85. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  86. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  87. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  88. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  89. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  90. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  91. package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -147
  92. package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
  93. package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -121
  94. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
  95. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  96. package/dist/Editor/common/RnD/Utils/gridDropItem.js +19 -28
  97. package/dist/Editor/common/RnD/Utils/index.js +1 -3
  98. package/dist/Editor/common/RnD/VirtualElement/VirtualTextElement.js +54 -48
  99. package/dist/Editor/common/RnD/VirtualElement/helper.js +131 -143
  100. package/dist/Editor/common/RnD/VirtualElement/styles.js +0 -16
  101. package/dist/Editor/common/RnD/index.js +11 -6
  102. package/dist/Editor/common/Select/index.js +0 -2
  103. package/dist/Editor/common/Shorthands/elements.js +11 -65
  104. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  105. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  106. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  107. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  108. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  109. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  110. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  111. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
  112. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
  113. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  114. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
  115. package/dist/Editor/common/Uploader.js +0 -8
  116. package/dist/Editor/common/iconListV2.js +6 -156
  117. package/dist/Editor/common/iconslist.js +0 -24
  118. package/dist/Editor/commonStyle.js +62 -168
  119. package/dist/Editor/helper/index.js +0 -4
  120. package/dist/Editor/helper/theme.js +2 -203
  121. package/dist/Editor/hooks/useMouseMove.js +5 -8
  122. package/dist/Editor/hooks/useTable.js +4 -5
  123. package/dist/Editor/plugins/withEmbeds.js +1 -1
  124. package/dist/Editor/plugins/withHTML.js +1 -3
  125. package/dist/Editor/plugins/withTable.js +1 -1
  126. package/dist/Editor/theme/ThemeList.js +173 -50
  127. package/dist/Editor/utils/SlateUtilityFunctions.js +45 -169
  128. package/dist/Editor/utils/accordion.js +4 -14
  129. package/dist/Editor/utils/button.js +17 -1
  130. package/dist/Editor/utils/customHooks/useTableResize.js +9 -49
  131. package/dist/Editor/utils/draftToSlate.js +2 -3
  132. package/dist/Editor/utils/events.js +6 -50
  133. package/dist/Editor/utils/font.js +37 -40
  134. package/dist/Editor/utils/form.js +4 -4
  135. package/dist/Editor/utils/formfield.js +2 -8
  136. package/dist/Editor/utils/helper.js +19 -109
  137. package/dist/Editor/utils/signature.js +9 -2
  138. package/package.json +4 -4
  139. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
  140. package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
  141. package/dist/Editor/Elements/FreeGrid/helper.js +0 -113
  142. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  143. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  144. package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
  145. package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
  146. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  147. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  148. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  149. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  150. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  151. package/dist/Editor/common/CustomSelect.js +0 -43
  152. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  153. package/dist/Editor/common/SnackBar/index.js +0 -43
  154. package/dist/Editor/helper/textIndeces.js +0 -58
  155. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  156. package/dist/Editor/hooks/useThemeValues.js +0 -63
  157. package/dist/Editor/theme/index.js +0 -149
  158. package/dist/Editor/themeSettings/ActiveTheme.js +0 -82
  159. package/dist/Editor/themeSettings/buttons/index.js +0 -300
  160. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  161. package/dist/Editor/themeSettings/colorTheme/index.js +0 -310
  162. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  163. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  164. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  165. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  166. package/dist/Editor/themeSettings/icons.js +0 -60
  167. package/dist/Editor/themeSettings/index.js +0 -361
  168. package/dist/Editor/themeSettings/style.js +0 -299
  169. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  170. package/dist/Editor/themeSettingsAI/index.js +0 -355
  171. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  172. package/dist/Editor/themeSettingsAI/style.js +0 -332
@@ -1,361 +0,0 @@
1
- import React, { useEffect, useState } from "react";
2
- import { Box, CircularProgress, Drawer, Grid, IconButton, Tab, Tabs, Typography, styled } from "@mui/material";
3
-
4
- // Style
5
- import Style from "./style";
6
-
7
- // icons
8
- import { CloseIcon2 as CloseIcon } from "../common/iconslist";
9
- import { TickIcon } from "./icons";
10
- import ColorTheme from "./colorTheme";
11
- import Buttons from "./buttons";
12
- import Fonts from "./fonts";
13
- import { useEditorTheme } from "../hooks/useEditorTheme";
14
- import ActiveTheme from "./ActiveTheme";
15
- import SaveTheme from "../themeSettingsAI/saveTheme";
16
- import BackIcon from "../assets/svg/BackIcon";
17
- import { jsx as _jsx } from "react/jsx-runtime";
18
- import { jsxs as _jsxs } from "react/jsx-runtime";
19
- import { Fragment as _Fragment } from "react/jsx-runtime";
20
- function getColors(themeColors) {
21
- const colors = Object.values(themeColors || {});
22
- const primaryColors = colors.slice(0, 2);
23
- const otherColors = colors.slice(2);
24
- return {
25
- primaryColors,
26
- otherColors
27
- };
28
- }
29
- const ThemeSettings = props => {
30
- const {
31
- className,
32
- open,
33
- setOpen,
34
- services,
35
- appTheme,
36
- customProps
37
- } = props;
38
-
39
- // State
40
- // const [themeDrawer, setThemeDrawer] = useState(true);
41
- const [themeTabType, setThemeTabType] = React.useState(0);
42
- const [themeMoodboard, setThemeMoodboard] = React.useState(false);
43
- const [openSettings, setOpenSettings] = useState("");
44
- const onSettingsChange = type => {
45
- setOpenSettings(prev => prev === type ? "" : type);
46
- };
47
- const [themes, setThemes] = useState([]);
48
- const [loading, setLoading] = useState(false);
49
- const [savingTheme, setSavingTheme] = useState(false);
50
- const {
51
- theme: userSelectedTheme,
52
- updateTheme
53
- } = useEditorTheme();
54
- const {
55
- colors = {}
56
- } = userSelectedTheme?.theme?.cssVars || {};
57
- const {
58
- id,
59
- name,
60
- mood_name,
61
- template_tag
62
- } = userSelectedTheme || {};
63
- const onClose = () => setOpen(false);
64
- const getThemesList = async themeTabType => {
65
- setLoading(true);
66
- setThemes([]);
67
- try {
68
- const themeType = themeTabType === 0 ? "default" : "";
69
- const result = await services("getThemes", {
70
- type: themeType,
71
- template_tag
72
- });
73
- setThemes(result?.data || []);
74
- } catch (err) {
75
- console.log(err);
76
- }
77
- setLoading(false);
78
- };
79
- useEffect(() => {
80
- getThemesList(themeTabType);
81
- }, []);
82
- const handleThemeChange = theme => {
83
- updateTheme(theme, {
84
- action: "THEME_CHANGE"
85
- });
86
- };
87
- const onColorChange = (color, colorIndex) => {
88
- updateTheme({
89
- [`color${colorIndex}`]: color
90
- }, {
91
- action: "CSS_VAR_CHANGE",
92
- fieldName: "colors"
93
- });
94
- };
95
- const handleTabChange = (event, newValue) => {
96
- setThemeTabType(newValue);
97
- getThemesList(newValue);
98
- };
99
- const isUpdateTheme = Number(userSelectedTheme?.type) === 2;
100
- const onSaveTheme = async (formData = {}, addNewTheme) => {
101
- setSavingTheme(true);
102
- try {
103
- let type = isUpdateTheme && !addNewTheme ? "update" : "create";
104
- const result = await services("saveTheme", {
105
- type,
106
- id,
107
- template_tag,
108
- ...formData,
109
- theme: userSelectedTheme?.theme
110
- });
111
- const update = {
112
- ...userSelectedTheme,
113
- ...formData,
114
- type: "2"
115
- };
116
- const createdId = result?.data?.id;
117
- if (createdId) {
118
- update.id = createdId;
119
- }
120
- updateTheme(update);
121
- getThemesList(themeTabType);
122
- } catch (err) {
123
- console.log(err);
124
- }
125
- setSavingTheme(false);
126
- };
127
-
128
- // themeCard
129
- const ThemeCard = ({
130
- theme
131
- }) => {
132
- const {
133
- name,
134
- mood_name = ""
135
- } = theme;
136
- const {
137
- colors = {}
138
- } = theme?.theme?.cssVars || {};
139
- const {
140
- primaryColors,
141
- otherColors
142
- } = getColors(colors);
143
- const isSelected = theme.id === userSelectedTheme?.id;
144
- return /*#__PURE__*/_jsxs(Grid, {
145
- className: `themeCardWrapper ${isSelected ? "activeWrapper" : ""}`,
146
- onClick: () => handleThemeChange(theme),
147
- children: [isSelected ? /*#__PURE__*/_jsx(TickIcon, {}) : null, /*#__PURE__*/_jsxs(Grid, {
148
- container: true,
149
- justifyContent: "space-between",
150
- className: "themeCard",
151
- gap: 2,
152
- children: [/*#__PURE__*/_jsxs(Grid, {
153
- style: {
154
- width: "90px"
155
- },
156
- children: [/*#__PURE__*/_jsx(Typography, {
157
- variant: "body1",
158
- className: "title",
159
- style: {
160
- whiteSpace: "nowrap",
161
- textOverflow: "ellipsis",
162
- overflow: "hidden",
163
- fontWeight: "500"
164
- },
165
- children: name
166
- }), /*#__PURE__*/_jsx(Typography, {
167
- variant: "body2",
168
- className: "fs-12 textSecondary moodName",
169
- children: mood_name
170
- })]
171
- }), /*#__PURE__*/_jsxs(Grid, {
172
- className: "flexAlign",
173
- sx: {
174
- gap: "5px"
175
- },
176
- children: [primaryColors?.map((color, i) => {
177
- return /*#__PURE__*/_jsx(Grid, {
178
- className: "primaryCard",
179
- style: {
180
- backgroundColor: color
181
- }
182
- }, i);
183
- }), /*#__PURE__*/_jsx(Grid, {
184
- className: "otherColors",
185
- sx: {
186
- gap: "5px"
187
- },
188
- children: otherColors.map((color, i) => {
189
- return /*#__PURE__*/_jsx(Grid, {
190
- className: "smallCard",
191
- style: {
192
- backgroundColor: color
193
- }
194
- }, i);
195
- })
196
- })]
197
- })]
198
- })]
199
- });
200
- };
201
- const showThemeSettings = id && !themeMoodboard;
202
- return /*#__PURE__*/_jsx(Grid, {
203
- className: className,
204
- children: /*#__PURE__*/_jsxs(Drawer, {
205
- className: className,
206
- open: open,
207
- onClose: onClose,
208
- anchor: "right",
209
- children: [/*#__PURE__*/_jsxs(Grid, {
210
- className: "settingsContainer",
211
- children: [/*#__PURE__*/_jsxs(Grid, {
212
- container: true,
213
- justifyContent: "space-between",
214
- wrap: "nowrap",
215
- className: "header"
216
- // sx={{ px: 2 }}
217
- ,
218
- children: [/*#__PURE__*/_jsxs(Grid, {
219
- children: [/*#__PURE__*/_jsx(Typography, {
220
- variant: "body1",
221
- className: "title",
222
- children: "Theme/Brand Setting"
223
- }), /*#__PURE__*/_jsxs(Typography, {
224
- variant: "body1",
225
- className: "fs-12 textSecondary",
226
- sx: {
227
- mt: 0.5
228
- },
229
- children: ["Change the entire style of your website with a single click.", " "]
230
- })]
231
- }), /*#__PURE__*/_jsx(IconButton, {
232
- className: "closeBtn",
233
- onClick: onClose,
234
- children: /*#__PURE__*/_jsx(CloseIcon, {})
235
- })]
236
- }), /*#__PURE__*/_jsx(Grid, {
237
- className: "activeTheme",
238
- children: !themeMoodboard ? /*#__PURE__*/_jsx(ActiveTheme, {
239
- onExplore: () => setThemeMoodboard(true)
240
- }) : /*#__PURE__*/_jsxs(Grid, {
241
- className: "sectionDetail",
242
- children: [/*#__PURE__*/_jsxs(Typography, {
243
- variant: "body1",
244
- className: "sectionTitle flexAlign",
245
- children: [/*#__PURE__*/_jsx(IconButton, {
246
- onClick: () => setThemeMoodboard(false),
247
- className: "backBtn",
248
- children: /*#__PURE__*/_jsx(BackIcon, {})
249
- }), "Theme Moodboard"]
250
- }), /*#__PURE__*/_jsx(Box, {
251
- sx: {
252
- borderBottom: 1,
253
- borderColor: "divider"
254
- },
255
- className: "tabWrapper",
256
- children: /*#__PURE__*/_jsxs(Tabs, {
257
- value: themeTabType,
258
- onChange: handleTabChange,
259
- variant: "fullWidth",
260
- scrollButtons: false,
261
- "aria-label": "scrollable prevent tabs example",
262
- children: [/*#__PURE__*/_jsx(Tab, {
263
- label: /*#__PURE__*/_jsx(Typography, {
264
- variant: "body1",
265
- className: "fs-14 fw-500 transformNone",
266
- children: "Key themes"
267
- })
268
- }), /*#__PURE__*/_jsx(Tab, {
269
- label: /*#__PURE__*/_jsx(Typography, {
270
- variant: "body1",
271
- className: "fs-14 fw-500 transformNone",
272
- children: "Saved themes"
273
- })
274
- })]
275
- })
276
- }), loading ? /*#__PURE__*/_jsx("div", {
277
- style: {
278
- display: "flex",
279
- justifyContent: "center",
280
- alignItems: "center",
281
- margin: 0,
282
- padding: 0,
283
- height: "50px",
284
- overflow: "hidden"
285
- },
286
- children: /*#__PURE__*/_jsx(CircularProgress, {})
287
- }) : null, themes.map((theme, i) => {
288
- return /*#__PURE__*/_jsx(ThemeCard, {
289
- theme: theme
290
- }, i);
291
- })]
292
- })
293
- }), showThemeSettings ? /*#__PURE__*/_jsxs(_Fragment, {
294
- children: [/*#__PURE__*/_jsx(Grid, {
295
- sx: {
296
- px: 1,
297
- mt: 1
298
- },
299
- children: /*#__PURE__*/_jsx(ColorTheme, {
300
- colors: getColors(colors),
301
- onColorChange: onColorChange,
302
- openDefault: open === "editThemeColor",
303
- appTheme: appTheme,
304
- openSettings: openSettings,
305
- onSettingsChange: onSettingsChange,
306
- type: "colors"
307
- })
308
- }), /*#__PURE__*/_jsx(Grid, {
309
- sx: {
310
- px: 1,
311
- mt: 1
312
- },
313
- children: /*#__PURE__*/_jsx(Fonts, {
314
- appTheme: appTheme,
315
- customProps: customProps,
316
- openSettings: openSettings,
317
- onSettingsChange: onSettingsChange,
318
- type: "fonts"
319
- })
320
- }), /*#__PURE__*/_jsx(Grid, {
321
- sx: {
322
- px: 1,
323
- mt: 1
324
- },
325
- children: /*#__PURE__*/_jsx(Buttons, {
326
- appTheme: appTheme,
327
- customProps: customProps,
328
- openSettings: openSettings,
329
- onSettingsChange: onSettingsChange,
330
- type: "buttons"
331
- })
332
- })]
333
- }) : null]
334
- }), showThemeSettings ? /*#__PURE__*/_jsxs(Box, {
335
- className: "saveThemeBtnsWrapper",
336
- component: "div",
337
- children: [isUpdateTheme ? /*#__PURE__*/_jsx(SaveTheme, {
338
- saveBtnLabel: "Add new theme",
339
- loading: savingTheme,
340
- onSave: onSaveTheme,
341
- defaultFormData: {
342
- name,
343
- mood_name
344
- },
345
- addNewTheme: true,
346
- appTheme: appTheme
347
- }) : null, /*#__PURE__*/_jsx(SaveTheme, {
348
- saveBtnLabel: isUpdateTheme ? "Update theme" : "Save to my theme",
349
- loading: savingTheme,
350
- onSave: onSaveTheme,
351
- defaultFormData: {
352
- name,
353
- mood_name
354
- },
355
- appTheme: appTheme
356
- })]
357
- }) : null]
358
- })
359
- });
360
- };
361
- export default styled(ThemeSettings)(Style);
@@ -1,299 +0,0 @@
1
- const Style = ({
2
- appTheme
3
- }) => {
4
- const {
5
- textColor,
6
- tv_text,
7
- uploadFileBg,
8
- closeButtonBgColor,
9
- closeButtonSvgStroke,
10
- deviderBgColor,
11
- activeColor,
12
- cardOutsetBg,
13
- cardBorder,
14
- cardBg,
15
- selectedCardOutsetBg,
16
- cardBorder2,
17
- cardShadow,
18
- sidebarBorder,
19
- cardBg2,
20
- miniToolBarBackground,
21
- closeButtonBackground,
22
- customDialogueCloseBtnColor,
23
- customDialogueCloseBtnBorder
24
- } = appTheme?.palette?.editor || {};
25
- return {
26
- ".fs-12": {
27
- fontSize: "12px"
28
- },
29
- ".fs-14": {
30
- fontSize: "14px"
31
- },
32
- ".fs-10": {
33
- fontSize: "10px"
34
- },
35
- ".fw-500": {
36
- fontWeight: "500"
37
- },
38
- ".fw-600": {
39
- fontWeight: "600"
40
- },
41
- ".pointer": {
42
- cursor: "pointer"
43
- },
44
- ".transformNone": {
45
- textTransform: "none"
46
- },
47
- "& .MuiDrawer-paper": {
48
- background: cardBg,
49
- color: textColor,
50
- border: `1px solid ${sidebarBorder}`,
51
- display: "flex",
52
- flexDirection: "column",
53
- fontFamily: '"Inter", sans-serif'
54
- },
55
- "& .MuiTypography-root": {
56
- fontFamily: '"Inter", sans-serif'
57
- },
58
- "& .textSecondary": {
59
- color: tv_text
60
- },
61
- ".settingsContainer": {
62
- width: "340px",
63
- padding: "16px 5px",
64
- position: "relative",
65
- overflowY: "auto",
66
- flexGrow: 1,
67
- ".header": {
68
- borderBottom: `1px solid ${deviderBgColor}`,
69
- width: "calc(100% - 32px)",
70
- margin: "auto",
71
- marginBottom: "16px",
72
- paddingBottom: "16px"
73
- }
74
- },
75
- ".title": {
76
- fontWeight: "600",
77
- fontSize: "14px"
78
- },
79
- ".moodName": {
80
- whiteSpace: "nowrap",
81
- overflow: "hidden",
82
- textOverflow: "ellipsis"
83
- },
84
- ".closeBtn, .backBtn": {
85
- width: "20px",
86
- height: "20px",
87
- BorderRadius: "4px",
88
- flexShrik: "0",
89
- padding: "1px",
90
- borderRadius: "4px",
91
- background: closeButtonBgColor,
92
- color: `${closeButtonSvgStroke} !important`,
93
- "& svg": {
94
- color: `${closeButtonSvgStroke} !important`
95
- }
96
- },
97
- ".activeTheme": {
98
- background: cardOutsetBg,
99
- padding: "14px 10px",
100
- borderRadius: "4px"
101
- },
102
- ".activeThemeInnner": {
103
- borderRadius: "7px",
104
- padding: "16px",
105
- boxShadow: "1px 2px 5px 0px #00000014",
106
- background: cardBg,
107
- border: `1px solid ${cardBorder}`
108
- },
109
- "& .activeThemeTitle": {
110
- paddingBottom: "6px"
111
- },
112
- "& .exploreBtn": {
113
- color: "#2563EB",
114
- textDecorationColor: "#2563EB"
115
- },
116
- ".flexAlign": {
117
- display: "flex",
118
- alignItems: "center"
119
- },
120
- ".flexItem": {
121
- maxWidth: "50%",
122
- whiteSpace: "nowrap",
123
- overflow: "hidden",
124
- textOverflow: "ellipsis"
125
- },
126
- ".activeColorBox, .xsColorBox": {
127
- width: "24px",
128
- height: "24px",
129
- borderRadius: "5px",
130
- border: `1px solid #929292`
131
- },
132
- ".themeCard": {
133
- borderRadius: "7px",
134
- padding: "16px",
135
- border: `1px solid ${uploadFileBg}`,
136
- boxShadow: "1px 2px 5px 0px #00000014",
137
- background: cardBg2,
138
- flexWrap: "nowrap",
139
- display: "flex",
140
- justifyContent: "space-between",
141
- alignItems: "center"
142
- },
143
- ".themeCardWrapper": {
144
- padding: "6px 14px",
145
- cursor: "pointer",
146
- "&.active": {
147
- background: "#ECF2FF"
148
- }
149
- },
150
- ".primaryCard, .secondaryCard": {
151
- width: "44px",
152
- height: "44px",
153
- borderRadius: "5px",
154
- border: `1px solid #929292`
155
- },
156
- ".otherColors": {
157
- display: "flex",
158
- flexWrap: "wrap",
159
- width: "48px",
160
- ".smallCard": {
161
- width: "20px",
162
- height: "20px",
163
- borderRadius: "5px",
164
- border: `1px solid #929292`
165
- }
166
- },
167
- ".sectionDetail": {
168
- borderRadius: "4px",
169
- background: cardBg
170
- },
171
- ".sectionTitle": {
172
- borderBottom: `1px solid ${deviderBgColor}`,
173
- fontWeight: "600",
174
- fontSize: "14px",
175
- padding: "14px 0px",
176
- width: "calc(100% - 30px)",
177
- margin: "auto",
178
- gap: "8px"
179
- },
180
- // ".activeThemeInnner": {
181
- // borderRadius: "7px",
182
- // padding: "16px",
183
- // boxShadow: "1px 2px 5px 0px #00000014",
184
- // background: "#fff",
185
- // },
186
- ".activeWrapper": {
187
- background: selectedCardOutsetBg,
188
- padding: "14px 10px",
189
- position: "relative",
190
- ".tickIcon": {
191
- position: "absolute",
192
- right: "5px",
193
- top: "8px",
194
- rect: {
195
- stroke: cardBorder2
196
- }
197
- }
198
- },
199
- ".MuiDivider-root": {
200
- border: `0.5px solid ${deviderBgColor}`
201
- },
202
- ".settingAccordion": {
203
- background: cardBg2,
204
- color: textColor,
205
- boxShadow: `1px 2px 8px 0px ${cardShadow}`,
206
- border: `1px solid ${uploadFileBg}`,
207
- borderRadius: "8px !important",
208
- marginTop: "10px",
209
- marginBottom: "10px",
210
- padding: "0px 12px",
211
- "&&.Mui-expanded": {
212
- border: `1.5px solid #2563EB`,
213
- boxShadow: "1px 2px 14px 0px #2563EB47",
214
- "& .MuiAccordionSummary-expandIconWrapper": {
215
- color: "#2563EB !important"
216
- }
217
- },
218
- "&:before": {
219
- background: "transparent"
220
- },
221
- ".MuiAccordionSummary-expandIconWrapper": {
222
- color: textColor
223
- },
224
- ".MuiAccordionSummary-root ": {
225
- // minHeight: "20px",
226
- padding: "0px",
227
- minHeight: "42px !important",
228
- "&.Mui-expanded": {
229
- // minHeight: "48px !important",
230
- borderBottom: `1px solid ${deviderBgColor}`
231
- }
232
- },
233
- ".MuiAccordionSummary-content ": {
234
- // padding: "12px 0px !important",
235
- margin: "0px !important",
236
- // minHeight: "45px",
237
- fontSize: "14px",
238
- fontWeight: "600"
239
- },
240
- ".MuiAccordionDetails-root ": {
241
- padding: "12px 0px !important"
242
- }
243
- },
244
- ".MuiTab-root": {
245
- color: textColor
246
- },
247
- ".saveThemeBtnsWrapper": {
248
- position: "sticky",
249
- bottom: "0px",
250
- right: "0px",
251
- boxShadow: `0px -3px 12px 0px ${cardShadow}`,
252
- padding: "10px",
253
- borderRadius: "8px",
254
- display: "flex",
255
- justifyContent: "end",
256
- alignItems: "center",
257
- gap: "6px",
258
- background: cardBg,
259
- "& .outlineBtn": {
260
- background: miniToolBarBackground
261
- },
262
- "& button": {
263
- fontWeight: 600,
264
- fontSize: "14px",
265
- opacity: 1,
266
- borderRadius: "8px",
267
- textTransform: "math-auto",
268
- padding: "4px 20px",
269
- height: "fit-content",
270
- minWidth: "90px",
271
- lineHeight: "1.75 !important",
272
- "@media only screen and (max-width: 899px)": {
273
- width: "50%"
274
- },
275
- "&.confirmBtn": {
276
- backgroundColor: "#2563EB",
277
- color: "#ffffff",
278
- border: `1px solid #2563EB`
279
- },
280
- "&.cancelBtn": {
281
- backgroundColor: closeButtonBackground,
282
- color: customDialogueCloseBtnColor,
283
- border: `1px solid ${customDialogueCloseBtnBorder}`
284
- }
285
- }
286
- },
287
- ".tabWrapper": {
288
- borderBottom: `1px solid ${deviderBgColor}`,
289
- marginBottom: "6px",
290
- "& .Mui-selected": {
291
- color: activeColor
292
- },
293
- "& .MuiTabs-indicator": {
294
- backgroundColor: activeColor
295
- }
296
- }
297
- };
298
- };
299
- export default Style;