@zohoim/chat-components 1.0.9-alpha.0 → 1.0.9

package/README.md

@@ -10,9 +10,9 @@ In this Library, We Provide Some Basic Message Components to Build Your Chat App
 
 > import MessageBubble from '@zohoim/chat-components/es/MessageBubble/MessageBubble’;
 
-# 1.0.7
+# 1.0.9
 
-- Color preprocessor and contrast added
+- chat bubble ui issues fixes
 - @zohodesk/components version update
 
 # 1.0.6

package/es/ActionIcon/ActionIcon.js

@@ -41,7 +41,8 @@ export default function ActionIcon(props) {
     id,
     title,
     isDisabled,
-    needIconOnly
+    needIconOnly,
+    isActive
   } = props;
   const {
     actionIconWrapperProps = dummyObject
@@ -68,6 +69,7 @@ export default function ActionIcon(props) {
   }, [iconStyle, id]);
   return needIconOnly ? renderIcon() : /*#__PURE__*/React.createElement(ActionIconWrapper, {
     id: id,
+    isActive: isActive,
     isDisabled: isDisabled,
     onClick: onClick,
     onMouseEnter: onMouseEnter,

package/es/ActionIcon/props/propTypes.js

@@ -12,6 +12,7 @@ const actionIconPropTypes = {
   customStyle: PropTypes.object,
   isDisabled: PropTypes.bool,
   needIconOnly: PropTypes.bool,
-  title: PropTypes.string
+  title: PropTypes.string,
+  isActive: PropTypes.bool
 };
 export default actionIconPropTypes;

package/es/ActionIconWrapper/ActionIconWrapper.js

@@ -23,7 +23,8 @@ export default function ActionIconWrapper(props) {
     onMouseEnter: propOnMouseEnter,
     id,
     title,
-    isDisabled
+    isDisabled,
+    isActive
   } = props;
   const {
     onClick,
@@ -32,7 +33,8 @@ export default function ActionIconWrapper(props) {
     onClick: propOnClick,
     onMouseEnter: propOnMouseEnter,
     id,
-    isDisabled
+    isDisabled,
+    isActive
   });
   /* External CSS Customization */
 
@@ -42,7 +44,8 @@ export default function ActionIconWrapper(props) {
   const {
     actionIconWrapperClass
   } = cssJSLogic({
-    isDisabled
+    isDisabled,
+    isActive
   }, newStyle);
   /* Render Icon */
 

package/es/ActionIconWrapper/css/ActionIconWrapper.module.css

@@ -21,7 +21,7 @@
   border-radius: var(--actionIconWrapper-border_radius);
 }
 
-.actionIconWrapper:hover {
+.actionIconWrapper:hover, .actionIconWrapperActive{
   background-color: var(--imlib_chat_components_actionIconWrapper_bg_color);
   border-color: var(--imlib_chat_components_actionIconWrapper_border_color);
 }

package/es/ActionIconWrapper/css/cssJSLogic.js

@@ -2,11 +2,13 @@
 import { compileClassNames } from '@zohodesk/utils';
 export default function cssJSLogic(props, style) {
   const {
-    isDisabled
+    isDisabled,
+    isActive
   } = props;
   const actionIconWrapperClass = compileClassNames({
     [style.actionIconWrapper]: true,
-    [style.disabled]: isDisabled
+    [style.disabled]: isDisabled,
+    [style.actionIconWrapperActive]: isActive
   });
   return {
     actionIconWrapperClass

package/es/ActionIconWrapper/props/propTypes.js

@@ -7,6 +7,7 @@ const actionIconWrapperPropTypes = {
   renderIcon: PropTypes.func.isRequired,
   customStyle: PropTypes.object,
   isDisabled: PropTypes.bool,
-  title: PropTypes.string
+  title: PropTypes.string,
+  isActive: PropTypes.bool
 };
 export default actionIconWrapperPropTypes;

package/es/MessageAction/MessageAction.js

@@ -20,6 +20,7 @@ export default function MessageAction(props) {
     customProps,
     closePopup,
     isDisabled,
+    isActive,
     needMoreActionItemIcon
   } = props;
   const {
@@ -50,6 +51,7 @@ export default function MessageAction(props) {
     ...moreActionItemProps
   }) : /*#__PURE__*/React.createElement(ActionIcon, {
     id: id,
+    isActive: isActive,
     isDisabled: isDisabled,
     onClick: onClick,
     onMouseEnter: onMouseEnter,

package/es/MessageAction/props/propTypes.js

@@ -16,6 +16,7 @@ const messageActionPropTypes = {
   iconTitle: PropTypes.string,
   isDisabled: PropTypes.bool,
   isShowInMore: PropTypes.bool,
-  needMoreActionItemIcon: PropTypes.bool
+  needMoreActionItemIcon: PropTypes.bool,
+  isActive: PropTypes.bool
 };
 export default messageActionPropTypes;

package/es/MessageActions/MessageActions.js

@@ -103,8 +103,9 @@ export default function MessageActions(props) {
   const renderMoreIcon = useCallback(() => /*#__PURE__*/React.createElement("div", {
     className: newStyle.moreIcon
   }, /*#__PURE__*/React.createElement(MoreIcon, null)), [newStyle.moreIcon]);
-  const renderMore = useCallback(() => /*#__PURE__*/React.createElement(ActionIconWrapper, {
+  const renderMore = useCallback(componentProps => /*#__PURE__*/React.createElement(ActionIconWrapper, {
     renderIcon: renderMoreIcon,
+    ...componentProps,
     ...actionIconWrapperProps
   }), [actionIconWrapperProps, renderMoreIcon]);
   return /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(MessageActionsWrapper, {

package/es/MessageActionsMore/MessageActionsMore.js

@@ -40,7 +40,9 @@ function MessageActionsMoreComp(props) {
     isAbsolutePositioningNeeded,
     positionsOffset
   } = props;
-  const moreIcon = renderHandler(renderMoreIcon)();
+  const moreIcon = renderHandler(renderMoreIcon)({
+    isActive: isPopupReady
+  });
   /* External CSS Customization */
 
   const newStyle = useMergeStyle(style, customStyle);
@@ -91,7 +93,7 @@ function MessageActionsMoreComp(props) {
 }
 
 const MessageActionsMore = Popup(MessageActionsMoreComp, undefined, undefined, {
-  isAbsolutePositioningNeeded: false
+  isAbsolutePositioningNeeded: true
 });
 MessageActionsMoreComp.defaultProps = messageActionsMoreDefaultProps;
 MessageActionsMoreComp.propTypes = messageActionsMorePropTypes;

package/es/MessageActionsMore/css/MessageActionsMore.module.css

@@ -4,6 +4,7 @@
 
 .morePopupContainer {
   composes: container;
+  position: relative;
 }
 
 .popup {

package/es/MessageActionsWrapper/MessageActionsWrapper.js

@@ -56,6 +56,7 @@ export default function MessageActionsWrapper(props) {
   }), [moreActions, renderMoreIcon, messageActionsMoreProps]);
   const renderRow = useCallback(() => /*#__PURE__*/React.createElement(Container, {
     alignBox: "row",
+    className: newStyle.row,
     isCover: false
   }, renderDefaultActions(), isShowMoreIcon ? renderMoreActions() : null), [renderDefaultActions, renderMoreActions, isShowMoreIcon]);
   return /*#__PURE__*/React.createElement("div", {

package/es/MessageActionsWrapper/css/MessageActionsWrapper.module.css

@@ -1,3 +1,7 @@
 .messageActionsWrapper {
   /* Use this class for message actions customization */
 }
+
+.row{
+  gap: var(--zd_size2) ;
+}

package/es/Theme/ThemeAssets.js

@@ -67,24 +67,6 @@ import '@zohodesk/variables/assets/fontsizeVariables.module.css';
 import '@zohodesk/variables/lib/fontFamilyVariables.module.css';
 import '@zohodesk/variables/assets/transitionVariables.module.css';
 import '@zohodesk/variables/assets/no_transitionVariables.module.css';
-import "../../assets/Appearance/dark/mode/General_DarkMode.module.css";
-import "../../assets/Appearance/dark/themes/blue/blue_General_DarkTheme.module.css";
-import "../../assets/Appearance/dark/themes/green/green_General_DarkTheme.module.css";
-import "../../assets/Appearance/dark/themes/orange/orange_General_DarkTheme.module.css";
-import "../../assets/Appearance/dark/themes/red/red_General_DarkTheme.module.css";
-import "../../assets/Appearance/dark/themes/yellow/yellow_General_DarkTheme.module.css";
-import "../../assets/Appearance/light/mode/General_LightMode.module.css";
-import "../../assets/Appearance/light/themes/blue/blue_General_LightTheme.module.css";
-import "../../assets/Appearance/light/themes/green/green_General_LightTheme.module.css";
-import "../../assets/Appearance/light/themes/orange/orange_General_LightTheme.module.css";
-import "../../assets/Appearance/light/themes/red/red_General_LightTheme.module.css";
-import "../../assets/Appearance/light/themes/yellow/yellow_General_LightTheme.module.css";
-import "../../assets/Appearance/pureDark/mode/General_PureDarkMode.module.css";
-import "../../assets/Appearance/pureDark/themes/blue/blue_General_PureDarkTheme.module.css";
-import "../../assets/Appearance/pureDark/themes/green/green_General_PureDarkTheme.module.css";
-import "../../assets/Appearance/pureDark/themes/orange/orange_General_PureDarkTheme.module.css";
-import "../../assets/Appearance/pureDark/themes/red/red_General_PureDarkTheme.module.css";
-import "../../assets/Appearance/pureDark/themes/yellow/yellow_General_PureDarkTheme.module.css";
 export default function DeskAssets(props) {
   const {
     children

package/es/Theme/ThemeWrapper.js

@@ -38,22 +38,20 @@ export default function ThemeWrapper(props) {
   /** ** ThemeConfigurations Handling  *** */
 
   const {
+    themeConfigurations,
     mode,
     theme
   } = getThemeConfigurations({
     mode: propMode,
     theme: propTheme
   });
-  const configurations = propThemeConfigurations;
+  const configurations = propThemeConfigurations || themeConfigurations;
   /** ** Style Handling  *** */
 
   const selector = `#${styleTagId}`;
   const prefix = '--imlib_';
   const configuration = useMemo(() => [configurations], [configurations]);
-  const customizedVariables = useMemo(() => {
-    const cssVariables = propThemeConfigurations ? getCustomizedCssVariables(configuration, prefix) : null;
-    return cssVariables;
-  }, [configuration, prefix, propThemeConfigurations]);
+  const customizedVariables = useMemo(() => getCustomizedCssVariables(configuration, prefix), [configuration, prefix]);
   const wrapperDivProps = getWrapperDivProps({
     modeKey,
     themeKey,
@@ -65,9 +63,9 @@ export default function ThemeWrapper(props) {
   const renderPortal = useCallback(() => /*#__PURE__*/React.createElement("div", {
     "data-portal": MSG_ACTION_POPUP_PORTAL
   }), []);
-  const renderStyle = useCallback(() => customizedVariables ? /*#__PURE__*/React.createElement("style", {
+  const renderStyle = useCallback(() => /*#__PURE__*/React.createElement("style", {
     id: "zoho-im-variables"
-  }, `${selector}{${customizedVariables}}`) : null, [selector, customizedVariables]);
+  }, `${selector}{${customizedVariables}}`), [selector, customizedVariables]);
   const renderAssets = useCallback(() => /*#__PURE__*/React.createElement(React.Fragment, null, needThemeAssets ? /*#__PURE__*/React.createElement(ThemeAssets, null) : null, needTooltip ? /*#__PURE__*/React.createElement(TooltipWrapper, {
     containerRef: containerRef.current,
     customStyle: tooltipCustomStyle,

package/es/Theme/themeVariables/commonThemeColorVariable.js

@@ -0,0 +1,17 @@
+export const imIntegrationIcon = {
+  path0_color: '#ffffff40',
+  path1_color: '#fff',
+  whatsapp_color: '#24d366',
+  telegram_color: '#4fa7d8',
+  wechat_color: '#2dc100',
+  line_color: '#01b901',
+  twillio_color: '#f22f46',
+  instagram_color: 'linear-gradient(221.05deg,#933ab9 11.59%,#d12f8c 50.45%,#fdbb59 85.46%)',
+  asap_color: 'linear-gradient(180deg, #A375FF 0%, #7732FF 100%)',
+  fb_color: '#006aff'
+};
+export const imTtIcon = {
+  path0_color: '#ffffff40',
+  path1_color: '#fff'
+};
+export const messagetextColor = '#e2e4e6';

package/es/Theme/themeVariables/dark/blueTheme.js

@@ -0,0 +1,116 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryBlue, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#2c3b4d',
+      border_color: '#3f536b'
+    },
+    attachmentBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#828994'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#479dff'
+    },
+    imageBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      url_color: primaryBlue,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#2c3b4d',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor,
+      failed_text_color: '#000'
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#479dff',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryBlue,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryBlue,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    }
+  }
+};

package/es/Theme/themeVariables/dark/commonColorVariable.js

@@ -0,0 +1,16 @@
+export const incomingBubbleBgColor = '#232b38';
+export const bubbleActiveBgColor = '#1b2e33';
+export const actionIconWrapperColor = '#e2e4e6';
+export const messageStatusSendColor = '#61667a';
+export const messageStatusFailedColor = '#de3535';
+export const primaryBlue = '#479dff';
+export const primaryGreen = '#45a159';
+export const primaryOrange = '#ff801f';
+export const primaryRed = '#e94f4f';
+export const primaryYellow = '#d79835';
+export const failedBgWrapper = '#f4b5bc';
+export const failedBg = '#f6dcdf';
+export const failedBdr = '#eb9ea7';
+export const failedLine = '#eb9ea7';
+export const failedColor = '#000';
+export const failedUrlColor = '#0a73eb';

package/es/Theme/themeVariables/dark/greenTheme.js

@@ -0,0 +1,115 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryGreen, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#26373b',
+      border_color: '#2d4e42'
+    },
+    attachmentBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#828994'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#45a159'
+    },
+    imageBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      url_color: primaryGreen,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#26373b',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#45a159',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: 'hsl(191.43deg 21.65% 13.02%)',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryGreen,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryGreen,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    }
+  }
+};

package/es/Theme/themeVariables/dark/orangeTheme.js

@@ -0,0 +1,115 @@
+/* eslint-disable camelcase */
+import { incomingBubbleBgColor, bubbleActiveBgColor, actionIconWrapperColor, messageStatusSendColor, messageStatusFailedColor, primaryOrange, failedBgWrapper, failedBg, failedBdr, failedLine, failedColor, failedUrlColor } from "./commonColorVariable";
+import { imIntegrationIcon, imTtIcon, messagetextColor } from "../commonThemeColorVariable";
+export default {
+  library: 'chat_components',
+  variables: {
+    actionIconWrapper: {
+      color: actionIconWrapperColor,
+      bg_color: '#323136',
+      border_color: '#4f3c33'
+    },
+    attachmentBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    attachmentBubbleInfo: {
+      fileName_color: '#e2e4e6',
+      fileName_color_failed: failedColor,
+      fileSize_color: '#788190',
+      fileSize_color_failed: '#788190'
+    },
+    articleBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      title_color: '#e2e4e6',
+      title_color_failed: failedColor,
+      summary_color: '#e2e4e6',
+      summary_color_failed: failedColor
+    },
+    imAutoMessageInfo: {
+      text_color: '#828994'
+    },
+    imIntegrationIcon,
+    imTtIcon,
+    imMessageContent: {
+      text_color: '#a8b0bd'
+    },
+    imMessageMeta: {
+      time_color: '#a8b0bd'
+    },
+    imPermaLink: {
+      url_color: '#ff801f'
+    },
+    imageBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      alt_text_color: '#e2e4e6',
+      alt_text_color_failed: failedColor,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    locationBubble: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
+    },
+    messageBox: {
+      incoming_bg_color: incomingBubbleBgColor,
+      outgoing_bg_color: '#323136',
+      bg_color: '#f1f7fe',
+      failed_bg_color: failedBgWrapper,
+      text_color: messagetextColor
+    },
+    messageBubble: {
+      active_bg_color: bubbleActiveBgColor,
+      messageBox_footer_text_color: '#5a616f'
+    },
+    messageStatus: {
+      send_color: messageStatusSendColor,
+      read_color: '#ff801f',
+      failed_color: messageStatusFailedColor
+    },
+    replyBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    },
+    replyBubbleContent: {
+      bg_color: '#232b38',
+      bg_color_failed: failedBg,
+      border_color: '#2d3748',
+      border_color_failed: failedBdr,
+      line_color: '#cddbf2',
+      line_color_failed: failedLine,
+      sender_color: '#e2e4e6',
+      sender_color_failed: failedColor,
+      content_color: '#e2e4e6',
+      content_color_failed: failedColor
+    },
+    replyBubbleHeader: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      time_color: '#828994',
+      time_color_failed: failedColor
+    },
+    textBubble: {
+      text_color: '#e2e4e6',
+      text_color_failed: failedColor,
+      see_more_color: primaryOrange,
+      see_more_color_failed: failedUrlColor,
+      url_color: primaryOrange,
+      url_color_failed: failedUrlColor
+    },
+    videoBubble: {
+      border_color: '#2d3748',
+      border_color_failed: failedBdr
+    }
+  }
+};