Merge pull request #66 from WildCodeSchool/USX-Champs-formulaire-unifiés

corrections

Author: ChloeNuage

frontend/src/components/forms/groups/GroupForm.tsx

@@ -78,7 +78,7 @@ export default function GroupForm({
           name="user_beneficiary"
           value={formData.user_beneficiary ?? ""}
           onChange={handleChange}
-          label="Le nom du destinataire"
+          label="Bénéficiaire"
           question="Voulez-vous ajouter un destinataire? "
           error={errors.user_beneficiary}
         />

frontend/src/components/groups/Groups.tsx

@@ -2,6 +2,7 @@ import type { GetAllMyGroupsQuery } from "../../graphql/generated/graphql-types"
 import { useToggle } from "../../hooks/useToggle";
 import type { Message } from "../../types/Message";
 import { formatDate } from "../../utils/dateCalculator";
+import { useMobileNavigationStore } from "../../zustand/mobileNavigationStore";
 import GroupFormindex from "../forms/groups/index";
 import Button from "../utils/Button";
 import Card from "../utils/Card";
@@ -35,8 +36,16 @@ export default function Groups({
   onSuccess,
 }: GroupsProps) {
   const createGroupModal = useToggle(false);
+  const { setBottomNavVisible } = useMobileNavigationStore();
+
+  const openCreateGroupModal = () => {
+    createGroupModal.open();
+    setBottomNavVisible(false);
+  };
+
   const closeCreateGroupModal = () => {
     createGroupModal.close();
+    setBottomNavVisible(true);
   };
 
   return (
@@ -51,7 +60,7 @@ export default function Groups({
             icon="plus"
             colour="green"
             small
-            onClick={createGroupModal.open}
+            onClick={openCreateGroupModal}
           />
         }
       >
@@ -93,9 +102,9 @@ export default function Groups({
         className="p-0 overflow-y-auto max-h-[72vh] max-md:max-h-full"
       >
         <GroupFormindex
-          onCancel={createGroupModal.close}
+          onCancel={closeCreateGroupModal}
           onSuccess={() => {
-            createGroupModal.close();
+            closeCreateGroupModal();
             onSuccess?.();
           }}
         />

frontend/src/components/utils/Input.tsx

@@ -52,7 +52,7 @@ export default function Input({
       {label && (
         <label
           htmlFor={id}
-          className={`font-semibold text-md ${theme === "light" ? "text-white" : "dark:text-dark"}`}
+          className={`font-semibold text-lg mb-2.5 ${theme === "light" ? "text-white" : "dark:text-dark"}`}
         >
           {label}
         </label>

frontend/src/components/utils/InputWithToggle.tsx

@@ -21,19 +21,26 @@ export default function InputWithToggle({
   ...props
 }: InputToggleProps) {
   return (
-    <div className="flex flex-row w-full gap-1 justify-between items-center">
-      {checked && (
-        <Input
-          theme={theme}
-          {...props}
-          placeholder={label}
-          onChange={onChange}
-          disabled={disabled}
-          className="placeholder:!text-blue placeholder:!font-bold !text-white !font-bold pr-2"
-        />
+    <div className="flex flex-col w-full">
+      {checked && label && (
+        <span className={`font-semibold text-lg mb-2.5 ${theme === "light" ? "text-white" : "text-dark"}`}>
+          {label}
+        </span>
       )}
-      {!checked && <span className="text-white font-bold text-lg">{question}</span>}
-      <ToggleSwitch checked={checked} onChange={onCheckedChange} colour={theme} />
+      <div className="flex flex-row w-full gap-4 justify-between items-center">
+        {checked && (
+          <Input
+            theme={theme}
+            {...props}
+            placeholder={label}
+            onChange={onChange}
+            disabled={disabled}
+            className="placeholder:!text-blue placeholder:!font-bold !text-white !font-bold pr-2"
+          />
+        )}
+        {!checked && <span className="text-white font-bold text-lg">{question}</span>}
+        <ToggleSwitch checked={checked} onChange={onCheckedChange} colour={theme} />
+      </div>
     </div>
   );
 }

frontend/src/components/utils/Modal.tsx

@@ -57,13 +57,8 @@ export default function Modal({
 
     document.addEventListener("keydown", onKeyDown);
 
-    // lock background scroll
-    const prevOverflow = document.body.style.overflow;
-    document.body.style.overflow = "hidden";
-
     return () => {
       document.removeEventListener("keydown", onKeyDown);
-      document.body.style.overflow = prevOverflow;
     };
   }, [isOpen, onClose]);
 
@@ -92,7 +87,7 @@ export default function Modal({
           "rounded-2xl",
           sizeClasses[size],
           // mobile full screen
-          mobileFullscreen && "max-md:h-full max-md:max-w-none max-md:rounded-none",
+          mobileFullscreen && "max-md:h-full max-md:max-w-none max-md:rounded-none max-md:overflow-y-auto",
           // if you want internal padding to live here (recommended)
           withPadding ? "p-6 max-md:p-6" : "p-0",
           colour ? colourClasses[colour] : "bg-white",

frontend/src/components/utils/SearchInput.tsx

@@ -66,7 +66,7 @@ export default function SearchInput({
       {label && (
         <label
           htmlFor={id}
-          className={`font-semibold text-md  ${theme === "dark" ? "text-dark" : "text-white"}`}
+          className={`font-semibold text-lg mb-2.5 ${theme === "dark" ? "text-dark" : "text-white"}`}
         >
           {label}
         </label>

frontend/src/components/utils/SearchSelectInput.tsx

@@ -124,7 +124,7 @@ export default function SearchSelectInput({
       {label && (
         <label
           htmlFor={id}
-          className={`font-semibold text-md ${theme === "light" ? "text-white" : "dark:text-dark"}`}
+          className={`font-semibold text-lg mb-2.5 ${theme === "light" ? "text-white" : "dark:text-dark"}`}
         >
           {label}
         </label>

frontend/src/pages/Conversations.tsx

@@ -142,11 +142,11 @@ export default function Conversations() {
   // Handle mobile view changes - hide/show bottom navigation
   useEffect(() => {
     if (isMobile) {
-      setBottomNavVisible(mobileView === "groups");
+      setBottomNavVisible(mobileView === "groups" && !isCreateGroupModalOpen && !isEditGroupModalOpen);
     } else {
       setBottomNavVisible(true);
     }
-  }, [isMobile, mobileView, setBottomNavVisible]);
+  }, [isMobile, mobileView, isCreateGroupModalOpen, isEditGroupModalOpen, setBottomNavVisible]);
 
   // Reset mobile view when switching from mobile to desktop
   useEffect(() => {

frontend/src/pages/UserProfilePage.tsx

@@ -14,10 +14,12 @@ import {
 import consoleErrorDev from "../hooks/erreurMod";
 import { useIsMobile } from "../hooks/useIsMobile";
 import getProfilePictureUrl, { toBase64 } from "../utils/pictureProfileManager";
+import { useMobileNavigationStore } from "../zustand/mobileNavigationStore";
 import { useMyProfileStore } from "../zustand/myProfileStore";
 
 const UserProfilePage = () => {
   const { userProfile, setUserProfile, clearUserProfile } = useMyProfileStore();
+  const { setBottomNavVisible } = useMobileNavigationStore();
   const navigate = useNavigate();
   const isMobile = useIsMobile();
   const [imageUrl, setImageUrl] = useState(getProfilePictureUrl(null));
@@ -92,12 +94,14 @@ const UserProfilePage = () => {
 
   const handleEditClick = () => {
     setIsEditing(true);
+    setBottomNavVisible(false);
     setMessageError("");
     setMessageSuccess("");
   };
 
   const handleCancelClick = () => {
     setIsEditing(false);
+    setBottomNavVisible(true);
     setProfile({ ...profileBackup });
     setImageUrl(getProfilePictureUrl(userProfile?.image_url));
     setMessageError("");
@@ -137,6 +141,7 @@ const UserProfilePage = () => {
     }
 
     setIsEditing(false);
+    setBottomNavVisible(true);
     if (!userProfile) {
       setMessageError("Vous devez être connecté pour modifier votre profil");
       return;

frontend/src/pages/userprofile.css

@@ -112,7 +112,7 @@
 .profile-content-inner {
   flex: 1;
   overflow-y: auto;
-  padding-right: 32px;
+  padding-right: 24px;
   margin-right: -24px;
 }