chore: style voice button slightly different

Azure-Samples · Nov 9, 2023 · fb0bb3c · fb0bb3c
1 parent 4528eb5
commit fb0bb3c
Show file tree

Hide file tree

Showing 2 changed files with 6 additions and 2 deletions.
diff --git a/packages/chat-component/src/main.ts b/packages/chat-component/src/main.ts
@@ -668,7 +668,7 @@ export class ChatComponent extends LitElement {
                       title="${this.enableVoiceListening
                         ? globalConfig.CHAT_VOICE_REC_BUTTON_LABEL_TEXT
                         : globalConfig.CHAT_VOICE_BUTTON_LABEL_TEXT}"
-                      class="chatbox__button no-shadow ${this.enableVoiceListening ? 'recording' : 'not-recording'}"
+                      class="chatbox__button voice__input ${this.enableVoiceListening ? 'recording' : 'not-recording'}"
                       ?disabled="${!this.showVoiceInput}"
                       @click="${this.handleVoiceInput}"
                     >

diff --git a/packages/chat-component/src/style.ts b/packages/chat-component/src/style.ts
@@ -367,8 +367,12 @@ export const mainStyle = css`
     width: 20px;
     cursor: pointer;
   }
-  .no-shadow {
+  .voice__input {
     box-shadow: none;
+    background: transparent;
+    border: none;
+    cursor: pointer;
+    width: 50px;
   }
   .chatbox__input-container {
     display: flex;