add form-box css

src/assets/css/style.css

@@ -14,8 +14,10 @@
   --bg-post: #C5E1A5;
   --border-post: #9dd162;
   --bg-post-highlight: #9dd162;
-  --border-form: #FFB300;
-  --bg-form: #FCE4EC;
+  --border-form-box: #FFB300;
+  --bg-form-box: #FCE4EC;
+  --border-profile-form-box: #9dd162;
+  --bg-profile-form-box: lightblue;
   --bg-error-popup: red;
   --border-error-popup: red;
   --bg-id: DodgerBlue;
@@ -128,9 +130,47 @@ nav a:hover, nav button:hover,
   z-index: 2;
 }
 
+.form-box {
+  display: flex;
+  flex-direction: column;
+  width: fit-content;
+  height: fit-content;
+  padding: 5px;
+  background-color: var(--bg-form-box);
+  border: 2px solid var(--border-form-box);
+}
+
+.form-box > h2 {
+  margin-top: 1vh;
+  margin-bottom: 2vh;
+  margin-left: 1vh;
+}
+
+.form-box-list {
+  display: grid;
+  grid-template-columns: 1fr;
+  gap: 5vh;
+}
+
+.profile-page, .account-page, .register-page, .login-page, .about-page, .user-page {
+  display: flex;
+  flex-direction: column;
+  padding-left: 15vh;
+
+  .form-box {
+    background-color: var(--bg-profile-form-box);
+    border: 2px solid var(--border-profile-form-box);
+  }
+}
+
+.register-page, .login-page {
+  padding-top: 15vh;
+}
+
 .new-thread-view {
-  margin-inline: 1vw;
-  margin-block: 3vw;
+  display: flex;
+  justify-content: center;
+  padding-top: 15vh;
 }
 
 /* css trick to have a dropdown menu on click */
