1 files changed, 19 insertions, 7 deletions
diff --git a/src/client/views/DictationButton.tsx b/src/client/views/DictationButton.tsx
index 0ce586df4..882e857c5 100644
--- a/src/client/views/DictationButton.tsx
+++ b/src/client/views/DictationButton.tsx
@@ -1,18 +1,20 @@
-import { IconButton, Type } from '@dash/components';
+import { Toggle, ToggleType } from '@dash/components';
 import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import { BiMicrophone } from 'react-icons/bi';
 import { DictationManager } from '../util/DictationManager';
 import { SnappingManager } from '../util/SnappingManager';
+import './DictationButton.scss';
 
 export interface DictationButtonProps {
     setInput: (val: string) => void;
     inputRef?: HTMLInputElement | null | undefined;
 }
+
 @observer
 export class DictationButton extends React.Component<DictationButtonProps> {
     @observable private _isRecording = false;
+
     constructor(props: DictationButtonProps) {
         super(props);
         makeObservable(this);
@@ -25,11 +27,21 @@ export class DictationButton extends React.Component<DictationButtonProps> {
 
     render() {
         return (
-            <IconButton
-                type={Type.TERT}
-                color={this._isRecording ? '#2bcaff' : SnappingManager.userVariantColor}
-                tooltip="Record"
-                icon={<BiMicrophone size="16px" />}
+            <Toggle
+                // className={`dictation-button ${this._isRecording ? 'recording' : ''}`}
+                // title="Record"
+                tooltip={`Dictation: ${this._isRecording ? 'on' : 'off'}`}
+                icon={
+                    <svg xmlns="http://www.w3.org/2000/svg" width="22" height="22" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round">
+                        <path d="M12 1a3 3 0 0 0-3 3v8a3 3 0 0 0 6 0V4a3 3 0 0 0-3-3z"></path>
+                        <path d="M19 10v2a7 7 0 0 1-14 0v-2"></path>
+                        <line x1="12" y1="19" x2="12" y2="23"></line>
+                        <line x1="8" y1="23" x2="16" y2="23"></line>
+                    </svg>
+                }
+                color={SnappingManager.userVariantColor}
+                toggleType={ToggleType.BUTTON}
+                toggleStatus={this._isRecording}
                 onClick={action(() => {
                     if (!this._isRecording) {
                         this._isRecording = true;