[NgramsTree] some styling fixes to context menu

dist/styles/context-menu.css

 .context-menu {
-  display: block;
-  position: fixed;
-  z-index: 9999;
-  background: #fff;
-  border: 1px solid #000;
-  border-radius: 3px;
-  padding: 0;
+    position : absolute;
+    left : 96px;
+    top:-64px;
+    background-color: white;
+    z-index: 1000;
+
 }
-.context-menu-items {
-  display: block;
-  position: relative;
-  margin: 0;
-  padding: 0;
-}
-.context-menu-item {
-  display: block;
-  margin: 10px;
-  text-align: center;
-  margin: 0;
-  padding: 0;
-  cursor: pointer;
-}
-.context-menu-item a {
-  display: block;
-  padding: 10px 20px;
-  text-align: center;
-  font-size: 16px;
-  height: 100%;
+.context-menu a.list-group-item {
+    cursor: pointer;
 }
+
 .search-bar-container {
   margin-top: 11px;
   text-align: center;

src/Gargantext/Components/Annotation/Menu.purs

@@ -50,5 +50,5 @@ addToList {menuType, setList} t = Just $ CM.contextMenuItem [ link ]
     link = HTML.a { onClick: click, className: className } [ HTML.text (label menuType) ]
     label NewNgram = "Add to " <> termListName t
     label SetTermListItem = "Change to" <> termListName t
-    className = termClass t
+    className = "list-group-item " <> (termClass t)
     click = mkEffectFn1 $ \_ -> setList t

src/Gargantext/Components/ContextMenu/ContextMenu.purs

@@ -19,7 +19,7 @@ import DOM.Simple.Document as Document
 import DOM.Simple.Types ( DOMRect )
 import Effect (Effect)
 import Effect.Uncurried ( mkEffectFn1 )
-import FFI.Simple ( (...), (..), delay )
+import FFI.Simple ( (...), (..), (.=), delay )
 import Reactix as R
 import Reactix.DOM.HTML as HTML
 import Reactix.SyntheticEvent as E
@@ -47,10 +47,17 @@ contextMenuCpt = R.hooksComponent "ContextMenu" cpt
           (toMaybe $ R.readRef root)
         pure $ \_ -> pure unit
       R.useLayoutEffect2 root rect (contextMenuEffect menu.setMenu root)
-      let cs = [ HTML.ul { className: "context-menu-items" } children ]
+      let cs = [
+            HTML.div { className: "popover-content" }
+            [ HTML.div { className: "panel panel-default" }
+              [ HTML.ul { className: "list-group" }
+                children
+              ]
+            ]
+      ]
       pure $ R.createPortal [ elems root menu rect $ cs ] host
-    elems ref menu (Just rect) = HTML.nav { ref , className: "context-menu", style: position menu rect}
-    elems ref _ _ = HTML.nav { ref, className: "context-menu" }
+    elems ref menu (Just rect) = HTML.div (({ ref , className: "context-menu", style: position menu rect} .= "data-toggle" $ "popover") .= "data-placement" $ "right")
+    elems ref _ _ = HTML.div (({ ref, className: "context-menu" } .= "data-toggle" $ "popover") .= "data-placement" $ "right")
 
 contextMenuEffect
   :: forall t
@@ -68,7 +75,7 @@ contextMenuEffect setMenu rootRef _ =
         DOM.removeEventListener document "click" onClick
         DOM.removeEventListener document "scroll" onScroll
     Nothing -> pure $ \_ -> pure unit
-          
+
 documentClickHandler :: forall t. (Maybe t -> Effect Unit) -> DOM.Element -> Callback DE.MouseEvent
 documentClickHandler hide menu =
   R2.named "hideMenuOnClickOutside" $ callback $ \e ->