[bootstrap v4] fix hidden, fix code editor btn group

src/Gargantext/Components/CodeEditor.purs

@@ -147,11 +147,11 @@ codeEditorCpt = R.hooksComponentWithModule thisModule "codeEditor" cpt
     codeHidden :: ViewType -> String
     codeHidden Code = ""
     codeHidden Both = ""
-    codeHidden _ = " hidden"
+    codeHidden _ = " d-none"
 
     dividerHidden :: ViewType -> String
     dividerHidden Both = ""
-    dividerHidden _ = " hidden"
+    dividerHidden _ = " d-none"
 
     langClass :: CodeType -> String
     langClass Haskell  = " language-haskell"
@@ -162,7 +162,7 @@ codeEditorCpt = R.hooksComponentWithModule thisModule "codeEditor" cpt
     previewHidden :: ViewType -> String
     previewHidden Preview = ""
     previewHidden Both = ""
-    previewHidden _ = " hidden"
+    previewHidden _ = " d-none"
 
     onEditChange :: forall e. Record Controls -> (CodeType -> Code -> Effect Unit) -> e -> Effect Unit
     onEditChange controls@{codeElRef, codeOverlayElRef, codeType: (codeType /\ _), codeS} onChange e = do
@@ -289,18 +289,19 @@ viewTypeSelectorCpt :: R.Component ViewTypeSelectorProps
 viewTypeSelectorCpt = R.hooksComponentWithModule thisModule "viewTypeSelector" cpt
   where
     cpt {state} _ =
-      pure $ H.div { className: "btn-group" } [
+      pure $ H.div { className: "btn-group"
+                   , role: "group" } [
           viewTypeButton Code state
         , viewTypeButton Both state
         , viewTypeButton Preview state
         ]
 
     viewTypeButton viewType (state /\ setState) =
-      H.label {
-        className: "btn btn-default" <> active
+      H.button { className: "btn btn-secondary" <> active
                , on: { click: onClick }
+               , type: "button"
                } [
-        H.i { className: "glyphicon " <> (icon viewType) } []
+        H.i { className: "fa " <> (icon viewType) } []
       ]
       where
         active = if viewType == state then " active" else ""
@@ -308,9 +309,9 @@ viewTypeSelectorCpt = R.hooksComponentWithModule thisModule "viewTypeSelector" c
         onClick _ = do
           setState $ const viewType
 
-    icon Preview = "glyphicon-eye-open"
-    icon Both = "glyphicon-transfer"
-    icon Code = "glyphicon-pencil"
+    icon Preview = "fa-eye"
+    icon Both = "fa-columns"
+    icon Code = "fa-pencil"
 
 type Controls =
   (

src/Gargantext/Components/InputWithAutocomplete.purs

@@ -89,7 +89,7 @@ inputWithAutocompleteCpt = R.hooksComponentWithModule thisModule "inputWithAutoc
             H.div { className: "list-group" } (cCpt <$> completions)
           ]
           where
-            className = "completions " <> (if completions == [] then "hidden" else "")
+            className = "completions " <> (if completions == [] then "d-none" else "")
 
             cCpt c =
               H.button { type: "button"

src/Gargantext/License.purs

@@ -6,7 +6,7 @@ import Reactix.DOM.HTML as H
 license :: R.Element
 license = H.p {}
             [ H.text "Gargantext "
-            , H.span { className: "glyphicon glyphicon-registration-mark"} []
+            , H.span { className: "fa fa-registered"} []
             , H.text " is made by "
             , H.a { href: "https://iscpif.fr"
                   , target: "blank"
@@ -16,7 +16,7 @@ license = H.p {}
                   , title: "Legal instructions of the project."
                   }
               [ H.text ", with licences aGPLV3 and CECILL variant Affero compliant, " ]
-            , H.span { className: "glyphicon glyphicon-copyright-mark"   } []
+            , H.span { className: "fa fa-copyright"   } []
             , H.a { href: "https://cnrs.fr", target:"blank"} [H.text " CNRS 2017-Present "]
             , H.text "."
             ]