Merge branch '709-node-corpus-import-file-dialog-improvements' into 'dev'

Resolve "[Node Corpus] Import file dialog improvements" and uniformize the node settings tabs Closes #709 See merge request !494

Merge branch '709-node-corpus-import-file-dialog-improvements' into 'dev'
Resolve "[Node Corpus] Import file dialog improvements" and uniformize the node settings tabs Closes #709 See merge request !494
2e43c474 · Przemyslaw Kaminski · 94083247 · 282dafcd · 2e43c474 · 2e43c474
Commit 2e43c474 authored 5 months ago by Przemyslaw Kaminski
42 changed files
--- a/bin/install
+++ b/bin/install
@@ -8,6 +8,7 @@
 # nix-shell --show-trace --option build-fallback true --run --extra-experimental-features nix-command 'bun install'
 # nix-shell --show-trace --option build-fallback true --run --extra-experimental-features nix-commandfix-bun
 # nix-shell --show-trace --option build-fallback true --run --extra-experimental-features nix-command build
+nix run --extra-experimental-features nix-command --extra-experimental-features flakes .#check-lint
 nix run --extra-experimental-features nix-command --extra-experimental-features flakes .#install
 nix run --extra-experimental-features nix-command --extra-experimental-features flakes .#build
 nix run --extra-experimental-features nix-command --extra-experimental-features flakes .#build-css

--- a/dist/index.html
+++ b/dist/index.html
@@ -7,7 +7,6 @@
        <!-- <link href="styles/bootstrap.min.css" rel="stylesheet"> -->
        <link id="bootstrap-css" href="styles/bootstrap-default.css" rel="stylesheet" />
        <link rel="stylesheet" type="text/css" href="styles/highlightjs-solarized-light.css" />
-        <style> * {margin: 0; padding: 0; list-style: none;} </style>
    </head>
    <body>
        <div id="app"></div>

--- a/dist/styles/bootstrap-darkster.css
+++ b/dist/styles/bootstrap-darkster.css
@@ -5927,6 +5927,7 @@ a.close.disabled {
  background-color: #fff;
  margin-left: 1.75rem;
  margin-right: 1.75rem;
+  max-width: 800px;
 }
 .b-modal__header {
  background-color: white;
@@ -6354,6 +6355,10 @@ a.close.disabled {
  border-radius: 50px;
 }

+details summary {
+  cursor: pointer;
+}
+
 .echarts-for-react {
  height: 300px;
 }
@@ -6390,7 +6395,7 @@ a:focus {
  outline: 0;
 }

-ul {
+ul, li, span {
  list-style: none;
 }

@@ -10457,72 +10462,7 @@ input[type=range]:-moz-focusring {
  padding-right: 20px;
 }

-.forest-tree-node-modal {
-  width: fit-content;
-  min-width: 544px;
-  max-width: 100vw;
-}
-
-.node-popup-tooltip .panel-actions {
-  font-size: 90%;
-  padding-left: 20px;
-}
-.node-popup-tooltip .panel-actions .b-icon {
-  margin-right: 8px;
-  font-size: 11px;
-}
-.node-popup-tooltip .panel-actions__almost-useable {
-  color: #f1a50e;
-}
-.node-popup-tooltip .panel-actions__development-in-progress {
-  color: #8b2823;
-}
-.node-popup-tooltip .panel-actions__ok-to-use {
-  color: #212529;
-  display: none;
-}
-.node-popup-tooltip .popup-container {
-  display: flex;
-  flex-direction: column;
-}
-.node-popup-tooltip .popup-container__header .b-wad .fa-pencil {
-  visibility: hidden;
-}
-.node-popup-tooltip .popup-container__header .b-wad:hover .fa-pencil {
-  visibility: visible;
-}
-.node-popup-tooltip .popup-container__body {
-  display: flex;
-  justify-content: center;
-  background-color: #181A1B;
-  padding: 40px 56px;
-  gap: 48px;
-}
-.node-popup-tooltip .popup-container__cta {
-  position: relative;
-}
-.node-popup-tooltip .popup-container__cta__button {
-  font-size: 18px;
-}
-.node-popup-tooltip .popup-container__cta__icon {
-  position: absolute;
-  top: -9px;
-  right: -13px;
-  font-size: 11px;
-}
-.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
-  color: #f1a50e;
-}
-.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
-  color: #8b2823;
-}
-.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
-  color: #212529;
-  display: none;
-}
-
 .frame-search.card {
-  width: 1000px;
  height: 600px;
 }

@@ -11085,6 +11025,92 @@ select.form-control {
  transform: scale(1.4);
 }

+.forest-tree-node-modal {
+  width: fit-content;
+  min-width: 544px;
+  max-width: 100vw;
+}
+
+.node-popup-tooltip .panel-actions {
+  font-size: 90%;
+  padding-left: 20px;
+}
+.node-popup-tooltip .panel-actions .b-icon {
+  margin-right: 8px;
+  font-size: 11px;
+}
+.node-popup-tooltip .panel-actions__almost-useable {
+  color: #f1a50e;
+}
+.node-popup-tooltip .panel-actions__development-in-progress {
+  color: #8b2823;
+}
+.node-popup-tooltip .panel-actions__ok-to-use {
+  color: #212529;
+  display: none;
+}
+.node-popup-tooltip .popup-container {
+  display: flex;
+  flex-direction: column;
+}
+.node-popup-tooltip .popup-container__header .b-wad .box-wrapper-action-rename .b-icon-button__inner {
+  visibility: hidden;
+}
+.node-popup-tooltip .popup-container__header .b-wad:hover .box-wrapper-action-rename .b-icon-button__inner {
+  visibility: visible;
+}
+.node-popup-tooltip .popup-container__body {
+  display: flex;
+  justify-content: center;
+  background-color: #181A1B;
+}
+.node-popup-tooltip .popup-container__body.toolbox-tabs-labels {
+  border-bottom: 1px solid #495057;
+  padding: 16px 56px 0;
+}
+.node-popup-tooltip .popup-container__cta {
+  position: relative;
+}
+.node-popup-tooltip .popup-container__cta__button {
+  font-size: 20px;
+  padding: 0.7rem 1.5rem 0.6rem;
+  display: list-item;
+  border: 1px solid transparent;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  margin-bottom: -1px;
+}
+.node-popup-tooltip .popup-container__cta__button:hover, .node-popup-tooltip .popup-container__cta__button--active {
+  border: 1px solid #495057;
+}
+.node-popup-tooltip .popup-container__cta__button--active, .node-popup-tooltip .popup-container__cta__button--active:hover {
+  border-bottom-color: #fff;
+}
+.node-popup-tooltip .popup-container__cta__icon {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  font-size: 11px;
+}
+.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
+  color: #f1a50e;
+}
+.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
+  color: #8b2823;
+}
+.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
+  color: #212529;
+  display: none;
+}
+.node-popup-tooltip .popup-container .toolbox-tab-content {
+  padding: 32px;
+}
+.node-popup-tooltip .text-sup {
+  vertical-align: super;
+  font-size: x-small;
+  margin: 0.33em;
+}
+
 .table tr td {
  height: 48px;
 }

--- a/dist/styles/bootstrap-default.css
+++ b/dist/styles/bootstrap-default.css
@@ -5739,6 +5739,7 @@ a.close.disabled {
  background-color: #fff;
  margin-left: 1.75rem;
  margin-right: 1.75rem;
+  max-width: 800px;
 }
 .b-modal__header {
  background-color: rgba(0, 0, 0, 0.03);
@@ -6166,6 +6167,10 @@ a.close.disabled {
  border-radius: 50px;
 }

+details summary {
+  cursor: pointer;
+}
+
 .echarts-for-react {
  height: 300px;
 }
@@ -6202,7 +6207,7 @@ a:focus {
  outline: 0;
 }

-ul {
+ul, li, span {
  list-style: none;
 }

@@ -10263,72 +10268,7 @@ input[type=range]:-moz-focusring {
  padding-right: 20px;
 }

-.forest-tree-node-modal {
-  width: fit-content;
-  min-width: 544px;
-  max-width: 100vw;
-}
-
-.node-popup-tooltip .panel-actions {
-  font-size: 90%;
-  padding-left: 20px;
-}
-.node-popup-tooltip .panel-actions .b-icon {
-  margin-right: 8px;
-  font-size: 11px;
-}
-.node-popup-tooltip .panel-actions__almost-useable {
-  color: #f1a50e;
-}
-.node-popup-tooltip .panel-actions__development-in-progress {
-  color: #8b2823;
-}
-.node-popup-tooltip .panel-actions__ok-to-use {
-  color: #212529;
-  display: none;
-}
-.node-popup-tooltip .popup-container {
-  display: flex;
-  flex-direction: column;
-}
-.node-popup-tooltip .popup-container__header .b-wad .fa-pencil {
-  visibility: hidden;
-}
-.node-popup-tooltip .popup-container__header .b-wad:hover .fa-pencil {
-  visibility: visible;
-}
-.node-popup-tooltip .popup-container__body {
-  display: flex;
-  justify-content: center;
-  background-color: #fff;
-  padding: 40px 56px;
-  gap: 48px;
-}
-.node-popup-tooltip .popup-container__cta {
-  position: relative;
-}
-.node-popup-tooltip .popup-container__cta__button {
-  font-size: 18px;
-}
-.node-popup-tooltip .popup-container__cta__icon {
-  position: absolute;
-  top: -9px;
-  right: -13px;
-  font-size: 11px;
-}
-.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
-  color: #f1a50e;
-}
-.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
-  color: #8b2823;
-}
-.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
-  color: #212529;
-  display: none;
-}
-
 .frame-search.card {
-  width: 1000px;
  height: 600px;
 }

@@ -10891,6 +10831,92 @@ select.form-control {
  transform: scale(1.4);
 }

+.forest-tree-node-modal {
+  width: fit-content;
+  min-width: 544px;
+  max-width: 100vw;
+}
+
+.node-popup-tooltip .panel-actions {
+  font-size: 90%;
+  padding-left: 20px;
+}
+.node-popup-tooltip .panel-actions .b-icon {
+  margin-right: 8px;
+  font-size: 11px;
+}
+.node-popup-tooltip .panel-actions__almost-useable {
+  color: #f1a50e;
+}
+.node-popup-tooltip .panel-actions__development-in-progress {
+  color: #8b2823;
+}
+.node-popup-tooltip .panel-actions__ok-to-use {
+  color: #212529;
+  display: none;
+}
+.node-popup-tooltip .popup-container {
+  display: flex;
+  flex-direction: column;
+}
+.node-popup-tooltip .popup-container__header .b-wad .box-wrapper-action-rename .b-icon-button__inner {
+  visibility: hidden;
+}
+.node-popup-tooltip .popup-container__header .b-wad:hover .box-wrapper-action-rename .b-icon-button__inner {
+  visibility: visible;
+}
+.node-popup-tooltip .popup-container__body {
+  display: flex;
+  justify-content: center;
+  background-color: #fff;
+}
+.node-popup-tooltip .popup-container__body.toolbox-tabs-labels {
+  border-bottom: 1px solid #DEE2E6;
+  padding: 16px 56px 0;
+}
+.node-popup-tooltip .popup-container__cta {
+  position: relative;
+}
+.node-popup-tooltip .popup-container__cta__button {
+  font-size: 20px;
+  padding: 0.7rem 1.5rem 0.6rem;
+  display: list-item;
+  border: 1px solid transparent;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  margin-bottom: -1px;
+}
+.node-popup-tooltip .popup-container__cta__button:hover, .node-popup-tooltip .popup-container__cta__button--active {
+  border: 1px solid #DEE2E6;
+}
+.node-popup-tooltip .popup-container__cta__button--active, .node-popup-tooltip .popup-container__cta__button--active:hover {
+  border-bottom-color: #fff;
+}
+.node-popup-tooltip .popup-container__cta__icon {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  font-size: 11px;
+}
+.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
+  color: #f1a50e;
+}
+.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
+  color: #8b2823;
+}
+.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
+  color: #212529;
+  display: none;
+}
+.node-popup-tooltip .popup-container .toolbox-tab-content {
+  padding: 32px;
+}
+.node-popup-tooltip .text-sup {
+  vertical-align: super;
+  font-size: x-small;
+  margin: 0.33em;
+}
+
 .table tr td {
  height: 48px;
 }

