Srravich/bugfix/1929 attachment (#2068)

* Added size and text color for attachments Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com> * Comment update Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com> * Test fixes Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com> * Updated download attachment style updated Signed-off-by: Srinaath Ravichandran <srravich@microsoft.com>
microsoft · Jan 30, 2020 · 272b3c2 · 272b3c2
1 parent b024544
commit 272b3c2
Show file tree

Hide file tree

Showing 9 changed files with 67 additions and 1 deletion.
diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss
@@ -31,6 +31,8 @@
 // WITH THE SOFTWARE OR THE USE OR OTHER DEALINGS IN THE SOFTWARE.
 //
 
+:export { bubbleContentColor: var(--bubble-text-color); }
+
 .chat {
   background-color: white;
   display: flex;

diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss.d.ts b/packages/app/client/src/ui/editor/emulator/parts/chat/chat.scss.d.ts
@@ -1,4 +1,5 @@
 // This is a generated file. Changes are likely to result in being overwritten
+export const bubbleContentColor: string;
 export const chat: string;
 export const disconnected: string;
 export const chatActivity: string;

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
@@ -55,6 +55,12 @@ import webChatStyleOptions from './webChatTheme';
 import { ChatContainer } from './chatContainer';
 import { ChatProps, Chat } from './chat';
 
+jest.mock('./chat.scss', () => ({
+  get bubbleContentColor() {
+    return '#fff';
+  },
+}));
+
 jest.mock('electron', () => ({
   ipcMain: new Proxy(
     {},
@@ -155,6 +161,20 @@ describe('<ChatContainer />', () => {
         padding: '1px',
       };
 
+      styleSet.uploadAttachment = {
+        ...styleSet.uploadAttachment,
+        '& > .name, & > .size': {
+          color: '#fff',
+        },
+      };
+
+      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,10 +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 = {
@@ -146,10 +167,19 @@ export class Chat extends PureComponent<ChatProps, ChatState> {
         popup.location.href = url;
         break;
       }
+
       case 'downloadFile':
+      //Fall through
+
       case 'playAudio':
+      //Fall through
+
       case 'playVideo':
+      //Fall through
+
       case 'showImage':
+      //Fall through
+
       case 'openUrl':
         if (value) {
           this.props.showOpenUrlDialog(value).then(result => {

diff --git a/packages/app/client/src/ui/editor/emulator/parts/chat/webChatTheme.ts b/packages/app/client/src/ui/editor/emulator/parts/chat/webChatTheme.ts
@@ -38,6 +38,7 @@ export default {
   primaryFont: 'var(--default-font-family)',
 
   bubbleBackground: 'var(--webchat-bubble-bg)',
+  bubbleFromUserBackground: 'var(--webchat-user-bubble-bg)',
   bubbleFromUserTextColor: 'var(--webchat-user-bubble-text)',
   bubbleTextColor: 'var(--webchat-bubble-text)',
   bubbleMinHeight: 20,

diff --git a/packages/app/client/src/ui/editor/ngrokDebugger/ngrokStatusIndicator.scss b/packages/app/client/src/ui/editor/ngrokDebugger/ngrokStatusIndicator.scss
@@ -15,7 +15,7 @@
   %common-tunnel-indicator {
     margin-right: 3px;
     padding: 5px;
-    color: var(--focused-list-item);
+    color: var(--ngrok-text-color);
   }
 
   .tunnel-details-list {

diff --git a/packages/app/client/src/ui/styles/themes/dark.css b/packages/app/client/src/ui/styles/themes/dark.css
@@ -297,6 +297,10 @@ html {
   --ngrok-active: #47B07F;
   --ngrok-error: #BE1100;
   --ngrok-error-outline: #F5B1B1;
+  --ngrok-text-color: #fff;
+
+  /* Webchat style overrides */
+  --bubble-text-color: #fff;
 }
 
 .dialog {

diff --git a/packages/app/client/src/ui/styles/themes/high-contrast.css b/packages/app/client/src/ui/styles/themes/high-contrast.css
@@ -294,6 +294,10 @@ html {
   --ngrok-active: #47B07F;
   --ngrok-error: #BE1100;
   --ngrok-error-outline: #F5B1B1;
+  --ngrok-text-color: #000000;
+
+  /* Webchat style overrides */
+  --bubble-text-color: #000000;
 }
 
 .dialog .ms-Button-label {

diff --git a/packages/app/client/src/ui/styles/themes/light.css b/packages/app/client/src/ui/styles/themes/light.css
@@ -297,4 +297,8 @@ html {
   --ngrok-active: #47B07F;
   --ngrok-error: #BE1100;
   --ngrok-error-outline: #F5B1B1;
+  --ngrok-text-color: #fff;
+
+  /* Webchat style overrides */
+  --bubble-text-color: #fff;
 }