diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.spec.tsx b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.spec.tsx index 5f8492952..e3ac4ddd7 100644 --- a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.spec.tsx +++ b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.spec.tsx @@ -168,6 +168,13 @@ describe('', () => { }, }; + const mutatedDownloadAttachment = { + ...styleSet.downloadAttachment, + }; + mutatedDownloadAttachment['& > a']['& > .details']['& > .name'].color = '#fff'; + mutatedDownloadAttachment['& > a']['& > .icon'].fill = '#fff'; + styleSet.downloadAttachment = mutatedDownloadAttachment; + expect(webChat.exists()).toBe(true); const wcProps = webChat.props(); expect(wcProps.bot).toEqual({ id: defaultDocument.botId, name: 'Bot' }); diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx index ba46fb08d..e52126482 100644 --- a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx +++ b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx @@ -65,6 +65,19 @@ interface ChatState { highlightedActivities?: Activity[]; } +const updateDownloadAttachmentStyle = downloadAttachment => { + try { + const mutatedDownloadAttachment = { + ...downloadAttachment, + }; + mutatedDownloadAttachment['& > a']['& > .details']['& > .name'].color = styles.bubbleContentColor; + mutatedDownloadAttachment['& > a']['& > .icon'].fill = styles.bubbleContentColor; + return mutatedDownloadAttachment; + } catch { + return downloadAttachment; + } +}; + export class Chat extends PureComponent { public state = { waitForSpeechToken: false } as ChatState; private activityMap: { [activityId: string]: Activity } = {}; @@ -87,17 +100,18 @@ export class Chat extends PureComponent { const styleSet = createStyleSet({ ...webChatStyleOptions, hideSendBox: isDisabled }); + // Overriding default styles of webchat as these properties are not exposed directly styleSet.uploadButton = { ...styleSet.uploadButton, padding: '1px', }; - styleSet.uploadAttachment = { ...styleSet.uploadAttachment, '& > .name, & > .size': { color: styles.bubbleContentColor, }, }; + styleSet.downloadAttachment = updateDownloadAttachmentStyle(styleSet.downloadAttachment); if (directLine) { const bot = {