1 files changed, 19 insertions, 2 deletions
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">