--- a/dist/styles/bootstrap-greyson.css
+++ b/dist/styles/bootstrap-greyson.css
@@ -5578,6 +5578,7 @@ a.close.disabled {
  background-color: #fff;
  margin-left: 1.75rem;
  margin-right: 1.75rem;
+  max-width: 800px;
 }
 .b-modal__header {
  background-color: rgba(0, 0, 0, 0.03);
@@ -6005,6 +6006,10 @@ a.close.disabled {
  border-radius: 50px;
 }

+details summary {
+  cursor: pointer;
+}
+
 .echarts-for-react {
  height: 300px;
 }
@@ -6041,7 +6046,7 @@ a:focus {
  outline: 0;
 }

-ul {
+ul, li, span {
  list-style: none;
 }

@@ -10108,72 +10113,7 @@ input[type=range]:-moz-focusring {
  padding-right: 20px;
 }

-.forest-tree-node-modal {
-  width: fit-content;
-  min-width: 544px;
-  max-width: 100vw;
-}
-
-.node-popup-tooltip .panel-actions {
-  font-size: 90%;
-  padding-left: 20px;
-}
-.node-popup-tooltip .panel-actions .b-icon {
-  margin-right: 8px;
-  font-size: 11px;
-}
-.node-popup-tooltip .panel-actions__almost-useable {
-  color: #f1a50e;
-}
-.node-popup-tooltip .panel-actions__development-in-progress {
-  color: #8b2823;
-}
-.node-popup-tooltip .panel-actions__ok-to-use {
-  color: #212529;
-  display: none;
-}
-.node-popup-tooltip .popup-container {
-  display: flex;
-  flex-direction: column;
-}
-.node-popup-tooltip .popup-container__header .b-wad .fa-pencil {
-  visibility: hidden;
-}
-.node-popup-tooltip .popup-container__header .b-wad:hover .fa-pencil {
-  visibility: visible;
-}
-.node-popup-tooltip .popup-container__body {
-  display: flex;
-  justify-content: center;
-  background-color: #fff;
-  padding: 40px 56px;
-  gap: 48px;
-}
-.node-popup-tooltip .popup-container__cta {
-  position: relative;
-}
-.node-popup-tooltip .popup-container__cta__button {
-  font-size: 18px;
-}
-.node-popup-tooltip .popup-container__cta__icon {
-  position: absolute;
-  top: -9px;
-  right: -13px;
-  font-size: 11px;
-}
-.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
-  color: #f1a50e;
-}
-.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
-  color: #8b2823;
-}
-.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
-  color: #212529;
-  display: none;
-}
-
 .frame-search.card {
-  width: 1000px;
  height: 600px;
 }

@@ -10736,6 +10676,92 @@ select.form-control {
  transform: scale(1.4);
 }

+.forest-tree-node-modal {
+  width: fit-content;
+  min-width: 544px;
+  max-width: 100vw;
+}
+
+.node-popup-tooltip .panel-actions {
+  font-size: 90%;
+  padding-left: 20px;
+}
+.node-popup-tooltip .panel-actions .b-icon {
+  margin-right: 8px;
+  font-size: 11px;
+}
+.node-popup-tooltip .panel-actions__almost-useable {
+  color: #f1a50e;
+}
+.node-popup-tooltip .panel-actions__development-in-progress {
+  color: #8b2823;
+}
+.node-popup-tooltip .panel-actions__ok-to-use {
+  color: #212529;
+  display: none;
+}
+.node-popup-tooltip .popup-container {
+  display: flex;
+  flex-direction: column;
+}
+.node-popup-tooltip .popup-container__header .b-wad .box-wrapper-action-rename .b-icon-button__inner {
+  visibility: hidden;
+}
+.node-popup-tooltip .popup-container__header .b-wad:hover .box-wrapper-action-rename .b-icon-button__inner {
+  visibility: visible;
+}
+.node-popup-tooltip .popup-container__body {
+  display: flex;
+  justify-content: center;
+  background-color: #fff;
+}
+.node-popup-tooltip .popup-container__body.toolbox-tabs-labels {
+  border-bottom: 1px solid #DEE2E6;
+  padding: 16px 56px 0;
+}
+.node-popup-tooltip .popup-container__cta {
+  position: relative;
+}
+.node-popup-tooltip .popup-container__cta__button {
+  font-size: 20px;
+  padding: 0.7rem 1.5rem 0.6rem;
+  display: list-item;
+  border: 1px solid transparent;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  margin-bottom: -1px;
+}
+.node-popup-tooltip .popup-container__cta__button:hover, .node-popup-tooltip .popup-container__cta__button--active {
+  border: 1px solid #DEE2E6;
+}
+.node-popup-tooltip .popup-container__cta__button--active, .node-popup-tooltip .popup-container__cta__button--active:hover {
+  border-bottom-color: #fff;
+}
+.node-popup-tooltip .popup-container__cta__icon {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  font-size: 11px;
+}
+.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
+  color: #f1a50e;
+}
+.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
+  color: #8b2823;
+}
+.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
+  color: #212529;
+  display: none;
+}
+.node-popup-tooltip .popup-container .toolbox-tab-content {
+  padding: 32px;
+}
+.node-popup-tooltip .text-sup {
+  vertical-align: super;
+  font-size: x-small;
+  margin: 0.33em;
+}
+
 .table tr td {
  height: 48px;
 }

--- a/dist/styles/bootstrap-herbie.css
+++ b/dist/styles/bootstrap-herbie.css
@@ -5803,6 +5803,7 @@ a.close.disabled {
  background-color: #fff;
  margin-left: 1.75rem;
  margin-right: 1.75rem;
+  max-width: 800px;
 }
 .b-modal__header {
  background-color: rgba(0, 0, 0, 0.03);
@@ -6230,6 +6231,10 @@ a.close.disabled {
  border-radius: 50px;
 }

+details summary {
+  cursor: pointer;
+}
+
 .echarts-for-react {
  height: 300px;
 }
@@ -6266,7 +6271,7 @@ a:focus {
  outline: 0;
 }

-ul {
+ul, li, span {
  list-style: none;
 }

@@ -10333,72 +10338,7 @@ input[type=range]:-moz-focusring {
  padding-right: 20px;
 }

-.forest-tree-node-modal {
-  width: fit-content;
-  min-width: 544px;
-  max-width: 100vw;
-}
-
-.node-popup-tooltip .panel-actions {
-  font-size: 90%;
-  padding-left: 20px;
-}
-.node-popup-tooltip .panel-actions .b-icon {
-  margin-right: 8px;
-  font-size: 11px;
-}
-.node-popup-tooltip .panel-actions__almost-useable {
-  color: #f1a50e;
-}
-.node-popup-tooltip .panel-actions__development-in-progress {
-  color: #8b2823;
-}
-.node-popup-tooltip .panel-actions__ok-to-use {
-  color: #212529;
-  display: none;
-}
-.node-popup-tooltip .popup-container {
-  display: flex;
-  flex-direction: column;
-}
-.node-popup-tooltip .popup-container__header .b-wad .fa-pencil {
-  visibility: hidden;
-}
-.node-popup-tooltip .popup-container__header .b-wad:hover .fa-pencil {
-  visibility: visible;
-}
-.node-popup-tooltip .popup-container__body {
-  display: flex;
-  justify-content: center;
-  background-color: #fff;
-  padding: 40px 56px;
-  gap: 48px;
-}
-.node-popup-tooltip .popup-container__cta {
-  position: relative;
-}
-.node-popup-tooltip .popup-container__cta__button {
-  font-size: 18px;
-}
-.node-popup-tooltip .popup-container__cta__icon {
-  position: absolute;
-  top: -9px;
-  right: -13px;
-  font-size: 11px;
-}
-.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
-  color: #f1a50e;
-}
-.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
-  color: #8b2823;
-}
-.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
-  color: #212529;
-  display: none;
-}
-
 .frame-search.card {
-  width: 1000px;
  height: 600px;
 }

@@ -10961,6 +10901,92 @@ select.form-control {
  transform: scale(1.4);
 }

+.forest-tree-node-modal {
+  width: fit-content;
+  min-width: 544px;
+  max-width: 100vw;
+}
+
+.node-popup-tooltip .panel-actions {
+  font-size: 90%;
+  padding-left: 20px;
+}
+.node-popup-tooltip .panel-actions .b-icon {
+  margin-right: 8px;
+  font-size: 11px;
+}
+.node-popup-tooltip .panel-actions__almost-useable {
+  color: #f1a50e;
+}
+.node-popup-tooltip .panel-actions__development-in-progress {
+  color: #8b2823;
+}
+.node-popup-tooltip .panel-actions__ok-to-use {
+  color: #212529;
+  display: none;
+}
+.node-popup-tooltip .popup-container {
+  display: flex;
+  flex-direction: column;
+}
+.node-popup-tooltip .popup-container__header .b-wad .box-wrapper-action-rename .b-icon-button__inner {
+  visibility: hidden;
+}
+.node-popup-tooltip .popup-container__header .b-wad:hover .box-wrapper-action-rename .b-icon-button__inner {
+  visibility: visible;
+}
+.node-popup-tooltip .popup-container__body {
+  display: flex;
+  justify-content: center;
+  background-color: #fff;
+}
+.node-popup-tooltip .popup-container__body.toolbox-tabs-labels {
+  border-bottom: 1px solid #DEE2E6;
+  padding: 16px 56px 0;
+}
+.node-popup-tooltip .popup-container__cta {
+  position: relative;
+}
+.node-popup-tooltip .popup-container__cta__button {
+  font-size: 20px;
+  padding: 0.7rem 1.5rem 0.6rem;
+  display: list-item;
+  border: 1px solid transparent;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  margin-bottom: -1px;
+}
+.node-popup-tooltip .popup-container__cta__button:hover, .node-popup-tooltip .popup-container__cta__button--active {
+  border: 1px solid #DEE2E6;
+}
+.node-popup-tooltip .popup-container__cta__button--active, .node-popup-tooltip .popup-container__cta__button--active:hover {
+  border-bottom-color: #fff;
+}
+.node-popup-tooltip .popup-container__cta__icon {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  font-size: 11px;
+}
+.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
+  color: #f1a50e;
+}
+.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
+  color: #8b2823;
+}
+.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
+  color: #212529;
+  display: none;
+}
+.node-popup-tooltip .popup-container .toolbox-tab-content {
+  padding: 32px;
+}
+.node-popup-tooltip .text-sup {
+  vertical-align: super;
+  font-size: x-small;
+  margin: 0.33em;
+}
+
 .table tr td {
  height: 48px;
 }

