Srravich/bugfix/1929 attachment

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;

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;

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,13 @@ describe('<ChatContainer />', () => {
         padding: '1px',
       };
 
+      styleSet.uploadAttachment = {
+        ...styleSet.uploadAttachment,
+        '& > .name, & > .size': {
+          color: '#fff',
+        },
+      };
+
       expect(webChat.exists()).toBe(true);
       const wcProps = webChat.props();
       expect(wcProps.bot).toEqual({ id: defaultDocument.botId, name: 'Bot' });

packages/app/client/src/ui/editor/emulator/parts/chat/chat.tsx

@@ -92,6 +92,13 @@ export class Chat extends PureComponent<ChatProps, ChatState> {
       padding: '1px',
     };
 
+    styleSet.uploadAttachment = {
+      ...styleSet.uploadAttachment,
+      '& > .name, & > .size': {
+        color: styles.bubbleContentColor,
+      },
+    };
+
     if (directLine) {
       const bot = {
         id: botId || 'bot',
@@ -146,10 +153,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 => {

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,

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 {

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 {

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 {

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;
 }