update the topbar and the graph topbar design

dist/styles/bootstrap-darkster.css

@@ -6303,9 +6303,11 @@ h3 {
   color: inherit;
 }
 
-.mainleaf__folder-icon:not(.b-icon-button--enabled)::before,
-.main-topbar__tree-switcher.btn-light .fa::before,
-.main-topbar__tree-switcher.btn-outline-light .fa::before {
+.mainleaf__folder-icon:not(.b-icon-button--enabled):before,
+.main-topbar__tree-switcher.btn-light .fa:before,
+.main-topbar__tree-switcher.btn-outline-light .fa:before,
+#portal-topbar .graph-topbar .btn-light:hover .fa:before,
+#portal-topbar .graph-topbar .btn-outline-light .fa:before {
   color: inherit !important;
 }
 
@@ -6314,7 +6316,8 @@ h3 {
 .popup-container .search-bar .btn.fa,
 .login-modal-form .btn .fa,
 .corpus-layout__code-section .b-button .fa,
-.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa {
+.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa,
+#portal-topbar .graph-topbar__title .fa {
   color: #D1CDC7 !important;
 }
 .main-topbar .nav-item > a .fa:before,
@@ -6322,7 +6325,8 @@ h3 {
 .popup-container .search-bar .btn.fa:before,
 .login-modal-form .btn .fa:before,
 .corpus-layout__code-section .b-button .fa:before,
-.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before {
+.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before,
+#portal-topbar .graph-topbar__title .fa:before {
   color: #D1CDC7 !important;
 }
 
@@ -6521,6 +6525,13 @@ h3 {
   border: 1px solid #6C757D;
 }
 
+.rounded-circle-2 {
+  border-radius: 50px;
+}
+.rounded-circle-2 .form-control {
+  border-radius: 50px;
+}
+
 .echarts-for-react {
   height: 300px;
 }
@@ -9566,10 +9577,20 @@ input[type=range]:-moz-focusring {
   position: sticky;
   top: 0;
   z-index: 2;
+  height: 40px;
+}
+.main-topbar__theme-switcher select {
+  margin: 4px 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 2rem;
 }
 .main-topbar__theme-switcher, .main-topbar__lang-switcher, .main-topbar__tree-switcher {
   margin-right: 8px;
 }
+.main-topbar__tree-switcher {
+  padding: 0.15rem 0.5rem;
+}
 .main-topbar.navbar-dark .navbar-text:hover {
   color: rgba(255, 255, 255, 0.75);
 }
@@ -9580,6 +9601,9 @@ input[type=range]:-moz-focusring {
 .main-topbar__logo {
   margin-right: initial;
 }
+.main-topbar__logo img {
+  max-width: none;
+}
 .right-handed .main-topbar {
   flex-direction: row;
 }
@@ -9734,7 +9758,6 @@ input[type=range]:-moz-focusring {
   position: absolute;
   z-index: 1;
   background-color: #181A1B;
-  width: 100%;
   border-bottom: 1px solid #dee2e6;
 }
 .graph-layout__toolbar .b-fieldset {
@@ -9757,8 +9780,6 @@ input[type=range]:-moz-focusring {
   padding: 0 8px;
   height: 100%;
   display: flex;
-  padding-left: 4px;
-  padding-right: 4px;
 }
 .right-handed .graph-topbar {
   border-left: 1px solid rgba(255, 255, 255, 0.05);
@@ -9769,18 +9790,28 @@ input[type=range]:-moz-focusring {
 }
 
 .graph-topbar__toolbar, .graph-topbar__sidebar {
-  width: 136px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   margin-left: 4px;
   margin-right: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
 }
 .graph-topbar__search {
   width: 304px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   margin-left: 4px;
   margin-right: 4px;
 }
 .graph-topbar__search [type=submit] {
   display: none;
 }
+.graph-topbar__search .form-control {
+  height: 2rem;
+  padding-top: 0;
+  padding-bottom: 0;
+}
 
 .graph-doc-focus {
   scrollbar-width: none;
@@ -10033,6 +10064,7 @@ input[type=range]:-moz-focusring {
 .graph-toolbar {
   display: flex;
   padding: 8px;
+  padding-top: 16px;
 }
 .graph-toolbar__gap {
   width: 8px;

dist/styles/bootstrap-default.css

@@ -6114,9 +6114,11 @@ h3 {
   color: inherit;
 }
 
-.mainleaf__folder-icon:not(.b-icon-button--enabled)::before,
-.main-topbar__tree-switcher.btn-light .fa::before,
-.main-topbar__tree-switcher.btn-outline-light .fa::before {
+.mainleaf__folder-icon:not(.b-icon-button--enabled):before,
+.main-topbar__tree-switcher.btn-light .fa:before,
+.main-topbar__tree-switcher.btn-outline-light .fa:before,
+#portal-topbar .graph-topbar .btn-light:hover .fa:before,
+#portal-topbar .graph-topbar .btn-outline-light .fa:before {
   color: inherit !important;
 }
 
@@ -6125,7 +6127,8 @@ h3 {
 .popup-container .search-bar .btn.fa,
 .login-modal-form .btn .fa,
 .corpus-layout__code-section .b-button .fa,
-.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa {
+.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa,
+#portal-topbar .graph-topbar__title .fa {
   color: #f8f9fa !important;
 }
 .main-topbar .nav-item > a .fa:before,
@@ -6133,7 +6136,8 @@ h3 {
 .popup-container .search-bar .btn.fa:before,
 .login-modal-form .btn .fa:before,
 .corpus-layout__code-section .b-button .fa:before,
-.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before {
+.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before,
+#portal-topbar .graph-topbar__title .fa:before {
   color: #f8f9fa !important;
 }
 
@@ -6332,6 +6336,13 @@ h3 {
   border: 1px solid #CED4DA;
 }
 
+.rounded-circle-2 {
+  border-radius: 50px;
+}
+.rounded-circle-2 .form-control {
+  border-radius: 50px;
+}
+
 .echarts-for-react {
   height: 300px;
 }
@@ -9373,10 +9384,20 @@ input[type=range]:-moz-focusring {
   position: sticky;
   top: 0;
   z-index: 2;
+  height: 40px;
+}
+.main-topbar__theme-switcher select {
+  margin: 4px 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 2rem;
 }
 .main-topbar__theme-switcher, .main-topbar__lang-switcher, .main-topbar__tree-switcher {
   margin-right: 8px;
 }
+.main-topbar__tree-switcher {
+  padding: 0.15rem 0.5rem;
+}
 .main-topbar.navbar-dark .navbar-text:hover {
   color: rgba(255, 255, 255, 0.75);
 }
@@ -9387,6 +9408,9 @@ input[type=range]:-moz-focusring {
 .main-topbar__logo {
   margin-right: initial;
 }
+.main-topbar__logo img {
+  max-width: none;
+}
 .right-handed .main-topbar {
   flex-direction: row;
 }
@@ -9541,7 +9565,6 @@ input[type=range]:-moz-focusring {
   position: absolute;
   z-index: 1;
   background-color: #fff;
-  width: 100%;
   border-bottom: 1px solid #dee2e6;
 }
 .graph-layout__toolbar .b-fieldset {
@@ -9564,8 +9587,6 @@ input[type=range]:-moz-focusring {
   padding: 0 8px;
   height: 100%;
   display: flex;
-  padding-left: 4px;
-  padding-right: 4px;
 }
 .right-handed .graph-topbar {
   border-left: 1px solid rgba(255, 255, 255, 0.05);
@@ -9576,18 +9597,28 @@ input[type=range]:-moz-focusring {
 }
 
 .graph-topbar__toolbar, .graph-topbar__sidebar {
-  width: 136px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   margin-left: 4px;
   margin-right: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
 }
 .graph-topbar__search {
   width: 304px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   margin-left: 4px;
   margin-right: 4px;
 }
 .graph-topbar__search [type=submit] {
   display: none;
 }
+.graph-topbar__search .form-control {
+  height: 2rem;
+  padding-top: 0;
+  padding-bottom: 0;
+}
 
 .graph-doc-focus {
   scrollbar-width: none;
@@ -9840,6 +9871,7 @@ input[type=range]:-moz-focusring {
 .graph-toolbar {
   display: flex;
   padding: 8px;
+  padding-top: 16px;
 }
 .graph-toolbar__gap {
   width: 8px;

dist/styles/bootstrap-greyson.css

@@ -5869,9 +5869,11 @@ h3 {
   color: inherit;
 }
 
-.mainleaf__folder-icon:not(.b-icon-button--enabled)::before,
-.main-topbar__tree-switcher.btn-light .fa::before,
-.main-topbar__tree-switcher.btn-outline-light .fa::before {
+.mainleaf__folder-icon:not(.b-icon-button--enabled):before,
+.main-topbar__tree-switcher.btn-light .fa:before,
+.main-topbar__tree-switcher.btn-outline-light .fa:before,
+#portal-topbar .graph-topbar .btn-light:hover .fa:before,
+#portal-topbar .graph-topbar .btn-outline-light .fa:before {
   color: inherit !important;
 }
 
@@ -5880,7 +5882,8 @@ h3 {
 .popup-container .search-bar .btn.fa,
 .login-modal-form .btn .fa,
 .corpus-layout__code-section .b-button .fa,
-.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa {
+.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa,
+#portal-topbar .graph-topbar__title .fa {
   color: #eceeec !important;
 }
 .main-topbar .nav-item > a .fa:before,
@@ -5888,7 +5891,8 @@ h3 {
 .popup-container .search-bar .btn.fa:before,
 .login-modal-form .btn .fa:before,
 .corpus-layout__code-section .b-button .fa:before,
-.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before {
+.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before,
+#portal-topbar .graph-topbar__title .fa:before {
   color: #eceeec !important;
 }
 
@@ -6087,6 +6091,13 @@ h3 {
   border: 1px solid #CED4DA;
 }
 
+.rounded-circle-2 {
+  border-radius: 50px;
+}
+.rounded-circle-2 .form-control {
+  border-radius: 50px;
+}
+
 .echarts-for-react {
   height: 300px;
 }
@@ -9132,10 +9143,20 @@ input[type=range]:-moz-focusring {
   position: sticky;
   top: 0;
   z-index: 2;
+  height: 40px;
+}
+.main-topbar__theme-switcher select {
+  margin: 4px 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 2rem;
 }
 .main-topbar__theme-switcher, .main-topbar__lang-switcher, .main-topbar__tree-switcher {
   margin-right: 8px;
 }
+.main-topbar__tree-switcher {
+  padding: 0.15rem 0.5rem;
+}
 .main-topbar.navbar-dark .navbar-text:hover {
   color: rgba(255, 255, 255, 0.75);
 }
@@ -9146,6 +9167,9 @@ input[type=range]:-moz-focusring {
 .main-topbar__logo {
   margin-right: initial;
 }
+.main-topbar__logo img {
+  max-width: none;
+}
 .right-handed .main-topbar {
   flex-direction: row;
 }
@@ -9300,7 +9324,6 @@ input[type=range]:-moz-focusring {
   position: absolute;
   z-index: 1;
   background-color: #fff;
-  width: 100%;
   border-bottom: 1px solid #dee2e6;
 }
 .graph-layout__toolbar .b-fieldset {
@@ -9323,8 +9346,6 @@ input[type=range]:-moz-focusring {
   padding: 0 8px;
   height: 100%;
   display: flex;
-  padding-left: 4px;
-  padding-right: 4px;
 }
 .right-handed .graph-topbar {
   border-left: 1px solid rgba(255, 255, 255, 0.05);
@@ -9335,18 +9356,28 @@ input[type=range]:-moz-focusring {
 }
 
 .graph-topbar__toolbar, .graph-topbar__sidebar {
-  width: 136px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   margin-left: 4px;
   margin-right: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
 }
 .graph-topbar__search {
   width: 304px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   margin-left: 4px;
   margin-right: 4px;
 }
 .graph-topbar__search [type=submit] {
   display: none;
 }
+.graph-topbar__search .form-control {
+  height: 2rem;
+  padding-top: 0;
+  padding-bottom: 0;
+}
 
 .graph-doc-focus {
   scrollbar-width: none;
@@ -9599,6 +9630,7 @@ input[type=range]:-moz-focusring {
 .graph-toolbar {
   display: flex;
   padding: 8px;
+  padding-top: 16px;
 }
 .graph-toolbar__gap {
   width: 8px;

dist/styles/bootstrap-herbie.css

@@ -6117,9 +6117,11 @@ h3 {
   color: inherit;
 }
 
-.mainleaf__folder-icon:not(.b-icon-button--enabled)::before,
-.main-topbar__tree-switcher.btn-light .fa::before,
-.main-topbar__tree-switcher.btn-outline-light .fa::before {
+.mainleaf__folder-icon:not(.b-icon-button--enabled):before,
+.main-topbar__tree-switcher.btn-light .fa:before,
+.main-topbar__tree-switcher.btn-outline-light .fa:before,
+#portal-topbar .graph-topbar .btn-light:hover .fa:before,
+#portal-topbar .graph-topbar .btn-outline-light .fa:before {
   color: inherit !important;
 }
 
@@ -6128,7 +6130,8 @@ h3 {
 .popup-container .search-bar .btn.fa,
 .login-modal-form .btn .fa,
 .corpus-layout__code-section .b-button .fa,
-.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa {
+.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa,
+#portal-topbar .graph-topbar__title .fa {
   color: #F2F2F0 !important;
 }
 .main-topbar .nav-item > a .fa:before,
@@ -6136,7 +6139,8 @@ h3 {
 .popup-container .search-bar .btn.fa:before,
 .login-modal-form .btn .fa:before,
 .corpus-layout__code-section .b-button .fa:before,
-.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before {
+.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before,
+#portal-topbar .graph-topbar__title .fa:before {
   color: #F2F2F0 !important;
 }
 
@@ -6335,6 +6339,13 @@ h3 {
   border: 1px solid #CED4DA;
 }
 
+.rounded-circle-2 {
+  border-radius: 50px;
+}
+.rounded-circle-2 .form-control {
+  border-radius: 50px;
+}
+
 .echarts-for-react {
   height: 300px;
 }
@@ -9380,10 +9391,20 @@ input[type=range]:-moz-focusring {
   position: sticky;
   top: 0;
   z-index: 2;
+  height: 40px;
+}
+.main-topbar__theme-switcher select {
+  margin: 4px 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 2rem;
 }
 .main-topbar__theme-switcher, .main-topbar__lang-switcher, .main-topbar__tree-switcher {
   margin-right: 8px;
 }
+.main-topbar__tree-switcher {
+  padding: 0.15rem 0.5rem;
+}
 .main-topbar.navbar-dark .navbar-text:hover {
   color: rgba(255, 255, 255, 0.75);
 }
@@ -9394,6 +9415,9 @@ input[type=range]:-moz-focusring {
 .main-topbar__logo {
   margin-right: initial;
 }
+.main-topbar__logo img {
+  max-width: none;
+}
 .right-handed .main-topbar {
   flex-direction: row;
 }
@@ -9548,7 +9572,6 @@ input[type=range]:-moz-focusring {
   position: absolute;
   z-index: 1;
   background-color: #fff;
-  width: 100%;
   border-bottom: 1px solid #dee2e6;
 }
 .graph-layout__toolbar .b-fieldset {
@@ -9571,8 +9594,6 @@ input[type=range]:-moz-focusring {
   padding: 0 8px;
   height: 100%;
   display: flex;
-  padding-left: 4px;
-  padding-right: 4px;
 }
 .right-handed .graph-topbar {
   border-left: 1px solid rgba(255, 255, 255, 0.05);
@@ -9583,18 +9604,28 @@ input[type=range]:-moz-focusring {
 }
 
 .graph-topbar__toolbar, .graph-topbar__sidebar {
-  width: 136px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   margin-left: 4px;
   margin-right: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
 }
 .graph-topbar__search {
   width: 304px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   margin-left: 4px;
   margin-right: 4px;
 }
 .graph-topbar__search [type=submit] {
   display: none;
 }
+.graph-topbar__search .form-control {
+  height: 2rem;
+  padding-top: 0;
+  padding-bottom: 0;
+}
 
 .graph-doc-focus {
   scrollbar-width: none;
@@ -9847,6 +9878,7 @@ input[type=range]:-moz-focusring {
 .graph-toolbar {
   display: flex;
   padding: 8px;
+  padding-top: 16px;
 }
 .graph-toolbar__gap {
   width: 8px;

dist/styles/bootstrap-monotony.css

@@ -6118,9 +6118,11 @@ h3 {
   color: inherit;
 }
 
-.mainleaf__folder-icon:not(.b-icon-button--enabled)::before,
-.main-topbar__tree-switcher.btn-light .fa::before,
-.main-topbar__tree-switcher.btn-outline-light .fa::before {
+.mainleaf__folder-icon:not(.b-icon-button--enabled):before,
+.main-topbar__tree-switcher.btn-light .fa:before,
+.main-topbar__tree-switcher.btn-outline-light .fa:before,
+#portal-topbar .graph-topbar .btn-light:hover .fa:before,
+#portal-topbar .graph-topbar .btn-outline-light .fa:before {
   color: inherit !important;
 }
 
@@ -6129,7 +6131,8 @@ h3 {
 .popup-container .search-bar .btn.fa,
 .login-modal-form .btn .fa,
 .corpus-layout__code-section .b-button .fa,
-.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa {
+.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa,
+#portal-topbar .graph-topbar__title .fa {
   color: #eceeec !important;
 }
 .main-topbar .nav-item > a .fa:before,
@@ -6137,7 +6140,8 @@ h3 {
 .popup-container .search-bar .btn.fa:before,
 .login-modal-form .btn .fa:before,
 .corpus-layout__code-section .b-button .fa:before,
-.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before {
+.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa:before,
+#portal-topbar .graph-topbar__title .fa:before {
   color: #eceeec !important;
 }
 
@@ -6336,6 +6340,13 @@ h3 {
   border: 1px solid #CED4DA;
 }
 
+.rounded-circle-2 {
+  border-radius: 50px;
+}
+.rounded-circle-2 .form-control {
+  border-radius: 50px;
+}
+
 .echarts-for-react {
   height: 300px;
 }
@@ -9381,10 +9392,20 @@ input[type=range]:-moz-focusring {
   position: sticky;
   top: 0;
   z-index: 2;
+  height: 40px;
+}
+.main-topbar__theme-switcher select {
+  margin: 4px 0;
+  padding-top: 0;
+  padding-bottom: 0;
+  height: 2rem;
 }
 .main-topbar__theme-switcher, .main-topbar__lang-switcher, .main-topbar__tree-switcher {
   margin-right: 8px;
 }
+.main-topbar__tree-switcher {
+  padding: 0.15rem 0.5rem;
+}
 .main-topbar.navbar-dark .navbar-text:hover {
   color: rgba(255, 255, 255, 0.75);
 }
@@ -9395,6 +9416,9 @@ input[type=range]:-moz-focusring {
 .main-topbar__logo {
   margin-right: initial;
 }
+.main-topbar__logo img {
+  max-width: none;
+}
 .right-handed .main-topbar {
   flex-direction: row;
 }
@@ -9549,7 +9573,6 @@ input[type=range]:-moz-focusring {
   position: absolute;
   z-index: 1;
   background-color: #fff;
-  width: 100%;
   border-bottom: 1px solid #dee2e6;
 }
 .graph-layout__toolbar .b-fieldset {
@@ -9572,8 +9595,6 @@ input[type=range]:-moz-focusring {
   padding: 0 8px;
   height: 100%;
   display: flex;
-  padding-left: 4px;
-  padding-right: 4px;
 }
 .right-handed .graph-topbar {
   border-left: 1px solid rgba(255, 255, 255, 0.05);
@@ -9584,18 +9605,28 @@ input[type=range]:-moz-focusring {
 }
 
 .graph-topbar__toolbar, .graph-topbar__sidebar {
-  width: 136px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   margin-left: 4px;
   margin-right: 4px;
+  padding-left: 4px;
+  padding-right: 4px;
 }
 .graph-topbar__search {
   width: 304px;
+  margin-top: 4px;
+  margin-bottom: 4px;
   margin-left: 4px;
   margin-right: 4px;
 }
 .graph-topbar__search [type=submit] {
   display: none;
 }
+.graph-topbar__search .form-control {
+  height: 2rem;
+  padding-top: 0;
+  padding-bottom: 0;
+}
 
 .graph-doc-focus {
   scrollbar-width: none;
@@ -9848,6 +9879,7 @@ input[type=range]:-moz-focusring {
 .graph-toolbar {
   display: flex;
   padding: 8px;
+  padding-top: 16px;
 }
 .graph-toolbar__gap {
   width: 8px;

src/Gargantext/Components/GraphExplorer/Topbar/Search.purs

@@ -64,9 +64,9 @@ nodeSearchControlCpt = here.component "nodeSearchControl" cpt
           { autocompleteSearch: autocompleteSearch graph
           , onAutocompleteClick: doSearch
           , onEnterPress: doSearch
-          , classes: "filter-results-completions"
+          , classes: "filter-results-completions rounded-circle-2 text-small py-0"
           , state: search
-          , placeholder: "filter and select terms here..."
+          , placeholder: "find and select a term here..."
           }
         ,
           B.button

src/Gargantext/Components/GraphExplorer/Topbar/TopBar.purs

@@ -7,7 +7,7 @@ import Gargantext.Components.Bootstrap.Types (ButtonVariant(..), Variant(..))
 import Gargantext.Components.GraphExplorer.Store as GraphStore
 import Gargantext.Components.GraphExplorer.Topbar.Search (nodeSearchControl)
 import Gargantext.Types as GT
-import Gargantext.Utils ((?))
+import Gargantext.Utils (nbsp, (?))
 import Gargantext.Utils.Reactix as R2
 import Reactix as R
 import Reactix.DOM.HTML as H
@@ -38,33 +38,60 @@ component = here.component "topBar" cpt where
     pure $
 
       H.div
-      { className: "graph-topbar" }
+      { className: "graph-topbar bg-primary h-100" }
       [
+        H.div
+        { className: "graph-topbar__title align-self-center px-1 text-light" }
+        [
+          B.icon { name: "hubzilla" }
+        ,
+          H.text $ nbsp 1
+        ,
+          H.text "Graph"
+        ]
+      ,
         -- Toolbar toggle
         B.button
-        { className: "graph-topbar__toolbar"
+        { className: "graph-topbar__toolbar rounded-circle-2 py-0 px-2 mr-1"
         , callback: \_ -> T.modify_ (not) showControls
         , variant: showControls' ?
             ButtonVariant Light $
             OutlinedButtonVariant Light
+        , title: showControls' ?
+            "Hide toolbar" $
+            "Show toolbar"
         }
         [
-          H.text $ showControls' ? "Hide toolbar" $ "Show toolbar"
+          B.icon { name: "sliders" }
+        ,
+          H.text $ nbsp 1
+        ,
+          H.text "Toolbar"
+        -- ,
+        --   H.text $ showControls' ? "Hide toolbar" $ "Show toolbar"
         ]
       ,
         -- Sidebar toggle
         B.button
-        { className: "graph-topbar__sidebar"
+        { className: "graph-topbar__sidebar rounded-circle-2 py-0 px-2 mr-1"
         , callback: \_ -> T.modify_ GT.toggleSidePanelState showSidebar
-
         , variant: showSidebar' == GT.Opened ?
             ButtonVariant Light $
             OutlinedButtonVariant Light
-        }
-        [
-          H.text $ showSidebar' == GT.Opened ?
+        , title: showSidebar' == GT.Opened ?
             "Hide sidebar" $
             "Show sidebar"
+        }
+        [
+          B.icon { name: "columns" }
+        ,
+          H.text $ nbsp 1
+        ,
+          H.text "Sidebar"
+        -- ,
+        --   H.text $ showSidebar' == GT.Opened ?
+        --     "Hide sidebar" $
+        --     "Show sidebar"
         ]
       ,
         -- Search

src/Gargantext/Components/PhyloExplorer/Topbar/TopBar.purs

@@ -61,7 +61,7 @@ component = here.component "main" cpt where
       [
         -- Toolbar toggle
         B.button
-        { className: "phylo-topbar__toolbar"
+        { className: "phylo-topbar__toolbar rounded-circle-2"
         , callback: \_ -> T.modify_ (not) toolBarDisplayed
         , variant: toolBar' ?
             ButtonVariant Light $
@@ -71,7 +71,7 @@ component = here.component "main" cpt where
       ,
         -- Sidebar toggle
         B.button
-        { className: "phylo-topbar__sidebar"
+        { className: "phylo-topbar__sidebar rounded-circle-2"
         , callback: \_ -> T.modify_ (toggleSidePanelState) sideBarDisplayed
         , variant: sideBar' == Opened ?
             ButtonVariant Light $

src/Gargantext/Components/Themes.purs

@@ -87,7 +87,7 @@ themeSwitcherCpt = here.component "themeSwitcher" cpt
 
       R.useEffectOnce' $ markThemeToDOMTree currentTheme
 
-      pure $ R2.select { className: "form-control"
+      pure $ R2.select { className: "form-control rounded-circle-2"
                        , defaultValue: themeName currentTheme
                        , on: { change: onChange theme } } options
       where

src/Gargantext/Components/TopBar.purs

@@ -50,7 +50,7 @@ componentCpt = here.component "main" cpt where
     pure $
 
       H.div
-      { className: "main-topbar navbar navbar-expand-lg navbar-dark bg-dark py-0"
+      { className: "main-topbar navbar navbar-expand-lg navbar-dark bg-dark py-0 pr-0"
       , id: "dafixedtop"
       , role: "navigation"
       }
@@ -71,7 +71,7 @@ componentCpt = here.component "main" cpt where
         ]
       ,
         H.li
-        { title: "Hello! Looking for the tree ?\n"
+        { title: "Hello! Looking for the tree?\n"
               <> "Just watch on the other side!\n"
               <> "Click on the hand again to see it back."
         , className : "nav-item main-topbar__help-button"
@@ -92,7 +92,7 @@ componentCpt = here.component "main" cpt where
               ButtonVariant Light $
               OutlinedButtonVariant Light
           , callback: onTreeToggleClick
-          , className: "main-topbar__tree-switcher"
+          , className: "main-topbar__tree-switcher rounded-circle-2"
           , title: 
               if showTree' 
               then"Hide Tree" 
@@ -106,7 +106,6 @@ componentCpt = here.component "main" cpt where
           --   if showTree'
           --   then H.text $ nbsp 1 <> "Hide Tree"
           --   else H.text $ nbsp 1 <> "Show Tree"
- 
           ]
 
         ]
@@ -139,7 +138,8 @@ componentCpt = here.component "main" cpt where
             then H.text "Hide Tree"
             else H.text "Show Tree"
           ]-}
-        , H.div { id: "portal-topbar" } []
+        , H.div { id: "portal-topbar"
+                , className: "ml-1 w-100 h-100"} []
       ]
 
       -- SB.searchBar {session, databases: allDatabases}
@@ -155,7 +155,7 @@ onTreeToggleChange new = do
 logo :: R.Element
 logo =
   H.a { className, href: "#/" } [
-    H.img { src, title, width: "46", height: "auto" }
+    H.img { src, title, width: "auto", height: "30" }
   ]
   where
     className = "main-topbar__logo navbar-brand logoSmall"

src/sass/_legacy/_graph.sass

@@ -55,7 +55,7 @@
     position: absolute
     z-index: z-index('graph', 'toolbar')
     background-color: $body-bg
-    width: 100%
+    // width: 100%
     border-bottom: 1px solid $border-color
 
     .b-fieldset
@@ -84,22 +84,32 @@
   @include aside-topbar
 
   display: flex
-  padding-left: $topbar-item-margin
-  padding-right: $topbar-item-margin
+  // padding: $grah-topbar-item-margin $topbar-item-margin $grah-topbar-item-margin 0
 
   &__toolbar,
   &__sidebar
-    width: $topbar-fixed-button-width
+    // width: $topbar-fixed-button-width
+    margin-top: $topbar-item-margin
+    margin-bottom: $topbar-item-margin
     margin-left: $topbar-item-margin
     margin-right: $topbar-item-margin
+    padding-left: $topbar-item-margin
+    padding-right: $topbar-item-margin
 
   &__search
     width: $topbar-input-width
+    margin-top: $topbar-item-margin
+    margin-bottom: $topbar-item-margin
     margin-left: $topbar-item-margin
     margin-right: $topbar-item-margin
 
     [type="submit"]
       display: none
+    
+    .form-control
+      height: 2rem
+      padding-top: 0
+      padding-bottom: 0
 
 /////////////////////////////////////////////
 
@@ -368,6 +378,7 @@
 
   display: flex
   padding: #{ $section-margin / 2 }
+  padding-top: $section-margin
 
   &__gap
     width: $item-margin

src/sass/_legacy/_menu.sass

@@ -2,12 +2,21 @@
   position: sticky
   top: 0
   z-index: z-index('main', 'topbar')
+  height: 40px
+
+  &__theme-switcher select
+    margin: space-x(0.5) 0
+    padding-top: 0
+    padding-bottom: 0
+    height: 2rem
 
   &__theme-switcher,
   &__lang-switcher,
   &__tree-switcher
     margin-right: space-x(1)
 
+  &__tree-switcher
+    padding: 0.15rem 0.5rem
 
   // add hovering effect
   &.navbar-dark .navbar-text:hover
@@ -20,6 +29,8 @@
     padding-right: initial
   &__logo
     margin-right: initial
+    img
+      max-width: none
 
   @include right-handed
     flex-direction: row

src/sass/components/_grouped.scss

@@ -270,8 +270,10 @@
 }
 .mainleaf__folder-icon:not(.b-icon-button--enabled),
 .main-topbar__tree-switcher.btn-light .fa,
-.main-topbar__tree-switcher.btn-outline-light .fa {
-  &::before {
+.main-topbar__tree-switcher.btn-outline-light .fa,
+#portal-topbar .graph-topbar .btn-light:hover .fa,
+#portal-topbar .graph-topbar .btn-outline-light .fa {
+  &:before {
     color: inherit !important;
   }
 }
@@ -281,7 +283,8 @@
 .popup-container .search-bar .btn.fa,
 .login-modal-form .btn .fa,
 .corpus-layout__code-section .b-button .fa,
-.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa {
+.main-topbar__tree-switcher.btn-outline-light:not(:hover) .fa,
+#portal-topbar .graph-topbar__title .fa {
   color: $light !important;
   &:before {
     color: $light !important;
@@ -540,10 +543,23 @@
 /// Buttons global
 ///-----------------------------------------------------------------------------
 
+.btn,
+.form-control {
+  // padding: 0.3rem 0.6rem;
+}
+
 .btn.disabled, .btn:disabled {
   opacity: .45;
 }
 
 .border-grey {
   border: 1px solid $gray-400;
+}
+
+.rounded-circle-2 {
+  border-radius: 50px;
+  .form-control {
+    border-radius: 50px;
+    // font-size: smaller;
+  }
 }
\ No newline at end of file

src/sass/modules/_layout.scss

@@ -6,6 +6,7 @@ $topbar-height: 56px; // ~ unworthy empirical value (@TODO topbar height calcula
 $topbar-input-width: 304px;
 $topbar-item-margin: space-x(0.5);
 $topbar-fixed-button-width: 136px;
+$grah-topbar-item-margin: space-x(0.75);
 
 /// Sidebar
 $sidebar-width: 480px;