terms: some changes (btn, icons, wording)

dist/icons/forkawesome.css

@@ -2721,6 +2721,9 @@ THE SOFTWARE IS PROVIDED "AS IS", WITHOUT WARRANTY OF ANY KIND, EXPRESS OR IMPLI
 .fa-flower-7:before {
   content: "\e900";
 }
+.fa-plus-minus:before {
+  content: "\e901";
+}
 .sr-only {
   position: absolute;
   width: 1px;

dist/styles/bootstrap-darkster.css

@@ -6278,6 +6278,8 @@ h3 {
 .main-topbar .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__aside .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__aside .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
+.router__body .corpus-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
+.router__body .corpus-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__body .texts-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__body .texts-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .modal-dialog .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
@@ -6288,6 +6290,8 @@ h3 {
 .main-topbar .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__aside .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__aside .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
+.router__body .corpus-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
+.router__body .corpus-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__body .texts-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__body .texts-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .modal-dialog .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
@@ -6685,6 +6689,10 @@ a:focus {
   text-decoration: underline;
 }
 
+.text-small {
+  font-size: smaller;
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;
@@ -11246,6 +11254,10 @@ select.form-control {
   top: 1px;
   margin-left: 8px;
 }
+.ngrams-table-container__table td:nth-child(3) .tree-loaded-plus .fa-plus-minus:before {
+  font-size: 0.85rem;
+  line-height: 0.85rem;
+}
 .ngrams-table-container__table tr:hover .tree-loaded-plus {
   visibility: unset;
 }

dist/styles/bootstrap-default.css

@@ -6089,6 +6089,8 @@ h3 {
 .main-topbar .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__aside .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__aside .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
+.router__body .corpus-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
+.router__body .corpus-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__body .texts-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__body .texts-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .modal-dialog .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
@@ -6099,6 +6101,8 @@ h3 {
 .main-topbar .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__aside .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__aside .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
+.router__body .corpus-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
+.router__body .corpus-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__body .texts-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__body .texts-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .modal-dialog .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
@@ -6495,6 +6499,10 @@ a:focus {
   text-decoration: underline;
 }
 
+.text-small {
+  font-size: smaller;
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;
@@ -11050,6 +11058,10 @@ select.form-control {
   top: 1px;
   margin-left: 8px;
 }
+.ngrams-table-container__table td:nth-child(3) .tree-loaded-plus .fa-plus-minus:before {
+  font-size: 0.85rem;
+  line-height: 0.85rem;
+}
 .ngrams-table-container__table tr:hover .tree-loaded-plus {
   visibility: unset;
 }

dist/styles/bootstrap-greyson.css

@@ -5844,6 +5844,8 @@ h3 {
 .main-topbar .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__aside .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__aside .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
+.router__body .corpus-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
+.router__body .corpus-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__body .texts-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__body .texts-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .modal-dialog .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
@@ -5854,6 +5856,8 @@ h3 {
 .main-topbar .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__aside .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__aside .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
+.router__body .corpus-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
+.router__body .corpus-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__body .texts-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__body .texts-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .modal-dialog .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
@@ -6251,6 +6255,10 @@ a:focus {
   text-decoration: underline;
 }
 
+.text-small {
+  font-size: smaller;
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;
@@ -10812,6 +10820,10 @@ select.form-control {
   top: 1px;
   margin-left: 8px;
 }
+.ngrams-table-container__table td:nth-child(3) .tree-loaded-plus .fa-plus-minus:before {
+  font-size: 0.85rem;
+  line-height: 0.85rem;
+}
 .ngrams-table-container__table tr:hover .tree-loaded-plus {
   visibility: unset;
 }

dist/styles/bootstrap-herbie.css

@@ -6092,6 +6092,8 @@ h3 {
 .main-topbar .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__aside .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__aside .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
+.router__body .corpus-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
+.router__body .corpus-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__body .texts-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__body .texts-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .modal-dialog .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
@@ -6102,6 +6104,8 @@ h3 {
 .main-topbar .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__aside .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__aside .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
+.router__body .corpus-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
+.router__body .corpus-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__body .texts-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__body .texts-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .modal-dialog .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
@@ -6499,6 +6503,10 @@ a:focus {
   text-decoration: underline;
 }
 
+.text-small {
+  font-size: smaller;
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;
@@ -11060,6 +11068,10 @@ select.form-control {
   top: 1px;
   margin-left: 8px;
 }
+.ngrams-table-container__table td:nth-child(3) .tree-loaded-plus .fa-plus-minus:before {
+  font-size: 0.85rem;
+  line-height: 0.85rem;
+}
 .ngrams-table-container__table tr:hover .tree-loaded-plus {
   visibility: unset;
 }

dist/styles/bootstrap-monotony.css

@@ -6093,6 +6093,8 @@ h3 {
 .main-topbar .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__aside .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__aside .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
+.router__body .corpus-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
+.router__body .corpus-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__body .texts-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .router__body .texts-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
 .modal-dialog .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):before,
@@ -6103,6 +6105,8 @@ h3 {
 .main-topbar .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__aside .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__aside .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
+.router__body .corpus-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
+.router__body .corpus-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__body .texts-layout .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .router__body .texts-layout .fa:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
 .modal-dialog .b-icon:not(.fa-check-circle):not(.fa-exclamation-circle):not(.fa-circle):not(.fa-times):hover:before,
@@ -6500,6 +6504,10 @@ a:focus {
   text-decoration: underline;
 }
 
+.text-small {
+  font-size: smaller;
+}
+
 @keyframes fade-in {
   from {
     opacity: 0;
@@ -11061,6 +11069,10 @@ select.form-control {
   top: 1px;
   margin-left: 8px;
 }
+.ngrams-table-container__table td:nth-child(3) .tree-loaded-plus .fa-plus-minus:before {
+  font-size: 0.85rem;
+  line-height: 0.85rem;
+}
 .ngrams-table-container__table tr:hover .tree-loaded-plus {
   visibility: unset;
 }

src/Gargantext/Components/NgramsTable.purs

@@ -929,7 +929,7 @@ ngramsTreeEditRealCpt = here.component "ngramsTreeEditReal" cpt where
         { className: "card-header" }
         [
           B.icon
-          { name: "pencil-square-o"
+          { name: "plus-minus"
           }
         ,
           B.wad_
@@ -961,15 +961,33 @@ ngramsTreeEditRealCpt = here.component "ngramsTreeEditReal" cpt where
             , callback: onCancelClick --(const $ dispatch ClearTreeEdit)}
             , size: SmallSize
             }
-            [ H.text "Cancel" ]
+            [ H.span { className: "fa fa-ban" } []
+            , H.span { className: "mx-1" } [
+                H.text "Cancel"
+              ]
+            ]
           ,
             B.button
             { variant: ButtonVariant Primary
             , callback: onSaveClick --(const $ dispatch AddTermChildren)}
             , size: SmallSize
             }
-            [ H.text "Save" ]
+            [ H.span { className: "fa fa-stack-overflow" } []
+            , H.span { className: "mx-1" } [
+                H.text "Add changes"
+              ]
+            ]
+          ]
+        ,
+          H.div { className: "text-small mt-1" }
+          [
+            H.p { className: "text-info text-small" }
+            [
+              H.div { className: "font-weight-bold" } [ H.text "Note:" ]
+            , H.text "don't forget to save changes (sync) on the list page"
+            ]
           ]
+
         ]
       ]
       -- | Helpers

src/Gargantext/Components/NgramsTable/SyncResetButton.purs

@@ -65,7 +65,11 @@ syncResetButtonsCpt = here.component "syncResetButtons" cpt
           , callback: resetClick
           , status: statusReset hasChanges synchronizing'
           }
-          [ H.text "Reset" ]
+          [ H.span { className: "fa fa-repeat" } []
+          , H.span { className: "mx-1" } [
+              H.text "Reset changes"
+            ]
+          ]
         ,
           B.wad_ [ "mr-1", "d-inline-block" ]
         ,
@@ -74,5 +78,10 @@ syncResetButtonsCpt = here.component "syncResetButtons" cpt
           , callback: synchronizeClick
           , status: statusSync hasChanges synchronizing'
           }
-          [ H.text "Save (Sync)" ]
+          [ H.span { className: "fa fa-floppy-o" } []
+          , H.span { className: "mx-1" } [
+              H.text "Save changes (sync)"
+            ]
+          ]
+          
         ]

src/Gargantext/Components/NgramsTable/Tree.purs

@@ -201,11 +201,12 @@ treeLoadedCpt = here.component "treeLoaded" cpt where
       edit effect =
         [
           B.iconButton
-          { name: "plus"
+          { name: "plus-minus"
           , className: "tree-loaded-plus"
           , variant: Secondary
           , callback: const effect
           , overlay: false
+          , title: "Combine and separate"
           }
         ]
       leaf = L.null ngramsChildren

src/Gargantext/Utils/Glyphicon.purs

@@ -548,6 +548,7 @@ glyphiconToCharCode = _toString <<< case _ of
   "plug" -> 0xf1e6
   "plus" -> 0xf067
   "plus-circle" -> 0xf055
+  "plus-minus" -> 0xe901
   "plus-square" -> 0xf0fe
   "plus-square-o" -> 0xf196
   "podcast" -> 0xf2ce

src/sass/_legacy/_list.sass

@@ -204,6 +204,10 @@
         top: $offset-y
         margin-left: space-x(1)
 
+        .fa-plus-minus:before
+          font-size: .85rem
+          line-height: .85rem
+
     tr:hover
 
       .tree-loaded-plus

src/sass/base/_typography.scss

@@ -34,3 +34,7 @@ a:active,
 a:focus {
   text-decoration: underline;
 }
+
+.text-small {
+  font-size: smaller;
+}
\ No newline at end of file

src/sass/components/_grouped.scss

@@ -250,6 +250,8 @@
 .main-topbar .fa,
 .router__aside .b-icon, 
 .router__aside .fa,
+.router__body .corpus-layout .b-icon,
+.router__body .corpus-layout .fa,
 .router__body .texts-layout .b-icon,
 .router__body .texts-layout .fa,
 .modal-dialog .b-icon,