@zohoim/chat-components 1.1.1 → 1.1.2-beta.1
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.
- package/README.md +5 -1
- package/assets/Appearance/dark/mode/General_DarkMode.module.css +93 -0
- package/assets/Appearance/dark/themes/blue/blue_General_DarkTheme.module.css +40 -0
- package/assets/Appearance/dark/themes/green/green_General_DarkTheme.module.css +40 -0
- package/assets/Appearance/dark/themes/orange/orange_General_DarkTheme.module.css +40 -0
- package/assets/Appearance/dark/themes/red/red_General_DarkTheme.module.css +40 -0
- package/assets/Appearance/dark/themes/yellow/yellow_General_DarkTheme.module.css +40 -0
- package/assets/Appearance/light/mode/General_LightMode.module.css +93 -0
- package/assets/Appearance/light/themes/blue/blue_General_LightTheme.module.css +40 -0
- package/assets/Appearance/light/themes/green/green_General_LightTheme.module.css +40 -0
- package/assets/Appearance/light/themes/orange/orange_General_LightTheme.module.css +40 -0
- package/assets/Appearance/light/themes/red/red_General_LightTheme.module.css +40 -0
- package/assets/Appearance/light/themes/yellow/yellow_General_LightTheme.module.css +40 -0
- package/assets/Appearance/pureDark/mode/General_PureDarkMode.module.css +93 -0
- package/assets/Appearance/pureDark/themes/blue/blue_General_PureDarkTheme.module.css +40 -0
- package/assets/Appearance/pureDark/themes/green/green_General_PureDarkTheme.module.css +40 -0
- package/assets/Appearance/pureDark/themes/orange/orange_General_PureDarkTheme.module.css +40 -0
- package/assets/Appearance/pureDark/themes/red/red_General_PureDarkTheme.module.css +40 -0
- package/assets/Appearance/pureDark/themes/yellow/yellow_General_PureDarkTheme.module.css +40 -0
- package/es/ActionIconWrapper/ActionIconWrapper.js +5 -1
- package/es/AttachmentHandler/AttachmentHandler.js +3 -0
- package/es/AttachmentHandler/css/AttachmentHandler.module.css +2 -2
- package/es/AttachmentPreviewBody/css/AttachmentPreviewBody.module.css +4 -8
- package/es/AttachmentPreviewHeader/css/AttachmentPreviewHeader.module.css +4 -4
- package/es/Emoji/Emoji.js +5 -1
- package/es/EmojiPopup/EmojiPopup.js +4 -1
- package/es/EmojiPopup/css/EmojiPopup.module.css +2 -2
- package/es/EmojisFooter/css/EmojisFooter.module.css +3 -4
- package/es/EmojisHeader/css/EmojisHeader.module.css +3 -3
- package/es/MessageActions/MessageActions.js +3 -1
- package/es/MessageActions/props/propTypes.js +2 -1
- package/es/MessageBubble/MessageBubble.js +20 -4
- package/es/MoreActionItem/MoreActionItem.js +4 -0
- package/es/TextBubble/TextBubble.js +5 -2
- package/es/TextBubble/css/TextBubble.module.css +1 -0
- package/es/Theme/ThemeAssets.js +18 -0
- package/es/Theme/ThemeWrapper.js +7 -5
- package/es/Theme/utils/getThemeConfigurations.js +1 -55
- package/es/im/IMIntegrationIcon/css/IMIntegrationIcon.module.css +2 -2
- package/es/im/ReplyEditor/css/ReplyEditor.module.css +4 -4
- package/lib/index.js +538 -0
- package/package.json +18 -11
- package/es/Theme/themeVariables/commonThemeColorVariable.js +0 -17
- package/es/Theme/themeVariables/dark/blueTheme.js +0 -133
- package/es/Theme/themeVariables/dark/commonColorVariable.js +0 -35
- package/es/Theme/themeVariables/dark/greenTheme.js +0 -132
- package/es/Theme/themeVariables/dark/orangeTheme.js +0 -132
- package/es/Theme/themeVariables/dark/redTheme.js +0 -132
- package/es/Theme/themeVariables/dark/yellowTheme.js +0 -132
- package/es/Theme/themeVariables/light/blueTheme.js +0 -135
- package/es/Theme/themeVariables/light/commonColorVariable.js +0 -54
- package/es/Theme/themeVariables/light/greenTheme.js +0 -131
- package/es/Theme/themeVariables/light/orangeTheme.js +0 -131
- package/es/Theme/themeVariables/light/redTheme.js +0 -131
- package/es/Theme/themeVariables/light/yellowTheme.js +0 -131
- package/es/Theme/themeVariables/pureDark/blueTheme.js +0 -132
- package/es/Theme/themeVariables/pureDark/commonColorVariable.js +0 -37
- package/es/Theme/themeVariables/pureDark/greenTheme.js +0 -132
- package/es/Theme/themeVariables/pureDark/orangeTheme.js +0 -132
- package/es/Theme/themeVariables/pureDark/redTheme.js +0 -132
- package/es/Theme/themeVariables/pureDark/yellowTheme.js +0 -132
|
@@ -1,135 +0,0 @@
|
|
|
1
|
-
/* eslint-disable camelcase */
|
|
2
|
-
import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryBlue, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojiPopup, emojisHeader, attachmentPreviewHeader } from "./commonColorVariable";
|
|
3
|
-
export default {
|
|
4
|
-
library: 'chat_components',
|
|
5
|
-
variables: {
|
|
6
|
-
actionIconWrapper: {
|
|
7
|
-
color: actionIconWrapperColor,
|
|
8
|
-
bg_color: '#f1f7fe',
|
|
9
|
-
border_color: '#b7d1f0'
|
|
10
|
-
},
|
|
11
|
-
attachmentBubble: {
|
|
12
|
-
bg_color: white,
|
|
13
|
-
bg_color_failed: failedBg,
|
|
14
|
-
border_color: '#ebf0f5',
|
|
15
|
-
border_color_failed: failedBdr
|
|
16
|
-
},
|
|
17
|
-
attachmentBubbleInfo: {
|
|
18
|
-
fileName_color: black,
|
|
19
|
-
fileName_color_failed: failedColor,
|
|
20
|
-
fileSize_color: '#5a616f',
|
|
21
|
-
fileSize_color_failed: '#788190'
|
|
22
|
-
},
|
|
23
|
-
articleBubble: {
|
|
24
|
-
bg_color: white,
|
|
25
|
-
bg_color_failed: failedBg,
|
|
26
|
-
border_color: '#ebf0f5',
|
|
27
|
-
border_color_failed: failedBdr,
|
|
28
|
-
title_color: black,
|
|
29
|
-
title_color_failed: failedColor,
|
|
30
|
-
summary_color: black,
|
|
31
|
-
summary_color_failed: failedColor
|
|
32
|
-
},
|
|
33
|
-
imAutoMessageInfo: {
|
|
34
|
-
text_color: '#737376'
|
|
35
|
-
},
|
|
36
|
-
imIntegrationIcon,
|
|
37
|
-
imTtIcon,
|
|
38
|
-
imMessageContent: {
|
|
39
|
-
text_color: '#5a616f'
|
|
40
|
-
},
|
|
41
|
-
imMessageMeta: {
|
|
42
|
-
time_color: '#5a616f'
|
|
43
|
-
},
|
|
44
|
-
imPermaLink: {
|
|
45
|
-
url_color: primaryBlue
|
|
46
|
-
},
|
|
47
|
-
imageBubble: {
|
|
48
|
-
bg_color: white,
|
|
49
|
-
bg_color_failed: failedBg,
|
|
50
|
-
alt_text_color: black,
|
|
51
|
-
alt_text_color_failed: failedColor,
|
|
52
|
-
border_color: '#ebf0f5',
|
|
53
|
-
border_color_failed: failedBdr
|
|
54
|
-
},
|
|
55
|
-
locationBubble: {
|
|
56
|
-
bg_color: white,
|
|
57
|
-
bg_color_failed: failedBg,
|
|
58
|
-
border_color: '#ebf0f5',
|
|
59
|
-
border_color_failed: failedBdr,
|
|
60
|
-
url_color: primaryBlue,
|
|
61
|
-
url_color_failed: failedUrlColor
|
|
62
|
-
},
|
|
63
|
-
messageBox: {
|
|
64
|
-
incoming_bg_color: incomingBubbleBgColor,
|
|
65
|
-
outgoing_bg_color: '#f1f7fe',
|
|
66
|
-
bg_color: '#f1f7fe',
|
|
67
|
-
failed_bg_color: failedBgWrapper,
|
|
68
|
-
text_color: messagetextColor
|
|
69
|
-
},
|
|
70
|
-
messageBubble: {
|
|
71
|
-
active_bg_color: bubbleActiveBgColor,
|
|
72
|
-
messageBox_footer_text_color: '#5a616f'
|
|
73
|
-
},
|
|
74
|
-
messageStatus: {
|
|
75
|
-
send_color: messageStatusSendColor,
|
|
76
|
-
read_color: primaryBlue,
|
|
77
|
-
failed_color: messageStatusFailedColor
|
|
78
|
-
},
|
|
79
|
-
replyBubble: {
|
|
80
|
-
border_color: '#ebf0f5',
|
|
81
|
-
border_color_failed: failedBdr
|
|
82
|
-
},
|
|
83
|
-
replyBubbleContent: {
|
|
84
|
-
bg_color: white,
|
|
85
|
-
bg_color_failed: failedBg,
|
|
86
|
-
border_color: '#ebf0f5',
|
|
87
|
-
border_color_failed: failedBdr,
|
|
88
|
-
line_color: '#cddbf2',
|
|
89
|
-
line_color_failed: failedLine,
|
|
90
|
-
sender_color: black,
|
|
91
|
-
sender_color_failed: failedColor,
|
|
92
|
-
content_color: '#5a616f',
|
|
93
|
-
content_color_failed: failedColor
|
|
94
|
-
},
|
|
95
|
-
replyBubbleHeader: {
|
|
96
|
-
text_color: black,
|
|
97
|
-
text_color_failed: failedColor,
|
|
98
|
-
time_color: '#61667a',
|
|
99
|
-
time_color_failed: failedColor
|
|
100
|
-
},
|
|
101
|
-
textBubble: {
|
|
102
|
-
text_color: black,
|
|
103
|
-
text_color_failed: failedColor,
|
|
104
|
-
see_more_color: primaryBlue,
|
|
105
|
-
see_more_color_failed: failedUrlColor,
|
|
106
|
-
url_color: primaryBlue,
|
|
107
|
-
url_color_failed: failedUrlColor
|
|
108
|
-
},
|
|
109
|
-
videoBubble: {
|
|
110
|
-
border_color: '#ebf0f5',
|
|
111
|
-
border_color_failed: failedBdr
|
|
112
|
-
},
|
|
113
|
-
emoji: {
|
|
114
|
-
active_bg_color: 'red',
|
|
115
|
-
hover_bg_color: 'green'
|
|
116
|
-
},
|
|
117
|
-
replyEditor,
|
|
118
|
-
emojiPopup: { ...emojiPopup,
|
|
119
|
-
ttIcon_path1_color: 'rgba(200, 203, 220, 0.7)',
|
|
120
|
-
ttIcon_path2_color: 'var(--dot_black)'
|
|
121
|
-
},
|
|
122
|
-
emojiFooter: {
|
|
123
|
-
tabLine: primaryBlue,
|
|
124
|
-
border_color: '#ebf0f5'
|
|
125
|
-
},
|
|
126
|
-
emojisHeader,
|
|
127
|
-
attachmentPreviewHeader,
|
|
128
|
-
attachmentPreviewBody: {
|
|
129
|
-
bg_color: '#f5f6f7',
|
|
130
|
-
editor_border_color: '#c8cbdc',
|
|
131
|
-
editor_border_hover_color: '#788190',
|
|
132
|
-
editor_border_active_color: '#0a73eb'
|
|
133
|
-
}
|
|
134
|
-
}
|
|
135
|
-
};
|
|
@@ -1,54 +0,0 @@
|
|
|
1
|
-
export const incomingBubbleBgColor = '#f1f4f9';
|
|
2
|
-
export const bubbleActiveBgColor = '#fdffe3';
|
|
3
|
-
export const actionIconWrapperColor = '#000';
|
|
4
|
-
export const messageStatusSendColor = '#61667a';
|
|
5
|
-
export const messageStatusFailedColor = '#de3535';
|
|
6
|
-
export const messagetextColor = '#000';
|
|
7
|
-
export const white = '#fff';
|
|
8
|
-
export const black = '#000';
|
|
9
|
-
export const primaryBlue = '#0a73eb';
|
|
10
|
-
export const primaryGreen = '#26a942';
|
|
11
|
-
export const primaryOrange = '#e57717';
|
|
12
|
-
export const primaryRed = '#de3535';
|
|
13
|
-
export const primaryYellow = '#b68c07';
|
|
14
|
-
export const failedBgWrapper = '#fcebeb';
|
|
15
|
-
export const failedBg = '#fff0f0';
|
|
16
|
-
export const failedBdr = '#ffd6d6';
|
|
17
|
-
export const failedLine = '#ffd6d6';
|
|
18
|
-
export const failedColor = '#000';
|
|
19
|
-
export const failedUrlColor = '#0a73eb';
|
|
20
|
-
export const imIntegrationIcon = {
|
|
21
|
-
path0_color: '#ffffff40',
|
|
22
|
-
path1_color: '#fff',
|
|
23
|
-
whatsapp_color: '#24d366',
|
|
24
|
-
telegram_color: '#4fa7d8',
|
|
25
|
-
wechat_color: '#2dc100',
|
|
26
|
-
line_color: '#01b901',
|
|
27
|
-
twillio_color: '#f22f46',
|
|
28
|
-
instagram_color: 'linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%)',
|
|
29
|
-
asap_color: 'linear-gradient(180deg, #A375FF 0%, #7732FF 100%)',
|
|
30
|
-
fb_color: '#006aff'
|
|
31
|
-
};
|
|
32
|
-
export const imTtIcon = {
|
|
33
|
-
path0_color: 'rgba(200,203,220,0.7)',
|
|
34
|
-
path1_color: '#000'
|
|
35
|
-
};
|
|
36
|
-
export const replyEditor = {
|
|
37
|
-
bg: '#fff',
|
|
38
|
-
color: '#000',
|
|
39
|
-
placeholder: '#c8cbdc'
|
|
40
|
-
};
|
|
41
|
-
export const emojiPopup = {
|
|
42
|
-
bg: '#f1f4f9',
|
|
43
|
-
border: '#f1f4f9',
|
|
44
|
-
titleColor: '#aaa'
|
|
45
|
-
};
|
|
46
|
-
export const emojisHeader = {
|
|
47
|
-
bg_color: '#fafafa',
|
|
48
|
-
border_color: '#ede8e8'
|
|
49
|
-
};
|
|
50
|
-
export const attachmentPreviewHeader = {
|
|
51
|
-
bg_color: '#fff',
|
|
52
|
-
name_color: '#000',
|
|
53
|
-
size_color: '#5a616f'
|
|
54
|
-
};
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
/* eslint-disable camelcase */
|
|
2
|
-
import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryGreen, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
|
|
3
|
-
export default {
|
|
4
|
-
library: 'chat_components',
|
|
5
|
-
variables: {
|
|
6
|
-
actionIconWrapper: {
|
|
7
|
-
color: actionIconWrapperColor,
|
|
8
|
-
bg_color: '#f2faf5',
|
|
9
|
-
border_color: '#bee5c6'
|
|
10
|
-
},
|
|
11
|
-
attachmentBubble: {
|
|
12
|
-
bg_color: white,
|
|
13
|
-
bg_color_failed: failedBg,
|
|
14
|
-
border_color: '#ebf0f5',
|
|
15
|
-
border_color_failed: failedBdr
|
|
16
|
-
},
|
|
17
|
-
attachmentBubbleInfo: {
|
|
18
|
-
fileName_color: black,
|
|
19
|
-
fileName_color_failed: failedColor,
|
|
20
|
-
fileSize_color: '#5a616f',
|
|
21
|
-
fileSize_color_failed: '#788190'
|
|
22
|
-
},
|
|
23
|
-
articleBubble: {
|
|
24
|
-
bg_color: white,
|
|
25
|
-
bg_color_failed: failedBg,
|
|
26
|
-
border_color: '#ebf0f5',
|
|
27
|
-
border_color_failed: failedBdr,
|
|
28
|
-
title_color: black,
|
|
29
|
-
title_color_failed: failedColor,
|
|
30
|
-
summary_color: black,
|
|
31
|
-
summary_color_failed: failedColor
|
|
32
|
-
},
|
|
33
|
-
imAutoMessageInfo: {
|
|
34
|
-
text_color: '#737376'
|
|
35
|
-
},
|
|
36
|
-
imIntegrationIcon,
|
|
37
|
-
imTtIcon,
|
|
38
|
-
imMessageContent: {
|
|
39
|
-
text_color: '#5a616f'
|
|
40
|
-
},
|
|
41
|
-
imMessageMeta: {
|
|
42
|
-
time_color: '#5a616f'
|
|
43
|
-
},
|
|
44
|
-
imPermaLink: {
|
|
45
|
-
url_color: primaryGreen
|
|
46
|
-
},
|
|
47
|
-
imageBubble: {
|
|
48
|
-
bg_color: white,
|
|
49
|
-
bg_color_failed: failedBg,
|
|
50
|
-
alt_text_color: black,
|
|
51
|
-
alt_text_color_failed: failedColor,
|
|
52
|
-
border_color: '#ebf0f5',
|
|
53
|
-
border_color_failed: failedBdr
|
|
54
|
-
},
|
|
55
|
-
locationBubble: {
|
|
56
|
-
bg_color: white,
|
|
57
|
-
bg_color_failed: failedBg,
|
|
58
|
-
border_color: '#ebf0f5',
|
|
59
|
-
border_color_failed: failedBdr,
|
|
60
|
-
url_color: primaryGreen,
|
|
61
|
-
url_color_failed: failedUrlColor
|
|
62
|
-
},
|
|
63
|
-
messageBox: {
|
|
64
|
-
incoming_bg_color: incomingBubbleBgColor,
|
|
65
|
-
outgoing_bg_color: '#f2faf5',
|
|
66
|
-
bg_color: '#f1f7fe',
|
|
67
|
-
failed_bg_color: failedBgWrapper,
|
|
68
|
-
text_color: messagetextColor
|
|
69
|
-
},
|
|
70
|
-
messageBubble: {
|
|
71
|
-
active_bg_color: bubbleActiveBgColor,
|
|
72
|
-
messageBox_footer_text_color: '#5a616f'
|
|
73
|
-
},
|
|
74
|
-
messageStatus: {
|
|
75
|
-
send_color: messageStatusSendColor,
|
|
76
|
-
read_color: '#26a942',
|
|
77
|
-
failed_color: messageStatusFailedColor
|
|
78
|
-
},
|
|
79
|
-
replyBubble: {
|
|
80
|
-
border_color: '#ebf0f5',
|
|
81
|
-
border_color_failed: failedBdr
|
|
82
|
-
},
|
|
83
|
-
replyBubbleContent: {
|
|
84
|
-
bg_color: white,
|
|
85
|
-
bg_color_failed: failedBg,
|
|
86
|
-
border_color: '#ebf0f5',
|
|
87
|
-
border_color_failed: failedBdr,
|
|
88
|
-
line_color: '#cddbf2',
|
|
89
|
-
line_color_failed: failedLine,
|
|
90
|
-
sender_color: black,
|
|
91
|
-
sender_color_failed: failedColor,
|
|
92
|
-
content_color: '#5a616f',
|
|
93
|
-
content_color_failed: failedColor
|
|
94
|
-
},
|
|
95
|
-
replyBubbleHeader: {
|
|
96
|
-
text_color: black,
|
|
97
|
-
text_color_failed: failedColor,
|
|
98
|
-
time_color: '#61667a',
|
|
99
|
-
time_color_failed: failedColor
|
|
100
|
-
},
|
|
101
|
-
textBubble: {
|
|
102
|
-
text_color: black,
|
|
103
|
-
text_color_failed: failedColor,
|
|
104
|
-
see_more_color: primaryGreen,
|
|
105
|
-
see_more_color_failed: failedUrlColor,
|
|
106
|
-
url_color: primaryGreen,
|
|
107
|
-
url_color_failed: failedUrlColor
|
|
108
|
-
},
|
|
109
|
-
videoBubble: {
|
|
110
|
-
border_color: '#ebf0f5',
|
|
111
|
-
border_color_failed: failedBdr
|
|
112
|
-
},
|
|
113
|
-
emojiFooter: {
|
|
114
|
-
tabLine: primaryGreen,
|
|
115
|
-
border_color: '#ebf0f5'
|
|
116
|
-
},
|
|
117
|
-
replyEditor,
|
|
118
|
-
emojisHeader,
|
|
119
|
-
attachmentPreviewHeader,
|
|
120
|
-
attachmentPreviewBody: {
|
|
121
|
-
bg_color: '#f5f6f7',
|
|
122
|
-
editor_border_color: '#c5cdc7',
|
|
123
|
-
editor_border_hover_color: '#788190',
|
|
124
|
-
editor_border_active_color: '#26a942'
|
|
125
|
-
},
|
|
126
|
-
emojiPopup: { ...emojiPopup,
|
|
127
|
-
ttIcon_path1_color: 'rgba(197, 205, 199, 0.7)',
|
|
128
|
-
ttIcon_path2_color: 'var(--dot_black)'
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
};
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
/* eslint-disable camelcase */
|
|
2
|
-
import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryOrange, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
|
|
3
|
-
export default {
|
|
4
|
-
library: 'chat_components',
|
|
5
|
-
variables: {
|
|
6
|
-
actionIconWrapper: {
|
|
7
|
-
color: actionIconWrapperColor,
|
|
8
|
-
bg_color: '#fdf5ef',
|
|
9
|
-
border_color: '#f7d6b9'
|
|
10
|
-
},
|
|
11
|
-
attachmentBubble: {
|
|
12
|
-
bg_color: white,
|
|
13
|
-
bg_color_failed: failedBg,
|
|
14
|
-
border_color: '#ebf0f5',
|
|
15
|
-
border_color_failed: failedBdr
|
|
16
|
-
},
|
|
17
|
-
attachmentBubbleInfo: {
|
|
18
|
-
fileName_color: black,
|
|
19
|
-
fileName_color_failed: failedColor,
|
|
20
|
-
fileSize_color: '#5a616f',
|
|
21
|
-
fileSize_color_failed: '#788190'
|
|
22
|
-
},
|
|
23
|
-
articleBubble: {
|
|
24
|
-
bg_color: white,
|
|
25
|
-
bg_color_failed: failedBg,
|
|
26
|
-
border_color: '#ebf0f5',
|
|
27
|
-
border_color_failed: failedBdr,
|
|
28
|
-
title_color: black,
|
|
29
|
-
title_color_failed: failedColor,
|
|
30
|
-
summary_color: black,
|
|
31
|
-
summary_color_failed: failedColor
|
|
32
|
-
},
|
|
33
|
-
imAutoMessageInfo: {
|
|
34
|
-
text_color: '#737376'
|
|
35
|
-
},
|
|
36
|
-
imIntegrationIcon,
|
|
37
|
-
imTtIcon,
|
|
38
|
-
imMessageContent: {
|
|
39
|
-
text_color: '#5a616f'
|
|
40
|
-
},
|
|
41
|
-
imMessageMeta: {
|
|
42
|
-
time_color: '#5a616f'
|
|
43
|
-
},
|
|
44
|
-
imPermaLink: {
|
|
45
|
-
url_color: primaryOrange
|
|
46
|
-
},
|
|
47
|
-
imageBubble: {
|
|
48
|
-
bg_color: white,
|
|
49
|
-
bg_color_failed: failedBg,
|
|
50
|
-
alt_text_color: black,
|
|
51
|
-
alt_text_color_failed: failedColor,
|
|
52
|
-
border_color: '#ebf0f5',
|
|
53
|
-
border_color_failed: failedBdr
|
|
54
|
-
},
|
|
55
|
-
locationBubble: {
|
|
56
|
-
bg_color: white,
|
|
57
|
-
bg_color_failed: failedBg,
|
|
58
|
-
border_color: '#ebf0f5',
|
|
59
|
-
border_color_failed: failedBdr,
|
|
60
|
-
url_color: primaryOrange,
|
|
61
|
-
url_color_failed: failedUrlColor
|
|
62
|
-
},
|
|
63
|
-
messageBox: {
|
|
64
|
-
incoming_bg_color: incomingBubbleBgColor,
|
|
65
|
-
outgoing_bg_color: '#fdf5ef',
|
|
66
|
-
bg_color: '#f1f7fe',
|
|
67
|
-
failed_bg_color: failedBgWrapper,
|
|
68
|
-
text_color: messagetextColor
|
|
69
|
-
},
|
|
70
|
-
messageBubble: {
|
|
71
|
-
active_bg_color: bubbleActiveBgColor,
|
|
72
|
-
messageBox_footer_text_color: '#5a616f'
|
|
73
|
-
},
|
|
74
|
-
messageStatus: {
|
|
75
|
-
send_color: messageStatusSendColor,
|
|
76
|
-
read_color: '#e57717',
|
|
77
|
-
failed_color: messageStatusFailedColor
|
|
78
|
-
},
|
|
79
|
-
replyBubble: {
|
|
80
|
-
border_color: '#ebf0f5',
|
|
81
|
-
border_color_failed: failedBdr
|
|
82
|
-
},
|
|
83
|
-
replyBubbleContent: {
|
|
84
|
-
bg_color: white,
|
|
85
|
-
bg_color_failed: failedBg,
|
|
86
|
-
border_color: '#ebf0f5',
|
|
87
|
-
border_color_failed: failedBdr,
|
|
88
|
-
line_color: '#cddbf2',
|
|
89
|
-
line_color_failed: failedLine,
|
|
90
|
-
sender_color: black,
|
|
91
|
-
sender_color_failed: failedColor,
|
|
92
|
-
content_color: '#5a616f',
|
|
93
|
-
content_color_failed: failedColor
|
|
94
|
-
},
|
|
95
|
-
replyBubbleHeader: {
|
|
96
|
-
text_color: black,
|
|
97
|
-
text_color_failed: failedColor,
|
|
98
|
-
time_color: '#61667a',
|
|
99
|
-
time_color_failed: failedColor
|
|
100
|
-
},
|
|
101
|
-
textBubble: {
|
|
102
|
-
text_color: black,
|
|
103
|
-
text_color_failed: failedColor,
|
|
104
|
-
see_more_color: primaryOrange,
|
|
105
|
-
see_more_color_failed: failedUrlColor,
|
|
106
|
-
url_color: primaryOrange,
|
|
107
|
-
url_color_failed: failedUrlColor
|
|
108
|
-
},
|
|
109
|
-
videoBubble: {
|
|
110
|
-
border_color: '#ebf0f5',
|
|
111
|
-
border_color_failed: failedBdr
|
|
112
|
-
},
|
|
113
|
-
emojiFooter: {
|
|
114
|
-
tabLine: primaryOrange,
|
|
115
|
-
border_color: '#ebf0f5'
|
|
116
|
-
},
|
|
117
|
-
replyEditor,
|
|
118
|
-
emojisHeader,
|
|
119
|
-
attachmentPreviewHeader,
|
|
120
|
-
attachmentPreviewBody: {
|
|
121
|
-
bg_color: '#f5f6f7',
|
|
122
|
-
editor_border_color: '#d1cbc6',
|
|
123
|
-
editor_border_hover_color: '#788190',
|
|
124
|
-
editor_border_active_color: '#e57717'
|
|
125
|
-
},
|
|
126
|
-
emojiPopup: { ...emojiPopup,
|
|
127
|
-
ttIcon_path1_color: 'rgba(204, 201, 199, 0.7)',
|
|
128
|
-
ttIcon_path2_color: 'var(--dot_black)'
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
};
|
|
@@ -1,131 +0,0 @@
|
|
|
1
|
-
/* eslint-disable camelcase */
|
|
2
|
-
import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, messagetextColor, primaryRed, white, black, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor, imIntegrationIcon, imTtIcon, replyEditor, emojisHeader, attachmentPreviewHeader, emojiPopup } from "./commonColorVariable";
|
|
3
|
-
export default {
|
|
4
|
-
library: 'chat_components',
|
|
5
|
-
variables: {
|
|
6
|
-
actionIconWrapper: {
|
|
7
|
-
color: actionIconWrapperColor,
|
|
8
|
-
bg_color: '#fdf3f3',
|
|
9
|
-
border_color: '#f8d7d7'
|
|
10
|
-
},
|
|
11
|
-
attachmentBubble: {
|
|
12
|
-
bg_color: white,
|
|
13
|
-
bg_color_failed: failedBg,
|
|
14
|
-
border_color: '#ebf0f5',
|
|
15
|
-
border_color_failed: failedBdr
|
|
16
|
-
},
|
|
17
|
-
attachmentBubbleInfo: {
|
|
18
|
-
fileName_color: black,
|
|
19
|
-
fileName_color_failed: failedColor,
|
|
20
|
-
fileSize_color: '#5a616f',
|
|
21
|
-
fileSize_color_failed: '#788190'
|
|
22
|
-
},
|
|
23
|
-
articleBubble: {
|
|
24
|
-
bg_color: white,
|
|
25
|
-
bg_color_failed: failedBg,
|
|
26
|
-
border_color: '#ebf0f5',
|
|
27
|
-
border_color_failed: failedBdr,
|
|
28
|
-
title_color: black,
|
|
29
|
-
title_color_failed: failedColor,
|
|
30
|
-
summary_color: black,
|
|
31
|
-
summary_color_failed: failedColor
|
|
32
|
-
},
|
|
33
|
-
imAutoMessageInfo: {
|
|
34
|
-
text_color: '#737376'
|
|
35
|
-
},
|
|
36
|
-
imIntegrationIcon,
|
|
37
|
-
imTtIcon,
|
|
38
|
-
imMessageContent: {
|
|
39
|
-
text_color: '#5a616f'
|
|
40
|
-
},
|
|
41
|
-
imMessageMeta: {
|
|
42
|
-
time_color: '#5a616f'
|
|
43
|
-
},
|
|
44
|
-
imPermaLink: {
|
|
45
|
-
url_color: primaryRed
|
|
46
|
-
},
|
|
47
|
-
imageBubble: {
|
|
48
|
-
bg_color: white,
|
|
49
|
-
bg_color_failed: failedBg,
|
|
50
|
-
alt_text_color: black,
|
|
51
|
-
alt_text_color_failed: failedColor,
|
|
52
|
-
border_color: '#ebf0f5',
|
|
53
|
-
border_color_failed: failedBdr
|
|
54
|
-
},
|
|
55
|
-
locationBubble: {
|
|
56
|
-
bg_color: white,
|
|
57
|
-
bg_color_failed: failedBg,
|
|
58
|
-
border_color: '#ebf0f5',
|
|
59
|
-
border_color_failed: failedBdr,
|
|
60
|
-
url_color: primaryRed,
|
|
61
|
-
url_color_failed: failedUrlColor
|
|
62
|
-
},
|
|
63
|
-
messageBox: {
|
|
64
|
-
incoming_bg_color: incomingBubbleBgColor,
|
|
65
|
-
outgoing_bg_color: '#fdf3f3',
|
|
66
|
-
bg_color: '#f1f7fe',
|
|
67
|
-
failed_bg_color: failedBgWrapper,
|
|
68
|
-
text_color: messagetextColor
|
|
69
|
-
},
|
|
70
|
-
messageBubble: {
|
|
71
|
-
active_bg_color: bubbleActiveBgColor,
|
|
72
|
-
messageBox_footer_text_color: '#5a616f'
|
|
73
|
-
},
|
|
74
|
-
messageStatus: {
|
|
75
|
-
send_color: messageStatusSendColor,
|
|
76
|
-
read_color: '#de3535',
|
|
77
|
-
failed_color: messageStatusFailedColor
|
|
78
|
-
},
|
|
79
|
-
replyBubble: {
|
|
80
|
-
border_color: '#ebf0f5',
|
|
81
|
-
border_color_failed: failedBdr
|
|
82
|
-
},
|
|
83
|
-
replyBubbleContent: {
|
|
84
|
-
bg_color: white,
|
|
85
|
-
bg_color_failed: failedBg,
|
|
86
|
-
border_color: '#ebf0f5',
|
|
87
|
-
border_color_failed: failedBdr,
|
|
88
|
-
line_color: '#cddbf2',
|
|
89
|
-
line_color_failed: failedLine,
|
|
90
|
-
sender_color: black,
|
|
91
|
-
sender_color_failed: failedColor,
|
|
92
|
-
content_color: '#5a616f',
|
|
93
|
-
content_color_failed: failedColor
|
|
94
|
-
},
|
|
95
|
-
replyBubbleHeader: {
|
|
96
|
-
text_color: black,
|
|
97
|
-
text_color_failed: failedColor,
|
|
98
|
-
time_color: '#61667a',
|
|
99
|
-
time_color_failed: failedColor
|
|
100
|
-
},
|
|
101
|
-
textBubble: {
|
|
102
|
-
text_color: black,
|
|
103
|
-
text_color_failed: failedColor,
|
|
104
|
-
see_more_color: primaryRed,
|
|
105
|
-
see_more_color_failed: failedUrlColor,
|
|
106
|
-
url_color: primaryRed,
|
|
107
|
-
url_color_failed: failedUrlColor
|
|
108
|
-
},
|
|
109
|
-
videoBubble: {
|
|
110
|
-
border_color: '#ebf0f5',
|
|
111
|
-
border_color_failed: failedBdr
|
|
112
|
-
},
|
|
113
|
-
emojiFooter: {
|
|
114
|
-
tabLine: primaryRed,
|
|
115
|
-
border_color: '#ebf0f5'
|
|
116
|
-
},
|
|
117
|
-
replyEditor,
|
|
118
|
-
emojisHeader,
|
|
119
|
-
attachmentPreviewHeader,
|
|
120
|
-
attachmentPreviewBody: {
|
|
121
|
-
bg_color: '#f5f6f7',
|
|
122
|
-
editor_border_color: '#b9b2b4',
|
|
123
|
-
editor_border_hover_color: '#788190',
|
|
124
|
-
editor_border_active_color: '#de3535'
|
|
125
|
-
},
|
|
126
|
-
emojiPopup: { ...emojiPopup,
|
|
127
|
-
ttIcon_path1_color: 'rgba(204, 199, 201, 0.7)',
|
|
128
|
-
ttIcon_path2_color: 'var(--dot_black)'
|
|
129
|
-
}
|
|
130
|
-
}
|
|
131
|
-
};
|