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 = {