--- a/dist/styles/bootstrap-monotony.css
+++ b/dist/styles/bootstrap-monotony.css
@@ -5876,6 +5876,7 @@ a.close.disabled {
  background-color: #fff;
  margin-left: 1.75rem;
  margin-right: 1.75rem;
+  max-width: 800px;
 }
 .b-modal__header {
  background-color: rgba(0, 0, 0, 0.03);
@@ -6303,6 +6304,10 @@ a.close.disabled {
  border-radius: 50px;
 }

+details summary {
+  cursor: pointer;
+}
+
 .echarts-for-react {
  height: 300px;
 }
@@ -6339,7 +6344,7 @@ a:focus {
  outline: 0;
 }

-ul {
+ul, li, span {
  list-style: none;
 }

@@ -10406,72 +10411,7 @@ input[type=range]:-moz-focusring {
  padding-right: 20px;
 }

-.forest-tree-node-modal {
-  width: fit-content;
-  min-width: 544px;
-  max-width: 100vw;
-}
-
-.node-popup-tooltip .panel-actions {
-  font-size: 90%;
-  padding-left: 20px;
-}
-.node-popup-tooltip .panel-actions .b-icon {
-  margin-right: 8px;
-  font-size: 11px;
-}
-.node-popup-tooltip .panel-actions__almost-useable {
-  color: #f1a50e;
-}
-.node-popup-tooltip .panel-actions__development-in-progress {
-  color: #8b2823;
-}
-.node-popup-tooltip .panel-actions__ok-to-use {
-  color: #212529;
-  display: none;
-}
-.node-popup-tooltip .popup-container {
-  display: flex;
-  flex-direction: column;
-}
-.node-popup-tooltip .popup-container__header .b-wad .fa-pencil {
-  visibility: hidden;
-}
-.node-popup-tooltip .popup-container__header .b-wad:hover .fa-pencil {
-  visibility: visible;
-}
-.node-popup-tooltip .popup-container__body {
-  display: flex;
-  justify-content: center;
-  background-color: #fff;
-  padding: 40px 56px;
-  gap: 48px;
-}
-.node-popup-tooltip .popup-container__cta {
-  position: relative;
-}
-.node-popup-tooltip .popup-container__cta__button {
-  font-size: 18px;
-}
-.node-popup-tooltip .popup-container__cta__icon {
-  position: absolute;
-  top: -9px;
-  right: -13px;
-  font-size: 11px;
-}
-.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
-  color: #f1a50e;
-}
-.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
-  color: #8b2823;
-}
-.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
-  color: #212529;
-  display: none;
-}
-
 .frame-search.card {
-  width: 1000px;
  height: 600px;
 }

@@ -11034,6 +10974,92 @@ select.form-control {
  transform: scale(1.4);
 }

+.forest-tree-node-modal {
+  width: fit-content;
+  min-width: 544px;
+  max-width: 100vw;
+}
+
+.node-popup-tooltip .panel-actions {
+  font-size: 90%;
+  padding-left: 20px;
+}
+.node-popup-tooltip .panel-actions .b-icon {
+  margin-right: 8px;
+  font-size: 11px;
+}
+.node-popup-tooltip .panel-actions__almost-useable {
+  color: #f1a50e;
+}
+.node-popup-tooltip .panel-actions__development-in-progress {
+  color: #8b2823;
+}
+.node-popup-tooltip .panel-actions__ok-to-use {
+  color: #212529;
+  display: none;
+}
+.node-popup-tooltip .popup-container {
+  display: flex;
+  flex-direction: column;
+}
+.node-popup-tooltip .popup-container__header .b-wad .box-wrapper-action-rename .b-icon-button__inner {
+  visibility: hidden;
+}
+.node-popup-tooltip .popup-container__header .b-wad:hover .box-wrapper-action-rename .b-icon-button__inner {
+  visibility: visible;
+}
+.node-popup-tooltip .popup-container__body {
+  display: flex;
+  justify-content: center;
+  background-color: #fff;
+}
+.node-popup-tooltip .popup-container__body.toolbox-tabs-labels {
+  border-bottom: 1px solid #DEE2E6;
+  padding: 16px 56px 0;
+}
+.node-popup-tooltip .popup-container__cta {
+  position: relative;
+}
+.node-popup-tooltip .popup-container__cta__button {
+  font-size: 20px;
+  padding: 0.7rem 1.5rem 0.6rem;
+  display: list-item;
+  border: 1px solid transparent;
+  border-top-left-radius: 0.25rem;
+  border-top-right-radius: 0.25rem;
+  margin-bottom: -1px;
+}
+.node-popup-tooltip .popup-container__cta__button:hover, .node-popup-tooltip .popup-container__cta__button--active {
+  border: 1px solid #DEE2E6;
+}
+.node-popup-tooltip .popup-container__cta__button--active, .node-popup-tooltip .popup-container__cta__button--active:hover {
+  border-bottom-color: #fff;
+}
+.node-popup-tooltip .popup-container__cta__icon {
+  position: absolute;
+  top: 8px;
+  right: 10px;
+  font-size: 11px;
+}
+.node-popup-tooltip .popup-container__cta--almost-useable .popup-container__cta__icon {
+  color: #f1a50e;
+}
+.node-popup-tooltip .popup-container__cta--development-in-progress .popup-container__cta__icon {
+  color: #8b2823;
+}
+.node-popup-tooltip .popup-container__cta--ok-to-use .popup-container__cta__icon {
+  color: #212529;
+  display: none;
+}
+.node-popup-tooltip .popup-container .toolbox-tab-content {
+  padding: 32px;
+}
+.node-popup-tooltip .text-sup {
+  vertical-align: super;
+  font-size: x-small;
+  margin: 0.33em;
+}
+
 .table tr td {
  height: 48px;
 }

--- a/dist/styles/sass.css
+++ b/dist/styles/sass.css
@@ -598,7 +598,7 @@ li .leaf:hover a.settings {
  border: 1px solid rgba(0, 0, 0, 0.2);
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  height: 600px;
-  width: 1000px;
+  /* width: 1000px; */
 }
 #node-popup-tooltip .popup-container-body {
  max-height: 70vh;

--- a/index.html
+++ b/index.html
@@ -10,7 +10,6 @@
        <link href="styles/sass.css" rel="stylesheet" type="text/css" />
        <!-- <script type="text/javascript" src="/js/react-bootstrap.min.js"></script> -->
        <script type="text/javascript" src="/js/react-bootstrap.js"></script>
-        <style> * {margin: 0; padding: 0; list-style: none;} </style>
    </head>
    <body>
        <div id="app"></div>

--- a/package-lock.json
+++ b/package-lock.json
@@ -40,9 +40,11 @@
        "http-proxy-middleware": "^3.0.3",
        "immer": "~9.0.5",
        "isomorphic-unfetch": "~3.1.0",
+        "jszip": "^3.10.1",
        "markdown-it": "~13.0.1",
        "minify": "^11.3.0",
        "prop-types": "~15.6.2",
+        "purs-tidy": "^0.11.0",
        "react": "~18.2.0",
        "react-awesome-popover": "~6.1.1",
        "react-bootstrap": "~1.5.2",
@@ -5215,7 +5217,6 @@
    },
    "node_modules/core-util-is": {
      "version": "1.0.3",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/cosmiconfig": {
@@ -7472,6 +7473,11 @@
      ],
      "license": "BSD-3-Clause"
    },
+    "node_modules/immediate": {
+      "version": "3.0.6",
+      "resolved": "https://registry.npmjs.org/immediate/-/immediate-3.0.6.tgz",
+      "integrity": "sha512-XXOFtyqDjNDAQxVfYxuF7g9Il/IbWmmlQg2MYKOH8ExIT1qg6xc4zyS3HaEEATgs1btfzxq15ciUiY7gjSXRGQ=="
+    },
    "node_modules/immer": {
      "version": "9.0.21",
      "license": "MIT",
@@ -7768,7 +7774,6 @@
    },
    "node_modules/isarray": {
      "version": "1.0.0",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/isexe": {
@@ -7874,6 +7879,17 @@
        "graceful-fs": "^4.1.6"
      }
    },
+    "node_modules/jszip": {
+      "version": "3.10.1",
+      "resolved": "https://registry.npmjs.org/jszip/-/jszip-3.10.1.tgz",
+      "integrity": "sha512-xXDvecyTpGLrqFrvkrUSoxxfJI5AH7U8zxxtVclpsUtMCq4JQ290LY8AW5c7Ggnr/Y/oK+bQMbqK2qmtk3pN4g==",
+      "dependencies": {
+        "lie": "~3.3.0",
+        "pako": "~1.0.2",
+        "readable-stream": "~2.3.6",
+        "setimmediate": "^1.0.5"
+      }
+    },
    "node_modules/keyv": {
      "version": "4.5.4",
      "dev": true,
@@ -7907,6 +7923,14 @@
        "node": ">=0.10.0"
      }
    },
+    "node_modules/lie": {
+      "version": "3.3.0",
+      "resolved": "https://registry.npmjs.org/lie/-/lie-3.3.0.tgz",
+      "integrity": "sha512-UaiMJzeWRlEujzAuw5LokY1L5ecNQYZKfmyZ9L7wDHb/p5etKaxXhohBcrw0EYby+G/NA52vRSN4N39dxHAIwQ==",
+      "dependencies": {
+        "immediate": "~3.0.5"
+      }
+    },
    "node_modules/lightningcss": {
      "version": "1.24.1",
      "dev": true,
@@ -9953,6 +9977,11 @@
        "node": ">=8"
      }
    },
+    "node_modules/pako": {
+      "version": "1.0.11",
+      "resolved": "https://registry.npmjs.org/pako/-/pako-1.0.11.tgz",
+      "integrity": "sha512-4hLB8Py4zZce5s4yd9XzopqwVv/yGNhV1Bl8NTmCq1763HeK2+EwVTv+leGeL13Dnh2wfbqowVPXCIO0z4taYw=="
+    },
    "node_modules/pandemonium": {
      "version": "2.4.1",
      "license": "MIT",
@@ -10723,7 +10752,6 @@
    },
    "node_modules/process-nextick-args": {
      "version": "2.0.1",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/progress": {
@@ -10867,6 +10895,14 @@
      "license": "MIT",
      "optional": true
    },
