reverted chat send to use dash component Button, and dictation to use Toggle. Reverted Dropdown to use trigger of CLICK (hover doesn't work well). got rid of currentuserutil button references in infoUI & replaced with info-specific button descriptions. fixed up a bunch of lint/typing errors

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>
+                })}
+            />
         );
     }
 }