From 50f4eaf02d32560ad324acd72b9021b480c11a9c Mon Sep 17 00:00:00 2001
From: dinhanhtruong <70963346+dinhanhtruong@users.noreply.github.com>
Date: Sat, 24 Jul 2021 17:00:31 -0400
Subject: refreshed linking status bar css, linkmenu css

---
 src/client/views/collections/CollectionLinearView.scss | 12 +++++++-----
 1 file changed, 7 insertions(+), 5 deletions(-)

(limited to 'src/client/views/collections/CollectionLinearView.scss')

diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss
index ec8805907..632f8dbab 100644
--- a/src/client/views/collections/CollectionLinearView.scss
+++ b/src/client/views/collections/CollectionLinearView.scss
@@ -20,6 +20,7 @@
         }
 
         .bottomPopup-background {
+            background: rgb(173, 216, 230);
             padding-right: 14px;
             height: 35;
             transform: translate3d(6px, 5px, 0px);
@@ -29,10 +30,11 @@
         }
 
         .bottomPopup-text {
+            color: black;
             display: inline;
             white-space: nowrap;
             padding-left: 8px;
-            padding-right: 4px;
+            padding-right: 20px;
             vertical-align: middle;
             font-size: 12.5px;
         }
@@ -43,8 +45,8 @@
             padding-left: 8px;
             padding-right: 8px;
             vertical-align: middle;
-            background-color: lightgrey;
-            border-radius: 5.5px;
+            background-color: #efefef;
+            border-radius: 3px;
             color: black;
             margin-right: 5px;
         }
@@ -55,8 +57,8 @@
             padding-left: 8px;
             padding-right: 8px;
             vertical-align: middle;
-            background-color: lightgrey;
-            border-radius: 5.5px;
+            background-color: #f3b6b6;
+            border-radius: 3px;
             color: black;
         }
 
-- 
cgit v1.2.3-70-g09d2


From ee06e72dab596ead6903c3ab3432ecab458613cb Mon Sep 17 00:00:00 2001
From: dinhanhtruong <70963346+dinhanhtruong@users.noreply.github.com>
Date: Mon, 26 Jul 2021 18:45:28 -0400
Subject: Link editor menu UI cleanup + color changes + temp removal of
 linkpopup for PR

---
 src/client/views/collections/CollectionLinearView.scss |  4 ++--
 src/client/views/linking/LinkEditor.scss               |  8 ++++----
 src/client/views/linking/LinkMenu.scss                 |  9 ++++-----
 src/client/views/linking/LinkMenuItem.scss             |  6 +++---
 src/client/views/linking/LinkPopup.tsx                 |  3 +--
 src/client/views/nodes/DocumentLinksButton.scss        |  1 +
 src/client/views/nodes/DocumentLinksButton.tsx         |  4 ++--
 src/client/views/pdf/AnchorMenu.tsx                    | 13 +++++++------
 8 files changed, 24 insertions(+), 24 deletions(-)

(limited to 'src/client/views/collections/CollectionLinearView.scss')

diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss
index 632f8dbab..dd1e1fbe8 100644
--- a/src/client/views/collections/CollectionLinearView.scss
+++ b/src/client/views/collections/CollectionLinearView.scss
@@ -20,10 +20,10 @@
         }
 
         .bottomPopup-background {
-            background: rgb(173, 216, 230);
+            background: $light-blue;
             padding-right: 14px;
             height: 35;
-            transform: translate3d(6px, 5px, 0px);
+            transform: translate3d(6px, 0px, 0px);
             padding-top: 6.5px;
             padding-bottom: 7px;
             padding-left: 5px;
diff --git a/src/client/views/linking/LinkEditor.scss b/src/client/views/linking/LinkEditor.scss
index 839ebf894..9fddede65 100644
--- a/src/client/views/linking/LinkEditor.scss
+++ b/src/client/views/linking/LinkEditor.scss
@@ -22,7 +22,7 @@
 .linkEditor-info {
     //border-bottom: 0.5px solid $light-gray;
     //padding-bottom: 1px;
-    padding-top: 5px;
+    padding: 12px;
     padding-left: 5px;
     //margin-bottom: 6px;
     display: flex;
@@ -61,7 +61,7 @@
 }
 
 .linkEditor-description {
-    padding-left: 6.5px;
+    padding-left: 26px;
     padding-right: 6.5px;
     padding-bottom: 3.5px;
 
@@ -107,9 +107,9 @@
 }
 
 .linkEditor-followingDropdown {
-    padding-left: 6.5px;
+    padding-left: 26px;
     padding-right: 6.5px;
-    padding-bottom: 6px;
+    padding-bottom: 15cpx;
 
     &:hover {
         cursor: pointer;
diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index bcd93aed1..19c6463d3 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -13,9 +13,8 @@
         border: 1px solid #e4e4e4;
         box-shadow: 0 10px 20px rgba(0, 0, 0, 0.19), 0 6px 6px rgba(0, 0, 0, 0.23);
         background: white;
-
         min-width: 170px;
-        max-height: 170px;
+        max-height: 230px;
         overflow-y: scroll;
         z-index: 10;
     }
@@ -50,9 +49,9 @@
 
 
         &:hover {
-            p {
-                background-color: lightgray;
-            }
+            // p {
+            //     background-color: lightgray;
+            // }
 
             p.expand-one {
                 width: calc(100% + 20px);
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 38363c2c4..90722daf9 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -55,8 +55,8 @@
 
                 .linkMenu-destination-title {
                     text-decoration: none;
-                    color: rgb(85, 120, 196);
-                    font-size: 14px;
+                    color: #4476F7;
+                    font-size: 16px;
                     padding-bottom: 2px;
                     padding-right: 4px;
                     margin-right: 4px;
@@ -76,7 +76,7 @@
                 text-decoration: none;
                 font-style: italic;
                 color: rgb(95, 97, 102);
-                font-size: 10px;
+                font-size: 9px;
                 margin-left: 20px;
                 max-width: 125px;
                 height: auto;
diff --git a/src/client/views/linking/LinkPopup.tsx b/src/client/views/linking/LinkPopup.tsx
index 89d5b7272..2c4b718f4 100644
--- a/src/client/views/linking/LinkPopup.tsx
+++ b/src/client/views/linking/LinkPopup.tsx
@@ -42,14 +42,13 @@ interface LinkPopupProps {
 export class LinkPopup extends React.Component<LinkPopupProps> {
     @observable private linkURL: string = "";
     @observable public view?: EditorView;
-    private Instance: LinkPopup = this;
 
 
 
     // TODO: should check for valid URL
     @undoBatch
     makeLinkToURL = (target: string, lcoation: string) => {
-        ((this as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, "onRadd:rightight", target, target);
+        ((this.view as any)?.TextView as FormattedTextBox).makeLinkAnchor(undefined, "onRadd:rightight", target, target);
     }
 
     @action
diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss
index daffaf9e7..93e1737fe 100644
--- a/src/client/views/nodes/DocumentLinksButton.scss
+++ b/src/client/views/nodes/DocumentLinksButton.scss
@@ -6,6 +6,7 @@
     min-height: 20;
     position: absolute;
 }
+
 .documentLinksButton,
 .documentLinksButton-endLink,
 .documentLinksButton-startLink {
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 4b4079670..ddc36daa1 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -143,7 +143,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                 } else if (DocumentLinksButton.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document) {
                     const sourceDoc = DocumentLinksButton.StartLink;
                     const targetDoc = this.props.View.ComponentView?.getAnchor?.() || this.props.View.Document;
-                    const linkDoc = DocUtils.MakeLink({ doc: sourceDoc }, { doc: targetDoc }, "link"); //why is long drag here when this is used for completing links by clicking?
+                    const linkDoc = DocUtils.MakeLink({ doc: sourceDoc }, { doc: targetDoc }, "links"); //why is long drag here when this is used for completing links by clicking?
 
                     LinkManager.currentLink = linkDoc;
 
@@ -257,7 +257,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
             <div className={"documentLinksButton"}
                 onPointerDown={this.onLinkButtonDown} onClick={this.onLinkClick}
                 style={{
-                    backgroundColor: this.props.InMenu ? "" : "#add8e6",
+                    backgroundColor: this.props.InMenu ? "" : '#BDDDF5',
                     color: this.props.InMenu ? "white" : "black",
                     width: btnDim,
                     height: btnDim,
diff --git a/src/client/views/pdf/AnchorMenu.tsx b/src/client/views/pdf/AnchorMenu.tsx
index f9e12f462..70ca19842 100644
--- a/src/client/views/pdf/AnchorMenu.tsx
+++ b/src/client/views/pdf/AnchorMenu.tsx
@@ -147,12 +147,13 @@ export class AnchorMenu extends AntimodeMenu<AntimodeMenuProps> {
                     </button>
                 </Tooltip>,
 
-                <Tooltip key="link" title={<div className="dash-tooltip">{"Link selected text to document or URL"}</div>}>
-                    <button className="antimodeMenu-button link" onPointerDown={this.toggleLinkPopup} style={{}}>
-                        <FontAwesomeIcon icon="link" size="lg" />
-                    </button>
-                </Tooltip>,
-                <LinkPopup showPopup={this._showLinkPopup} />
+                //NOTE: link popup is currently incomplete
+                // <Tooltip key="link" title={<div className="dash-tooltip">{"Link selected text to document or URL"}</div>}>
+                //     <button className="antimodeMenu-button link" onPointerDown={this.toggleLinkPopup} style={{}}>
+                //         <FontAwesomeIcon icon="link" size="lg" />
+                //     </button>
+                // </Tooltip>,
+                // <LinkPopup showPopup={this._showLinkPopup} />
             ] : [
                 <Tooltip key="trash" title={<div className="dash-tooltip">{"Remove Link Anchor"}</div>}>
                     <button className="antimodeMenu-button" onPointerDown={this.Delete}>
-- 
cgit v1.2.3-70-g09d2


From 8bc755595dbe21cafb768efc3650b0b14d33f7df Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Sat, 31 Jul 2021 00:26:50 -0400
Subject: minor changes

---
 src/client/views/collections/CollectionLinearView.scss | 9 +++++----
 src/client/views/collections/CollectionLinearView.tsx  | 7 +++----
 2 files changed, 8 insertions(+), 8 deletions(-)

(limited to 'src/client/views/collections/CollectionLinearView.scss')

diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss
index dd1e1fbe8..86610ac20 100644
--- a/src/client/views/collections/CollectionLinearView.scss
+++ b/src/client/views/collections/CollectionLinearView.scss
@@ -21,12 +21,12 @@
 
         .bottomPopup-background {
             background: $light-blue;
-            padding-right: 14px;
+            display: flex;
             height: 35;
             transform: translate3d(6px, 0px, 0px);
-            padding-top: 6.5px;
-            padding-bottom: 7px;
-            padding-left: 5px;
+            align-content: center;
+            justify-content: center;
+            align-items: center;
         }
 
         .bottomPopup-text {
@@ -54,6 +54,7 @@
         .bottomPopup-exit {
             display: inline;
             white-space: nowrap;
+            margin-right: 10px;
             padding-left: 8px;
             padding-right: 8px;
             vertical-align: middle;
diff --git a/src/client/views/collections/CollectionLinearView.tsx b/src/client/views/collections/CollectionLinearView.tsx
index 8d81471d0..52c836556 100644
--- a/src/client/views/collections/CollectionLinearView.tsx
+++ b/src/client/views/collections/CollectionLinearView.tsx
@@ -171,17 +171,16 @@ export class CollectionLinearView extends CollectionSubView(LinearDocument) {
                 }}
                     onPointerDown={e => e.stopPropagation()} >
                     <span className="bottomPopup-text" >
-                        Creating link from: {DocumentLinksButton.AnnotationId ? "Annotation in " : " "} {StrCast(DocumentLinksButton.StartLink.title).length < 51 ? DocumentLinksButton.StartLink.title : StrCast(DocumentLinksButton.StartLink.title).slice(0, 50) + '...'}
+                        Creating link from: <b>{DocumentLinksButton.AnnotationId ? "Annotation in " : " "} {StrCast(DocumentLinksButton.StartLink.title).length < 51 ? DocumentLinksButton.StartLink.title : StrCast(DocumentLinksButton.StartLink.title).slice(0, 50) + '...'}</b>
                     </span>
 
-                    <Tooltip title={<><div className="dash-tooltip">{LinkDescriptionPopup.showDescriptions ? "Turn off description pop-up" :
-                        "Turn on description pop-up"} </div></>} placement="top">
+                    <Tooltip title={<><div className="dash-tooltip">{"Toggle description pop-up"} </div></>} placement="top">
                         <span className="bottomPopup-descriptions" onClick={this.changeDescriptionSetting}>
                             Labels: {LinkDescriptionPopup.showDescriptions ? LinkDescriptionPopup.showDescriptions : "ON"}
                         </span>
                     </Tooltip>
 
-                    <Tooltip title={<><div className="dash-tooltip">Exit link clicking mode </div></>} placement="top">
+                    <Tooltip title={<><div className="dash-tooltip">Exit linking mode</div></>} placement="top">
                         <span className="bottomPopup-exit" onClick={this.exitLongLinks}>
                             Stop
                         </span>
-- 
cgit v1.2.3-70-g09d2


From d3a7e378e26466b911733f76addfe9fc61a689df Mon Sep 17 00:00:00 2001
From: geireann <geireann.lindfield@gmail.com>
Date: Sat, 31 Jul 2021 18:17:35 -0400
Subject: fixed linking issues with dragging & updating linking UI

---
 src/client/views/DocumentButtonBar.scss            |  21 +++++
 src/client/views/DocumentButtonBar.tsx             |  26 +++---
 src/client/views/DocumentDecorations.scss          |   2 +-
 .../views/collections/CollectionLinearView.scss    |   8 +-
 src/client/views/global/globalCssVariables.scss    |   2 +-
 src/client/views/nodes/DocumentLinksButton.scss    |  38 ++++++--
 src/client/views/nodes/DocumentLinksButton.tsx     | 102 ++++++++++-----------
 src/client/views/topbar/TopBar.scss                |   3 +-
 src/client/views/topbar/TopBar.tsx                 |   1 -
 9 files changed, 119 insertions(+), 84 deletions(-)

(limited to 'src/client/views/collections/CollectionLinearView.scss')

diff --git a/src/client/views/DocumentButtonBar.scss b/src/client/views/DocumentButtonBar.scss
index 157f3a4f2..171e7134f 100644
--- a/src/client/views/DocumentButtonBar.scss
+++ b/src/client/views/DocumentButtonBar.scss
@@ -59,6 +59,7 @@ $linkGap : 3px;
     align-items: center;
 }
 
+// depracated (now use .documentButtonBar-icon) for standard buttons
 .documentButtonBar-linker {
     height: 20px;
     width: 20px;
@@ -74,6 +75,26 @@ $linkGap : 3px;
     }
 }
 
+.documentButtonBar-icon {
+    height: 80%;
+    width: 80%;
+    font-size: 100%;
+    text-align: center;
+    border-radius: 50%;
+    pointer-events: auto;
+    background-color: $dark-gray;
+    border: none;
+    transition: 0.2s ease all;
+    display: flex;
+    align-content: center;
+    justify-content: center;
+    align-items: center;
+
+    &:hover {
+        background-color: $black;
+    }
+}
+
 .documentButtonBar-linker:hover {
     cursor: pointer;
     transform: scale(1.05);
diff --git a/src/client/views/DocumentButtonBar.tsx b/src/client/views/DocumentButtonBar.tsx
index 1e5380971..df1e6899d 100644
--- a/src/client/views/DocumentButtonBar.tsx
+++ b/src/client/views/DocumentButtonBar.tsx
@@ -110,7 +110,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         const animation = this.isAnimatingPulse ? "shadow-pulse 1s linear infinite" : "none";
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`${published ? "Push" : "Publish"} to Google Docs`}</div></>}>
             <div
-                className="documentButtonBar-linker"
+                className="documentButtonBar-button"
                 style={{ animation }}
                 onClick={async () => {
                     await GoogleAuthenticationManager.Instance.fetchOrGenerateAccessToken();
@@ -139,7 +139,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
 
         return !targetDoc || !dataDoc || !dataDoc[GoogleRef] ? (null) : <Tooltip
             title={<><div className="dash-tooltip">{title}</div></>}>
-            <div className="documentButtonBar-linker"
+            <div className="documentButtonBar-button"
                 style={{ backgroundColor: this.pullColor }}
                 onPointerEnter={action(e => {
                     if (e.altKey) {
@@ -188,8 +188,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? (null) : <Tooltip title={
             <div className="dash-tooltip">{"follow primary link on click"}</div>}>
-            <div className="documentButtonBar-linker"
-                style={{ color: targetDoc.isLinkButton ? "black" : "white", backgroundColor: targetDoc.isLinkButton ? "white" : "black" }}
+            <div className="documentButtonBar-icon"
+                style={{ color: targetDoc.isLinkButton ? "black" : "white" }}
                 onClick={undoBatch(e => this.props.views().map(view => view?.docView?.toggleFollowLink(undefined, false, false)))}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="hand-point-right" />
             </div>
@@ -200,7 +200,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? (null) : <Tooltip title={
             <div className="dash-tooltip">{SelectionManager.Views().length > 1 ? "Pin multiple documents to presentation" : "Pin to presentation"}</div>}>
-            <div className="documentButtonBar-linker"
+            <div className="documentButtonBar-icon"
                 style={{ color: "white" }}
                 onClick={undoBatch(e => this.props.views().map(view => view && TabDocView.PinDoc(view.props.Document, { setPosition: e.shiftKey ? true : undefined })))}>
                 <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="map-pin" />
@@ -243,7 +243,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
         const presPinWithViewIcon = <img src="/assets/pinWithView.png" style={{ margin: "auto", width: 17, transform: 'translate(0, 1px)' }} />;
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Pin with current view"}</div></>}>
-            <div className="documentButtonBar-linker" onClick={() => this.pinWithView(targetDoc)}>
+            <div className="documentButtonBar-icon" onClick={() => this.pinWithView(targetDoc)}>
                 {presPinWithViewIcon}
             </div>
         </Tooltip>;
@@ -253,8 +253,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
     get shareButton() {
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{"Open Sharing Manager"}</div></>}>
-            <div className="documentButtonBar-linker" style={{ color: "white" }} onClick={e => SharingManager.Instance.open(this.view0, targetDoc)}>
-                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="users" />
+            <div className="documentButtonBar-icon" style={{ color: "white" }} onClick={e => SharingManager.Instance.open(this.view0, targetDoc)}>
+                <FontAwesomeIcon className="documentdecorations-icon" icon="users" />
             </div></Tooltip >;
     }
 
@@ -262,8 +262,8 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
     get menuButton() {
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`Open Context Menu`}</div></>}>
-            <div className="documentButtonBar-linker" style={{ color: "white", cursor: "pointer" }} onClick={e => this.openContextMenu(e)}>
-                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="bars" />
+            <div className="documentButtonBar-icon" style={{ color: "white", cursor: "pointer" }} onClick={e => this.openContextMenu(e)}>
+                <FontAwesomeIcon className="documentdecorations-icon" icon="bars" />
             </div></Tooltip >;
     }
 
@@ -271,9 +271,9 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
     get moreButton() {
         const targetDoc = this.view0?.props.Document;
         return !targetDoc ? (null) : <Tooltip title={<><div className="dash-tooltip">{`${CurrentUserUtils.propertiesWidth > 0 ? "Close" : "Open"} Properties Panel`}</div></>}>
-            <div className="documentButtonBar-linker" style={{ color: "white", cursor: "e-resize" }} onClick={action(e =>
+            <div className="documentButtonBar-icon" style={{ color: "white", cursor: "e-resize" }} onClick={action(e =>
                 CurrentUserUtils.propertiesWidth = CurrentUserUtils.propertiesWidth > 0 ? 0 : 250)}>
-                <FontAwesomeIcon className="documentdecorations-icon" size="sm" icon="ellipsis-h"
+                <FontAwesomeIcon className="documentdecorations-icon" icon="ellipsis-h"
                 />
             </div></Tooltip >;
     }
@@ -286,7 +286,7 @@ export class DocumentButtonBar extends React.Component<{ views: () => (DocumentV
                 <Flyout anchorPoint={anchorPoints.LEFT_TOP}
                     content={<MetadataEntryMenu docs={this.props.views().filter(dv => dv).map(dv => dv!.props.Document)} suggestWithFunction />  /* tfs: @bcz This might need to be the data document? */}>
                     <div className={"documentButtonBar-linkButton-" + "empty"} onPointerDown={e => e.stopPropagation()} >
-                        {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" size="sm" />}
+                        {<FontAwesomeIcon className="documentdecorations-icon" icon="tag" />}
                     </div>
                 </Flyout>
             </div></Tooltip>;
diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 952d8d150..316f63240 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -336,7 +336,7 @@ $linkGap : 3px;
 }
 
 .documentdecorations-icon {
-    margin-top: 3px;
+    margin: 0px;
 }
 .templating-button,
 .docDecs-tagButton {
diff --git a/src/client/views/collections/CollectionLinearView.scss b/src/client/views/collections/CollectionLinearView.scss
index 86610ac20..913a65774 100644
--- a/src/client/views/collections/CollectionLinearView.scss
+++ b/src/client/views/collections/CollectionLinearView.scss
@@ -20,7 +20,7 @@
         }
 
         .bottomPopup-background {
-            background: $light-blue;
+            background: $medium-blue;
             display: flex;
             height: 35;
             transform: translate3d(6px, 0px, 0px);
@@ -30,7 +30,7 @@
         }
 
         .bottomPopup-text {
-            color: black;
+            color: $white;
             display: inline;
             white-space: nowrap;
             padding-left: 8px;
@@ -45,7 +45,7 @@
             padding-left: 8px;
             padding-right: 8px;
             vertical-align: middle;
-            background-color: #efefef;
+            background-color: $light-gray;
             border-radius: 3px;
             color: black;
             margin-right: 5px;
@@ -58,7 +58,7 @@
             padding-left: 8px;
             padding-right: 8px;
             vertical-align: middle;
-            background-color: #f3b6b6;
+            background-color: $close-red;
             border-radius: 3px;
             color: black;
         }
diff --git a/src/client/views/global/globalCssVariables.scss b/src/client/views/global/globalCssVariables.scss
index a9f33c4da..1b881ba43 100644
--- a/src/client/views/global/globalCssVariables.scss
+++ b/src/client/views/global/globalCssVariables.scss
@@ -11,7 +11,7 @@ $medium-blue: #4476F7;
 $pink: #E0217D;
 $yellow: #F5D747;
 
-$logout-red: #ca4444;
+$close-red: #e48282;
 
 $drop-shadow: "#32323215";
 
diff --git a/src/client/views/nodes/DocumentLinksButton.scss b/src/client/views/nodes/DocumentLinksButton.scss
index 9bab72d55..b37b68249 100644
--- a/src/client/views/nodes/DocumentLinksButton.scss
+++ b/src/client/views/nodes/DocumentLinksButton.scss
@@ -44,25 +44,43 @@
 }
 
 .documentLinksButton {
-    background-color: black;
+    background-color: $dark-gray;
+    color: $white;
     font-weight: bold;
+    width: 80%;
+    height: 80%;
+    font-size: 100%;
+    transition: 0.2s ease all;
 
     &:hover {
-        transform: scale(1.05);
-        cursor: pointer;
+        background-color: $black;
+    }
+}
+
+.documentLinksButton.startLink {
+    background-color: $medium-blue;
+    color: $white;
+    font-weight: bold;
+    width: 80%;
+    height: 80%;
+    font-size: 100%;
+    transition: 0.2s ease all;
+
+    &:hover {
+        background-color: $black;
     }
 }
 
 .documentLinksButton-endLink {
     border: $medium-blue 2px dashed;
     color: $medium-blue;
+    background-color: none !important;
+    width: 80%;
+    height: 80%;
+    font-size: 100%;
+    transition: 0.2s ease all;
+
     &:hover {
-        background: $light-gray;
-        transform: scale(1.05);
-        cursor: pointer;
+        background-color: $light-blue;
     }
-}
-
-.documentLinksButton-startLink {
-    background-color: $medium-blue;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index cec06d2d4..482f551b5 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -68,6 +68,40 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
         return false;
     }
 
+    onLinkMenuOpen = (e: React.PointerEvent): void => {
+        setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => {
+            if (doubleTap) {
+                const rootDoc = this.props.View.rootDoc;
+                const docid = Doc.CurrentUserEmail + Doc.GetProto(rootDoc)[Id] + "-pivotish";
+                DocServer.GetRefField(docid).then(async docx => {
+                    const rootAlias = () => {
+                        const rootAlias = Doc.MakeAlias(rootDoc);
+                        rootAlias.x = rootAlias.y = 0;
+                        return rootAlias;
+                    };
+                    let wid = rootDoc[WidthSym]();
+                    const target = ((docx instanceof Doc) && docx) || Docs.Create.FreeformDocument([rootAlias()], { title: this.props.View.Document.title + "-pivot", _width: 500, _height: 500, }, docid);
+                    const docs = await DocListCastAsync(Doc.GetProto(target).data);
+                    if (!target.pivotFocusish) (Doc.GetProto(target).pivotFocusish = target);
+                    DocListCast(rootDoc.links).forEach(link => {
+                        const other = LinkManager.getOppositeAnchor(link, rootDoc);
+                        const otherdoc = !other ? undefined : other.annotationOn ? Cast(other.annotationOn, Doc, null) : other;
+                        if (otherdoc && !docs?.some(d => Doc.AreProtosEqual(d, otherdoc))) {
+                            const alias = Doc.MakeAlias(otherdoc);
+                            alias.x = wid;
+                            alias.y = 0;
+                            alias._lockedPosition = false;
+                            wid += otherdoc[WidthSym]();
+                            Doc.AddDocToList(Doc.GetProto(target), "data", alias);
+                        }
+                    });
+                    LightboxView.SetLightboxDoc(target);
+                });
+            }
+            else DocumentLinksButton.LinkEditorDocView = this.props.View;
+        }));
+    }
+
     @undoBatch
     onLinkButtonDown = (e: React.PointerEvent): void => {
         setupMoveUpEvents(this, e, this.onLinkButtonMoved, emptyFunction, action((e, doubleTap) => {
@@ -80,37 +114,7 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                     DocumentLinksButton.StartLink = this.props.View.props.Document;
                     DocumentLinksButton.StartLinkView = this.props.View;
                 }
-            } else if (!this.props.InMenu) {
-                if (doubleTap) {
-                    const rootDoc = this.props.View.rootDoc;
-                    const docid = Doc.CurrentUserEmail + Doc.GetProto(rootDoc)[Id] + "-pivotish";
-                    DocServer.GetRefField(docid).then(async docx => {
-                        const rootAlias = () => {
-                            const rootAlias = Doc.MakeAlias(rootDoc);
-                            rootAlias.x = rootAlias.y = 0;
-                            return rootAlias;
-                        };
-                        let wid = rootDoc[WidthSym]();
-                        const target = ((docx instanceof Doc) && docx) || Docs.Create.FreeformDocument([rootAlias()], { title: this.props.View.Document.title + "-pivot", _width: 500, _height: 500, }, docid);
-                        const docs = await DocListCastAsync(Doc.GetProto(target).data);
-                        if (!target.pivotFocusish) (Doc.GetProto(target).pivotFocusish = target);
-                        DocListCast(rootDoc.links).forEach(link => {
-                            const other = LinkManager.getOppositeAnchor(link, rootDoc);
-                            const otherdoc = !other ? undefined : other.annotationOn ? Cast(other.annotationOn, Doc, null) : other;
-                            if (otherdoc && !docs?.some(d => Doc.AreProtosEqual(d, otherdoc))) {
-                                const alias = Doc.MakeAlias(otherdoc);
-                                alias.x = wid;
-                                alias.y = 0;
-                                alias._lockedPosition = false;
-                                wid += otherdoc[WidthSym]();
-                                Doc.AddDocToList(Doc.GetProto(target), "data", alias);
-                            }
-                        });
-                        LightboxView.SetLightboxDoc(target);
-                    });
-                }
-                else DocumentLinksButton.LinkEditorDocView = this.props.View;
-            }
+            };
         }));
     }
 
@@ -126,7 +130,6 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                 DocumentLinksButton.StartLink = this.props.View.props.Document;
                 DocumentLinksButton.StartLinkView = this.props.View;
             }
-
             //action(() => Doc.BrushDoc(this.props.View.Document));
         } else if (!this.props.InMenu) {
             DocumentLinksButton.LinkEditorDocView = this.props.View;
@@ -247,17 +250,19 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
 
     /**
      * gets the JSX of the link button (btn used to start/complete links) OR the link-view button (btn on bottom left of each linked node)
+     * 
+     * todo:glr / anh seperate functionality such as onClick onPointerDown of link menu button
      */
     @computed get linkButtonInner() {
-        const btnDim = this.props.InMenu ? "20px" : "30px";
+        const btnDim = "30px";
         const link = <img style={{ width: "22px", height: "16px" }} src={`/assets/${"link.png"}`} />;
-
+        const isActive = (DocumentLinksButton.StartLink === this.props.View.props.Document) && this.props.StartLink;
         return (!this.props.InMenu ?
-            <div className="documentLinksButton-cont" ref={this._linkButton}
+            <div className="documentLinksButton-cont"
                 style={{ left: this.props.Offset?.[0], top: this.props.Offset?.[1], right: this.props.Offset?.[2], bottom: this.props.Offset?.[3] }}
             >
                 <div className={"documentLinksButton"}
-                    onPointerDown={this.onLinkButtonDown} onClick={this.onLinkClick}
+                    onPointerDown={this.onLinkMenuOpen} onClick={this.onLinkClick}
                     style={{
                         backgroundColor: Colors.LIGHT_BLUE,
                         color: Colors.BLACK,
@@ -268,32 +273,23 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
                 </div>
             </div>
             :
-            <div className="documentLinksButton-menu">
+            <div className="documentLinksButton-menu" ref={this._linkButton}>
                 {this.props.InMenu && !this.props.StartLink && DocumentLinksButton.StartLink !== this.props.View.props.Document ? //if the origin node is not this node
                     <div className={"documentLinksButton-endLink"}
-                        style={{
-                            width: btnDim, height: btnDim,
-                            backgroundColor: DocumentLinksButton.StartLink ? "" : Colors.LIGHT_GRAY,
-                            opacity: DocumentLinksButton.StartLink ? "" : "50%",
-                            border: DocumentLinksButton.StartLink ? "" : "none",
-                            cursor: DocumentLinksButton.StartLink ? "pointer" : "default"
-                        }}
                         onPointerDown={DocumentLinksButton.StartLink && this.completeLink}
                         onClick={e => DocumentLinksButton.StartLink && DocumentLinksButton.finishLinkClick(e.clientX, e.clientY, DocumentLinksButton.StartLink, this.props.View.props.Document, true, this.props.View)}>
-                        {this.props.StartLink ?
-                            <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />
-                            : link}
+                        <FontAwesomeIcon className="documentdecorations-icon" icon="link" />
                     </div>
                     : (null)
                 }
                 {
-                    this.props.InMenu ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again
-                        <div className={'documentLinksButton' + (DocumentLinksButton.StartLink === this.props.View.props.Document && this.props.StartLink) ? '-startLink' : ''} onPointerDown={this.clearLinks} onClick={this.clearLinks} style={{ width: btnDim, height: btnDim }}>
-                            {this.props.StartLink ?
-                                <FontAwesomeIcon className="documentdecorations-icon" icon="link" size="sm" />
-                                : link}
+                    this.props.InMenu && this.props.StartLink ? //if link has been started from current node, then set behavior of link button to deactivate linking when clicked again
+                        <div className={`documentLinksButton ${isActive ? `startLink` : ``}`} onPointerDown={isActive ? undefined : this.onLinkButtonDown} onClick={isActive ? this.clearLinks : this.onLinkClick}>
+                            <FontAwesomeIcon className="documentdecorations-icon" icon="link" />
                         </div>
-                        : (null)}
+                        :
+                        (null)
+                }
             </div>
         )
     }
diff --git a/src/client/views/topbar/TopBar.scss b/src/client/views/topbar/TopBar.scss
index ebdf030e7..ac6ec9b30 100644
--- a/src/client/views/topbar/TopBar.scss
+++ b/src/client/views/topbar/TopBar.scss
@@ -23,6 +23,7 @@
         .topBar-icon {
             cursor: pointer;
             font-size: 12px;
+            font-family: 'Roboto';
             width: fit-content;
             display: flex;
             justify-content: center;
@@ -91,7 +92,7 @@
             gap: 5px;
 
             .topBar-icon:hover {
-                background-color: $logout-red;
+                background-color: $close-red;
             }
 
             .topbar-lozenge-user,
diff --git a/src/client/views/topbar/TopBar.tsx b/src/client/views/topbar/TopBar.tsx
index bd9935333..05edb975c 100644
--- a/src/client/views/topbar/TopBar.tsx
+++ b/src/client/views/topbar/TopBar.tsx
@@ -12,7 +12,6 @@ import { Borders, Colors } from "../global/globalEnums";
 import "./TopBar.scss";
 
 /**
- * REACT TYPE: FUNCTIONAL
  * ABOUT: This is the topbar in Dash, which included the current Dashboard as well as access to information on the user
  * and settings and help buttons. Future scope for this bar is to include the collaborators that are on the same Dashboard. 
  */
-- 
cgit v1.2.3-70-g09d2