Updated download attachment style updated

Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com>
microsoft · Jan 30, 2020 · e9626ce · e9626ce
1 parent 822ffe3
commit e9626ce
Show file tree

Hide file tree

Showing 2 changed files with 22 additions and 1 deletion.
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
@@ -168,6 +168,13 @@ describe('<ChatContainer />', () => {
         },
       };
 
+      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
@@ -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<ChatProps, ChatState> {
   public state = { waitForSpeechToken: false } as ChatState;
   private activityMap: { [activityId: string]: Activity } = {};
@@ -87,17 +100,18 @@ export class Chat extends PureComponent<ChatProps, ChatState> {
 
     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 = {