From 229e8ba914943da0d11dff00d14a8adae950d853 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sat, 25 Jul 2020 10:27:27 -0500
Subject: exit button for properties

---
 src/client/views/nodes/DocumentLinksButton.tsx | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

(limited to 'src/client/views/nodes/DocumentLinksButton.tsx')

diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index b17accfd6..fa7fe64f3 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -194,8 +194,11 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
             // }))} 
             >
 
+                {/* {this.props.InMenu ? this.props.StartLink ? <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" /> :
+                    <FontAwesomeIcon className="documentdecorations-icon" icon="hand-paper" size="sm" /> : links.length} */}
+
                 {this.props.InMenu ? this.props.StartLink ? <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" /> :
-                    <FontAwesomeIcon className="documentdecorations-icon" icon="hand-paper" size="sm" /> : links.length}
+                    link : links.length}
 
             </div>
             {DocumentLinksButton.StartLink && this.props.InMenu && !!!this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View ? <div className={"documentLinksButton-endLink"}
-- 
cgit v1.2.3-70-g09d2


From f818303cb164b471805075226cba5451f35b27a2 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Sun, 2 Aug 2020 17:33:38 -0500
Subject: fixing link bugs

---
 src/client/views/linking/LinkEditor.tsx         |  7 +++----
 src/client/views/linking/LinkMenuItem.tsx       |  1 +
 src/client/views/nodes/DocumentLinksButton.tsx  | 26 ++++++++++++++++++++-----
 src/client/views/nodes/LinkDescriptionPopup.tsx | 14 ++++++++-----
 4 files changed, 34 insertions(+), 14 deletions(-)

(limited to 'src/client/views/nodes/DocumentLinksButton.tsx')

diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 04329182e..c9aae0598 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -296,14 +296,13 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
 
     //@observable description = this.props.linkDoc.description ? StrCast(this.props.linkDoc.description) : "DESCRIPTION";
 
-    @undoBatch
-    @action
+    @action @undoBatch
     deleteLink = (): void => {
         LinkManager.Instance.deleteLink(this.props.linkDoc);
         this.props.showLinks();
     }
 
-    @action
+    @action @undoBatch
     setDescripValue = (value: string) => {
         if (LinkManager.currentLink) {
             LinkManager.currentLink.description = value;
@@ -362,7 +361,7 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
         this.openDropdown = !this.openDropdown;
     }
 
-    @action
+    @action @undoBatch
     changeFollowBehavior = (follow: string) => {
         this.openDropdown = false;
         Doc.GetProto(this.props.linkDoc).followLinkLocation = follow;
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 0aabf5319..6feb0a398 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -167,6 +167,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
         DocumentLinksButton.EditLink = undefined;
     }
 
+    @undoBatch
     @action
     showLink = () => {
         this.props.linkDoc.hidden = !this.props.linkDoc.hidden;
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 198a90225..b00de14a8 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -67,7 +67,11 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => {
             if (doubleTap && this.props.InMenu && this.props.StartLink) {
                 //action(() => Doc.BrushDoc(this.props.View.Document));
-                DocumentLinksButton.StartLink = this.props.View;
+                if (DocumentLinksButton.StartLink === this.props.View) {
+                    DocumentLinksButton.StartLink = undefined;
+                } else {
+                    DocumentLinksButton.StartLink = this.props.View;
+                }
             } else if (!this.props.InMenu) {
                 DocumentLinksButton.EditLink = this.props.View;
                 DocumentLinksButton.EditLinkLoc = [e.clientX + 10, e.clientY];
@@ -78,7 +82,12 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
     @action @undoBatch
     onLinkClick = (e: React.MouseEvent): void => {
         if (this.props.InMenu && this.props.StartLink) {
-            DocumentLinksButton.StartLink = this.props.View;
+            if (DocumentLinksButton.StartLink === this.props.View) {
+                DocumentLinksButton.StartLink = undefined;
+            } else {
+                DocumentLinksButton.StartLink = this.props.View;
+            }
+
             //action(() => Doc.BrushDoc(this.props.View.Document));
         } else if (!this.props.InMenu) {
             DocumentLinksButton.EditLink = this.props.View;
@@ -124,7 +133,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         if (DocumentLinksButton.StartLink === this.props.View) {
             DocumentLinksButton.StartLink = undefined;
         } else {
-            if (this.props.InMenu && !!!this.props.StartLink) {
+            if (this.props.InMenu && !this.props.StartLink) {
                 if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
                     const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
                     // this notifies any of the subviews that a document is made so that they can make finer-grained hyperlinks ().  see note above in onLInkButtonMoved
@@ -157,6 +166,11 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
     public static EditLink: DocumentView | undefined;
     public static EditLinkLoc: number[] = [0, 0];
 
+
+    @action clearLinks() {
+        DocumentLinksButton.StartLink = undefined;
+    }
+
     @computed
     get linkButton() {
         TraceMobx();
@@ -205,11 +219,13 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                     link : links.length}
 
             </div>
-            {DocumentLinksButton.StartLink && this.props.InMenu && !!!this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View ? <div className={"documentLinksButton-endLink"}
+            {DocumentLinksButton.StartLink && this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View ? <div className={"documentLinksButton-endLink"}
                 style={{ width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px" }}
                 onPointerDown={this.completeLink} onClick={e => this.finishLinkClick(e.screenX, e.screenY)} /> : (null)}
             {DocumentLinksButton.StartLink === this.props.View && this.props.InMenu && this.props.StartLink ? <div className={"documentLinksButton-startLink"}
-                style={{ width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px" }} /> : (null)}
+                style={{ width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px" }}
+                onPointerDown={this.clearLinks} onClick={this.clearLinks}
+            /> : (null)}
         </div>;
 
         return (!links.length) && !this.props.AlwaysOn ? (null) :
diff --git a/src/client/views/nodes/LinkDescriptionPopup.tsx b/src/client/views/nodes/LinkDescriptionPopup.tsx
index d8fe47f4e..720af6c9d 100644
--- a/src/client/views/nodes/LinkDescriptionPopup.tsx
+++ b/src/client/views/nodes/LinkDescriptionPopup.tsx
@@ -19,12 +19,15 @@ export class LinkDescriptionPopup extends React.Component<{}> {
 
     @action
     descriptionChanged = (e: React.ChangeEvent<HTMLInputElement>) => {
-        LinkManager.currentLink && (LinkManager.currentLink.description = e.currentTarget.value);
+        this.description = e.currentTarget.value;
     }
 
     @action
-    onDismiss = () => {
+    onDismiss = (add: boolean) => {
         LinkDescriptionPopup.descriptionPopup = false;
+        if (add) {
+            LinkManager.currentLink && (LinkManager.currentLink.description = this.description);
+        }
     }
 
     @action
@@ -50,15 +53,16 @@ export class LinkDescriptionPopup extends React.Component<{}> {
                 left: LinkDescriptionPopup.popupX ? LinkDescriptionPopup.popupX : 700,
                 top: LinkDescriptionPopup.popupY ? LinkDescriptionPopup.popupY : 350,
             }}>
-            <input className="linkDescriptionPopup-input" onKeyPress={e => e.key === "Enter" && this.onDismiss()}
+            <input className="linkDescriptionPopup-input"
+                onKeyPress={e => e.key === "Enter" && this.onDismiss(true)}
                 placeholder={"(optional) enter link label..."}
                 onChange={(e) => this.descriptionChanged(e)}>
             </input>
             <div className="linkDescriptionPopup-btn">
                 <div className="linkDescriptionPopup-btn-dismiss"
-                    onPointerDown={this.onDismiss}> Dismiss </div>
+                    onPointerDown={e => this.onDismiss(false)}> Dismiss </div>
                 <div className="linkDescriptionPopup-btn-add"
-                    onPointerDown={this.onDismiss}> Add </div>
+                    onPointerDown={e => this.onDismiss(true)}> Add </div>
             </div>
         </div>;
     }
-- 
cgit v1.2.3-70-g09d2


From 0b6e8dd4238c37121eb526b0cca6f0e8b85a22b8 Mon Sep 17 00:00:00 2001
From: bobzel <zzzman@gmail.com>
Date: Mon, 3 Aug 2020 02:58:08 -0400
Subject: fixed undoing links

---
 src/client/views/nodes/DocumentLinksButton.tsx | 87 +++++++++++---------------
 1 file changed, 35 insertions(+), 52 deletions(-)

(limited to 'src/client/views/nodes/DocumentLinksButton.tsx')

diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index b00de14a8..9395ac961 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -95,72 +95,55 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         }
     }
 
-    @action @undoBatch
     completeLink = (e: React.PointerEvent): void => {
-        setupMoveUpEvents(this, e, returnFalse, emptyFunction, action((e, doubleTap) => {
-            if (doubleTap && this.props.InMenu && !!!this.props.StartLink) {
+        setupMoveUpEvents(this, e, returnFalse, emptyFunction, undoBatch(action((e, doubleTap) => {
+            if (doubleTap && this.props.InMenu && !this.props.StartLink) {
                 if (DocumentLinksButton.StartLink === this.props.View) {
                     DocumentLinksButton.StartLink = undefined;
-                } else {
-
-                    if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
-                        const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
-                        LinkManager.currentLink = linkDoc;
-
-                        runInAction(() => {
-                            if (linkDoc) {
-                                TaskCompletionBox.textDisplayed = "Link Created";
-                                TaskCompletionBox.popupX = e.screenX;
-                                TaskCompletionBox.popupY = e.screenY - 133;
-                                TaskCompletionBox.taskCompleted = true;
-
-                                LinkDescriptionPopup.popupX = e.screenX;
-                                LinkDescriptionPopup.popupY = e.screenY - 100;
-                                LinkDescriptionPopup.descriptionPopup = true;
+                } else if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
+                    const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
+                    LinkManager.currentLink = linkDoc;
+                    if (linkDoc) {
+                        TaskCompletionBox.textDisplayed = "Link Created";
+                        TaskCompletionBox.popupX = e.screenX;
+                        TaskCompletionBox.popupY = e.screenY - 133;
+                        TaskCompletionBox.taskCompleted = true;
 
-                                setTimeout(action(() => { TaskCompletionBox.taskCompleted = false; }), 2500);
-                            }
+                        LinkDescriptionPopup.popupX = e.screenX;
+                        LinkDescriptionPopup.popupY = e.screenY - 100;
+                        LinkDescriptionPopup.descriptionPopup = true;
 
-                        });
+                        setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2500);
                     }
                 }
             }
-        }));
+        })));
     }
-
-    @action @undoBatch
-    finishLinkClick = (screenX: number, screenY: number) => {
+    finishLinkClick = undoBatch(action((screenX: number, screenY: number) => {
         if (DocumentLinksButton.StartLink === this.props.View) {
             DocumentLinksButton.StartLink = undefined;
-        } else {
-            if (this.props.InMenu && !this.props.StartLink) {
-                if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
-                    const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
-                    // this notifies any of the subviews that a document is made so that they can make finer-grained hyperlinks ().  see note above in onLInkButtonMoved
-                    runInAction(() => DocumentLinksButton.StartLink!._link = this.props.View._link = linkDoc);
-                    setTimeout(action(() => DocumentLinksButton.StartLink!._link = this.props.View._link = undefined), 0);
-                    LinkManager.currentLink = linkDoc;
-
-                    runInAction(() => {
-                        if (linkDoc) {
-                            TaskCompletionBox.textDisplayed = "Link Created";
-                            TaskCompletionBox.popupX = screenX;
-                            TaskCompletionBox.popupY = screenY - 133;
-                            TaskCompletionBox.taskCompleted = true;
-
-                            if (LinkDescriptionPopup.showDescriptions === "ON" || !LinkDescriptionPopup.showDescriptions) {
-                                LinkDescriptionPopup.popupX = screenX;
-                                LinkDescriptionPopup.popupY = screenY - 100;
-                                LinkDescriptionPopup.descriptionPopup = true;
-                            }
-
-                            setTimeout(action(() => { TaskCompletionBox.taskCompleted = false; }), 2500);
-                        }
-                    });
+        } else if (this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View) {
+            const linkDoc = DocUtils.MakeLink({ doc: DocumentLinksButton.StartLink.props.Document }, { doc: this.props.View.props.Document }, "long drag");
+            // this notifies any of the subviews that a document is made so that they can make finer-grained hyperlinks ().  see note above in onLInkButtonMoved
+            DocumentLinksButton.StartLink!._link = this.props.View._link = linkDoc;
+            setTimeout(action(() => DocumentLinksButton.StartLink!._link = this.props.View._link = undefined), 0);
+            LinkManager.currentLink = linkDoc;
+            if (linkDoc) {
+                TaskCompletionBox.textDisplayed = "Link Created";
+                TaskCompletionBox.popupX = screenX;
+                TaskCompletionBox.popupY = screenY - 133;
+                TaskCompletionBox.taskCompleted = true;
+
+                if (LinkDescriptionPopup.showDescriptions === "ON" || !LinkDescriptionPopup.showDescriptions) {
+                    LinkDescriptionPopup.popupX = screenX;
+                    LinkDescriptionPopup.popupY = screenY - 100;
+                    LinkDescriptionPopup.descriptionPopup = true;
                 }
+
+                setTimeout(action(() => TaskCompletionBox.taskCompleted = false), 2500);
             }
         }
-    }
+    }));
 
     @observable
     public static EditLink: DocumentView | undefined;
-- 
cgit v1.2.3-70-g09d2


From a63200e21d6304ef347a5a123839cd06ac04ec72 Mon Sep 17 00:00:00 2001
From: anika-ahluwalia <anika.ahluwalia@gmail.com>
Date: Mon, 3 Aug 2020 12:28:25 -0500
Subject: menu button fix and link greyed out

---
 src/client/views/DocumentButtonBar.tsx         |  4 ++--
 src/client/views/MainView.tsx                  | 22 ++++++++++++++++++----
 src/client/views/nodes/DocumentLinksButton.tsx | 18 ++++++++++++------
 src/client/views/nodes/FontIconBox.scss        | 24 ++++++++++++++----------
 src/client/views/nodes/FontIconBox.tsx         | 12 ++++++------
 5 files changed, 52 insertions(+), 28 deletions(-)

(limited to 'src/client/views/nodes/DocumentLinksButton.tsx')

diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 23a3e1684..c9f380737 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -278,9 +278,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
             <div className="documentButtonBar-button">
                 <DocumentLinksButton links={this.view0.allLinks} View={this.view0} AlwaysOn={true} InMenu={true} StartLink={true} />
             </div>
-            {DocumentLinksButton.StartLink ? <div className="documentButtonBar-button">
+            <div className="documentButtonBar-button">
                 <DocumentLinksButton links={this.view0.allLinks} View={this.view0} AlwaysOn={true} InMenu={true} StartLink={false} />
-            </div> : null}
+            </div>
             {/* <div className="documentButtonBar-button">
                 {this.templateButton}
             </div>
diff --git a/src/client/views/MainView.tsx b/src/client/views/MainView.tsx
index 09980ce97..8ee34a4b0 100644
--- a/src/client/views/MainView.tsx
+++ b/src/client/views/MainView.tsx
@@ -384,12 +384,26 @@ export class MainView extends React.Component {
 
     @action
     onFlyoutPointerDown = (e: React.PointerEvent) => {
-        this.panelContent = "none";
         if (this._flyoutTranslate) {
             setupMoveUpEvents(this, e, action((e: PointerEvent) => {
                 this.flyoutWidth = Math.max(e.clientX, 0);
+                if (this.flyoutWidth < 5) {
+                    this.panelContent = "none";
+                    this._lastButton && (this._lastButton.color = "white");
+                    this._lastButton && (this._lastButton._backgroundColor = "");
+                }
                 return false;
-            }), emptyFunction, action(() => this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0));
+            }), emptyFunction, this.openCloseFlyout);
+        }
+    }
+
+    @action
+    openCloseFlyout = () => {
+        this.flyoutWidth = this.flyoutWidth < 15 ? 250 : 0;
+        if (this.flyoutWidth < 15) {
+            this.panelContent = "none";
+            this._lastButton && (this._lastButton.color = "white");
+            this._lastButton && (this._lastButton._backgroundColor = "");
         }
     }
 
@@ -480,8 +494,8 @@ export class MainView extends React.Component {
 
     @action @undoBatch
     closeFlyout = () => {
-        // this._lastButton && (this._lastButton.color = "white");
-        // this._lastButton && (this._lastButton._backgroundColor = "");
+        this._lastButton && (this._lastButton.color = "white");
+        this._lastButton && (this._lastButton._backgroundColor = "");
         this.panelContent = "none";
         this.flyoutWidth = 0;
     }
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 9395ac961..31efaaaa6 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -4,7 +4,7 @@ import { action, computed, observable, runInAction } from "mobx";
 import { observer } from "mobx-react";
 import { Doc } from "../../../fields/Doc";
 import { TraceMobx } from "../../../fields/util";
-import { emptyFunction, returnFalse, setupMoveUpEvents } from "../../../Utils";
+import { emptyFunction, returnFalse, setupMoveUpEvents, emptyPath } from "../../../Utils";
 import { DocUtils } from "../../documents/Documents";
 import { DragManager } from "../../util/DragManager";
 import { LinkManager } from "../../util/LinkManager";
@@ -202,9 +202,15 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                     link : links.length}
 
             </div>
-            {DocumentLinksButton.StartLink && this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View ? <div className={"documentLinksButton-endLink"}
-                style={{ width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px" }}
-                onPointerDown={this.completeLink} onClick={e => this.finishLinkClick(e.screenX, e.screenY)} /> : (null)}
+            {this.props.InMenu && !this.props.StartLink &&
+                DocumentLinksButton.StartLink !== this.props.View ? <div className={"documentLinksButton-endLink"}
+                    style={{
+                        width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px",
+                        backgroundColor: DocumentLinksButton.StartLink ? "" : "grey",
+                        border: DocumentLinksButton.StartLink ? "" : "none"
+                    }}
+                    onPointerDown={DocumentLinksButton.StartLink ? this.completeLink : emptyFunction}
+                    onClick={e => DocumentLinksButton.StartLink ? this.finishLinkClick(e.screenX, e.screenY) : emptyFunction} /> : (null)}
             {DocumentLinksButton.StartLink === this.props.View && this.props.InMenu && this.props.StartLink ? <div className={"documentLinksButton-startLink"}
                 style={{ width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px" }}
                 onPointerDown={this.clearLinks} onClick={this.clearLinks}
@@ -212,10 +218,10 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         </div>;
 
         return (!links.length) && !this.props.AlwaysOn ? (null) :
-            this.props.InMenu ?
+            this.props.InMenu && (this.props.StartLink || DocumentLinksButton.StartLink) ?
                 <Tooltip title={<><div className="dash-tooltip">{title}</div></>}>
                     {linkButton}
-                </Tooltip> : !!!DocumentLinksButton.EditLink ?
+                </Tooltip> : !!!DocumentLinksButton.EditLink && !this.props.InMenu ?
                     <Tooltip title={<><div className="dash-tooltip">{title}</div></>}>
                         {linkButton}
                     </Tooltip> :
diff --git a/src/client/views/nodes/FontIconBox.scss b/src/client/views/nodes/FontIconBox.scss
index 31bc471de..5bdafd857 100644
--- a/src/client/views/nodes/FontIconBox.scss
+++ b/src/client/views/nodes/FontIconBox.scss
@@ -1,5 +1,3 @@
-
-
 .fontIconBox-label {
     color: white;
     margin-right: 4px;
@@ -12,30 +10,36 @@
     border-radius: 8px;
     margin-top: -8px;
     padding: 0;
-     width: 100%;
+    width: 100%;
 }
 
 .menuButton-round {
     border-radius: 100%;
+
     .fontIconBox-label {
         margin-left: -10px; // button padding is 10px;
-        bottom:0;
+        bottom: 0;
         position: absolute;
     }
 }
+
 .menuButton-square {
     padding-top: 3px;
     padding-bottom: 3px;
     padding-left: 5px;
+
     .fontIconBox-label {
         border-radius: 0px;
         margin-top: 0px;
         border-radius: "inherit";
     }
 }
-.menuButton, .menuButton-round, .menuButton-square{
+
+.menuButton,
+.menuButton-round,
+.menuButton-square {
     width: 100%;
-    height:100%;
+    height: 100%;
     pointer-events: all;
     touch-action: none;
 
@@ -43,10 +47,10 @@
         touch-action: none;
         border-radius: 8px;
 
-        &:hover {
-            background: rgb(61, 61, 61);
-            cursor: pointer;
-        }
+        // &:hover {
+        //     background: rgb(61, 61, 61);
+        //     cursor: pointer;
+        // }
     }
 
     .menuButton-icon-square {
diff --git a/src/client/views/nodes/FontIconBox.tsx b/src/client/views/nodes/FontIconBox.tsx
index 3561d22b6..eff5a4160 100644
--- a/src/client/views/nodes/FontIconBox.tsx
+++ b/src/client/views/nodes/FontIconBox.tsx
@@ -12,7 +12,6 @@ import { Doc } from '../../../fields/Doc';
 import { ContextMenu } from '../ContextMenu';
 import { ScriptField } from '../../../fields/ScriptField';
 import { Tooltip } from '@material-ui/core';
-import { CurrentUserUtils } from '../../util/CurrentUserUtils';
 const FontIconSchema = createSchema({
     icon: "string",
 });
@@ -66,11 +65,12 @@ export class FontIconBox extends DocComponent<FieldViewProps, FontIconDocument>(
         const shape = StrCast(this.layoutDoc.iconShape, "round");
         const button = <>
             <button className={`menuButton-${shape}`} ref={this._ref} onContextMenu={this.specificContextMenu}
-                style={{ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, }}>
-                {<FontAwesomeIcon className={`menuButton-icon-${shape}`}
-                    icon={StrCast(this.dataDoc.icon, "user") as any} color={color}
-                    size={this.layoutDoc.iconShape === "square" ? "sm" : "lg"} />}
-                {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </div>}
+                style={{ boxShadow: this.layoutDoc.ischecked ? `4px 4px 12px black` : undefined, backgroundColor }}>
+                <div className="menuButton-wrap">
+                    {<FontAwesomeIcon className={`menuButton-icon-${shape}`} icon={StrCast(this.dataDoc.icon, "user") as any} color={color}
+                        size={this.layoutDoc.iconShape === "square" ? "sm" : "lg"} />}
+                    {!label ? (null) : <div className="fontIconBox-label" style={{ color, backgroundColor }}> {label} </div>}
+                </div>
             </button>
         </>;
         return !this.layoutDoc.toolTip ? button :
-- 
cgit v1.2.3-70-g09d2

