1 files changed, 30 insertions, 9 deletions
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index fb29f95f4..5f4117a8d 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -1,6 +1,7 @@
 import { IconProp } from '@fortawesome/fontawesome-svg-core';
 import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
 import { Tooltip } from '@material-ui/core';
+import { Button, ColorPicker, IconButton, Size } from 'browndash-components';
 import { action, computed, observable, runInAction } from 'mobx';
 import { observer } from 'mobx-react';
 import * as React from 'react';
@@ -400,6 +401,15 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                     {this.label}
                 </div>
             );
+        
+        return (
+            <ColorPicker onChange={(e) => {
+                this.colorPickerClosed = !this.colorPickerClosed;
+                this.noTooltip = !this.colorPickerClosed;
+                setTimeout(() => Doc.UnBrushAllDocs());
+                e.stopPropagation();
+            }}/>
+        )
 
         return (
             <div
@@ -453,6 +463,10 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 </div>
             );
 
+        return (
+            <IconButton text={buttonText} icon={this.Icon(color)!} label={this.label}/>
+        )
+
         if (switchToggle) {
             return (
                 <div className={`menuButton ${this.type} ${'switch'}`}>
@@ -479,6 +493,11 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
     @computed get defaultButton() {
         const color = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.Color);
         const backgroundColor = this.props.styleProvider?.(this.rootDoc, this.props, StyleProp.BackgroundColor);
+
+        return (
+            <IconButton icon={this.Icon(color)!} label={this.label}/>
+        )
+
         return (
             <div className={`menuButton ${this.type}`} onContextMenu={this.specificContextMenu} style={{ backgroundColor: 'transparent', borderBottomLeftRadius: this.dropdown ? 0 : undefined }}>
                 <div className="menuButton-wrap">
@@ -547,18 +566,20 @@ export class FontIconBox extends DocComponent<ButtonProps>() {
                 break;
             case ButtonType.ClickButton:
             case ButtonType.ToolButton: button = (
-                    <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ backgroundColor, color, opacity: 1 }}>
-                        {this.Icon(color)}
-                        {label()}
-                    </div>
+                    <IconButton color={color} icon={this.Icon(color)!} label={this.label}/>
+                    // <div className={`menuButton ${this.type + (FontIconBox.GetShowLabels() ? 'Label' : '')}`} style={{ backgroundColor, color, opacity: 1 }}>
+                    //     {this.Icon(color)}
+                    //     {label()}
+                    // </div>
                 );
                 break;
             case ButtonType.MenuButton: button = (
-                    <div className={`menuButton ${this.type}`} style={{ color, backgroundColor }}>
-                        {this.Icon(color)}
-                        {label(true)}
-                        <FontIconBadge value={Cast(this.Document.badgeValue, 'string', null)} />
-                    </div>
+                    <IconButton size={Size.LARGE} color={color} icon={this.Icon(color)!} label={this.label}/>
+                    // <div className={`menuButton ${this.type}`} style={{ color, backgroundColor }}>
+                    //     {this.Icon(color)}
+                    //     {label(true)}
+                    //     <FontIconBadge value={Cast(this.Document.badgeValue, 'string', null)} />
+                    // </div>
                 );
                 break;
         }