Move searchbar into left column with tree view

dist/index.html

@@ -22,7 +22,7 @@
          #toolbar {display : inline;}
          #toolbar ul li {display : inline }
          #toolbar ul li form {display : inline}
-         .tree { margin-top : 125px;}
+         .tree { margin-top : 20px;}
          .tree ul li::before {
              content: " ";
              position: absolute;

dist/styles/Login.css

@@ -178,6 +178,9 @@ text-align: center;
     height: auto;
 }
 
+.tree {
+    margin-top: 10px;
+}
 #graph-tree .tree {
     margin-top: 27px;
 }

dist/styles/context-menu.css

@@ -27,3 +27,15 @@
   font-size: 16px;
   height: 100%;
 }
+.search-bar-container {
+  text-align: center;
+}
+.search-bar-toggle {
+  padding: 3px;
+  border: 0;
+  
+}
+.search-field {
+  display: grid;
+  grid-template-columns: auto auto auto;
+}

src/Gargantext/Components/Search/SearchField.purs

@@ -58,22 +58,24 @@ searchFieldComponent = R.memo (R.hooksComponent "SearchField" cpt) hasChanged
 
 databaseInput :: R.State (Maybe Database) -> Array Database -> R.Element
 databaseInput (db /\ setDB) dbs =
-  select { className: "database", onChange } (item <$> dbs)
+  div {} [ select { className: "database", onChange } (item <$> dbs) ]
   where
     onChange = mkEffectFn1 $ \e -> setDB (readDatabase (e .. "target" .. "value"))
     item db = option { value: (show db) } [ text (show db) ]
 
 searchInput :: R.State String -> R.Element
 searchInput (term /\ setTerm) =
-  input { defaultValue: term
+  div {} [ input { defaultValue: term
                  , type: "text"
+                 , style: { maxWidth: "110px" }
                  , onChange
-        , placeholder }
+                 , placeholder } ]
   where onChange = mkEffectFn1 $ \e -> setTerm $ e .. "target" .. "value"
 
 
 submitButton :: R.State (Maybe Database) -> R.State String -> R.State (Maybe Search) -> R.Element
-submitButton (database /\ _) (term /\ _) (_ /\ setSearch) = button { onClick: click } [ text "Search" ]
+submitButton (database /\ _) (term /\ _) (_ /\ setSearch) =
+  div {} [ button { onClick: click } [ text "Search" ] ]
   where
     click = mkEffectFn1 $ \_ -> do
       case term of

src/Gargantext/Pages/Layout/Specs.purs

@@ -95,7 +95,10 @@ layout0 layout =
       , rs bs
       ]
     ls   = over _render \render d p s c -> [
-         div [ className "col-md-2"] (render d p s c)
+         div [ className "col-md-2", style {paddingTop: "60px"} ]
+           $ [ R'.scuff (SB.searchBar SB.defaultProps) ]
+           <> (render d p s c)
+         
       ]
     rs   = over _render \render d p s c -> [
           div [ case (s.loginState.authData) of
@@ -179,7 +182,6 @@ searchBar = simpleSpec defaultPerformAction render
                           ,  div [ className "collapse navbar-collapse"
                                  ]
                              $  [ divDropdownLeft ]
-                             <> [ R'.scuff (SB.searchBar SB.defaultProps) ]
                              <> [ divDropdownRight d s ]
                           ]
                     ]

src/Gargantext/Pages/Layout/Specs/SearchBar.purs

@@ -62,7 +62,7 @@ onSearchChange (search /\ setSearch) =
 toggleButton :: R.State Boolean -> R.Element
 toggleButton open =
   H.button { onClick: onToggleExpanded open, className: "search-bar-toggle" }
-    [ H.i { className: "material-icons md-36"
+    [ H.i { className: "material-icons md-24"
           , style: { marginTop: "-5px", color: "#000" } }
           [ H.text "control_point" ] ]