popin for a term

dist/styles/bootstrap-darkster.css

@@ -10450,7 +10450,7 @@ input[type=range]:-moz-focusring {
   line-height: 1.4;
 }
 .mainleaf--selected {
-  background-color: #212529;
+  background-color: #495057;
 }
 .mainleaf--selected .mainleaf__node-link a {
   color: #33A2FF;
@@ -10477,7 +10477,6 @@ input[type=range]:-moz-focusring {
 
 .mainleaf-selection-indicator {
   height: fit-content;
-  padding: 2px 0;
   top: 0;
   right: 0;
   width: 3px;
@@ -11432,6 +11431,7 @@ select.form-control {
 .side-panel .ngrams-doc-list .list-group .context-item-source {
   color: #CED4DA;
   font-variant-caps: small-caps;
+  font-size: 15px;
 }
 .side-panel .ngrams-doc-list .list-group .context-item-date {
   color: #CED4DA;

dist/styles/bootstrap-default.css

@@ -10255,7 +10255,7 @@ input[type=range]:-moz-focusring {
   line-height: 1.4;
 }
 .mainleaf--selected {
-  background-color: #F8F9FA;
+  background-color: #DEE2E6;
 }
 .mainleaf--selected .mainleaf__node-link a {
   color: #005a9a;
@@ -10282,7 +10282,6 @@ input[type=range]:-moz-focusring {
 
 .mainleaf-selection-indicator {
   height: fit-content;
-  padding: 2px 0;
   top: 0;
   right: 0;
   width: 3px;
@@ -11236,6 +11235,7 @@ select.form-control {
 .side-panel .ngrams-doc-list .list-group .context-item-source {
   color: #6C757D;
   font-variant-caps: small-caps;
+  font-size: 15px;
 }
 .side-panel .ngrams-doc-list .list-group .context-item-date {
   color: #6C757D;

dist/styles/bootstrap-greyson.css

@@ -10016,7 +10016,7 @@ input[type=range]:-moz-focusring {
   line-height: 1.4;
 }
 .mainleaf--selected {
-  background-color: #F8F9FA;
+  background-color: #DEE2E6;
 }
 .mainleaf--selected .mainleaf__node-link a {
   color: #2f3c48;
@@ -10043,7 +10043,6 @@ input[type=range]:-moz-focusring {
 
 .mainleaf-selection-indicator {
   height: fit-content;
-  padding: 2px 0;
   top: 0;
   right: 0;
   width: 3px;
@@ -10998,6 +10997,7 @@ select.form-control {
 .side-panel .ngrams-doc-list .list-group .context-item-source {
   color: #6C757D;
   font-variant-caps: small-caps;
+  font-size: 15px;
 }
 .side-panel .ngrams-doc-list .list-group .context-item-date {
   color: #6C757D;

dist/styles/bootstrap-herbie.css

@@ -10264,7 +10264,7 @@ input[type=range]:-moz-focusring {
   line-height: 1.4;
 }
 .mainleaf--selected {
-  background-color: #F8F9FA;
+  background-color: #DEE2E6;
 }
 .mainleaf--selected .mainleaf__node-link a {
   color: #083358;
@@ -10291,7 +10291,6 @@ input[type=range]:-moz-focusring {
 
 .mainleaf-selection-indicator {
   height: fit-content;
-  padding: 2px 0;
   top: 0;
   right: 0;
   width: 3px;
@@ -11246,6 +11245,7 @@ select.form-control {
 .side-panel .ngrams-doc-list .list-group .context-item-source {
   color: #6C757D;
   font-variant-caps: small-caps;
+  font-size: 15px;
 }
 .side-panel .ngrams-doc-list .list-group .context-item-date {
   color: #6C757D;

dist/styles/bootstrap-monotony.css

@@ -10265,7 +10265,7 @@ input[type=range]:-moz-focusring {
   line-height: 1.4;
 }
 .mainleaf--selected {
-  background-color: #F8F9FA;
+  background-color: #DEE2E6;
 }
 .mainleaf--selected .mainleaf__node-link a {
   color: #222222;
@@ -10292,7 +10292,6 @@ input[type=range]:-moz-focusring {
 
 .mainleaf-selection-indicator {
   height: fit-content;
-  padding: 2px 0;
   top: 0;
   right: 0;
   width: 3px;
@@ -11247,6 +11246,7 @@ select.form-control {
 .side-panel .ngrams-doc-list .list-group .context-item-source {
   color: #6C757D;
   font-variant-caps: small-caps;
+  font-size: 15px;
 }
 .side-panel .ngrams-doc-list .list-group .context-item-date {
   color: #6C757D;

src/Gargantext/Components/Nodes/Lists.purs

@@ -6,6 +6,7 @@ import Data.Maybe (Maybe(..), fromMaybe, maybe)
 import Effect (Effect)
 import Effect.Aff (launchAff_)
 import Gargantext.Components.App.Store (Boxes)
+import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Corpus.CodeSection (loadCorpusWithChild)
 import Gargantext.Components.GraphQL.Context as GQLCTX
 import Gargantext.Components.GraphQL.Endpoints (getContextsForNgrams)
@@ -130,14 +131,23 @@ sidePanelCpt = here.component "sidePanel" cpt
       let closeSidePanel _ = T.write_ GT.Closed sidePanelState
 
       pure $ H.div { style: mainStyle } [
-        H.div { className: "header" } [
-          H.span { className: "btn btn-danger"
-                 , on: { click: closeSidePanel } } [
-            H.span { className: "fa fa-times" } []
-          ]
+        H.div
+        { className: "lists-sidepanel__header" }
+        [
+          -- Close CTA
+          B.iconButton
+          { name: "times"
+          , callback: closeSidePanel
+          , className: "graph-sidebar__close"
+          }
         ]
-      , sidePanelNgramsContextView { session
+      , 
+        H.div
+        { className: "lists-sidepanel__body" }
+        [
+          sidePanelNgramsContextView { session
                                    , sidePanel } []
+        ]
       ]
 
 type SidePanelNgramsContextView =
@@ -157,11 +167,22 @@ sidePanelNgramsContextViewCpt = here.component "sidePanelNgramsContextView" cpt
       Just sidePanel' -> do
         let ngrams = maybe "" (\(NormNgramsTerm n) -> n) sidePanel'.mCurrentNgrams
 
-        pure $ H.div {} [ H.h3 {} [ H.text ngrams ]
-                        , ngramsDocList { mCorpusId: sidePanel'.mCorpusId
+        pure $ H.div {} 
+          [
+            H.div { className: "list-group-item border-0" }
+            [
+              H.div 
+              { className: "graph-selected-nodes__badge badge badge-info" } 
+              [ 
+                H.text ngrams 
+              ]
+            ]
+          , 
+            ngramsDocList { mCorpusId: sidePanel'.mCorpusId
                                         , mListId: sidePanel'.mListId
                                         , mNgrams: sidePanel'.mCurrentNgrams
-                                        , session } [] ]
+                                        , session } [] 
+          ]
 
 type NgramsDocListProps =
   ( mCorpusId :: Maybe GT.CorpusId
@@ -220,7 +241,7 @@ ngramsDocListLoadedCpt = here.component "ngramsDocListLoaded" cpt where
       , listId
       , ngrams
       , session } _ = do
-    pure $ H.div { className: "ngrams-doc-list" }
+    pure $ H.div { className: "ngrams-doc-list p-2" }
       [ H.ul { className: "list-group" } ((\item -> contextItem { corpusId
                                                                 , item
                                                                 , listId

src/sass/_legacy/_list.sass

@@ -331,6 +331,7 @@
       .context-item-source
         color: $gray-600
         font-variant-caps: small-caps
+        font-size: 15px
       .context-item-date
         color: $gray-600
         font-size: .85rem

src/sass/_legacy/_tree.sass

@@ -340,7 +340,7 @@ $node-popup-width: 544px
   //----------------------------
 
   &--selected
-    background-color: $gray-100
+    background-color: $gray-300
 
   &--selected &
 
@@ -391,7 +391,6 @@ $node-popup-width: 544px
   // "mainleaf" one
   @include virtual-space
   height: fit-content
-  padding: space-x(.25) 0
 
   top: 0
   right: 0