[bootstrap v4] login screen styling

src/Gargantext/Components/Forest/Tree/Node/Tools.purs

@@ -232,10 +232,9 @@ submitButtonHref action href =
 
 checkbox :: R.State Boolean -> R.Element
 checkbox ( val /\ set ) =
-  H.input { id: "checkbox-id"
+  H.input { className : "form-check-input"
           , type: "checkbox"
           , value: val
-          , className : "checkbox"
           , on: { click: \_ -> set $ const $ not val}
           }
 

src/Gargantext/Components/Login.purs

@@ -73,12 +73,12 @@ modalCpt = R.hooksComponentWithModule thisModule "modal" cpt where
       elems = 
         [ H.div { id: "loginModal", className: modalClass (fst visible), key: 0
                 , role: "dialog", "data": {show: true}, style: {display: "block"}}
-          [ H.div { className: "modal-dialog", role: "document"}
+          [ H.div { className: "modal-dialog modal-lg", role: "document"}
             [ H.div { className: "modal-content" }
-              [ H.div { className: "modal-header" }
-                [ closing
-                , logo
-                ]
+              [ H.div { className: "modal-header" } [
+                logo
+              , closing
+              ]
               , H.div { className: "modal-body" } children ] ] ] ]
       modalClass s = "modal myModal" <> if s then "" else " fade"
       logo =
@@ -91,7 +91,7 @@ modalCpt = R.hooksComponentWithModule thisModule "modal" cpt where
       closing = H.button { "type": "button", className: "close"
                            , "data": { dismiss: "modal" } }
                            [ H.a { on: {click}
-                                 , className: "btn glyphicon glyphicon-remove-circle" 
+                                 , className: "btn fa fa-times"
                                  -- TODO , font-size : "50px"
                                  } [] 
                            ]
@@ -187,38 +187,33 @@ formCpt = R.hooksComponentWithModule thisModule "form" cpt where
     username <- R.useState' ""
     password <- R.useState' ""
     setBox@(checkBox /\ setCheckBox) <- R.useState' false
-    pure $ R2.row
-      [ cardGroup
-        [ cardBlock
-          [ center
-          [ H.h4 {}{-className: "text-muted"-}
-              [ H.text $ "Login to garg://" <> show backend]
-              , requestAccessLink {}
-              ]
-          , H.div {}
-            [ csrfTokenInput {}
-            , formGroup [ H.p {} [ H.text (fst error) ], usernameInput username ]
-            , formGroup [ passwordInput password, clearfix {} ]
-            , center
-               [ H.label {}
-                 [ H.div {className: "checkbox"}
-                    [ checkbox setBox
-                    , H.text "I hereby accept "
-                    , H.a { target: "_blank"
-                          , href: "http://gitlab.iscpif.fr/humanities/tofu/tree/master"
-                          } [ H.text "the terms of use" ]
-                    ]
-                  ]
-                ]
-            ]
-          , if checkBox == true
-               && fst username /= ""
-               && fst password /= ""
-               then H.div {} [center [loginSubmit $ onClick props error username password]]
-               else H.div {} []
-          ] 
-        ] 
+    pure $ R2.row [
+      H.form { className: "col-md-12" } [
+        H.h4 { className: "text-center" } {-className: "text-muted"-} [
+          H.text $ "Login to garg://" <> show backend
+        ]
+      , requestAccessLink {}
+      , csrfTokenInput {}
+      , formGroup [ H.p {} [ H.text (fst error) ], usernameInput username ]
+      , formGroup [ passwordInput password, clearfix {} ]
+      , H.div { className: "form-group form-check text-center" } [
+             checkbox setBox
+           , H.label { className: "form-check-label" } [
+             H.text "I hereby accept "
+             , H.a { target: "_blank"
+                   , href: "http://gitlab.iscpif.fr/humanities/tofu/tree/master"
+                   } [ H.text "the terms of use" ]
+             ]
+           ]
+      , if checkBox == true
+           && fst username /= ""
+           && fst password /= ""
+        then H.div { className: "text-center" } [
+          loginSubmit $ onClick props error username password
+          ]
+        else H.div {} []
       ]
+    ]
   onClick {backend, sessions, visible} error username password e =
     launchAff_ $ do
       let req = AuthRequest {username: fst username, password: fst password}
@@ -244,18 +239,21 @@ termsLink _ =
 
 requestAccessLink :: {} -> R.Element
 requestAccessLink _ =
-  H.a { target: "_blank", href: applyUrl } [ H.text " request access" ]
+  H.div { className: "text-center" } [
+    H.a { href: applyUrl
+        , target: "_blank" } [ H.text " request access" ]
+    ]
   where applyUrl = "https://iscpif.fr/apply-for-a-services-account/"
 
 usernameInput :: R.State String -> R.Element
 usernameInput username =
   H.input { className: "form-control"
+          , defaultValue: (fst username)
           , id: "id_username"
           , maxLength: "254"
           , name: "username"
           , placeholder: "username"
           , type: "text"
-          , defaultValue: (fst username)
           --, on: {input: \e -> dispatch (SetUserName $ R.unsafeEventValue e)}
           , on: {change: \e -> (snd username) $ const $ R.unsafeEventValue e} }