[bootstrap v4] graph explorer controls button styling

dist/styles/sass.css

@@ -147,17 +147,8 @@
   right: 0;
   top: 60px;
 }
-.graph-container #controls-container #toolbar {
-  display: flex;
-  flex-direction: column;
-}
-.graph-container #controls-container #toolbar ul {
-  display: flex;
-  flex-direction: row;
-  margin: 0;
-}
-.graph-container #controls-container #toolbar ul li {
-  max-width: 200px;
+.graph-container #controls-container .nav-item {
+  padding-left: 0.8rem;
 }
 .graph-container .graph-row {
   height: 100%;
@@ -730,6 +721,7 @@ li .leaf:hover a.settings {
 }
 .range .range-slider {
   position: relative;
+  width: 85%;
 }
 .range .range-slider .scale {
   position: absolute;
@@ -763,4 +755,8 @@ li .leaf:hover a.settings {
   height: 20px;
 }
 
+.range-simple input {
+  width: 85%;
+}
+
 /*# sourceMappingURL=sass.css.map */

dist/styles/sass.css.map

-{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAVA;EACA;EAEA;EASE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EAlCA;EACA;EAEA;EAiCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;;AACA;EACE;;AAER;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AC1FJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;EACA;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AC7IJ;EACE;;AAEA;EACE;;AACA;EACE;;AACJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EArDR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA2DM;EACE;EACA;EACA;EACA;EACA;EA7DR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtGV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;EACA;EACA;;;AAKE;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACjDF;EACE;AACA;EACA;;AAEA;EACE;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA","file":"sass.css"}
\ No newline at end of file
+{"version":3,"sourceRoot":"","sources":["../../src/sass/_menu.sass","../../src/sass/_context_menu.sass","../../src/sass/_graph.sass","../../src/sass/_login.sass","../../src/sass/_tree.sass","../../src/sass/_code_editor.sass","../../src/sass/_styles.sass","../../src/sass/_range_slider.sass"],"names":[],"mappings":"AAAA;AAEA;AACA;AACA;AACA;AACA;AAEA;EACI;EACA;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;;;AAEF;AACI;EACA;;;AAEJ;AACI;EACA;;;AAGJ;AACA;EACI;;;AAEJ;EACI;EACA;EACA;EACA;;;AAEJ;EACE;EACA;;;AAEF;EACE;;;AC7CF;EACE;EACA;EACA;EACA;EACA;;;AAEF;EACE;;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;;;AClBF;EACE;;;AAEF;AAkCE;AACA;AACA;AACA;AACA;AACA;AACA;AACA;;AAxCA;EAVA;EACA;EAEA;EASE;EACA;EACA;EACA;;AAEA;EACE;EACA;;AAEF;EACE;EACA;;AAGA;EACE;EACA;;AACN;EACE;;AACF;EACE;;AAEF;EAlCA;EACA;EAEA;EAiCE;EACA;;AACF;EACE;;AACF;EACE;;AAWF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;AAEJ;EACE;;AAEA;EACE;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;EACA;;;AClFJ;EACE;;;AAOF;EACE;;AACA;EACE;EACA;;;AAEJ;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAEF;EACE;;;AAGF;EACE;;AAEE;EACE;EACA;;AACA;EACE;;;AAIJ;EACE;EACA;EACA;EACA;;;AAKJ;EACE;EACA;EACA;;;AAGJ;EACE;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;;AACF;EACE;EACA;EACA;EACA;;AACA;EACE;;AACN;EACE;EACA;EACA;EACA;;;AAGN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;;AAGE;EACE;;;AAEN;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;;;AAEJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;;;AAGF;EACE;;;AAEJ;EACI;EACA;;;AAGF;EACE;;;AAEJ;EACE;;;AAEF;EACE;EACA;;;AAEF;EACE;EACA;EACA;;;AAEF;EACE;EACA;;;AAEF;EACE;;;ACvKF;EACE;;;AAGA;EACE;EACA;;AAEA;EACE;EACA;;AAEF;EACE;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;;;AAER;EACE;;AAEE;EACE;;AACA;EACE;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;EACA;EACA;;AACF;EACE;;AACF;EACE;EACA;EACA;EAEA;EACA;EACA;;AAEA;EACE;;AACF;EACE;;AAGN;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AAIR;EACE;;AACF;EACE;;AACA;EACE;EACA;;AAEE;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAEV;EACE;;AACF;EACE;;AAEE;EACE;;AACF;EACE;;AACN;EACE;;AAEE;EACE;EACA;;;AAGR;EACE;EACA;EACA;EACA;EACA;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAEA;EAEE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;;AAEF;EACE;;;AAIF;EACE;;AAEA;EACE;;;AAGN;EACE;;AACF;EACE;;AACF;EACE;;;AC7IJ;EACE;;AAEA;EACE;;AACA;EACE;;AACJ;EACE;EACA;;;AAGF;EACE;EACA;EACA;;AACF;EACE;EACA;;AACA;EACE;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EArDR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AA2DM;EACE;EACA;EACA;EACA;EACA;EA7DR;EACA;EACA;EACA;EACA;EACA;EACA;EAlBA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;EACA;;AAmEE;EACE;EACA;EACA;EACA;EACA;EACA;;AACF;EACE;EACA;EACA;;AACA;EACE;EACA;;AACF;EACE;EACA;;AACF;EACE;EACA;;AAGE;EACE;;AAEF;EACE;;;ACtGV;EACE;;AACF;EACE;EACA;EACA;EACA;EACA;EACA;;AACA;EACE;;AAGE;EACE;EACA;;AAEF;EACE;EACA;;;AAEV;EACE;;AACA;EACE;EACA;EACA;;;AAKE;EACE;EACA;;AACF;EACE;;AACA;EACE;;AACJ;EACE;;;AAER;EACE;;;AAEF;EACE;;;AAEF;EACE;;;ACjDF;EACE;AACA;EACA;;AAEA;EACE;EACA;;AAEA;EACE;EACA;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;;AAEF;EACE;EACA;EACA;EACA;EACA;EACA;EACA;EAEA;EAEA;EAEA;;AAEA;EACE;EAEA;EACA;EACA;;;AAGN;EACE","file":"sass.css"}
\ No newline at end of file

src/Gargantext/Components/GraphExplorer/Button.purs

@@ -43,13 +43,9 @@ simpleButtonCpt :: R.Component Props
 simpleButtonCpt = R.hooksComponentWithModule thisModule "simpleButton" cpt
   where
     cpt {onClick, text} _ = do
-      pure $
-        H.span {}
-          [
-            H.button
-              { className: "btn btn-primary", on: {click: onClick} }
-              [ H.text text ]
-          ]
+      pure $ H.button { className: "btn btn-outline-primary"
+                      , on: {click: onClick}
+                      } [ R2.small {} [ H.text text ] ]
 
 centerButton :: R.Ref Sigmax.Sigma -> R.Element
 centerButton sigmaRef = simpleButton {

src/Gargantext/Components/GraphExplorer/Controls.purs

@@ -141,35 +141,64 @@ controlsCpt = R.hooksComponentWithModule thisModule "controls" cpt
 
       pure $ case getShowControls props of
         false -> RH.div {} []
-        true -> R2.menu { id: "toolbar" } [
-            RH.ul {} [ -- change type button (?)
-              RH.li {} [ centerButton props.sigmaRef ]
-            , RH.li {} [ pauseForceAtlasButton {state: props.forceAtlasState} ]
-            , RH.li {} [ edgesToggleButton {state: props.showEdges} ]
-            , RH.li {} [ louvainToggleButton props.showLouvain ]
-            , RH.li {} [ edgeConfluenceControl edgeConfluenceRange props.edgeConfluence ]
-            , RH.li {} [ edgeWeightControl edgeWeightRange props.edgeWeight ]
+        -- true -> R2.menu { id: "toolbar" } [
+        true -> RH.nav { className: "navbar navbar-expand-lg" }
+                 [ RH.ul { className: "navbar-nav mx-auto" } [ -- change type button (?)
+                     RH.li { className: "nav-item" } [ centerButton props.sigmaRef ]
+                   , RH.li { className: "nav-item" } [ pauseForceAtlasButton {state: props.forceAtlasState} ]
+                   , RH.li { className: "nav-item" } [ edgesToggleButton {state: props.showEdges} ]
+                   , RH.li { className: "nav-item" } [ louvainToggleButton props.showLouvain ]
+                   , RH.li { className: "nav-item" } [ edgeConfluenceControl edgeConfluenceRange props.edgeConfluence ]
+                   , RH.li { className: "nav-item" } [ edgeWeightControl edgeWeightRange props.edgeWeight ]
               -- change level
               -- file upload
               -- run demo
               -- search button
               -- search topics
-            , RH.li {} [ labelSizeButton props.sigmaRef localControls.labelSize ] -- labels size: 1-4
-            , RH.li {} [ nodeSizeControl nodeSizeRange props.nodeSize ]
+                   , RH.li { className: "nav-item" } [ labelSizeButton props.sigmaRef localControls.labelSize ] -- labels size: 1-4
+                   , RH.li { className: "nav-item" } [ nodeSizeControl nodeSizeRange props.nodeSize ]
               -- zoom: 0 -100 - calculate ratio
-            , RH.li {} [ multiSelectEnabledButton props.multiSelectEnabled ]  -- toggle multi node selection
+                   , RH.li { className: "nav-item" } [ multiSelectEnabledButton props.multiSelectEnabled ]  -- toggle multi node selection
               -- save button
-            , RH.li {} [ nodeSearchControl { graph: props.graph
+                   , RH.li { className: "nav-item" } [ nodeSearchControl { graph: props.graph
                                            , multiSelectEnabled: props.multiSelectEnabled
                                            , selectedNodeIds: props.selectedNodeIds } ]
-            , RH.li {} [ mouseSelectorSizeButton props.sigmaRef localControls.mouseSelectorSize ]
-            , RH.li {} [ cameraButton { id: props.graphId
+                   , RH.li { className: "nav-item" } [ mouseSelectorSizeButton props.sigmaRef localControls.mouseSelectorSize ]
+                   , RH.li { className: "nav-item" } [ cameraButton { id: props.graphId
                                       , hyperdataGraph: props.hyperdataGraph
                                       , session: props.session
                                       , sigmaRef: props.sigmaRef
                                       , treeReload: props.treeReload } ]
             ]
           ]
+          --   RH.ul {} [ -- change type button (?)
+          --     RH.li {} [ centerButton props.sigmaRef ]
+          --   , RH.li {} [ pauseForceAtlasButton {state: props.forceAtlasState} ]
+          --   , RH.li {} [ edgesToggleButton {state: props.showEdges} ]
+          --   , RH.li {} [ louvainToggleButton props.showLouvain ]
+          --   , RH.li {} [ edgeConfluenceControl edgeConfluenceRange props.edgeConfluence ]
+          --   , RH.li {} [ edgeWeightControl edgeWeightRange props.edgeWeight ]
+          --     -- change level
+          --     -- file upload
+          --     -- run demo
+          --     -- search button
+          --     -- search topics
+          --   , RH.li {} [ labelSizeButton props.sigmaRef localControls.labelSize ] -- labels size: 1-4
+          --   , RH.li {} [ nodeSizeControl nodeSizeRange props.nodeSize ]
+          --     -- zoom: 0 -100 - calculate ratio
+          --   , RH.li {} [ multiSelectEnabledButton props.multiSelectEnabled ]  -- toggle multi node selection
+          --     -- save button
+          --   , RH.li {} [ nodeSearchControl { graph: props.graph
+          --                                  , multiSelectEnabled: props.multiSelectEnabled
+          --                                  , selectedNodeIds: props.selectedNodeIds } ]
+          --   , RH.li {} [ mouseSelectorSizeButton props.sigmaRef localControls.mouseSelectorSize ]
+          --   , RH.li {} [ cameraButton { id: props.graphId
+          --                             , hyperdataGraph: props.hyperdataGraph
+          --                             , session: props.session
+          --                             , sigmaRef: props.sigmaRef
+          --                             , treeReload: props.treeReload } ]
+          --   ]
+          -- ]
 
 useGraphControls :: { forceAtlasS :: SigmaxT.ForceAtlasState
                    , graph :: SigmaxT.SGraph

src/Gargantext/Components/GraphExplorer/RangeControl.purs

@@ -31,7 +31,7 @@ rangeControlCpt = R.hooksComponentWithModule thisModule "rangeButton" cpt
     cpt {caption, sliderProps} _ = do
       pure $
         H.span {className: "range text-center"}
-          [ H.label {} [ H.text caption ]
+          [ H.label {} [ R2.small {} [ H.text caption ] ]
           , RS.rangeSlider sliderProps
           ]
 

src/Gargantext/Components/GraphExplorer/SlideButton.purs

@@ -35,8 +35,8 @@ sizeButtonCpt = R.hooksComponentWithModule thisModule "sizeButton" cpt
     cpt {state, caption, min, max, onChange} _ = do
       let (value /\ setValue) = state
       pure $
-        H.span {}
-          [ H.label {} [ H.text caption ]
+        H.span { class: "range-simple" }
+          [ H.label {} [ R2.small {} [ H.text caption ] ]
           , H.input { type: "range"
                     , className: "form-control"
                     , min: show min

src/Gargantext/Components/GraphExplorer/ToggleButton.purs

@@ -16,12 +16,11 @@ import Prelude
 import Data.Tuple (snd)
 import Data.Tuple.Nested ((/\))
 import Effect (Effect)
-import Reactix as R
-import Reactix.DOM.HTML as H
-
 import Gargantext.Components.GraphExplorer.Types as GET
 import Gargantext.Hooks.Sigmax.Types as SigmaxTypes
 import Gargantext.Utils.Reactix as R2
+import Reactix as R
+import Reactix.DOM.HTML as H
 
 thisModule = "Gargantext.Components.GraphExplorer.ToggleButton"
 
@@ -40,13 +39,13 @@ toggleButtonCpt = R.hooksComponentWithModule thisModule "toggleButton" cpt
   where
     cpt {state, onMessage, offMessage, onClick} _ = do
       let (toggled /\ _) = state
-      pure $
-        H.span {}
-          [
-            H.button
-              { className: "btn btn-primary", on: {click: onClick} }
-              [ H.text (text onMessage offMessage toggled) ]
-          ]
+
+      pure $ H.button { className: "btn btn-outline-primary " <> cls toggled
+                      , on: {click: onClick}
+                      } [ R2.small {} [ H.text (text onMessage offMessage toggled) ] ]
+
+    cls true = "active"
+    cls false = ""
     text on _off true = on
     text _on off false = off
 
@@ -70,15 +69,15 @@ edgesToggleButtonCpt :: R.Component EdgesButtonProps
 edgesToggleButtonCpt = R.hooksComponentWithModule thisModule "edgesToggleButton" cpt
   where
     cpt {state: (state /\ setState)} _ = do
-      pure $
-        H.span {}
-          [
-            H.button
-              { className: "btn btn-primary", on: {click: onClick setState} }
-              [ H.text (text state) ]
-          ]
+      pure $ H.button { className: "btn btn-outline-primary " <> cls state
+                      , on: { click: onClick setState }
+                      } [ R2.small {} [ H.text (text state) ] ]
+
     text s = if SigmaxTypes.edgeStateHidden s then "Show edges" else "Hide edges"
 
+    cls SigmaxTypes.EShow = "active"
+    cls _ = ""
+
     -- TODO: Move this to Graph.purs to the R.useEffect handler which renders nodes/edges
     onClick setState _ = setState SigmaxTypes.toggleShowEdgesState
 
@@ -111,13 +110,14 @@ pauseForceAtlasButtonCpt :: R.Component ForceAtlasProps
 pauseForceAtlasButtonCpt = R.hooksComponentWithModule thisModule "forceAtlasToggleButton" cpt
   where
     cpt {state: (state /\ setState)} _ = do
-      pure $
-        H.span {}
-          [
-            H.button
-              { className: "btn btn-primary", on: {click: onClick setState} }
-              [ H.text (text state) ]
-          ]
+      pure $ H.button { className: "btn btn-outline-primary " <> cls state
+                      , on: { click: onClick setState }
+                      } [ R2.small {} [ H.text (text state) ] ]
+
+    cls SigmaxTypes.InitialRunning = "active"
+    cls SigmaxTypes.Running = "active"
+    cls _ = ""
+
     text SigmaxTypes.InitialRunning = "Pause Force Atlas"
     text SigmaxTypes.InitialStopped = "Start Force Atlas"
     text SigmaxTypes.Running = "Pause Force Atlas"
@@ -139,13 +139,13 @@ sidebarToggleButton (state /\ setState) = R.createElement el {} []
   where
     el = R.hooksComponentWithModule thisModule "sidebarToggleButton" cpt
     cpt {} _ = do
-      pure $
-        H.span {}
-          [
-            H.button
-              { className: "btn btn-primary", on: {click: onClick} }
-              [ H.text (text onMessage offMessage state) ]
-          ]
+      pure $ H.button { className: "btn btn-outline-primary " <> cls state
+                      , on: { click: onClick}
+                      } [ R2.small {} [ H.text (text onMessage offMessage state) ] ]
+
+    cls (GET.Opened _) = "active"
+    cls _ = ""
+
     onMessage = "Hide Sidebar"
     offMessage = "Show Sidebar"
     text on _off (GET.Opened _)    = on

src/Gargantext/Utils/Reactix.purs

@@ -106,6 +106,9 @@ named = flip $ defineProperty "name"
 overState :: forall t. (t -> t) -> R.State t -> Effect Unit
 overState f (_state /\ setState) = setState f
 
+small :: ElemFactory
+small = createDOM "small"
+
 select :: ElemFactory
 select = createDOM "select"
 

src/sass/_graph.sass

@@ -61,16 +61,8 @@
     right: 0
     top: 60px
 
-    #toolbar
-      display: flex
-      flex-direction: column
-
-      ul
-        display: flex
-        flex-direction: row
-        margin: 0
-        li
-          max-width: 200px
+    .nav-item
+      padding-left: 0.8rem
 
   .graph-row
     height: 100%

src/sass/_range_slider.sass

@@ -5,6 +5,7 @@
 
   .range-slider
     position: relative
+    width: 85%
 
     .scale
       position: absolute
@@ -40,3 +41,7 @@
         background: #eee
         width: 30px
         height: 20px
+
+.range-simple
+  input
+    width: 85%