@flozy/editor 10.1.2 → 10.1.4

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 (146) hide show
  1. package/dist/Editor/ChatEditor.js +16 -17
  2. package/dist/Editor/CommonEditor.js +15 -115
  3. package/dist/Editor/DialogWrapper.js +25 -31
  4. package/dist/Editor/Editor.css +8 -16
  5. package/dist/Editor/Elements/AI/PopoverAIInput.js +3 -11
  6. package/dist/Editor/Elements/AppHeader/AppHeader.js +3 -3
  7. package/dist/Editor/Elements/Button/EditorButton.js +9 -25
  8. package/dist/Editor/Elements/Color Picker/ColorButtons.js +14 -61
  9. package/dist/Editor/Elements/Color Picker/ColorPicker.css +1 -25
  10. package/dist/Editor/Elements/Color Picker/ColorPicker.js +7 -10
  11. package/dist/Editor/Elements/Color Picker/Styles.js +13 -15
  12. package/dist/Editor/Elements/DataView/Layouts/ColumnView.js +2 -4
  13. package/dist/Editor/Elements/DataView/Layouts/DataTypes/MultiSelectType.js +6 -21
  14. package/dist/Editor/Elements/DataView/Layouts/Options/AddOptions.js +1 -5
  15. package/dist/Editor/Elements/DataView/Layouts/Options/EditOption.js +2 -3
  16. package/dist/Editor/Elements/DataView/Layouts/Options/index.js +0 -11
  17. package/dist/Editor/Elements/DataView/Layouts/ViewData.js +4 -8
  18. package/dist/Editor/Elements/Embed/Image.js +2 -3
  19. package/dist/Editor/Elements/Embed/Video.js +1 -1
  20. package/dist/Editor/Elements/EmbedScript/Code.js +2 -14
  21. package/dist/Editor/Elements/EmbedScript/EmbedScriptPopup.js +28 -57
  22. package/dist/Editor/Elements/Form/Form.js +168 -179
  23. package/dist/Editor/Elements/Form/FormField.js +4 -10
  24. package/dist/Editor/Elements/Form/Workflow/Styles.js +22 -24
  25. package/dist/Editor/Elements/FreeGrid/FreeGrid.js +24 -6
  26. package/dist/Editor/Elements/FreeGrid/FreeGridBox.js +4 -7
  27. package/dist/Editor/Elements/FreeGrid/Options/More.js +8 -8
  28. package/dist/Editor/Elements/FreeGrid/styles.js +7 -67
  29. package/dist/Editor/Elements/Grid/GridItem.js +1 -1
  30. package/dist/Editor/Elements/List/CheckList.js +1 -4
  31. package/dist/Editor/Elements/Search/SearchAttachment.js +9 -40
  32. package/dist/Editor/Elements/Search/SearchButton.js +8 -9
  33. package/dist/Editor/Elements/Search/SearchList.js +7 -9
  34. package/dist/Editor/Elements/SimpleText/index.js +1 -6
  35. package/dist/Editor/Elements/SimpleText/style.js +2 -2
  36. package/dist/Editor/Elements/Table/Table.js +3 -3
  37. package/dist/Editor/Elements/Title/title.js +6 -6
  38. package/dist/Editor/Elements/Variables/VariableButton.js +1 -10
  39. package/dist/Editor/MiniEditor.js +1 -2
  40. package/dist/Editor/Styles/EditorStyles.js +5 -5
  41. package/dist/Editor/Toolbar/FormatTools/Dropdown.js +3 -27
  42. package/dist/Editor/Toolbar/FormatTools/FontFamilyAutocomplete.js +3 -4
  43. package/dist/Editor/Toolbar/FormatTools/MarkButton.js +2 -2
  44. package/dist/Editor/Toolbar/FormatTools/TextSize.js +13 -10
  45. package/dist/Editor/Toolbar/Mini/MiniToolbar.js +1 -2
  46. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/MiniColorPicker.js +2 -4
  47. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectFontSize.js +13 -6
  48. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/SelectTypography.js +42 -167
  49. package/dist/Editor/Toolbar/PopupTool/MiniTextFormat/index.js +4 -7
  50. package/dist/Editor/Toolbar/PopupTool/PopperHeader.js +1 -2
  51. package/dist/Editor/Toolbar/PopupTool/PopupToolStyle.js +12 -72
  52. package/dist/Editor/Toolbar/PopupTool/TextFormat.js +27 -100
  53. package/dist/Editor/Toolbar/PopupTool/index.js +1 -1
  54. package/dist/Editor/Toolbar/toolbarGroups.js +6 -48
  55. package/dist/Editor/assets/svg/SettingsIcon.js +0 -1
  56. package/dist/Editor/common/ColorPickerButton.js +17 -39
  57. package/dist/Editor/common/DnD/DragHandleButton.js +1 -1
  58. package/dist/Editor/common/FontLoader/FontLoader.js +0 -3
  59. package/dist/Editor/common/Icon.js +1 -31
  60. package/dist/Editor/common/ImageSelector/Styles.js +9 -3
  61. package/dist/Editor/common/LinkSettings/NavComponents.js +8 -34
  62. package/dist/Editor/common/LinkSettings/index.js +68 -84
  63. package/dist/Editor/common/LinkSettings/style.js +30 -245
  64. package/dist/Editor/common/RnD/ElementOptions/Actions.js +14 -13
  65. package/dist/Editor/common/RnD/ElementOptions/Icons/LinkIcon.js +0 -1
  66. package/dist/Editor/common/RnD/ElementOptions/index.js +2 -2
  67. package/dist/Editor/common/RnD/ElementOptions/styles.js +1 -28
  68. package/dist/Editor/common/RnD/ElementSettings/OtherSettings/Settings.js +5 -6
  69. package/dist/Editor/common/RnD/ElementSettings/Settings/AppHeaderSettings.js +2 -3
  70. package/dist/Editor/common/RnD/ElementSettings/Settings/BoxSettings.js +2 -3
  71. package/dist/Editor/common/RnD/ElementSettings/Settings/ButtonSettings.js +2 -3
  72. package/dist/Editor/common/RnD/ElementSettings/Settings/CodeSettings.js +2 -3
  73. package/dist/Editor/common/RnD/ElementSettings/Settings/FormSettings.js +2 -4
  74. package/dist/Editor/common/RnD/ElementSettings/Settings/ImageSettings.js +2 -3
  75. package/dist/Editor/common/RnD/ElementSettings/Settings/TableSettings.js +2 -3
  76. package/dist/Editor/common/RnD/ElementSettings/Settings/TextSettings.js +1 -3
  77. package/dist/Editor/common/RnD/ElementSettings/Settings/VideoSettings.js +2 -3
  78. package/dist/Editor/common/RnD/ElementSettings/styles.js +12 -147
  79. package/dist/Editor/common/RnD/OptionsPopup/index.js +5 -8
  80. package/dist/Editor/common/RnD/OptionsPopup/style.js +19 -121
  81. package/dist/Editor/common/RnD/SwitchViewport/SwitchViewport.js +5 -8
  82. package/dist/Editor/common/RnD/Theme/ViewportStimulator.js +3 -6
  83. package/dist/Editor/common/RnD/Utils/gridDropItem.js +2 -1
  84. package/dist/Editor/common/RnD/index.js +6 -5
  85. package/dist/Editor/common/Select/index.js +0 -2
  86. package/dist/Editor/common/Shorthands/elements.js +0 -54
  87. package/dist/Editor/common/StyleBuilder/buttonStyle.js +2 -4
  88. package/dist/Editor/common/StyleBuilder/fieldTypes/backgroundImage.js +0 -5
  89. package/dist/Editor/common/StyleBuilder/fieldTypes/bannerSpacing.js +2 -12
  90. package/dist/Editor/common/StyleBuilder/fieldTypes/borderRadius.js +7 -15
  91. package/dist/Editor/common/StyleBuilder/fieldTypes/card.js +8 -16
  92. package/dist/Editor/common/StyleBuilder/fieldTypes/color.js +10 -36
  93. package/dist/Editor/common/StyleBuilder/fieldTypes/fontSize.js +7 -16
  94. package/dist/Editor/common/StyleBuilder/fieldTypes/lineSpacing.js +6 -7
  95. package/dist/Editor/common/StyleBuilder/fieldTypes/menusArray.js +6 -13
  96. package/dist/Editor/common/StyleBuilder/fieldTypes/textOptions.js +7 -15
  97. package/dist/Editor/common/StyleBuilder/pageSettingsStyle.js +7 -5
  98. package/dist/Editor/common/Uploader.js +0 -8
  99. package/dist/Editor/common/iconListV2.js +6 -101
  100. package/dist/Editor/common/iconslist.js +0 -24
  101. package/dist/Editor/commonStyle.js +61 -174
  102. package/dist/Editor/helper/theme.js +2 -203
  103. package/dist/Editor/hooks/useMouseMove.js +5 -8
  104. package/dist/Editor/plugins/withEmbeds.js +1 -1
  105. package/dist/Editor/plugins/withHTML.js +1 -3
  106. package/dist/Editor/plugins/withTable.js +1 -1
  107. package/dist/Editor/theme/ThemeList.js +173 -50
  108. package/dist/Editor/utils/SlateUtilityFunctions.js +43 -166
  109. package/dist/Editor/utils/button.js +17 -1
  110. package/dist/Editor/utils/draftToSlate.js +2 -3
  111. package/dist/Editor/utils/font.js +37 -40
  112. package/dist/Editor/utils/helper.js +19 -90
  113. package/package.json +4 -4
  114. package/dist/Editor/Elements/DataView/Layouts/DataTypes/Components/MultiSelect.js +0 -454
  115. package/dist/Editor/Elements/EmbedScript/styles.js +0 -89
  116. package/dist/Editor/Toolbar/PopupTool/ThemeTextFormat.js +0 -439
  117. package/dist/Editor/assets/svg/BackIcon.js +0 -18
  118. package/dist/Editor/assets/svg/ClearAllRounded.js +0 -31
  119. package/dist/Editor/assets/svg/ResetIconNew.js +0 -23
  120. package/dist/Editor/assets/svg/ThemeIcons.js +0 -293
  121. package/dist/Editor/common/CustomColorPicker/index.js +0 -130
  122. package/dist/Editor/common/CustomColorPicker/style.js +0 -53
  123. package/dist/Editor/common/CustomDialog2/index.js +0 -94
  124. package/dist/Editor/common/CustomDialog2/style.js +0 -67
  125. package/dist/Editor/common/CustomSelect.js +0 -43
  126. package/dist/Editor/common/RnD/Theme/MainThemeProvider.js +0 -17
  127. package/dist/Editor/common/SnackBar/index.js +0 -43
  128. package/dist/Editor/helper/textIndeces.js +0 -58
  129. package/dist/Editor/hooks/useEditorTheme.js +0 -153
  130. package/dist/Editor/hooks/useThemeValues.js +0 -63
  131. package/dist/Editor/theme/index.js +0 -149
  132. package/dist/Editor/themeSettings/ActiveTheme.js +0 -72
  133. package/dist/Editor/themeSettings/buttons/index.js +0 -290
  134. package/dist/Editor/themeSettings/buttons/style.js +0 -23
  135. package/dist/Editor/themeSettings/colorTheme/index.js +0 -309
  136. package/dist/Editor/themeSettings/colorTheme/style.js +0 -81
  137. package/dist/Editor/themeSettings/fonts/PreviewElement.js +0 -121
  138. package/dist/Editor/themeSettings/fonts/index.js +0 -240
  139. package/dist/Editor/themeSettings/fonts/style.js +0 -62
  140. package/dist/Editor/themeSettings/icons.js +0 -60
  141. package/dist/Editor/themeSettings/index.js +0 -361
  142. package/dist/Editor/themeSettings/style.js +0 -292
  143. package/dist/Editor/themeSettingsAI/icons.js +0 -96
  144. package/dist/Editor/themeSettingsAI/index.js +0 -355
  145. package/dist/Editor/themeSettingsAI/saveTheme.js +0 -202
  146. package/dist/Editor/themeSettingsAI/style.js +0 -324
