1 files changed, 20 insertions, 13 deletions
diff --git a/src/client/views/DictationButton.tsx b/src/client/views/DictationButton.tsx
index fc3165f67..882e857c5 100644
--- a/src/client/views/DictationButton.tsx
+++ b/src/client/views/DictationButton.tsx
@@ -1,9 +1,10 @@
-import { makeObservable, observable, action } from 'mobx';
+import { Toggle, ToggleType } from '@dash/components';
+import { action, makeObservable, observable } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
-import './DictationButton.scss';
 import { DictationManager } from '../util/DictationManager';
 import { SnappingManager } from '../util/SnappingManager';
+import './DictationButton.scss';
 
 export interface DictationButtonProps {
     setInput: (val: string) => void;
@@ -26,9 +27,21 @@ export class DictationButton extends React.Component<DictationButtonProps> {
 
     render() {
         return (
-            <button
-                className={`dictation-button ${this._isRecording ? 'recording' : ''}`}
-                title="Record"
+            <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;
@@ -49,14 +62,8 @@ export class DictationButton extends React.Component<DictationButtonProps> {
                     } else {
                         this.stopDictation();
                     }
-                })}>
-                <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>
-            </button>
+                })}
+            />
         );
     }
 }