+    "node_modules/purs-tidy": {
+      "version": "0.11.0",
+      "resolved": "https://registry.npmjs.org/purs-tidy/-/purs-tidy-0.11.0.tgz",
+      "integrity": "sha512-HZ8AS6J7Ka2YVl6Gr/H5NV17TU10yGYUTxVwRd5tKuwsVdFZewXSzZ/HTpWrkhdR2gxSVk0BdnpJhyu//oRc+w==",
+      "bin": {
+        "purs-tidy": "bin/index.js"
+      }
+    },
    "node_modules/querystringify": {
      "version": "2.2.0",
      "dev": true,
@@ -11213,7 +11249,6 @@
    },
    "node_modules/readable-stream": {
      "version": "2.3.8",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "core-util-is": "~1.0.0",
@@ -12268,7 +12303,6 @@
    },
    "node_modules/string_decoder": {
      "version": "1.1.1",
-      "dev": true,
      "license": "MIT",
      "dependencies": {
        "safe-buffer": "~5.1.0"
@@ -12894,7 +12928,6 @@
    },
    "node_modules/util-deprecate": {
      "version": "1.0.2",
-      "dev": true,
      "license": "MIT"
    },
    "node_modules/utility-types": {

--- a/package.json
+++ b/package.json
@@ -6,8 +6,8 @@
    "bundle": "spago bundle --module Main --outfile dist/bundle.min.js --minify --source-maps",
    "build-dev": "spago bundle --module Main --outfile dist/bundle.min.js",
    "watch": "watchexec -e purs -- npm run build-dev",
-    "css": "$npm_execpath css-themes",
-    "css-themes": "$npm_execpath css-default-theme && $npm_execpath css-dark-theme && $npm_execpath css-darkster-theme && $npm_execpath css-greyson-theme && $npm_execpath css-herbie-theme && $npm_execpath css-monotony-theme",
+    "css": "npm run css-themes",
+    "css-themes": "npm run css-default-theme && npm run css-dark-theme && npm run css-darkster-theme && npm run css-greyson-theme && npm run css-herbie-theme && npm run css-monotony-theme",
    "css-default-theme": "sass src/sass/themes/default.scss:dist/styles/bootstrap-default.css",
    "css-dark-theme": "cp node_modules/bootstrap-dark/src/bootstrap-dark.css dist/styles/bootstrap-dark.css",
    "css-darkster-theme": "sass src/sass/themes/darkster.scss:dist/styles/bootstrap-darkster.css",
@@ -56,9 +56,11 @@
    "http-proxy-middleware": "^3.0.3",
    "immer": "~9.0.5",
    "isomorphic-unfetch": "~3.1.0",
+    "jszip": "^3.10.1",
    "markdown-it": "~13.0.1",
    "minify": "^11.3.0",
    "prop-types": "~15.6.2",
+    "purs-tidy": "^0.11.0",
    "react": "~18.2.0",
    "react-awesome-popover": "~6.1.1",
    "react-bootstrap": "~1.5.2",

--- a/src/Gargantext/Components/Bootstrap/Floaty/BaseModal.js
+++ b/src/Gargantext/Components/Bootstrap/Floaty/BaseModal.js
@@ -9,7 +9,7 @@
 export function _show(window, querySelector, events) {
  let $modal = window.$(querySelector);
  $modal.modal('show');
-  console.log('events', events);
+  //console.log('events', events);
  if(events.onHide) {
    $modal.on('hidden.bs.modal', events.onHide());
  }

--- a/src/Gargantext/Components/Bootstrap/Inline/IconButton.purs
+++ b/src/Gargantext/Components/Bootstrap/Inline/IconButton.purs
@@ -25,6 +25,7 @@ type Options =
  , elevation :: Elevation
  , variant :: Variant
  , focusRing :: Boolean
+  , showLabel :: Boolean
  )

 options :: Record Options
@@ -36,6 +37,7 @@ options =
  , elevation: Level0
  , variant: Secondary
  , focusRing: true
+  , showLabel: false
  }

 -- | Structural Component for a simple Glyphicon element with call-to-action
@@ -87,6 +89,8 @@ component = R.hooksComponent componentName cpt
        [ bootstrapName
        , bootstrapName <> "-" <> name
        ]
+
+      componentLabel = props.showLabel ? props.title $ ""
    -- Behaviors
    let
      click = onClick status callback
@@ -103,7 +107,10 @@ component = R.hooksComponent componentName cpt
                { title: props.title
                , className: contentClassName
                }
-                []
+                [ H.span { className: "font-family-theme text-small" }
+                    [ H.text $ " " <> componentLabel <> " "
+                    ]
+                ]
            ]
        ]


--- a/src/Gargantext/Components/Forest/Tree/Node/Action.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action.purs
@@ -64,7 +64,7 @@ text (UpdateNode _) = "Update!"
 text (ShareTeam _) = "Share with team!"
 text (AddContact _) = "Add contact!"
 text (SharePublic _) = "Publish!"
-text (DoSearch _) = "Launch search!"
+text (DoSearch _) = "Search and create corpus!"
 text (UploadFile _ _ _ _ _ _ _) = "Upload File!"
 text (UploadArbitraryFile _ _ _) = "Upload arbitrary file!"
 text (UploadFrameCalc _ _) = "Upload frame calc"
@@ -74,6 +74,6 @@ text DownloadNode = "Download!"
 text (MoveNode _) = "Move!"
 text (MergeNode _) = "Merge!"
 text (LinkNode _) = "Link!"
-text (DocumentsFromWriteNodes _) = "Documents from Write Nodes!"
+text (DocumentsFromWriteNodes _) = "Generate documents from Notes!"
 text NoAction = "No Action"
 -----------------------------------------------------------------------
--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Add.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Add.purs
@@ -9,6 +9,7 @@ import Data.String (Pattern(..), indexOf)
 import Effect (Effect)
 import Effect.Aff (Aff, launchAff_)
 import Gargantext.AsyncTasks as GAT
+import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Forest.Tree.Node.Action.Types (Action(..))
 import Gargantext.Components.Forest.Tree.Node.Settings (SettingsBox(..), settingsBox)
 import Gargantext.Components.Forest.Tree.Node.Tools as Tools
@@ -99,44 +100,55 @@ addNodeViewCpt = here.component "addNodeView" cpt
        T.write_ nt nodeType
      maybeChoose =
        if length nodeTypes > 1 then
-          [ Tools.formChoice
-              { items: nodeTypes
-              , default: nodeType'
-              , callback: setNodeType'
-              , print: print hasChromeAgent'
-              }
-              []
-          ]
+          Tools.formChoice
+            { items: nodeTypes
+            , default: nodeType'
+            , callback: setNodeType'
+            , print: print hasChromeAgent'
+            , label: "Node type:"
+            }
+            []
        else
-          [ H.div {}
-              [ H.text $ "Creating a node of type "
-                  <> show defaultNodeType
-                  <> " with name:"
-              ]
-          ]
+          H.div {}
+            [ H.text $ "Creating a node of type "
+                <> show defaultNodeType
+                <> " with name:"
+            ]
      maybeEdit =
        if edit then
-          [ inputWithEnterWithKey
-              { autoFocus: true
-              , className: "form-control"
-              , defaultValue: nodeName' -- (prettyNodeType nt')
-              , key: show nodeType'
-              , onBlur: \val -> T.write_ val nodeName
-              , onEnter: \_ -> launchAff_ $ dispatch action
-              , onValueChanged: \val -> T.write_ val nodeName
-              , placeholder: nodeName' -- (prettyNodeType nt')
-              , required: false
-              , type: "text"
-              }
-          ]
-        else []
-
-    pure $ Tools.panelWithSubmitButton
-      { action
-      , dispatch
-      , mError: Nothing
-      }
-      (maybeChoose <> maybeEdit)
+          inputWithEnterWithKey
+            { autoFocus: true
+            , className: "form-control"
+            , defaultValue: nodeName' -- (prettyNodeType nt')
+            , key: show nodeType'
+            , onBlur: \val -> T.write_ val nodeName
+            , onEnter: \_ -> launchAff_ $ dispatch action
+            , onValueChanged: \val -> T.write_ val nodeName
+            , placeholder: nodeName' -- (prettyNodeType nt')
+            , required: false
+            , type: "text"
+            }
+        else H.div {} []
+
+    pure $
+      Tools.panelWithSubmitButton
+        { action
+        , dispatch
+        , mError: Nothing
+        , iconName: "plus"
+        , textTitle: "Add a child node element"
+        }
+        [ R2.row
+            [ R2.col 6
+                [ H.div { className: "form-group" } [ maybeChoose ] ]
+            , R2.col 6
+                [ H.div { className: "form-group" }
+                    [ H.label {} [ H.text "Name:" ]
+                    , maybeEdit
+                    ]
+                ]
+            ]
+        ]

 -- END Create Node


--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Contact.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Contact.purs
@@ -37,7 +37,7 @@ actionAddContactCpt = here.component "actionAddContact" cpt
  where
  cpt { dispatch, id } _ = do
    pure $
