andy's UI changes

4 files changed, 14 insertions, 7 deletions

diff --git a/src/client/views/linking/LinkMenu.scss b/src/client/views/linking/LinkMenu.scss
index 4b9f5641a..b0c729cda 100644
--- a/src/client/views/linking/LinkMenu.scss
+++ b/src/client/views/linking/LinkMenu.scss
@@ -3,6 +3,7 @@
 .linkMenu {
     width: 100%;
     height: auto;
+    border: 1px solid black;
 
     &:hover {
         width: calc(auto + 26px);
@@ -10,11 +11,12 @@
 }
 
 .linkMenu-list {
+    border: 1px solid black;
     max-height: 200px;
     overflow-y: scroll;
     position: absolute;
     z-index: 10;
-    background: $link-color;
+    background: white;
     min-width: 150px;
     border-radius: 5px;
     padding-top: 6.5px;
diff --git a/src/client/views/linking/LinkMenuItem.scss b/src/client/views/linking/LinkMenuItem.scss
index 7fecc2820..67bf71fb9 100644
--- a/src/client/views/linking/LinkMenuItem.scss
+++ b/src/client/views/linking/LinkMenuItem.scss
@@ -16,7 +16,7 @@
 
             .linkMenu-destination-title {
                 text-decoration: none;
-                color: rgb(46, 82, 160);
+                color: rgb(85, 120, 196);
                 font-size: 14px;
                 padding-bottom: 2px;
             }
@@ -62,8 +62,9 @@
 
             .linkMenu-destination-title {
                 text-decoration: underline;
-                color: rgb(15, 57, 148);
-                display: inline;
+                color: rgb(60, 90, 156);
+                //display: inline;
+                text-overflow: break;
             }
 
             &.expand-two p {
diff --git a/src/client/views/linking/LinkMenuItem.tsx b/src/client/views/linking/LinkMenuItem.tsx
index 9f6b47375..bd4024902 100644
--- a/src/client/views/linking/LinkMenuItem.tsx
+++ b/src/client/views/linking/LinkMenuItem.tsx
@@ -201,7 +201,7 @@ export class LinkMenuItem extends React.Component<LinkMenuItemProps> {
                                 <FontAwesomeIcon className="fa-icon" icon={this._showMore ? "chevron-up" : "chevron-down"} size="sm" /></div> : <></>}
 
                             <div title="Edit link" className="button" ref={this._editRef} onPointerDown={this.onEdit}>
-                                <FontAwesomeIcon className="fa-icon" icon="pencil-alt" size="sm" /></div>
+                                <FontAwesomeIcon className="fa-icon" icon="edit" size="sm" /></div>
                             <div title="Delete link" className="button" onPointerDown={this.deleteLink}>
                                 <FontAwesomeIcon className="fa-icon" icon="trash" size="sm" /></div>
                             {/* <div title="Follow link" className="button" onPointerDown={this.followDefault} onContextMenu={this.onContextMenu}>
diff --git a/src/client/views/nodes/DocumentLinksButton.tsx b/src/client/views/nodes/DocumentLinksButton.tsx
index 544f5fd7f..7fb447cab 100644
--- a/src/client/views/nodes/DocumentLinksButton.tsx
+++ b/src/client/views/nodes/DocumentLinksButton.tsx
@@ -146,10 +146,14 @@ export class DocumentLinksButton extends React.Component<DocumentLinksButtonProp
     @computed
     get linkButton() {
         const links = DocListCast(this.props.View.props.Document.links);
+
+        const title = this.props.InMenu ? "Drag or tap to create links" : "Tap to view links";
+
         return (!links.length || links[0].hidden) && !this.props.AlwaysOn ? (null) :
-            <div title="Drag(create link) Tap(view links)" ref={this._linkButton} style={{ minWidth: 20, minHeight: 20, position: "absolute", left: this.props.Offset?.[0] }}>
+            <div title={title} ref={this._linkButton} style={{ minWidth: 20, minHeight: 20, position: "absolute", left: this.props.Offset?.[0] }}>
                 <div className={"documentLinksButton"} style={{
-                    backgroundColor: DocumentLinksButton.StartLink ? "transparent" : "",
+                    backgroundColor: DocumentLinksButton.StartLink ? "transparent" : this.props.InMenu ? "black" : "",
+                    color: this.props.InMenu ? "white" : "black",
                     width: this.props.InMenu ? "20px" : "30px", height: this.props.InMenu ? "20px" : "30px", fontWeight: "bold"
                 }}
                     onPointerDown={this.onLinkButtonDown} onClick={this.onLinkClick}