matched link group header background to color of relationship

3 files changed, 19 insertions, 4 deletions

diff --git a/src/client/views/linking/LinkEditor.tsx b/src/client/views/linking/LinkEditor.tsx
index 2d6a6942b..fba95cad2 100644
--- a/src/client/views/linking/LinkEditor.tsx
+++ b/src/client/views/linking/LinkEditor.tsx
@@ -115,7 +115,6 @@ export class LinkEditor extends React.Component<LinkEditorProps> {
     }
     toggleSearchIsActive = () => {
         this.searchIsActive = !this.searchIsActive;
-        console.log("toggle search to " + this.searchIsActive)
     }
 
     @action
diff --git a/src/client/views/linking/LinkMenuGroup.tsx b/src/client/views/linking/LinkMenuGroup.tsx
index c7586a467..cb6571f92 100644
--- a/src/client/views/linking/LinkMenuGroup.tsx
+++ b/src/client/views/linking/LinkMenuGroup.tsx
@@ -1,5 +1,5 @@
 import { observer } from "mobx-react";
-import { Doc } from "../../../fields/Doc";
+import { Doc, StrListCast } from "../../../fields/Doc";
 import { Id } from "../../../fields/FieldSymbols";
 import { Cast } from "../../../fields/Types";
 import { LinkManager } from "../../util/LinkManager";
@@ -20,6 +20,23 @@ interface LinkMenuGroupProps {
 export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
     private _menuRef = React.createRef<HTMLDivElement>();
 
+    getBackgroundColor = (): string => {
+        const linkRelationshipList = StrListCast(Doc.UserDoc().linkRelationshipList);
+        const linkColorList = StrListCast(Doc.UserDoc().linkColorList);
+        let color = "white";
+        // if this link's relationship property is not default "link", set its color
+        if (linkRelationshipList) {
+            const relationshipIndex = linkRelationshipList.indexOf(this.props.groupType);
+            const RGBcolor: string = linkColorList[relationshipIndex];
+            if (RGBcolor) {
+                //set opacity to 0.25 by modifiying the rgb string
+                color = RGBcolor.slice(0, RGBcolor.length - 1) + ", 0.25)";
+                console.log(color);
+            }
+        }
+        return color;
+    }
+
     render() {
         const set = new Set<Doc>(this.props.group);
         const groupItems = Array.from(set.keys()).map(linkDoc => {
@@ -39,7 +56,7 @@ export class LinkMenuGroup extends React.Component<LinkMenuGroupProps> {
 
         return (
             <div className="linkMenu-group" ref={this._menuRef}>
-                <div className="linkMenu-group-name">
+                <div className="linkMenu-group-name" style={{ background: this.getBackgroundColor() }}>
                     <p className={this.props.groupType === "*" || this.props.groupType === "" ? "" : "expand-one"}> {this.props.groupType}:</p>
                 </div>
                 <div className="linkMenu-group-wrapper">
diff --git a/src/client/views/linking/LinkRelationshipSearch.tsx b/src/client/views/linking/LinkRelationshipSearch.tsx
index bb128f746..8f83f0e6e 100644
--- a/src/client/views/linking/LinkRelationshipSearch.tsx
+++ b/src/client/views/linking/LinkRelationshipSearch.tsx
@@ -13,7 +13,6 @@ interface LinkRelationshipSearchProps {
 export class LinkRelationshipSearch extends React.Component<LinkRelationshipSearchProps> {
 
     handleResultClick = (e: React.MouseEvent) => {
-        console.log("click");
         const relationship = (e.target as HTMLParagraphElement).textContent;
         if (relationship) {
             this.props.handleRelationshipSearchChange(relationship)