From b1a2871fcca57ce934b8613b315a08eede188669 Mon Sep 17 00:00:00 2001
From: Fawn <fangrui_tong@brown.edu>
Date: Thu, 20 Jun 2019 19:03:16 -0400
Subject: link menu styling

---
 src/client/views/nodes/LinkMenu.scss     | 13 +++++++++++++
 src/client/views/nodes/LinkMenu.tsx      |  6 +++---
 src/client/views/nodes/LinkMenuItem.scss | 30 +++++++++++++++++-------------
 3 files changed, 33 insertions(+), 16 deletions(-)

(limited to 'src')

diff --git a/src/client/views/nodes/LinkMenu.scss b/src/client/views/nodes/LinkMenu.scss
index 09a830c9e..d2e411c3d 100644
--- a/src/client/views/nodes/LinkMenu.scss
+++ b/src/client/views/nodes/LinkMenu.scss
@@ -10,5 +10,18 @@
     overflow-y: scroll;
 }
 
+.linkMenu-group {
+    margin-bottom: 10px;
+
+    &:last-child {
+        margin-bottom: 0;
+    }
+
+    .linkMenu-group-name {
+        border-bottom: 0.5px solid lightgray; 
+        margin-bottom: 4px;
+    }
+}
+
 
 
diff --git a/src/client/views/nodes/LinkMenu.tsx b/src/client/views/nodes/LinkMenu.tsx
index 7e4c15312..8aca130a5 100644
--- a/src/client/views/nodes/LinkMenu.tsx
+++ b/src/client/views/nodes/LinkMenu.tsx
@@ -31,9 +31,9 @@ export class LinkMenu extends React.Component<Props> {
         let linkItems: Array<JSX.Element> = [];
         groups.forEach((group, groupType) => {
             linkItems.push(
-                <div key={groupType} className="link-menu-group">
-                    <p className="link-menu-group-name">{groupType}:</p>
-                    <div className="link-menu-group-wrapper">
+                <div key={groupType} className="linkMenu-group">
+                    <p className="linkMenu-group-name">{groupType}:</p>
+                    <div className="linkMenu-group-wrapper">
                         {this.renderGroup(group, groupType)}
                     </div>
                 </div>
diff --git a/src/client/views/nodes/LinkMenuItem.scss b/src/client/views/nodes/LinkMenuItem.scss
index 16a1df331..25d167231 100644
--- a/src/client/views/nodes/LinkMenuItem.scss
+++ b/src/client/views/nodes/LinkMenuItem.scss
@@ -1,13 +1,19 @@
 @import "../globalCssVariables";
 .linkMenu-item {
-    border-top: 0.5px solid $main-accent; 
-    padding: 6px;
+    // border-top: 0.5px solid $main-accent; 
     position: relative;
     display: flex;
     font-size: 12px;
+    
 
     .link-name {
         position: relative;
+
+        p {
+            padding: 4px 6px;
+            line-height: 12px;
+            border-radius: 5px;
+        }
     }
 
     .linkMenu-item-content {
@@ -15,27 +21,25 @@
     }
     
     .link-metadata {
-        margin-top: 6px;
-        padding: 3px;
-        border-top: 0.5px solid $light-color-secondary;
-        .link-metadata-row {
-            margin-left: 6px;
-        }
+        padding: 0 10px 0 16px;
+        margin-bottom: 4px;
+        color: $main-accent;
+        font-style: italic;
+        font-size: 10.5px;
     }
 
-    &:last-child {
-        border-bottom: 0.5px solid $main-accent;
-    }
     &:hover {
         .linkMenu-item-buttons {
             display: flex;
         }
         .linkMenu-item-content {
             &.expand-two p {
-                width: calc(100% - 46px);
+                width: calc(100% - 52px);
+                background-color: lightgray;
             }
             &.expand-three p {
-                width: calc(100% - 78px);
+                width: calc(100% - 84px);
+                background-color: lightgray;
             }
         }
     }
-- 
cgit v1.2.3-70-g09d2