slow link button fixed

2 files changed, 45 insertions, 30 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index c4e4aed8e..ecc738076 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -3,7 +3,7 @@
 #documentDecorations-container {
     position: absolute;
     top: 0;
-    left:0;
+    left: 0;
     display: grid;
     z-index: 1000;
     grid-template-rows: 20px 8px 1fr 8px;
@@ -11,7 +11,7 @@
     pointer-events: none;
 
     #documentDecorations-centerCont {
-        grid-column:3;
+        grid-column: 3;
         background: none;
     }
 
@@ -36,8 +36,8 @@
     #documentDecorations-bottomRightResizer,
     #documentDecorations-topRightResizer,
     #documentDecorations-rightResizer {
-        grid-column-start:5;
-        grid-column-end:7;
+        grid-column-start: 5;
+        grid-column-end: 7;
     }
 
     #documentDecorations-topLeftResizer,
@@ -59,31 +59,34 @@
     #documentDecorations-rightResizer {
         cursor: ew-resize;
     }
-    .title{
-        width:100%;
+
+    .title {
+        width: 100%;
         background: lightblue;
-        grid-column-start:3;
+        grid-column-start: 3;
         grid-column-end: 4;
         pointer-events: auto;
     }
 }
 
 .documentDecorations-closeButton {
-    background:$alt-accent;
+    background: $alt-accent;
     opacity: 0.8;
     grid-column-start: 4;
     grid-column-end: 6;
     pointer-events: all;
     text-align: center;
 }
+
 .documentDecorations-minimizeButton {
-    background:$alt-accent;
+    background: $alt-accent;
     opacity: 0.8;
     grid-column-start: 1;
     grid-column-end: 3;
     pointer-events: all;
     text-align: center;
 }
+
 .documentDecorations-background {
     background: lightblue;
     position: absolute;
@@ -121,10 +124,6 @@
 //         cursor: ew-resize;
 //     }
 // }
-.linkFlyout {
-    grid-column: 1/4;
-    margin-left: 25px;
-}
 
 .linkButton-empty:hover {
     background: $main-accent;
@@ -138,31 +137,35 @@
     cursor: pointer;
 }
 
+.link-button-container {
+    grid-column: 1/4;
+    width: auto;
+    height: auto;
+    display: flex;
+    flex-direction: row;
+}
+
 .linkButton-linker {
-    position:absolute;
-    bottom:0px;
-    left: 0px;
+    margin-left: 5px;
+    margin-top: 10px;
     height: 20px;
     width: 20px;
-    margin-top: 10px;
-    margin-right: 5px;
+    text-align: center;
     border-radius: 50%;
-    opacity: 0.9;
     pointer-events: auto;
     color: $dark-color;
     border: $dark-color 1px solid;
-    text-transform: uppercase;
-    letter-spacing: 2px;
-    font-size: 75%;
-    transition: transform 0.2s;
-    text-align: center;
-    display: flex;
-    justify-content: center;
-    align-items: center;
 }
+
+.linkButton-linker:hover {
+    cursor: pointer;
+    transform: scale(1.05);
+}
+
 .linkButton-tray {
     grid-column: 1/4;
 }
+
 .linkButton-empty {
     height: 20px;
     width: 20px;
@@ -199,4 +202,8 @@
     display: flex;
     justify-content: center;
     align-items: center;
+}
+
+.fa-icon-link {
+    margin-top: 3px;
 }
\ No newline at end of file
diff --git a/src/client/views/DocumentDecorations.tsx b/src/client/views/DocumentDecorations.tsx
index 28af46358..bb4437a6a 100644
--- a/src/client/views/DocumentDecorations.tsx
+++ b/src/client/views/DocumentDecorations.tsx
@@ -18,6 +18,11 @@ import { FieldWaiting } from "../../fields/Field";
 const higflyout = require("@hig/flyout");
 export const { anchorPoints } = higflyout;
 export const Flyout = higflyout.default;
+import { faLink } from '@fortawesome/free-solid-svg-icons';
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+
+library.add(faLink);
 
 @observer
 export class DocumentDecorations extends React.Component<{}, { value: string }> {
@@ -435,9 +440,12 @@ export class DocumentDecorations extends React.Component<{}, { value: string }>
                 <div id="documentDecorations-bottomLeftResizer" className="documentDecorations-resizer" onPointerDown={this.onPointerDown} onContextMenu={(e) => e.preventDefault()}></div>
                 <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 title="View Links" className="linkFlyout" ref={this._linkButton}> {linkButton}  </div>
-                <div className="linkButton-linker" ref={this._linkerButton} onPointerDown={this.onLinkerButtonDown}>∞</div>
+                <div className="link-button-container">
+                    <div title="View Links" className="linkFlyout" ref={this._linkButton}> {linkButton}  </div>
+                    <div className="linkButton-linker" ref={this._linkerButton} onPointerDown={this.onLinkerButtonDown}>
+                        <FontAwesomeIcon className="fa-icon-link" icon="link" size="sm" />
+                    </div>
+                </div>
             </div >
         </div>
         );