add col button tooltip + row menu icon change

1 files changed, 19 insertions, 11 deletions

diff --git a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
index ec1341b14..03e7ed5f3 100644
--- a/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
+++ b/src/client/views/collections/collectionSchema/CollectionSchemaView.tsx
@@ -1,6 +1,6 @@
 /* eslint-disable no-restricted-syntax */
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
-import { Popup, PopupTrigger, Type } from 'browndash-components';
+import { IconButton, Popup, PopupTrigger, Size, Type } from 'browndash-components';
 import { ObservableMap, action, autorun, computed, makeObservable, observable, observe, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -759,7 +759,7 @@ const       filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs.
     @action
     openColumnMenu = (index: number, newCol: boolean) => {
         this.closeFilterMenu();
-        
+
         this._makeNewColumn = false;
         this._columnMenuIndex = index;
         this._menuValue = '';
@@ -1061,15 +1061,23 @@ const       filteredChildDocs = sortedDocs.filter((doc: Doc) => !this._lentDocs.
                     }}>
                     <div className="schema-header-row" style={{ height: this.rowHeightFunc() }}>
                         <div className="row-menu" style={{ width: CollectionSchemaView._rowMenuWidth }}>
-                            <Popup
-                                placement="right"
-                                background={SettingsManager.userBackgroundColor}
-                                color={SettingsManager.userColor}
-                                toggle={<FontAwesomeIcon onPointerDown={() => this.addColumn()} icon="plus" />} //here
-                                trigger={PopupTrigger.CLICK}
-                                type={Type.TERT}
-                                isOpen={this._columnMenuIndex !== -1 ? false : undefined}
-                                popup={this.renderKeysMenu}
+                            <IconButton
+                            tooltip="Add a new key"
+                            icon={ <FontAwesomeIcon icon="plus" size='lg'/>}
+                            size={Size.XSMALL}
+                            color={'black'}
+                            onPointerDown={e =>
+                                setupMoveUpEvents(
+                                    this,
+                                    e,
+                                    returnFalse,
+                                    emptyFunction,
+                                    undoable(clickEv => {
+                                        clickEv.stopPropagation();
+                                        this.addColumn()
+                                    }, 'add key to schema')
+                                )
+                            }
                             />
                         </div>
                         {this.columnKeys.map((key, index) => (