>>> continue

dist/styles/bootstrap-darkster.css

@@ -9025,21 +9025,24 @@ select.form-control {
   font-family: "Comfortaa";
 }
 
-.ngrams-tree-loaded-node--child::before, .ngrams-tree-loaded-node--subchild::before {
+.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
   color: #6C757D;
   font-size: 11px;
   margin-right: 4px;
 }
-.right-handed .ngrams-tree-loaded-node--child::before, .right-handed .ngrams-tree-loaded-node--subchild::before {
+.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
   content: "└";
 }
 
-.left-handed .ngrams-tree-loaded-node--child::before, .left-handed .ngrams-tree-loaded-node--subchild::before {
+.left-handed .ngrams-tree-loaded-node--first-child::before, .left-handed .ngrams-tree-loaded-node--grand-child::before {
   content: "┘";
 }
 
-.ngrams-tree-loaded-node--subchild {
-  padding-left: 13px;
+.ngrams-tree-loaded-node--first-child {
+  margin-left: -2px;
+}
+.ngrams-tree-loaded-node--grand-child {
+  margin-left: 13px;
 }
 
 .annotation-run {

dist/styles/bootstrap-default.css

@@ -8977,21 +8977,24 @@ select.form-control {
   font-weight: bold;
 }
 
-.ngrams-tree-loaded-node--child::before, .ngrams-tree-loaded-node--subchild::before {
+.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
   color: #CED4DA;
   font-size: 11px;
   margin-right: 4px;
 }
-.right-handed .ngrams-tree-loaded-node--child::before, .right-handed .ngrams-tree-loaded-node--subchild::before {
+.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
   content: "└";
 }
 
-.left-handed .ngrams-tree-loaded-node--child::before, .left-handed .ngrams-tree-loaded-node--subchild::before {
+.left-handed .ngrams-tree-loaded-node--first-child::before, .left-handed .ngrams-tree-loaded-node--grand-child::before {
   content: "┘";
 }
 
-.ngrams-tree-loaded-node--subchild {
-  padding-left: 13px;
+.ngrams-tree-loaded-node--first-child {
+  margin-left: -2px;
+}
+.ngrams-tree-loaded-node--grand-child {
+  margin-left: 13px;
 }
 
 .annotation-run {

dist/styles/bootstrap-greyson.css

@@ -8734,21 +8734,24 @@ select.form-control {
   font-family: "Oswald";
 }
 
-.ngrams-tree-loaded-node--child::before, .ngrams-tree-loaded-node--subchild::before {
+.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
   color: #CED4DA;
   font-size: 11px;
   margin-right: 4px;
 }
-.right-handed .ngrams-tree-loaded-node--child::before, .right-handed .ngrams-tree-loaded-node--subchild::before {
+.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
   content: "└";
 }
 
-.left-handed .ngrams-tree-loaded-node--child::before, .left-handed .ngrams-tree-loaded-node--subchild::before {
+.left-handed .ngrams-tree-loaded-node--first-child::before, .left-handed .ngrams-tree-loaded-node--grand-child::before {
   content: "┘";
 }
 
-.ngrams-tree-loaded-node--subchild {
-  padding-left: 13px;
+.ngrams-tree-loaded-node--first-child {
+  margin-left: -2px;
+}
+.ngrams-tree-loaded-node--grand-child {
+  margin-left: 13px;
 }
 
 .annotation-run {

dist/styles/bootstrap-herbie.css

@@ -8982,21 +8982,24 @@ select.form-control {
   font-family: "Crete Round";
 }
 
-.ngrams-tree-loaded-node--child::before, .ngrams-tree-loaded-node--subchild::before {
+.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
   color: #CED4DA;
   font-size: 11px;
   margin-right: 4px;
 }
-.right-handed .ngrams-tree-loaded-node--child::before, .right-handed .ngrams-tree-loaded-node--subchild::before {
+.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
   content: "└";
 }
 
-.left-handed .ngrams-tree-loaded-node--child::before, .left-handed .ngrams-tree-loaded-node--subchild::before {
+.left-handed .ngrams-tree-loaded-node--first-child::before, .left-handed .ngrams-tree-loaded-node--grand-child::before {
   content: "┘";
 }
 
-.ngrams-tree-loaded-node--subchild {
-  padding-left: 13px;
+.ngrams-tree-loaded-node--first-child {
+  margin-left: -2px;
+}
+.ngrams-tree-loaded-node--grand-child {
+  margin-left: 13px;
 }
 
 .annotation-run {

dist/styles/bootstrap-monotony.css

@@ -8983,21 +8983,24 @@ select.form-control {
   font-family: "Open Sans";
 }
 
-.ngrams-tree-loaded-node--child::before, .ngrams-tree-loaded-node--subchild::before {
+.ngrams-tree-loaded-node--first-child::before, .ngrams-tree-loaded-node--grand-child::before {
   color: #CED4DA;
   font-size: 11px;
   margin-right: 4px;
 }
-.right-handed .ngrams-tree-loaded-node--child::before, .right-handed .ngrams-tree-loaded-node--subchild::before {
+.right-handed .ngrams-tree-loaded-node--first-child::before, .right-handed .ngrams-tree-loaded-node--grand-child::before {
   content: "└";
 }
 
-.left-handed .ngrams-tree-loaded-node--child::before, .left-handed .ngrams-tree-loaded-node--subchild::before {
+.left-handed .ngrams-tree-loaded-node--first-child::before, .left-handed .ngrams-tree-loaded-node--grand-child::before {
   content: "┘";
 }
 
-.ngrams-tree-loaded-node--subchild {
-  padding-left: 13px;
+.ngrams-tree-loaded-node--first-child {
+  margin-left: -2px;
+}
+.ngrams-tree-loaded-node--grand-child {
+  margin-left: 13px;
 }
 
 .annotation-run {

src/Gargantext/Components/NgramsTable/Tree.purs

@@ -15,7 +15,7 @@ import Data.Set as Set
 import Effect (Effect)
 import Effect.Aff (Aff)
 import Gargantext.Components.Bootstrap as B
-import Gargantext.Components.Bootstrap.Types (Variant(..))
+import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Variant(..))
 import Gargantext.Components.Table as Tbl
 import Gargantext.Config.REST (logRESTError)
 import Gargantext.Core.NgramsTable.Functions (applyNgramsPatches, setTermListA, tablePatchHasNgrams)
@@ -132,10 +132,10 @@ treeLoadedCpt = here.component "treeLoaded" cpt where
       { className: intercalate " "
           [ "ngrams-tree-loaded-node"
           , ngramsDepth.depth == 1 ?
-              "ngrams-tree-loaded-node--child" $
+              "ngrams-tree-loaded-node--first-child" $
               ""
           , ngramsDepth.depth > 1 ?
-              "ngrams-tree-loaded-node--subchild" $
+              "ngrams-tree-loaded-node--grand-child" $
               ""
           ]
       }
@@ -210,9 +210,18 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
       isEditing' <- T.useLive T.unequal isEditing
 
       pure $ Tbl.makeRow
-        [ H.div {}
-          [ H.span { className: "fa fa-eye-slash"
-                   , on: { click: onClick } } []
+        [
+          H.div
+          { className: "text-center"
+          , style: { marginTop: "6px" }
+          }
+          [
+            B.iconButton
+            { name: "eye-slash"
+            , status: Disabled -- see `onClick` behavior
+            , callback: onClick
+            , className: ""
+            }
           ]
         , selected
         , checkbox GT.MapTerm
@@ -244,7 +253,10 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
                 }
               ]
           )
-        , H.text $ show (ngramsElement ^. _NgramsElement <<< _occurrences)
+        ,
+          B.wad'
+          [ "pl-3" ] $
+          show (ngramsElement ^. _NgramsElement <<< _occurrences)
       ]
       where
         ngramsDepth = { ngrams, depth: 0 }
@@ -277,21 +289,42 @@ renderNgramsItemCpt = here.component "renderNgramsItem" cpt
           -- | ngramsTransient = const Nothing
           -- | otherwise       = Just <<< dispatch <<< cycleTermListItem <<< view _ngrams
         selected    =
-          H.input { checked: Set.member ngrams ngramsSelection
-                  , className: "checkbox"
-                  , on: { change: const $ dispatch $ ToggleSelect ngrams }
-                  , type: "checkbox"
-                  }
+          B.wad
+          [ "text-center" ]
+          [
+            H.input
+            { checked: Set.member ngrams ngramsSelection
+            , className: "checkbox"
+            , on: { change: const $ dispatch $ ToggleSelect ngrams }
+            , type: "checkbox"
+            , style:
+                { cursor: "pointer"
+                , marginTop: "6px"
+                }
+            }
+          ]
+
         checkbox termList' =
           let chkd = termList == termList'
               termList'' = if chkd then GT.CandidateTerm else termList'
           in
-          H.input { checked: chkd
-                  , className: "checkbox"
-                  , on: { change: const $ dispatch $ CoreAction $
-                          setTermListA ngrams (replace termList termList'') }
-                  , readOnly: ngramsTransient
-                  , type: "checkbox" }
+            B.wad
+            [ "text-center" ]
+            [
+              H.input
+              { checked: chkd
+              , className: "checkbox"
+              , on: { change: const $ dispatch $ CoreAction $
+                      setTermListA ngrams (replace termList termList'') }
+              , readOnly: ngramsTransient
+              , type: "checkbox"
+              , style:
+                  { cursor: "pointer"
+                  , marginTop: "6px"
+                  }
+              }
+            ]
+
         ngramsTransient = tablePatchHasNgrams ngramsLocalPatch ngrams
           -- ^ TODO here we do not look at ngramsNewElems, shall we?
         ngramsOpacity

src/sass/_legacy/_list.sass

@@ -130,21 +130,27 @@
 //////////////////////////////////////////////////
 
 .ngrams-tree-loaded-node
-  // empirical value where the child separator aligns with its parent text
-  $child-offset: 13px
 
-  &--child,
-  &--subchild
 
-    &::before
-      color: $gray-400
-      font-size: 11px
-      margin-right: space-x(0.5)
+  &--first-child::before,
+  &--grand-child::before
+    color: $gray-400
+    font-size: 11px
+    margin-right: space-x(0.5)
 
-      @include right-handed
-        content: "└"
-      @include left-handed
-        content: "┘"
+    @include right-handed
+      content: "└"
+    @include left-handed
+      content: "┘"
 
-  &--subchild
-    padding-left: $child-offset
+  &--first-child
+    // empirical value where the child separator aligns with its parent text
+    $child-offset: -2px
+
+    margin-left: -2px
+
+  &--grand-child
+    // empirical value where the child separator aligns with its parent text
+    $child-offset: 13px
+
+    margin-left: 13px