updated styling on link editor

3 files changed, 24 insertions, 14 deletions

diff --git a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
index 301b769af..a1a222675 100644
--- a/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
+++ b/src/client/views/collections/collectionFreeForm/CollectionFreeFormLinkView.tsx
@@ -46,7 +46,8 @@ export class CollectionFreeFormLinkView extends React.Component<CollectionFreeFo
         let y2 = NumCast(b.y) + (BoolCast(b.isMinimized, false) ? 5 : NumCast(b.height) / NumCast(b.zoomBasis, 1) / 2);
         let text = "";
         this.props.LinkDocs.map(l => text += StrCast(l.title) + "(" + StrCast(l.linkDescription) + "), ");
-        text = text.substr(0, text.length - 2);
+        // text = text.substr(0, text.length - 2);
+        text = "";
         return (
             <>
                 <line key="linkLine" className="collectionfreeformlinkview-linkLine"
diff --git a/src/client/views/nodes/LinkEditor.scss b/src/client/views/nodes/LinkEditor.scss
index b56f3046a..df7bd6086 100644
--- a/src/client/views/nodes/LinkEditor.scss
+++ b/src/client/views/nodes/LinkEditor.scss
@@ -110,12 +110,14 @@
         flex-direction: column;
     }
     .linkEditor-option {
-        background-color: red;
+        background-color: $light-color-secondary;
         border: 1px solid $intermediate-color;
         border-top: 0;
+        padding: 3px;
         cursor: pointer;
         &:hover {
-            background-color:  $light-color-secondary;
+            background-color: $intermediate-color;
+            font-weight: bold;
         }
     }
 }
@@ -124,10 +126,10 @@
     height: 20px;
     display: flex;
     justify-content: space-between;
-    button {
-        width: 31%;
+    .linkEditor-groupOpts {
+        width: calc(33% - 3px);
         height: 20px;
-        margin-left: 6px;
+        // margin-left: 6px;
         padding: 0;
         font-size: 10px;
         &:first-child { // delete
@@ -137,4 +139,10 @@
             background-color: gray;
         }
     }
+    .linkEditor-groupOpts button {
+        width: 100%;
+        height: 20px;
+        font-size: 10px;
+        padding: 0;
+    }
 }
\ No newline at end of file
diff --git a/src/client/views/nodes/LinkEditor.tsx b/src/client/views/nodes/LinkEditor.tsx
index 8860ac582..bab87fc12 100644
--- a/src/client/views/nodes/LinkEditor.tsx
+++ b/src/client/views/nodes/LinkEditor.tsx
@@ -9,7 +9,7 @@ import { listSpec } from "../../../new_fields/Schema";
 import { LinkManager, LinkUtils } from "../../util/LinkManager";
 import { Docs } from "../../documents/Documents";
 import { Utils } from "../../../Utils";
-import { faArrowLeft, faEllipsisV } from '@fortawesome/free-solid-svg-icons';
+import { faArrowLeft, faEllipsisV, faTable } from '@fortawesome/free-solid-svg-icons';
 import { library } from "@fortawesome/fontawesome-svg-core";
 import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
 import { string } from "prop-types";
@@ -17,6 +17,7 @@ import { SetupDrag } from "../../util/DragManager";
 
 library.add(faArrowLeft);
 library.add(faEllipsisV);
+library.add(faTable);
 
 // this dropdown could be generalized
 @observer
@@ -316,11 +317,11 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
                     </div>
                     {this.renderMetadata(groupId)}
                     <div className="linkEditor-group-buttons">
-                        {groupDoc["type"] === "New Group" ? <button disabled={true} title="Add KVP">+</button> :
-                            <button onClick={() => this.addMetadata(StrCast(groupDoc.proto!.type))} title="Add KVP">+</button>}
-                        <button onClick={() => this.copyGroup(groupId, type)} title="Copy group to opposite anchor">↔</button>
-                        <button onClick={() => this.removeGroupFromLink(groupId, type)} title="Remove group from link">x</button>
-                        <button onClick={() => this.deleteGroup(groupId, type)} title="Delete group">xx</button>
+                        {groupDoc["type"] === "New Group" ? <button className="linkEditor-groupOpts" disabled={true} title="Add KVP">+</button> :
+                            <button className="linkEditor-groupOpts" onClick={() => this.addMetadata(StrCast(groupDoc.proto!.type))} title="Add KVP">+</button>}
+                        <button className="linkEditor-groupOpts" onClick={() => this.copyGroup(groupId, type)} title="Copy group to opposite anchor">↔</button>
+                        {/* <button className="linkEditor-groupOpts" onClick={() => this.removeGroupFromLink(groupId, type)} title="Remove group from link">x</button>
+                        <button className="linkEditor-groupOpts" onClick={() => this.deleteGroup(groupId, type)} title="Delete group">xx</button> */}
                         {this.viewGroupAsTable(groupId, type)}
                     </div>
                 </div>
@@ -338,9 +339,9 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
             let docs: Doc[] = LinkManager.Instance.findMetadataInGroup(groupType);
             let createTable = action(() => Docs.SchemaDocument(["anchor1", "anchor2", ...keys!], docs, { width: 200, height: 200, title: groupType + " table" }));
             let ref = React.createRef<HTMLDivElement>();
-            return <div ref={ref}><button onPointerDown={SetupDrag(ref, createTable)}>:)</button></div>
+            return <div className="linkEditor-groupOpts" ref={ref}><button onPointerDown={SetupDrag(ref, createTable)}><FontAwesomeIcon icon="table" size="sm" /></button></div>
         } else {
-            return <></>
+            return <button className="linkEditor-groupOpts" disabled><FontAwesomeIcon icon="table" size="sm" /></button>
         }
     }