@@ -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,292 +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
- ".activeColorBox, .xsColorBox": {
121
- width: "24px",
122
- height: "24px",
123
- borderRadius: "5px",
124
- border: `1px solid #929292`
125
- },
126
- ".themeCard": {
127
- borderRadius: "7px",
128
- padding: "16px",
129
- border: `1px solid ${uploadFileBg}`,
130
- boxShadow: "1px 2px 5px 0px #00000014",
131
- background: cardBg2,
132
- flexWrap: "nowrap",
133
- display: "flex",
134
- justifyContent: "space-between",
135
- alignItems: "center"
136
- },
137
- ".themeCardWrapper": {
138
- padding: "6px 10px",
139
- cursor: "pointer",
140
- "&.active": {
141
- background: "#ECF2FF"
142
- }
143
- },
144
- ".primaryCard, .secondaryCard": {
145
- width: "44px",
146
- height: "44px",
147
- borderRadius: "5px",
148
- border: `1px solid #929292`
149
- },
150
- ".otherColors": {
151
- display: "flex",
152
- flexWrap: "wrap",
153
- width: "48px",
154
- ".smallCard": {
155
- width: "20px",
156
- height: "20px",
157
- borderRadius: "5px",
158
- border: `1px solid #929292`
159
- }
160
- },
161
- ".sectionDetail": {
162
- borderRadius: "4px",
163
- background: cardBg
164
- },
165
- ".sectionTitle": {
166
- borderBottom: `1px solid ${deviderBgColor}`,
167
- fontWeight: "600",
168
- fontSize: "14px",
169
- padding: "10px 0px",
170
- width: "calc(100% - 20px)",
171
- margin: "auto",
172
- gap: "8px"
173
- },
174
- // ".activeThemeInnner": {
175
- // borderRadius: "7px",
176
- // padding: "16px",
177
- // boxShadow: "1px 2px 5px 0px #00000014",
178
- // background: "#fff",
179
- // },
180
- ".activeWrapper": {
181
- background: selectedCardOutsetBg,
182
- padding: "14px 10px",
183
- position: "relative",
184
- ".tickIcon": {
185
- position: "absolute",
186
- right: "5px",
187
- top: "8px",
188
- rect: {
189
- stroke: cardBorder2
190
- }
191
- }
192
- },
193
- ".MuiDivider-root": {
194
- border: `0.5px solid ${deviderBgColor}`
195
- },
196
- ".settingAccordion": {
197
- background: cardBg2,
198
- color: textColor,
199
- boxShadow: `1px 2px 8px 0px ${cardShadow}`,
200
- border: `1px solid ${uploadFileBg}`,
201
- borderRadius: "8px !important",
202
- marginTop: "10px",
203
- marginBottom: "10px",
204
- padding: "0px 12px",
205
- "&.Mui-expanded": {
206
- border: `1px solid #2563EB`,
207
- boxShadow: "1px 2px 14px 0px #2563EB47",
208
- "& .MuiAccordionSummary-expandIconWrapper": {
209
- color: "#2563EB !important"
210
- }
211
- },
212
- "&:before": {
213
- background: "transparent"
214
- },
215
- ".MuiAccordionSummary-expandIconWrapper": {
216
- color: textColor
217
- },
218
- ".MuiAccordionSummary-root ": {
219
- // minHeight: "20px",
220
- padding: "0px",
221
- minHeight: "42px !important",
222
- "&.Mui-expanded": {
223
- // minHeight: "48px !important",
224
- borderBottom: `1px solid ${deviderBgColor}`
225
- }
226
- },
227
- ".MuiAccordionSummary-content ": {
228
- // padding: "12px 0px !important",
229
- margin: "0px !important",
230
- // minHeight: "45px",
231
- fontSize: "14px",
232
- fontWeight: "600"
233
- },
234
- ".MuiAccordionDetails-root ": {
235
- padding: "12px 0px !important"
236
- }
237
- },
238
- ".MuiTab-root": {
239
- color: textColor
240
- },
241
- ".saveThemeBtnsWrapper": {
242
- position: "sticky",
243
- bottom: "0px",
244
- right: "0px",
245
- boxShadow: `0px -3px 12px 0px ${cardShadow}`,
246
- padding: "10px",
247
- borderRadius: "8px",
248
- display: "flex",
249
- justifyContent: "end",
250
- alignItems: "center",
251
- gap: "6px",
252
- background: cardBg,
253
- "& .outlineBtn": {
254
- background: miniToolBarBackground
255
- },
256
- "& button": {
257
- fontWeight: 600,
258
- fontSize: "14px",
259
- opacity: 1,
260
- borderRadius: "8px",
261
- textTransform: "math-auto",
262
- padding: "4px 20px",
263
- height: "fit-content",
264
- minWidth: "90px",
265
- "@media only screen and (max-width: 899px)": {
266
- width: "50%"
267
- },
268
- "&.confirmBtn": {
269
- backgroundColor: "#2563EB",
270
- color: "#ffffff",
271
- border: `1px solid #2563EB`
272
- },
273
- "&.cancelBtn": {
274
- backgroundColor: closeButtonBackground,
275
- color: customDialogueCloseBtnColor,
276
- border: `1px solid ${customDialogueCloseBtnBorder}`
277
- }
278
- }
279
- },
280
- ".tabWrapper": {
281
- borderBottom: `1px solid ${deviderBgColor}`,
282
- marginBottom: "6px",
283
- "& .Mui-selected": {
284
- color: activeColor
285
- },
286
- "& .MuiTabs-indicator": {
287
- backgroundColor: activeColor
288
- }
289
- }
290
- };
291
- };
292
- export default Style;