finished linking button styling

3 files changed, 39 insertions, 12 deletions

diff --git a/src/client/views/DocumentDecorations.scss b/src/client/views/DocumentDecorations.scss
index 9e3034829..5912d5901 100644
--- a/src/client/views/DocumentDecorations.scss
+++ b/src/client/views/DocumentDecorations.scss
@@ -95,8 +95,8 @@
 }
 
 .linkButton-nonempty {
-    height: 16px;
-    width: 16px;
+    height: 20px;
+    width: 20px;
     margin-top: 10px;
     border-radius: 50%;
     opacity: 0.9;
diff --git a/src/client/views/nodes/LinkBox.scss b/src/client/views/nodes/LinkBox.scss
index bdedbc103..5d5f782d2 100644
--- a/src/client/views/nodes/LinkBox.scss
+++ b/src/client/views/nodes/LinkBox.scss
@@ -1,14 +1,14 @@
 @import "../global_variables";
 .link-container {
     width: 100%;
-    height: 30px;
+    height: 35px;
     display: flex;
     flex-direction: row;
     border-top: 0.5px solid #bababa;
 }
 
 .info-container {
-    width: 60%;
+    width: 55%;
     padding-top: 5px;
     padding-left: 5px;
     display: flex;
@@ -24,14 +24,14 @@
 }
 
 .button-container {
-    width: 40%;
+    width: 45%;
     display: flex;
     flex-direction: row;
 }
 
 .button {
-    height: 16px;
-    width: 16px;
+    height: 20px;
+    width: 20px;
     margin: 8px 4px;
     border-radius: 50%;
     opacity: 0.9;
@@ -40,12 +40,26 @@
     color: $light-color;
     text-transform: uppercase;
     letter-spacing: 2px;
-    font-size: 75%;
+    font-size: 60%;
     transition: transform 0.2s;
 }
 
 .button:hover {
     background: $main-accent;
-    transform: scale(1.05);
     cursor: pointer;
+}
+
+.fa-icon-view {
+    margin-left: 3px;
+    margin-top: 5px;
+}
+
+.fa-icon-edit {
+    margin-left: 5px;
+    margin-top: 5px;
+}
+
+.fa-icon-delete {
+    margin-left: 6px;
+    margin-top: 5px;
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkBox.tsx b/src/client/views/nodes/LinkBox.tsx
index 44b3dccb7..430c1b694 100644
--- a/src/client/views/nodes/LinkBox.tsx
+++ b/src/client/views/nodes/LinkBox.tsx
@@ -11,6 +11,16 @@ import { ListField } from "../../../fields/ListField";
 import { DocumentManager } from "../../util/DocumentManager";
 import { LinkEditor } from "./LinkEditor";
 import { CollectionDockingView } from "../collections/CollectionDockingView";
+import { library } from '@fortawesome/fontawesome-svg-core';
+import { FontAwesomeIcon } from '@fortawesome/react-fontawesome';
+import { faEye } from '@fortawesome/free-solid-svg-icons';
+import { faEdit } from '@fortawesome/free-solid-svg-icons';
+import { faTimes } from '@fortawesome/free-solid-svg-icons';
+
+
+library.add(faEye);
+library.add(faEdit);
+library.add(faTimes);
 
 interface Props {
     linkDoc: Document;
@@ -79,9 +89,12 @@ export class LinkBox extends React.Component<Props> {
                 </div>
 
                 <div className="button-container">
-                    <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 title="Follow Link" className="button" onPointerDown={this.onViewButtonPressed}>
+                        <FontAwesomeIcon className="fa-icon-view" icon="eye" size="sm" /></div>
+                    <div title="Edit Link" className="button" onPointerDown={this.onEditButtonPressed}>
+                        <FontAwesomeIcon className="fa-icon-edit" icon="edit" size="sm" /></div>
+                    <div title="Delete Link" className="button" onPointerDown={this.onDeleteButtonPressed}>
+                        <FontAwesomeIcon className="fa-icon-delete" icon="times" size="sm" /></div>
                 </div>
             </div>
         )