-      Tools.panelNoFooter { mError: Nothing }
+      Tools.panelNoFooter { mError: Nothing, iconName: "", textTitle: "Contact" }
        [ textInputBox
            { boxAction: AddContact
            , dispatch

--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Delete.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Delete.purs
@@ -58,7 +58,11 @@ actionDeleteUserCpt = here.component "actionDeleteUser" cpt
  where
  cpt _ _ = do
    pure $
-      Tools.panelNoFooter { mError: Nothing }
+      Tools.panelNoFooter
+        { mError: Nothing
+        , iconName: ""
+        , textTitle: "Delete user"
+        }
        [ H.div { style: { margin: "10px" } }
            [ H.text $ "Yes, we are RGPD compliant."
                <> " But you can not delete User Node yourself yet."
@@ -79,9 +83,11 @@ actionDeleteOtherCpt = here.component "actionDeleteOther" cpt
        { action: DeleteNode nodeType
        , dispatch
        , mError: Nothing
+        , iconName: "trash"
+        , textTitle: "Delete this node permanently"
        }
        ( map (\t -> H.p {} [ H.text t ])
-            [ "Are your sure you want to delete it ?"
+            [ "Are you sure you want to delete it ?"
            , "If yes, click again below."
            ]
        )
--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Documentation.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Documentation.purs
 module Gargantext.Components.Forest.Tree.Node.Action.Documentation where

 import Data.Maybe (Maybe(..))
+import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Forest.Tree.Node.Tools as Tools
 import Gargantext.Prelude (map, pure, show, ($), (<>))
 import Gargantext.Types (NodeType)
@@ -24,16 +25,27 @@ actionDocCpt = here.component "actionDoc" cpt
  where
  cpt { nodeType } _ = do
    pure $
-      Tools.panelNoFooter { mError: Nothing }
-        ( [ H.div { style: { margin: "10px" } }
-              [ H.h3 {} [ H.text "Documentation about " ]
-              , H.h3 { className: GT.fldr nodeType true }
-                  [ H.span { className: "font-family-theme mx-1" }
-                      [ H.text $ show nodeType ]
+      Tools.panelNoFooter { mError: Nothing, iconName: "question-circle", textTitle: "Documentation" }
+
+        ( [ H.div {}
+              [ H.div { className: "" }
+                  [ H.dl { className: "row" }
+                      [
+                        --  node type name
+                        H.dt { className: "text-bold col-3" } [ H.text "Node type name" ]
+                      , H.dd { className: "col-9" }
+                          [ H.span { className: GT.fldr nodeType true } []
+                          , H.span { className: "mx-1" } [ H.text $ show nodeType ]
+                          ]
+                      --  node description
+                      , H.dt { className: "text-bold col-3" } [ H.text "Description" ]
+                      , H.dd { className: "col-9" }
+                          [ R.fragment (map (\info -> H.p {} [ H.text info ]) $ docOf nodeType) ]
+                      ]
                  ]
              ]
+          --  <> (map (\info -> H.p {} [ H.text info ]) $ docOf nodeType)
          ]
-            <> (map (\info -> H.p {} [ H.text info ]) $ docOf nodeType)
        )

 -- | TODO add documentation of all NodeType

--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Download.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Download.purs
@@ -51,6 +51,8 @@ actionDownloadCorpusCpt = here.component "actionDownloadCorpus" cpt
        { action: DownloadNode
        , href
        , mError: Nothing
+        , iconName: "download"
+        , textTitle: "Download the corpus"
        }
        [ H.div {} [ H.text "Download as JSON" ] ]
    where
@@ -68,6 +70,8 @@ actionDownloadGraphCpt = here.component "actionDownloadGraph" cpt
        { action: DownloadNode
        , href
        , mError: Nothing
+        , iconName: "download"
+        , textTitle: "Download the graph (as a Gephi file)"
        }
        [ H.div {} [ H.text "Info about the Graph as GEXF format" ] ]
    where
@@ -109,6 +113,8 @@ actionDownloadNodeListCpt = here.component "actionDownloadNodeList" cpt
        { action: DownloadNode
        , href: href downloadFormat'
        , mError: Nothing
+        , iconName: "download"
+        , textTitle: "Download the list of terms"
        }
        [ R2.select
            { className: "form-control"
@@ -164,6 +170,8 @@ actionDownloadNodeTextsCpt = here.component "actionDownloadNodeTexts" cpt
      { action: DownloadNode
      , href: href downloadFormat'
      , mError: Nothing
+      , iconName: "download"
+      , textTitle: "Download documents"
      }
      [ R2.select
          { className: "form-control"
@@ -217,6 +225,8 @@ actionDownloadPhyloCpt = here.component "actionDownloadPhylo" cpt
      { action: DownloadNode
      , href: href downloadFormat'
      , mError: Nothing
+      , iconName: "download"
+      , textTitle: "Download the phylomemy"
      }
      [ R2.select
          { className: "form-control"

--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Link.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Link.purs
@@ -80,7 +80,11 @@ linkNodeCpt' = here.component "__clone__" cpt
        _ -> mempty

    pure $
-      Tools.panel { mError: Nothing }
+      Tools.panel
+        { mError: Nothing
+        , iconName: "link"
+        , textTitle: "Link"
+        }
        [ subTreeView
            { action
            , dispatch

--- a/src/Gargantext/Components/Forest/Tree/Node/Action/ManageTeam.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/ManageTeam.purs
@@ -3,7 +3,10 @@ module Gargantext.Components.Forest.Tree.Node.Action.ManageTeam where
 import Data.Array (filter, null, (:))
 import Data.Either (Either(..))
 import Data.Maybe (Maybe(..))
+import Effect (Effect)
 import Effect.Aff (runAff_)
+import Gargantext.Components.Bootstrap as B
+import Gargantext.Components.Forest.Tree.Node.Settings (NodeAction(..), SettingsBox(..), glyphiconNodeAction, settingsBox)
 import Gargantext.Components.Forest.Tree.Node.Tools as Tools
 import Gargantext.Components.GraphQL.Endpoints (deleteTeamMembership, getTeam)
 import Gargantext.Components.GraphQL.Team (Team, TeamMember)
@@ -24,6 +27,7 @@ type ActionManageTeam =
  ( id :: ID
  , nodeType :: NodeType
  , session :: Session
+  , tabFocusHandler :: NodeAction -> Effect Unit
  )

 actionManageTeam :: R2.Component ActionManageTeam
@@ -32,7 +36,7 @@ actionManageTeam = R.createElement actionManageTeamCpt
 actionManageTeamCpt :: R.Component ActionManageTeam
 actionManageTeamCpt = R2.hereComponent here "actionManageTeam" hCpt
  where
-  hCpt hp { id, session } _ = do
+  hCpt hp { id, session, tabFocusHandler } _ = do
    useLoader
      { errorHandler: Nothing
      , herePrefix: hp
@@ -42,6 +46,7 @@ actionManageTeamCpt = R2.hereComponent here "actionManageTeam" hCpt
          { team
          , nodeId: id
          , session
+          , tabFocusHandler
          }
          []
      }
@@ -50,6 +55,7 @@ type TeamProps =
  ( nodeId :: ID
  , session :: Session
  , team :: Team
+  , tabFocusHandler :: NodeAction -> Effect Unit
  )

 teamLayoutWrapper :: R2.Component TeamProps
@@ -58,11 +64,11 @@ teamLayoutWrapper = R.createElement teamLayoutWrapperCpt
 teamLayoutWrapperCpt :: R.Component TeamProps
 teamLayoutWrapperCpt = here.component "teamLayoutWrapper" cpt
  where
-  cpt { nodeId, session, team: { team_owner_username, team_members } } _ = do
+  cpt { nodeId, session, team: { team_owner_username, team_members }, tabFocusHandler } _ = do
    error <- T.useBox Nothing
    team_members <- T.useBox team_members

-    pure $ teamLayoutRows { nodeId, session, team_members, error, team_owner_username }
+    pure $ teamLayoutRows { nodeId, session, team_members, error, team_owner_username, tabFocusHandler }

 type TeamRowProps =
  ( error :: T.Box (Maybe String)
@@ -70,6 +76,7 @@ type TeamRowProps =
  , session :: Session
  , team_members :: T.Box (Array TeamMember)
  , team_owner_username :: String
+  , tabFocusHandler :: NodeAction -> Effect Unit
  )

 teamLayoutRows :: R2.Leaf TeamRowProps
@@ -78,25 +85,52 @@ teamLayoutRows = R2.leaf teamLayoutRowsCpt
 teamLayoutRowsCpt :: R.Component TeamRowProps
 teamLayoutRowsCpt = here.component "teamLayoutRows" cpt
  where
-  cpt { error, nodeId, session, team_members, team_owner_username } _ = do
+  cpt { error, nodeId, session, team_members, team_owner_username, tabFocusHandler } _ = do
    team_members' <- T.useLive T.unequal team_members
    error' <- T.useLive T.unequal error
+    let focusOnShareTab = \_ -> tabFocusHandler Share

    pure $
-      if null team_members' then
-        H.div { style: { margin: "10px" } }
-          [ H.h4 {} [ H.text "Your team is empty, you can send some invitations." ] ]
-      else
-        Tools.panelNoFooter { mError: error' }
-          (makeLeader team_owner_username : (map makeTeam team_members'))
+      Tools.panelNoFooter
+        { mError: error'
+        , iconName: "users"
+        , textTitle: "Manage the team"
+        }
+        [ if null team_members' then
+            H.div { style: { margin: "10px" } }
+              [ H.p {}
+                  [ H.text "Your team is empty, you can send some invitations ("
+                  , B.iconButton
+                      { callback: focusOnShareTab
+                      , title: "Invite a user"
+                      -- , elevation: Level1
+                      , name: "user-plus"
+                      , showLabel: true
+                      }
+                  , H.text ")."
+                  ]
+              ]
+          else
+            R.fragment
+              (makeLeader team_owner_username : (map makeTeam team_members'))
+        , H.div { className: "col text-center mt-3" }
+            [ B.iconButton
+                { callback: focusOnShareTab
+                , title: "Invite a new user"
+                -- , elevation: Level1
+                , name: "user-plus"
+                , showLabel: true
+                }
+            ]
+        ]

    where
    makeTeam :: TeamMember -> R.Element
    makeTeam { username, shared_folder_id } =
-      H.div { className: "from-group row" }
-        [ H.div { className: "col-8" } [ H.text username ]
+      H.div { className: "form-group row my-0" }
+        [ H.div { className: "col-9" } [ H.text username ]
        , H.a
-            { className: "text-danger col-2 fa fa-times"
+            { className: "text-danger col-3 text-center fa fa-times"
            , title: "Remove user from team"
            , type: "button"
            , on: { click: submit shared_folder_id }
@@ -105,9 +139,9 @@ teamLayoutRowsCpt = here.component "teamLayoutRows" cpt
        ]

    makeLeader username =
-      H.div { className: "from-group row" }
-        [ H.div { className: "col-8" } [ H.text username ]
-        , H.p { className: "col-2" } [ H.text "owner" ]
+      H.div { className: "form-group row my-0" }
+        [ H.div { className: "col-9" } [ H.text username ]
+        , H.p { className: "col-3 text-center" } [ H.text "owner" ]
        ]

    submit sharedFolderId _ = do

--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Merge.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Merge.purs
@@ -46,7 +46,11 @@ mergeNodeCpt = here.component "mergeNode" cpt
              }
        _ -> H.div {} []

-    pure $ Tools.panel { mError: Nothing }
+    pure $ Tools.panel
+      { mError: Nothing
+      , iconName: "random"
+      , textTitle: "Merge this list of terms with an other one"
+      }
      [ subTreeView
          { action
          , dispatch

--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Move.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Move.purs
@@ -72,7 +72,11 @@ moveNodeCpt' = here.component "__clone__" cpt
        _ -> H.div {} []

    pure $
-      Tools.panel { mError: Nothing }
+      Tools.panel
+        { mError: Nothing
+        , iconName: "arrows"
+        , textTitle: "Move this node"
+        }
        [ subTreeView
            { action
            , dispatch

--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Search.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Search.purs
@@ -9,6 +9,7 @@ import Gargantext.Components.Forest.Tree.Node.Action.Search.SearchBar (searchBar
 import Gargantext.Components.Forest.Tree.Node.Action.Search.SearchField (defaultSearch)
 import Gargantext.Components.Forest.Tree.Node.Action.Types (Action(..))
 import Gargantext.Components.Forest.Tree.Node.Action.Utils (loadLanguages)
+import Gargantext.Components.Forest.Tree.Node.Tools as Tools
 import Gargantext.Components.Lang (Lang)
 import Gargantext.Hooks.Loader (useLoader)
 import Gargantext.Prelude
@@ -62,20 +63,25 @@ actionSearchWithLangsCpt = here.component "actionSearchWithLangs" cpt
  cpt { dispatch, id, langs, session } _ = do
    { errors } <- Store.use
    search <- T.useBox $ defaultSearch { node_id = id }
-    pure $ R.fragment
-      [ H.p { className: "action-search mx-2" }
-          [ H.text $ "Search and create a private "
-              <> "corpus with the search query as corpus name."
-          ]
-      , searchBar
-          { errors
-          , langs
-          , onSearch: searchOn dispatch
-          , search
-          , session
-          }
-          []
-      ]
+    pure $
+      Tools.panelNoFooter
+        { mError: Nothing
+        , iconName: "search"
+        , textTitle: "Search (APIs) and create a corpus"
+        }
+        -- H.div { className: "card-body toolbox-tab-content px-5 py-4" }
+        [ H.div { className: "action-search mx-2" }
+            [ H.text $ "Please fill the search query and choose a database."
+            ]
+        , searchBar
+            { errors
+            , langs
+            , onSearch: searchOn dispatch
+            , search
+            , session
+            }
+            []
+        ]
    where
    searchOn
      :: (Action -> Aff Unit)

--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Share.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Share.purs
@@ -101,7 +101,11 @@ shareNodeInnerCpt = here.component "shareNodeInner" cpt
    text' /\ text <- R2.useBox' ""
    mError' /\ mError <- R2.useBox' Nothing

-    pure $ Tools.panel { mError: mError' }
+    pure $ Tools.panel
+      { mError: mError'
+      , iconName: "user-plus"
+      , textTitle: "Invite user(s) to the team"
+      }
      [ inputWithAutocomplete
          { autoFocus: true
          , autocompleteSearch
@@ -160,7 +164,11 @@ publishNodeCpt = here.component "publishNode" cpt
              }
        _ -> H.div {} []

-    pure $ Tools.panel { mError: Nothing }
+    pure $ Tools.panel
+      { mError: Nothing
+      , iconName: ""
+      , textTitle: "Publish the node"
+      }
      [ subTreeView
          { action
          , dispatch
@@ -204,7 +212,12 @@ shareURLInnercpt :: R.Component (url :: String)
 shareURLInnercpt = here.component "shareURLInner" cpt
  where
  cpt { url } _ = do
-    pure $ Tools.panel { mError: Nothing } [ H.div {} [ H.text url ] ]
+    pure $ Tools.panelNoFooter
+      { mError: Nothing
+      , iconName: "share-alt"
+      , textTitle: "Share the node (URL)"
+      }
+      [ H.div {} [ H.text url ] ]

 loadUrl :: { session :: Session, id :: NodeID, nodeType :: NodeType } -> AffRESTError String
 loadUrl { session, id, nodeType } = get session $ GR.ShareURL id nodeType
--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Update.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Update.purs
@@ -10,6 +10,7 @@ import Data.Maybe (Maybe(..))
 import Effect (Effect)
 import Effect.Aff (Aff, launchAff_)
 import Gargantext.AsyncTasks as GAT
+import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (ComponentStatus(..))
 import Gargantext.Components.Forest.Tree.Node.Action.Types (Action(..))
 import Gargantext.Components.Forest.Tree.Node.Tools as Tools
@@ -71,13 +72,15 @@ updateDashboardCpt = here.component "updateDashboard" cpt
        { action: UpdateNode $ UpdateNodeParamsBoard { methodBoard: methodBoard' }
        , dispatch
        , mError: Nothing
+        , iconName: ""
+        , textTitle: "Update the dashboard"
        }
-        [ -- H.text "Update with"
-          Tools.formChoiceSafe
+        [ Tools.formChoiceSafe
            { items: [ All, Sources, Authors, Institutes, Ngrams ]
            , default: methodBoard'
            , callback: \val -> T.write_ val methodBoard
            , print: show
+            , label: "Update with:"
            }
            []
        ]
@@ -127,13 +130,15 @@ updateGraphCpt = here.component "updateGraph" cpt
        { action
        , dispatch: callback
        , mError: Nothing
+        , iconName: "reload-with-settings"
+        , textTitle: "Update the graph"
        }
-        [ H.text "Show subjects with Order1 or concepts with Order2 ?"
-        , Tools.formChoiceSafe
+        [ Tools.formChoiceSafe
            { items: [ Order1, Order2 ]
            , default: methodGraphMetric'
            , callback: \val -> T.write_ val methodGraphMetric
            , print: show
+            , label: "Show subjects with Order1 or concepts with Order2 ?"
            }
            []
        ]
@@ -282,15 +287,21 @@ updateCorpusCpt = here.component "updateTexts" cpt
            }
        , dispatch
        , mError: Nothing
+        , iconName: "reload-with-settings"
+        , textTitle: "Update the corpus"
        }
-        [ H.p {} [ H.text "Update both term and document indexing." ]
+        [ H.h5 { className: "text-primary font-weight-normal" }
+            [ B.icon { name: "reload-with-settings" }
+            , H.span { className: "px-1" } [ H.text "Update/resync both terms and document indexing" ]
+            ]
+        -- H.p {} [ H.text "Update both term and document indexing." ]
        , H.p {}
-            [ H.text "Term update mode"
-            , Tools.formChoiceSafe
+            [ Tools.formChoiceSafe
                { items: [ Basic, Advanced, WithModel ]
                , default: methodList'
                , callback: \val -> T.write_ val methodList
                , print: show
+                , label: "Term update mode"
                }
                []
            ]
@@ -312,13 +323,15 @@ updateNodeListCpt = here.component "updateNodeList" cpt
        { action: UpdateNode $ UpdateNodeParamsList { methodList: methodList' }
        , dispatch
        , mError: Nothing
+        , iconName: "reload-with-settings"
+        , textTitle: "Update terms"
        }
-        [ -- H.text "Update with"
-          Tools.formChoiceSafe
+        [ Tools.formChoiceSafe
            { items: [ Basic, Advanced, WithModel ]
            , default: methodList'
            , callback: \val -> T.write_ val methodList
            , print: show
+            , label: "Update with:"
            }
            []
        ]
@@ -338,6 +351,8 @@ updateTextsCpt = here.component "updateTexts" cpt
        { action: UpdateNode $ UpdateNodeParamsTexts { methodTexts: Both }
        , dispatch
        , mError: Nothing
+        , iconName: "reload-with-settings"
+        , textTitle: "Update documents (contexts)"
        }
        [] -- H.text "Update with"


--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Upload.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Upload.purs
--- a/src/Gargantext/Components/Forest/Tree/Node/Action/Upload/Types.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/Upload/Types.purs
@@ -4,6 +4,7 @@ import Gargantext.Prelude

 import Data.ArrayBuffer.Types (ArrayBuffer)
 import Data.Eq.Generic (genericEq)
+import Data.Ord.Generic (genericCompare)
 import Data.Generic.Rep (class Generic)
 import Data.Maybe (Maybe(..))
 import Data.Show.Generic (genericShow)
@@ -18,6 +19,9 @@ derive instance Generic FileType _
 instance Eq FileType where
  eq = genericEq

+instance Ord FileType where
+  compare = genericCompare
+
 instance Show FileType where
  show = genericShow


--- a/src/Gargantext/Components/Forest/Tree/Node/Action/WriteNodesDocuments.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Action/WriteNodesDocuments.purs
@@ -79,12 +79,12 @@ actionWriteNodesDocumentsWithLangsCpt = here.component "actionWriteNodesDocument
            }
        , dispatch
        , mError: Nothing
+        , iconName: "file-text-o"
+        , textTitle: "Import a corpus from your Notes"
        }
-        [ H.div
-            { className: "col-12 flex-space-around" }
-            [ H.h4 {}
-                [ H.text "Will traverse all Write Nodes and insert them as documents into current corpus." ]
-            ]
+        [ H.p
+            { className: "form-group" }
+            [ H.text "Will traverse all the notes positioned under this NodeCorpus and inserts them as documents, making up your corpus." ]
        ,
          -- lang
          H.div
@@ -92,7 +92,7 @@ actionWriteNodesDocumentsWithLangsCpt = here.component "actionWriteNodesDocument
            [ H.div
                { className: "form-group__label" }
                [ B.label_ $
-                    "File lang"
+                    "Please select the language of your current Notes:"
                ]
            , H.div
                { className: "form-group__field" }
@@ -111,7 +111,7 @@ actionWriteNodesDocumentsWithLangsCpt = here.component "actionWriteNodesDocument
            [ H.div
                { className: "form-group__label" }
                [ B.label_ $
-                    "Paragraph size (sentences)"
+                    "Please set the document size you require:"
                ]
            , H.div
                { className: "form-group__field" }
@@ -119,16 +119,18 @@ actionWriteNodesDocumentsWithLangsCpt = here.component "actionWriteNodesDocument
                    { callback: flip T.write_ paragraphBox
                    , value: paragraphs'
                    }
+                , H.div { className: "small alert-light" }
+                    [ H.text "Suggested: between 7 and 9 sentences per document" ]
                ]
            ]
        ,
          --selection
          H.div
-            { className: "form-group" }
+            { className: "form-group m-0" }
            [ H.div
                { className: "form-group__label" }
                [ B.label_ $
-                    "List selection"
+                    "Please choose the list of terms to use:"
                ]
            , H.div
                { className: "form-group__field" }

--- a/src/Gargantext/Components/Forest/Tree/Node/Box.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Box.purs
@@ -5,7 +5,9 @@ import Gargantext.Prelude
 import Data.Array as A
 import Data.Foldable (intercalate)
 import Data.Maybe (Maybe(..))
+import Effect (Effect)
 import Effect.Aff (Aff)
+import Effect.Class (liftEffect)
 import Gargantext.Components.App.Store (Boxes)
 import Gargantext.Components.Bootstrap as B
 import Gargantext.Components.Bootstrap.Types (ComponentStatus(..), Elevation(..))
@@ -37,6 +39,7 @@ import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
 import Toestand as T
+import DOM.Simple.Console (log2)

 here :: R2.Here
 here = R2.here "Gargantext.Components.Forest.Tree.Node.Box"
@@ -59,16 +62,22 @@ nodePopupViewCpt = here.component "nodePopupView" cpt
    action <- T.useFocused (_.action) (\a b -> b { action = a }) nodePopup
    nodePopup' <- T.useLive T.unequal nodePopup

+    let tabFocusHandler act = T.modify_ (_ { action = Just act }) nodePopup
+
+    logNodePopup <- T.read nodePopup
+
+    -- R.useEffect' $ here.log2 "action:" logNodePopup
+
    pure $
      H.div
        { className: "node-popup-tooltip"
-        , title: "Type: " <> prettyNodeType nodeType
+        -- , title: "Type: " <> prettyNodeType nodeType
        }
        [ H.div
            { className: "popup-container card" }
            [ panelHeading renameIsOpen open p
            , panelBody action p
-            , mPanelAction nodePopup' p
+            , mPanelAction nodePopup' p tabFocusHandler
            ]
        ]

@@ -86,7 +95,7 @@ nodePopupViewCpt = here.component "nodePopupView" cpt
              --   B.span' { className: "small" } $ prettyNodeType nodeType
              ]
          , B.wad
-              [ "w-8/12 text-center" ]
+              [ "w-8/12 text-center text-bold" ]
              [ if open then
                  textInputBox
                    { boxAction: renameAction
@@ -123,6 +132,9 @@ nodePopupViewCpt = here.component "nodePopupView" cpt
      , title: "Rename"
      , callback: const $ T.write_ true isOpen
      , elevation: Level2
+      , className: "box-wrapper-action-rename"
+      , focusRing: true
+      , showLabel: true
      }

  panelBody :: T.Box (Maybe NodeAction) -> Record NodePopupProps -> R.Element
@@ -133,7 +145,7 @@ nodePopupViewCpt = here.component "nodePopupView" cpt
      H.div
        { className: intercalate " "
            [ "popup-container__body"
-            , "card-body"
+            , "toolbox-tabs-labels"
            ]
        }
        $
@@ -157,10 +169,11 @@ nodePopupViewCpt = here.component "nodePopupView" cpt
          if A.length buttons < 2 then [ H.div { className: "col-4" } [] ]
          else []

-  mPanelAction :: Record NodePopupS -> Record NodePopupProps -> R.Element
+  mPanelAction :: Record NodePopupS -> Record NodePopupProps -> (NodeAction -> Effect Unit) -> R.Element
  mPanelAction
    { action: Just action }
-    { boxes, dispatch, id, name, nodeType, session } =
+    { boxes, dispatch, id, name, nodeType, session }
+    tabFocusHandler =
    panelAction
      { action
      , boxes
@@ -169,39 +182,70 @@ nodePopupViewCpt = here.component "nodePopupView" cpt
      , name
      , nodeType
      , session
+      , tabFocusHandler
      }
-  mPanelAction { action: Nothing } _ =
-    H.div
-      { className: "popup-container__footer card-footer" }
-      [ H.h6
-          {}
-          [ B.icon
-              { name: "hand-pointer-o"
-              , className: "mr-1"
+  mPanelAction
+    { action: Nothing }
+    props@{ boxes, dispatch, id, name, nodeType, session }
+    tabFocusHandler =
+    R.fragment
+      [ H.div { className: "" }
+          [ panelAction
+              { action: Documentation nodeType
+              , boxes
+              , dispatch
+              , id
+              , name
+              , nodeType
+              , session
+              , tabFocusHandler
              }
-          , H.text "Select available actions of this node"
-          ]
-      , H.ul
-          { className: "panel-actions" }
-          [ H.div
-              { className: "panel-actions__ok-to-use" }
-              [ B.icon
-                  { name: "circle" }
-              , B.span_ "usable"
-              ]
-          , H.div
-              { className: "panel-actions__almost-useable" }
-              [ B.icon
-                  { name: "circle" }
-              , B.span_ "almost useable"
-              ]
-          , H.div
-              { className: "panel-actions__development-in-progress" }
-              [ B.icon
-                  { name: "circle" }
-              , B.span_ "development in progress"
-              ]
          ]
+      -- , H.div
+      --   { className: "popup-container__footer card-footer" }
+      --   [
+      --     H.h6
+      --     {}
+      --     [
+      --       B.icon
+      --       { name: "hand-pointer-o"
+      --       , className: "mr-1"
+      --       }
+      --     ,
+      --       H.text "Select available actions of this node"
+      --     ]
+      --   ,
+      --     H.ul
+      --     { className: "panel-actions" }
+      --     [
+      --       H.div
+      --       { className: "panel-actions__ok-to-use" }
+      --       [
+      --         B.icon
+      --         { name: "circle" }
+      --       ,
+      --         B.span_ "usable"
+      --       ]
+      --     ,
+      --       H.div
+      --       { className: "panel-actions__almost-useable" }
+      --       [
+      --         B.icon
+      --         { name: "circle" }
+      --       ,
+      --         B.span_ "almost useable"
+      --       ]
+      --     ,
+      --       H.div
+      --       { className: "panel-actions__development-in-progress" }
+      --       [
+      --         B.icon
+      --         { name: "circle" }
+      --       ,
+      --         B.span_ "development in progress"
+      --       ]
+      --     ]
+      --   ]
      ]

 type ActionState =
@@ -261,20 +305,22 @@ buttonClickCpt = here.component "buttonClick" cpt
            ]
        }
        [ B.iconButton
-            { className: "popup-container__cta__button"
+            { className: intercalate " "
+                [ "popup-container__cta__button"
+                , action == Just todo ? "popup-container__cta__button--active" $ ""
+                ]
            , name: glyphiconNodeAction todo
            , title: show todo
-            , callback: click
+            , callback: action == Just todo ? pure $ click
            , elevation: Level2
-            , status: action == Just todo
-                ? Disabled
-                $
-                  Enabled
-            }
-        , B.icon
-            { className: "popup-container__cta__icon"
-            , name: "circle"
+            -- , status: action == Just todo ?
+            --     Disabled $
+            --     Enabled
            }
+        -- , B.icon
+        --     { className: "popup-container__cta__icon"
+        --     , name: "circle"
+        --     }
        ]

  -- | Helpers
@@ -302,6 +348,7 @@ type PanelActionProps =
  , name :: Name
  , nodeType :: GT.NodeType
  , session :: Session
+  , tabFocusHandler :: NodeAction -> Effect Unit
  )

 panelAction :: R2.Leaf PanelActionProps
@@ -315,7 +362,7 @@ panelActionCpt = here.component "panelAction" cpt
  cpt { action: AddingContact, dispatch, id } _ =
    pure $ Contact.actionAddContact { dispatch, id } []
  cpt { action: Config, nodeType } _ =
-    pure $ fragmentPT $ "Config " <> show nodeType
+    pure $ H.div { className: "card-body toolbox-tab-content px-5 py-4" } [ H.text $ "Config " <> show nodeType ]
  cpt { action: Delete, nodeType, dispatch } _ =
    pure $ actionDelete { dispatch, nodeType } []
  cpt { action: Documentation nodeType } _ =
@@ -324,8 +371,8 @@ panelActionCpt = here.component "panelAction" cpt
    pure $ actionDownload { id, nodeType, session } []
  cpt { action: Link { subTreeParams }, dispatch, id, nodeType, session } _ =
    pure $ linkNode { dispatch, id, nodeType, session, subTreeParams } []
-  cpt { action: ManageTeam, nodeType, id, session } _ =
-    pure $ actionManageTeam { id, nodeType, session } []
+  cpt { action: ManageTeam, nodeType, id, session, tabFocusHandler } _ =
+    pure $ actionManageTeam { id, nodeType, session, tabFocusHandler } []
  cpt { action: Merge { subTreeParams }, dispatch, id, nodeType, session } _ =
    pure $ mergeNode { dispatch, id, nodeType, session, subTreeParams } []
  cpt { action: Move { subTreeParams }, dispatch, id, nodeType, session } _ =

--- a/src/Gargantext/Components/Forest/Tree/Node/Settings.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Settings.purs
@@ -60,26 +60,26 @@ instance Eq NodeAction where
  eq _ _ = false

 instance Show NodeAction where
-  show (Add _) = "Add Child" -- foldl (\a b -> a <> show b) "Add " xs
+  show (Add _) = "Add a child node" -- foldl (\a b -> a <> show b) "Add " xs
  show AddingContact = "AddingContact"
  show CloseNodePopover = "CloseNodePopover"
  show Config = "Config"
-  show Delete = "Delete"
+  show Delete = "Delete this node"
  show (Documentation x) = "Documentation of " <> show x
  show Download = "Download"
  show (Link _) = "Link to " -- <> show x
  show ManageTeam = "Team"
  show (Merge _) = "Merge with subtree" -- <> show t
-  show (Move _) = "Move with subtree params" -- <> show t
+  show (Move _) = "Move node within the tree" -- <> show t
  show (Publish _) = "Publish" -- <> show x
  show Reconstruct = "Reconstruct"
  show Refresh = "Refresh"
  show ReloadWithSettings = "Reload (with settings)"
-  show SearchBox = "SearchBox"
-  show ShareURL = "Share URL"
-  show Share = "Share"
+  show SearchBox = "Search (APIs) and create a corpus"
+  show ShareURL = "Share the node (URL)"
+  show Share = "Invite user(s) to the team"
  show Upload = "Upload"
-  show WriteNodesDocuments = "WriteNodesDocuments"
+  show WriteNodesDocuments = "Import a corpus from your Notes"

 glyphiconNodeAction :: NodeAction -> String
 glyphiconNodeAction (Add _) = "plus"
@@ -92,7 +92,7 @@ glyphiconNodeAction Download = "download"
 glyphiconNodeAction (Link _) = "arrows-h"
 glyphiconNodeAction ManageTeam = "users"
 glyphiconNodeAction (Merge _) = "random"
-glyphiconNodeAction (Move _) = "share-square-o"
+glyphiconNodeAction (Move _) = "arrows"
 glyphiconNodeAction (Publish _) = fldr FolderPublic true
 glyphiconNodeAction Reconstruct = "cogs"
 glyphiconNodeAction Refresh = "refresh"
@@ -101,7 +101,7 @@ glyphiconNodeAction SearchBox = "search"
 glyphiconNodeAction ShareURL = "share-alt"
 glyphiconNodeAction Share = "user-plus"
 glyphiconNodeAction Upload = "upload"
-glyphiconNodeAction WriteNodesDocuments = "bars"
+glyphiconNodeAction WriteNodesDocuments = "file-text-o"
 glyphiconNodeAction _ = ""

 ------------------------------------------------------------------------
@@ -164,24 +164,24 @@ settingsBoxLens Calc =
    ]
 settingsBoxLens Corpus =
  _buttons .~
-    [ ReloadWithSettings
-    , Add
-        [ Graph
-        , Notes
-        , Calc
+    [ Add
+        [ Notes
+        , Graph
        , NodeTexts
        , NodeList
        -- , Dashboard
        , Phylo
        -- , NodeFrameNotebook
+        , Calc
        ]
-    , Move moveParameters
    , Upload
    , SearchBox
-    , ShareURL
    , WriteNodesDocuments
+    -- , ReloadWithSettings -- TODO
+    , Move moveParameters
    -- , Download
-    , Link (linkParams Annuaire)
+    -- , Link (linkParams Annuaire)
+    , ShareURL
    , Delete
    ]
 settingsBoxLens Dashboard =
@@ -230,7 +230,7 @@ settingsBoxLens FolderShared =
 settingsBoxLens Graph =
  _buttons .~
    [ ReloadWithSettings
-    , Config
+    -- , Config
    , Download -- TODO as GEXF or JSON
    -- , Publish publishParams
    , ShareURL
@@ -265,7 +265,7 @@ settingsBoxLens NodeFrameVisio =
 settingsBoxLens NodeList =
  _buttons .~
    [ ReloadWithSettings
-    , Config
+    -- , Config
    , Upload
    , Download
    , ShareURL
@@ -350,8 +350,8 @@ settingsBoxLens Team =
        , NodeFrameVisio
        ]
    , Share
-    , ShareURL
    , ManageTeam
+    , ShareURL
    , Delete
    ]
 settingsBoxLens _ =

--- a/src/Gargantext/Components/Forest/Tree/Node/Tools.purs
+++ b/src/Gargantext/Components/Forest/Tree/Node/Tools.purs
@@ -31,7 +31,10 @@ fragmentPT :: String -> R.Element
 fragmentPT text = H.div { style: { margin: "10px" } } [ H.text text ]

 type PanelProps =
-  (mError :: Maybe String)
+  ( mError :: Maybe String
+  , iconName :: String
+  , textTitle :: String
+  )

 -- | Last element of panel's children goes to footer, all others go to body
 panel :: R2.Component PanelProps
@@ -40,7 +43,7 @@ panel = R.createElement panelCpt
 panelCpt :: R.Component PanelProps
 panelCpt = here.component "panel" cpt
  where
-  cpt { mError } children = do
+  cpt { mError, iconName, textTitle } children = do
    let
      errorCpt =
        R2.fromMaybe mError $
@@ -52,11 +55,16 @@ panelCpt = here.component "panel" cpt
              ]

    pure $ R.fragment
-      [ H.div { className: "card-body" }
+      [ H.div { className: "card-body toolbox-tab-content px-5 py-4" }
          [ H.div { className: "card-text" }
              [ R2.row
                  -- TODO add type for text or form here [ H.form {className: "form-horizontal"} bodies ]
-                  [ R2.col 12 bodies ]
+                  [ H.h5 { className: "col text-primary font-weight-normal mb-2" }
+                      [ B.icon { name: iconName }
+                      , H.span { className: "px-1" } [ H.text textTitle ]
+                      ]
+                  , R2.col 12 bodies
+                  ]
              , errorCpt
              ]
          ]
@@ -255,6 +263,7 @@ type FormChoiceSafeProps item m =
  , default :: item
  , callback :: item -> Effect m
  , print :: item -> String
+  , label :: String
  )

 -- | Form Choice input
@@ -268,17 +277,18 @@ formChoiceSafe = R.createElement formChoiceSafeCpt
 formChoiceSafeCpt :: forall item m. Show item => R.Component (FormChoiceSafeProps item m)
 formChoiceSafeCpt = here.component "formChoiceSafe" cpt
  where
-  cpt { items, default, callback, print } _ = do
+  cpt { items, default, callback, print, label } _ = do
    pure $ case items of
      [] -> H.div {} []
      [ n ] -> formButton { item: n, callback, print } []
-      _ -> formChoice { items, default, callback, print } []
+      _ -> formChoice { items, default, callback, print, label } []

 type FormChoiceProps item m =
  ( items :: Array item
  , default :: item
  , callback :: item -> Effect m
  , print :: item -> String
+  , label :: String
  )

 -- | List Form
@@ -291,9 +301,10 @@ formChoice = R.createElement formChoiceCpt
 formChoiceCpt :: forall item m. Show item => R.Component (FormChoiceProps item m)
 formChoiceCpt = here.component "formChoice" cpt
  where
-  cpt { items, callback, default, print } _ = do
+  cpt { items, callback, default, print, label } _ = do
    pure $ H.div { className: "form-group" }
-      [ R2.select
+      [ H.label {} [ H.text label ]
+      , R2.select
          { className: "form-control with-icon-font"
          , defaultValue: show default
          , on: { change }

--- a/src/Gargantext/Components/GraphExplorer/Sidebar/Legend.purs
+++ b/src/Gargantext/Components/GraphExplorer/Sidebar/Legend.purs
@@ -56,7 +56,7 @@ legendCpt = here.component "legend" cpt
    _ = do
    -- | Hooks
    -- |
-    R.useEffectOnce' $ here.info2 "legend" extractedNodeList
+    -- R.useEffectOnce' $ here.info2 "legend" extractedNodeList
    -- | Render
    -- |
    pure $

--- a/src/Gargantext/Components/GraphExplorer/Toolbar/Controls.purs
+++ b/src/Gargantext/Components/GraphExplorer/Toolbar/Controls.purs
@@ -131,7 +131,7 @@ controlsCpt = R.memo' $ here.component "controls" cpt
    R.useEffect2' sigmaRef forceAtlasState' $ do
      T.modify_ (SigmaxT.forceAtlasEdgeState forceAtlasState') showEdges
      let renderLabels = SigmaxT.forceAtlasLabelState forceAtlasState'
-      here.log2 "[controls] renderLabels" renderLabels
+      -- here.log2 "[controls] renderLabels" renderLabels
      Sigmax.dependOnSigma (R.readRef sigmaRef) "[graphCpt (Cleanup)] no sigma" $ \sigma -> do
        Sigma.setSettings sigma { renderLabels }
    -- v <- T.read showEdges

--- a/src/Gargantext/Components/ListSelection.purs
+++ b/src/Gargantext/Components/ListSelection.purs
@@ -32,13 +32,13 @@ selectionCpt = here.component "selection" cpt
  where
  cpt { selection, session } _ = do
    selection' <- R2.useLive' selection
-    pure $ H.div { className: "list-selection p-1" }
+    pure $ H.div { className: "list-selection" }
      [ B.formSelect'
          { callback: flip T.write_ selection
          , value: selection'
          , list:
              [ MyListsFirst
-              , OtherListsFirst
+              -- , OtherListsFirst
              -- , SelectedLists []
              , NoList
              ]

--- a/src/Gargantext/Components/ListSelection/Types.purs
+++ b/src/Gargantext/Components/ListSelection/Types.purs
@@ -11,15 +11,15 @@ import Simple.JSON as JSON

 data Selection
  = MyListsFirst
-  | OtherListsFirst
+  -- | OtherListsFirst
  | SelectedLists (Array ListId)
  | NoList

 derive instance Generic Selection _
 instance Show Selection where
  show MyListsFirst = "My lists first"
-  show OtherListsFirst = "Other lists first"
-  show NoList = "NoList"
+  -- show OtherListsFirst   = "Other lists first"
+  show NoList = "No list (the analysis will not generate any terms)"
  show (SelectedLists _) = "Selected lists"

 instance Eq Selection where
@@ -27,7 +27,7 @@ instance Eq Selection where

 instance Read Selection where
  read "My lists first" = Just MyListsFirst
-  read "Other lists first" = Just OtherListsFirst
+  -- read "Other lists first" = Just OtherListsFirst
  read "Selected lists" = Just $ SelectedLists []
  read "NoList" = Just NoList
  read _ = Nothing
@@ -35,7 +35,7 @@ instance Read Selection where
 instance JSON.WriteForeign Selection where
  writeImpl MyListsFirst = JSON.writeImpl { "type": "MyListsFirst" }
  writeImpl NoList = JSON.writeImpl { "type": "NoList", "makeList": true }
-  writeImpl OtherListsFirst = JSON.writeImpl { "type": "OtherListsFirst" }
+  -- writeImpl OtherListsFirst     = JSON.writeImpl { "type": "OtherListsFirst" }
  writeImpl (SelectedLists ids) = JSON.writeImpl { "type": "SelectedLists", value: ids }

 selectedListIds :: Selection -> Array ListId

--- a/src/Gargantext/Utils/ZIP.js
+++ b/src/Gargantext/Utils/ZIP.js
+/* global exports */
+"use strict";
+
+// module WebSocket
+
+async function getFilesAsync_ (blob) {
+  var JSZip = require("jszip");
+  var zip = new JSZip();
+  var data = await zip.loadAsync(blob);
+  var vals = Object.values(data.files);
+  var fns = [];
+  for (var i = 0; i < vals.length; i++) {
+    fns.push(vals[i].name);
+    console.log(vals[i].name);
+  }
+  console.log(fns);
+  return fns;
+}
+
+export const getFilesAsync = blob => () =>
+  getFilesAsync_(blob);
--- a/src/Gargantext/Utils/ZIP.purs
+++ b/src/Gargantext/Utils/ZIP.purs
+-- | This module defines a simple low-level interface to the websockets API.
+
+module Gargantext.Utils.ZIP
+  ( getFiles
+  ) where
+
+import Gargantext.Prelude
+
+import Data.ArrayBuffer.Types (ArrayBuffer)
+import Effect
+import Control.Promise
+import Effect.Aff (Aff)
+
+foreign import getFilesAsync :: ArrayBuffer -> Effect (Promise (Array String))
+
+getFiles :: ArrayBuffer -> Aff (Array String)
+getFiles blob = toAffE $ getFilesAsync blob
--- a/src/sass/_legacy/_styles.sass
+++ b/src/sass/_legacy/_styles.sass
@@ -320,3 +320,103 @@ select.form-control
    display: inline-block
    opacity: 1
    transform: scale(1.4)
+
+/////////////////////////////////////////
+
+.forest-tree-node-modal
+  // will enlarge popup when inner content is larger (see issue #315),
+  // with a minimal width to avoid row item collapsing (see issue #324)
+  width: fit-content
+  min-width: $node-popup-width
+  max-width: 100vw // override Bootstrap modal rules (via sizing props)
+
+.node-popup-tooltip
+
+  .panel-actions
+    font-size: 90%
+    padding-left: space-x(2.5)
+
+    .b-icon
+      margin-right: space-x(1)
+      font-size: 11px
+
+    &__almost-useable
+      color: $almost-useable
+    &__development-in-progress
+      color: $development-in-progress
+    &__ok-to-use
+      color: $ok-to-use
+      // (?) avoid unnecessary informations
+      display: none
+
+  .popup-container
+    display: flex
+    flex-direction: column
+
+    &__header
+      .b-wad
+        .box-wrapper-action-rename .b-icon-button__inner
+          visibility: hidden
+
+        &:hover
+          .box-wrapper-action-rename .b-icon-button__inner
+            visibility: visible
+
+
+    &__body
+      display: flex
+      justify-content: center
+      background-color: $body-bg
+
+    &__body.toolbox-tabs-labels
+      border-bottom: 1px solid $gray-300
+      padding: space-x(2) space-x(7) 0
+
+    &__cta
+      position: relative
+
+      &__button
+        font-size: 20px
+        padding: 0.7rem 1.5rem 0.6rem
+        display: list-item
+        border: 1px solid transparent
+        border-top-left-radius: 0.25rem
+        border-top-right-radius: 0.25rem
+        margin-bottom: -1px
+
+        &:hover, &--active
+          border: 1px solid $gray-300
+
+
+        &--active, &--active:hover
+          
+          border-bottom-color: #fff
+
+
+      &__icon
+        $offset-y: 8px
+        $offset-x: 10px
+
+        position: absolute
+        top: $offset-y
+        right: $offset-x
+        font-size: 11px
+
+      // @XXX SASS lacking of immediate parent selector
+      &--almost-useable .popup-container__cta__icon
+        color: $almost-useable
+      &--development-in-progress .popup-container__cta__icon
+        color: $development-in-progress
+      &--ok-to-use .popup-container__cta__icon
+        color: $ok-to-use
+        // (?) avoid unnecessary informations
+        display: none
+    
+    .toolbox-tab-content
+      padding: space-x(4)
+
+
+  .text-sup
+    vertical-align: super
+    font-size: x-small
+    margin: .33em
--- a/src/sass/_legacy/_tree.sass
+++ b/src/sass/_legacy/_tree.sass
@@ -493,87 +493,14 @@ $node-popup-width: 544px
      &__children > #{ $self }__node
        padding-right: space-x(2.5)

-/////////////////////////////////////////
-
-.forest-tree-node-modal
-  // will enlarge popup when inner content is larger (see issue #315),
-  // with a minimal width to avoid row item collapsing (see issue #324)
-  width: fit-content
-  min-width: $node-popup-width
-  max-width: 100vw // override Bootstrap modal rules (via sizing props)
-
-.node-popup-tooltip
-
-  .panel-actions
-    font-size: 90%
-    padding-left: space-x(2.5)
-
-    .b-icon
-      margin-right: space-x(1)
-      font-size: 11px
-
-    &__almost-useable
-      color: $almost-useable
-    &__development-in-progress
-      color: $development-in-progress
-    &__ok-to-use
-      color: $ok-to-use
-      // (?) avoid unnecessary informations
-      display: none
-
-  .popup-container
-    display: flex
-    flex-direction: column
-
-    &__header
-      .b-wad
-        .fa-pencil
-          visibility: hidden
-
-        &:hover
-          .fa-pencil
-            visibility: visible
-
-
-    &__body
-      display: flex
-      justify-content: center
-      background-color: $body-bg
-      padding: space-x(5) space-x(7)
-      gap: space-x(6)
-
-    &__cta
-      position: relative
-
-      &__button
-        font-size: 18px
-
-      &__icon
-        $offset-y: -9px
-        $offset-x: -13px
-
-        position: absolute
-        top: $offset-y
-        right: $offset-x
-        font-size: 11px
-
-      // @XXX SASS lacking of immediate parent selector
-      &--almost-useable .popup-container__cta__icon
-        color: $almost-useable
-      &--development-in-progress .popup-container__cta__icon
-        color: $development-in-progress
-      &--ok-to-use .popup-container__cta__icon
-        color: $ok-to-use
-        // (?) avoid unnecessary informations
-        display: none

 /////////////////////////////////////////

 .frame-search.card
-  $frame-width: 1000px
+  // $frame-width: 1000px
  $frame-height: 600px

-  width: $frame-width
+  // width: $frame-width
  height: $frame-height

 /////////////////////////////////////////

--- a/src/sass/base/_reset.scss
+++ b/src/sass/base/_reset.scss
@@ -32,6 +32,6 @@ a:focus {
  outline: 0;
 }

-ul {
-  list-style:none;
+ul, li, span {
+  list-style: none;
 }
--- a/src/sass/components/_grouped.scss
+++ b/src/sass/components/_grouped.scss
@@ -46,6 +46,7 @@
    background-color: $modal-content-bg;
    margin-left: $wrapper-margin;
    margin-right: $wrapper-margin;
+    max-width: 800px;
  }

  &__header {
@@ -557,4 +558,11 @@
  .form-control {
    border-radius: 50px;
  }
+}
+
+details {
+  summary {
+    cursor: pointer;
+    // list-style: initial !important;
+  }
 }
\ No newline at end of file