added tooltips

5 files changed, 29 insertions, 17 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index a9621efa5..9e3034829 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -80,11 +80,11 @@
 }
 
 .linkButton-empty {
-    height: 20px;
-    width: 20px;
+    height: 16px;
+    width: 16px;
     margin-top: 10px;
     border-radius: 50%;
-    opacity: 0.6;
+    opacity: 0.9;
     pointer-events: auto;
     background-color: $dark-color;
     color: $light-color;
@@ -95,11 +95,11 @@
 }
 
 .linkButton-nonempty {
-    height: 20px;
-    width: 20px;
+    height: 16px;
+    width: 16px;
     margin-top: 10px;
     border-radius: 50%;
-    opacity: 0.6;
+    opacity: 0.9;
     pointer-events: auto;
     background-color: $dark-color;
     color: $light-color;
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index b75644ecd..313b35ca8 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -234,7 +234,7 @@ export class DocumentDecorations extends React.Component {
                 <div id="documentDecorations-bottomResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <div id="documentDecorations-bottomRightResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
 
-                <div className="linkFlyout">{linkButton}</div>
+                <div title="View Links" className="linkFlyout">{linkButton}</div>
 
             </div >
         )
diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss
index 00e5ebb3d..bdedbc103 100644
--- a/src/client/views/nodes/LinkBox.scss
+++ b/src/client/views/nodes/LinkBox.scss
@@ -1,3 +1,4 @@
+@import "../global_variables";
 .link-container {
     width: 100%;
     height: 30px;
@@ -29,11 +30,22 @@
 }
 
 .button {
-    height: 15px;
-    width: 15px;
-    margin: 8px 5px;
+    height: 16px;
+    width: 16px;
+    margin: 8px 4px;
     border-radius: 50%;
-    opacity: 0.6;
+    opacity: 0.9;
     pointer-events: auto;
-    background-color: #2B6091;
+    background-color: $dark-color;
+    color: $light-color;
+    text-transform: uppercase;
+    letter-spacing: 2px;
+    font-size: 75%;
+    transition: transform 0.2s;
+}
+
+.button:hover {
+    background: $main-accent;
+    transform: scale(1.05);
+    cursor: pointer;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 69df676ff..44b3dccb7 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -79,9 +79,9 @@ export class LinkBox extends React.Component<Props> {
                 </div>
 
                 <div className="button-container">
-                    <div className="button" onPointerDown={this.onViewButtonPressed}></div>
-                    <div className="button" onPointerDown={this.onEditButtonPressed}></div>
-                    <div className="button" onPointerDown={this.onDeleteButtonPressed}></div>
+                    <div title="Follow Link" className="button" onPointerDown={this.onViewButtonPressed}></div>
+                    <div title="Edit Link" className="button" onPointerDown={this.onEditButtonPressed}></div>
+                    <div title="Delete Link" className="button" onPointerDown={this.onDeleteButtonPressed}></div>
                 </div>
             </div>
         )
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 5c6b06d00..5eeb40772 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -39,8 +39,8 @@ export class LinkMenu extends React.Component<Props> {
                 <div id="linkMenu-container">
                     <input id="linkMenu-searchBar" type="text" placeholder="Search..."></input>
                     <div id="linkMenu-list">
-                        {this.renderLinkItems(linkTo, KeyStore.LinkedToDocs, "Source: ")}
-                        {this.renderLinkItems(linkFrom, KeyStore.LinkedFromDocs, "Destination: ")}
+                        {this.renderLinkItems(linkTo, KeyStore.LinkedToDocs, "Destination: ")}
+                        {this.renderLinkItems(linkFrom, KeyStore.LinkedFromDocs, "Source: ")}
                     </div>
                 </div>
             )