@@ -359,13 +399,11 @@ nav a:hover, nav button:hover,
 }
 
 .reply-popup {
-  display: table;
+  display: grid;
+  grid-template-rows: 1fr 14fr;
   position: fixed;
   right: 1vw;
   top: 40vh;
-  background-color: var(--bg-form);
-  border: 2px solid var(--border-form);
-  padding: 5px;
   z-index: 3;
 }
 .reply-popup-dragzone {

src/client/html.ml

@@ -49,18 +49,18 @@ module Home = struct
   let left t_s =
     let new_thread_view =
       (* TODO try to find better class names *)
-      let new_thread_form_div =
-        El.div
-          ~at:[ class' "new-thread-form-div" ]
-          [ Html_form.new_thread_el t_s ]
-      in
       El.div
         ~at:[ class' "new-thread-view" ]
+        [ El.div
+            ~at:[ class' "form-box" ]
             [ h2 "New thread"
             ; El.span
                 ~at:[ class' "new-thread-info" ]
                 [ el_txt "Click the map and make a new thread:" ]
-        ; new_thread_form_div
+            ; El.div
+                ~at:[ class' "new-thread-form-div" ]
+                [ Html_form.new_thread_el t_s ]
+            ]
         ]
     in
     let thread_view = Html_thread.f t_s in
@@ -90,14 +90,14 @@ end
 
 module Register = struct
   let f t_s =
-    let l = [ h1 "Register"; Html_form.mk_register () ] in
+    let l = [ Html_form.mk_register () ] in
     let el = mk_page Register t_s l in
     el
 end
 
 module Login = struct
   let f t_s =
-    let l = [ h1 "Login"; Html_form.mk_login () ] in
+    let l = [ Html_form.mk_login () ] in
     let el = mk_page Login t_s l in
     el
 end
@@ -167,8 +167,10 @@ module Profile = struct
           ; mk_page_link ~label:"public profile" (User (Loading user.user_id))
           ]
       in
-      let forms = Html_form.profile user in
-      [ h1 "Profile settings"; public_profile_link ] @ forms
+      let forms =
+        El.div ~at:[ class' "form-box-list" ] (Html_form.profile user)
+      in
+      [ h1 "Profile settings"; public_profile_link; forms ]
 
   let f t_s =
     let el = mk_page Profile t_s [] in
@@ -181,8 +183,10 @@ module Account = struct
     match get_user_private t with
     | None -> []
     | Some user_private ->
-      let forms = Html_form.account user_private in
-      h1 "Account settings" :: forms
+      let forms =
+        El.div ~at:[ class' "form-box-list" ] (Html_form.account user_private)
+      in
+      [ h1 "Account settings"; forms ]
 
   let f t_s =
     let el = mk_page Account t_s [] in

src/client/html_form.ml

@@ -79,18 +79,22 @@ let mk_logout () =
   in
   mk Logout ~btn []
 
+let mk_box title l = El.div ~at:[ class' "form-box" ] (h2 title :: l)
+
 let mk_register () =
   let nick = mk_field `Text ~name:"nick" ~label:"Nickname" ~at:[] in
   let email = mk_field `Text ~name:"email" ~label:"Email" ~at:[] in
   let password = mk_field `Password ~name:"password" ~label:"Password" ~at:[] in
   let btn = mk_btn_submit () in
-  mk Register ~btn [ nick; email; password ]
+  let el = mk Register ~btn [ nick; email; password ] in
+  mk_box "Register" [ el ]
 
 let mk_login () =
   let nick = mk_field `Text ~name:"login" ~label:"Nickname or email" ~at:[] in
   let password = mk_field `Password ~name:"password" ~label:"Password" ~at:[] in
   let btn = mk_btn_submit () in
-  mk Login ~btn [ nick; password ]
+  let el = mk Login ~btn [ nick; password ] in
+  mk_box "Login" [ el ]
 
 let mk_subject_field_unwraped () =
   mk_field_unwraped `Text ~name:"subject" ~label:"Subject" ~at:[]
@@ -226,7 +230,7 @@ let new_thread_el t_s =
   mk Home ~btn [ subject; comment; image; lat; lng ]
 
 let profile user =
-  let mk = mk Profile in
+  let mk ~btn l = mk Profile ~btn l in
   let nickname =
     let nick =
       mk_field `Text ~name:"nick" ~label:"Change nickname"
@@ -234,7 +238,7 @@ let profile user =
     in
     let btn = mk_btn_save () in
     let form = mk ~btn [ nick ] in
-    [ h2 "Nickname"; form ]
+    mk_box "Nickname" [ form ]
   in
   let bio =
     let bio =
@@ -243,7 +247,7 @@ let profile user =
     in
     let btn = mk_btn_save () in
     let form = mk ~btn [ bio ] in
-    [ h2 "Biography"; form ]
+    mk_box "Biography" [ form ]
   in
   let avatar =
     (* TODO
@@ -281,12 +285,12 @@ let profile user =
       let btn = mk_btn_save () in
       [ mk ~btn [ file_el; alt_el ] ]
     in
-    (h2 "Avatar" :: delete) @ upload
+    mk_box "Avatar" (delete @ upload)
   in
-  nickname @ bio @ avatar
+  [ nickname; bio; avatar ]
 
 let account user_private =
-  let mk = mk Account in
+  let mk ~btn l = mk Account ~btn l in
   let email =
     let email =
       mk_field `Text ~name:"email" ~label:"Email"
@@ -294,7 +298,7 @@ let account user_private =
     in
     let btn = mk_btn_save () in
     let form = mk ~btn [ email ] in
-    [ h2 "Change email"; form ]
+    mk_box "Change email" [ form ]
   in
   let password =
     let pw1 =
@@ -306,7 +310,7 @@ let account user_private =
     in
     let btn = mk_btn_save () in
     let form = mk ~btn [ pw1; pw2 ] in
-    [ h2 "Change password"; form ]
+    mk_box "Change password" [ form ]
   in
   let big_delete =
     let btn = mk_btn ~at:[ class' "delete-account-btn" ] "DELETE ACCOUNT" in
@@ -314,9 +318,9 @@ let account user_private =
       mk ~btn
         [ El.input ~at:[ type' "hidden"; name "delete-account"; value "" ] () ]
     in
-    [ h2 "Delete account"; form ]
+    mk_box "Delete account" [ form ]
   in
-  email @ password @ big_delete
+  [ email; password; big_delete ]
 
 let delete post =
   let btn = mk_btn "DELETE" in

src/client/html_thread.ml

@@ -51,7 +51,9 @@ let reply_popup_el t_s w =
     let el = El.div ~at:[ class' "reply-popup-content" ] [ form ] in
     el
   in
-  let el = El.div ~at:[ class' "reply-popup" ] [ dragzone; content ] in
+  let el =
+    El.div ~at:[ class' "reply-popup"; class' "form-box" ] [ dragzone; content ]
+  in
   Html_form.Dragzone.f ~dragzone el;
   let is_open = S.map (fun t -> t.post_form.is_open) t_s in
   def_visibility `On is_open el;