updates

3 files changed, 33 insertions, 12 deletions

diff --git a/src/client/util/CurrentUserUtils.ts b/src/client/util/CurrentUserUtils.ts
index cd4c217b5..d03ef4aca 100644
--- a/src/client/util/CurrentUserUtils.ts
+++ b/src/client/util/CurrentUserUtils.ts
@@ -70,14 +70,14 @@ export class CurrentUserUtils {
                 [this.ficon({
                     ignoreClick: true,
                     icon: "mobile",
-                    btnType: ButtonType.ClickButton,
+                    btnType: ButtonType.ToolButton,
                     backgroundColor: "transparent"
                 }),
                 this.mobileTextContainer({},
                     [this.mobileButtonText({}, "NEW MOBILE BUTTON"), this.mobileButtonInfo({}, "You can customize this button and make it your own.")])]);
             doc["template-mobile-button"] = CurrentUserUtils.ficon({
                 onDragStart: ScriptField.MakeFunction('copyDragFactory(this.dragFactory)'),
-                dragFactory: new PrefetchProxy(queryTemplate) as any as Doc, title: "mobile button", icon: "mobile", btnType: ButtonType.ClickButton,
+                dragFactory: new PrefetchProxy(queryTemplate) as any as Doc, title: "mobile button", icon: "mobile", btnType: ButtonType.ToolButton,
             });
         }
 
@@ -93,7 +93,7 @@ export class CurrentUserUtils {
             doc["template-button-slides"] = CurrentUserUtils.ficon({
                 onDragStart: ScriptField.MakeFunction('copyDragFactory(this.dragFactory)'),
                 dragFactory: new PrefetchProxy(slideTemplate) as any as Doc, title: "presentation slide", icon: "address-card",
-                btnType: ButtonType.ClickButton
+                btnType: ButtonType.ToolButton
             });
         }
 
@@ -140,7 +140,7 @@ export class CurrentUserUtils {
             doc["template-button-link"] = CurrentUserUtils.ficon({
                 onDragStart: ScriptField.MakeFunction('copyDragFactory(this.dragFactory)'),
                 dragFactory: new PrefetchProxy(linkTemplate) as any as Doc, title: "link view", icon: "window-maximize", system: true,
-                btnType: ButtonType.ClickButton
+                btnType: ButtonType.ToolButton
             });
         }
 
@@ -172,7 +172,7 @@ export class CurrentUserUtils {
             doc["template-button-switch"] = CurrentUserUtils.ficon({
                 onDragStart: ScriptField.MakeFunction('copyDragFactory(this.dragFactory)'),
                 dragFactory: new PrefetchProxy(box) as any as Doc, title: "data switch", icon: "toggle-on", system: true,
-                btnType: ButtonType.ClickButton
+                btnType: ButtonType.ToolButton
             });
         }
 
@@ -225,7 +225,7 @@ export class CurrentUserUtils {
                 title: "detailView",
                 icon: "window-maximize",
                 system: true,
-                btnType: ButtonType.ClickButton,
+                btnType: ButtonType.ToolButton,
             });
         }
 
@@ -511,12 +511,13 @@ export class CurrentUserUtils {
             icon,
             title,
             toolTip,
-            btnType: ButtonType.ClickButton,
+            btnType: ButtonType.ToolButton,
             ignoreClick,
             _dropAction: "alias",
             onDragStart: drag ? ScriptField.MakeFunction(drag) : undefined,
             onClick: click ? ScriptField.MakeScript(click) : undefined,
-            backgroundColor,
+            backgroundColor: backgroundColor ? backgroundColor : Colors.DARK_GRAY,
+            color: Colors.WHITE,
             _hideContextMenu: true,
             _removeDropProperties: new List<string>(["_stayInCollection"]),
             _stayInCollection: true,
diff --git a/src/client/views/nodes/button/FontIconBox.scss b/src/client/views/nodes/button/FontIconBox.scss
index 46a499466..0c866988d 100644
--- a/src/client/views/nodes/button/FontIconBox.scss
+++ b/src/client/views/nodes/button/FontIconBox.scss
@@ -38,12 +38,24 @@
 
     &.clickBtn {
         cursor: pointer;
+        width: 40px;
     }
 
     &.tglBtn {
         cursor: pointer;
     }
 
+    &.toolBtn {
+        cursor: pointer;
+        width: 40px;
+        border-radius: 100%;
+
+        svg {
+            width: 60% !important;
+            height: 60%;
+        }
+    }
+
     &.menuBtn {
         cursor: pointer;
         border-radius: 0px;
@@ -109,7 +121,7 @@
             }
 
             .list-item:hover {
-                background-color:lightgrey;
+                background-color: lightgrey;
             }
         }
     }
@@ -201,5 +213,4 @@
 //         background:transparent;
 //         position: fixed;
 //     }
-// }
-
+// }
\ No newline at end of file
diff --git a/src/client/views/nodes/button/FontIconBox.tsx b/src/client/views/nodes/button/FontIconBox.tsx
index 2c6369e9f..9e7608dc3 100644
--- a/src/client/views/nodes/button/FontIconBox.tsx
+++ b/src/client/views/nodes/button/FontIconBox.tsx
@@ -27,7 +27,8 @@ export enum ButtonType {
     ClickButton = "clickBtn",
     DoubleButton = "dblBtn",
     ToggleButton = "tglBtn",
-    ColorButton = "colorBtn"
+    ColorButton = "colorBtn",
+    ToolButton = "toolBtn"
 }
 
 export interface ButtonProps extends FieldViewProps {
@@ -254,6 +255,14 @@ export class FontIconBox extends DocComponent<ButtonProps, FontIconDocument>(Fon
                     </div>
                 );
                 break;
+            case ButtonType.ToolButton:
+                button = (
+                    <div className={`menuButton ${this.type}`} style={{ opacity: canClick ? 1 : 0.4, backgroundColor: backgroundColor, color: color }}>
+                        <FontAwesomeIcon className={`fontIconBox-icon-${this.type}`} icon={this.icon} color={color} />
+                        {label}
+                    </div>
+                );
+                break;
             case ButtonType.ToggleButton:
                 button = (
                     <div className={`menuButton ${this.type}`} style={{ opacity: canClick ? 1 : 0.4, backgroundColor: toggle ? backgroundColor : undefined }}>