From 1ae657daa8d520b602df9bc3fb0210e41810a9d1 Mon Sep 17 00:00:00 2001
From: Sonny <sonnyasdev@gmail.com>
Date: Thu, 8 Jun 2023 23:25:55 +0200
Subject: [PATCH] feat: make all forms responsive

---
 src/components/FormLayout.tsx                 | 42 ++++++++-----------
 src/components/Modal/modal.module.scss        |  2 +-
 src/pages/category/create.tsx                 | 10 ++---
 src/pages/category/edit/[cid].tsx             |  4 +-
 src/pages/category/remove/[cid].tsx           |  4 +-
 src/pages/link/create.tsx                     |  4 +-
 src/pages/link/edit/[lid].tsx                 | 13 +++---
 src/pages/link/remove/[lid].tsx               |  4 +-
 .../{create.module.scss => form.module.scss}  | 20 +++++----
 9 files changed, 48 insertions(+), 55 deletions(-)
 rename src/styles/{create.module.scss => form.module.scss} (59%)

diff --git a/src/components/FormLayout.tsx b/src/components/FormLayout.tsx
index b552150..2b599fe 100644
--- a/src/components/FormLayout.tsx
+++ b/src/components/FormLayout.tsx
@@ -3,8 +3,6 @@ import Link from "next/link";
 
 import MessageManager from "components/MessageManager/MessageManager";
 
-import styles from "styles/create.module.scss";
-
 interface FormProps {
   title: string;
 
@@ -39,29 +37,23 @@ export default function Form({
   return (
     <>
       <NextSeo title={title} />
-      <div className={`App ${styles["create-app"]}`}>
-        <h2>{title}</h2>
-        <form onSubmit={handleSubmit}>
-          {children}
-          <button
-            type="submit"
-            className={classBtnConfirm}
-            disabled={!canSubmit}
-          >
-            {textBtnConfirm}
-          </button>
-        </form>
-        {!disableHomeLink && (
-          <Link href={categoryId ? `/?categoryId=${categoryId}` : "/"}>
-            ← Revenir à l'accueil
-          </Link>
-        )}
-        <MessageManager
-          info={infoMessage}
-          error={errorMessage}
-          success={successMessage}
-        />
-      </div>
+      <h2>{title}</h2>
+      <form onSubmit={handleSubmit}>
+        {children}
+        <button type="submit" className={classBtnConfirm} disabled={!canSubmit}>
+          {textBtnConfirm}
+        </button>
+      </form>
+      {!disableHomeLink && (
+        <Link href={categoryId ? `/?categoryId=${categoryId}` : "/"}>
+          ← Revenir à l'accueil
+        </Link>
+      )}
+      <MessageManager
+        info={infoMessage}
+        error={errorMessage}
+        success={successMessage}
+      />
     </>
   );
 }
diff --git a/src/components/Modal/modal.module.scss b/src/components/Modal/modal.module.scss
index fa1ef27..1b1dd44 100644
--- a/src/components/Modal/modal.module.scss
+++ b/src/components/Modal/modal.module.scss
@@ -53,7 +53,7 @@
 
 @media (max-width: 768px) {
   .modal-container {
-    height: calc(100% - 2em);
+    max-height: calc(100% - 2em);
     width: calc(100% - 2em);
     min-width: unset;
     margin-top: 1em;
diff --git a/src/pages/category/create.tsx b/src/pages/category/create.tsx
index a46538e..b1cfdf2 100644
--- a/src/pages/category/create.tsx
+++ b/src/pages/category/create.tsx
@@ -9,14 +9,14 @@ import TextBox from "components/TextBox";
 
 import PATHS from "constants/paths";
 import useAutoFocus from "hooks/useAutoFocus";
-import { redirectWithoutClientCache } from "utils/client";
-import { HandleAxiosError } from "utils/front";
-
 import getUserCategoriesCount from "lib/category/getUserCategoriesCount";
 import getUser from "lib/user/getUser";
-import styles from "styles/create.module.scss";
+import { redirectWithoutClientCache } from "utils/client";
+import { HandleAxiosError } from "utils/front";
 import { getSession } from "utils/session";
 
+import styles from "styles/form.module.scss";
+
 function CreateCategory({ categoriesCount }: { categoriesCount: number }) {
   const autoFocusRef = useAutoFocus();
   const router = useRouter();
@@ -52,7 +52,7 @@ function CreateCategory({ categoriesCount }: { categoriesCount: number }) {
   };
 
   return (
-    <PageTransition className="page-category-create">
+    <PageTransition className={styles["form-container"]}>
       <FormLayout
         title="Créer une catégorie"
         errorMessage={error}
diff --git a/src/pages/category/edit/[cid].tsx b/src/pages/category/edit/[cid].tsx
index 72f8675..6e99dd8 100644
--- a/src/pages/category/edit/[cid].tsx
+++ b/src/pages/category/edit/[cid].tsx
@@ -15,7 +15,7 @@ import { Category } from "types";
 import { HandleAxiosError } from "utils/front";
 import { getSession } from "utils/session";
 
-import styles from "styles/create.module.scss";
+import styles from "styles/form.module.scss";
 
 function EditCategory({ category }: { category: Category }) {
   const autoFocusRef = useAutoFocus();
@@ -52,7 +52,7 @@ function EditCategory({ category }: { category: Category }) {
   };
 
   return (
-    <PageTransition className="page-category-edit">
+    <PageTransition className={styles["form-container"]}>
       <FormLayout
         title="Modifier une catégorie"
         errorMessage={error}
diff --git a/src/pages/category/remove/[cid].tsx b/src/pages/category/remove/[cid].tsx
index b57e5fb..fcb8d1a 100644
--- a/src/pages/category/remove/[cid].tsx
+++ b/src/pages/category/remove/[cid].tsx
@@ -15,7 +15,7 @@ import { Category } from "types";
 import { HandleAxiosError } from "utils/front";
 import { getSession } from "utils/session";
 
-import styles from "styles/create.module.scss";
+import styles from "styles/form.module.scss";
 
 function RemoveCategory({ category }: { category: Category }) {
   const router = useRouter();
@@ -51,7 +51,7 @@ function RemoveCategory({ category }: { category: Category }) {
   };
 
   return (
-    <PageTransition className="page-category-remove">
+    <PageTransition className={styles["form-container"]}>
       <FormLayout
         title="Supprimer une catégorie"
         categoryId={category.id.toString()}
diff --git a/src/pages/link/create.tsx b/src/pages/link/create.tsx
index 468eb42..e6eb642 100644
--- a/src/pages/link/create.tsx
+++ b/src/pages/link/create.tsx
@@ -17,7 +17,7 @@ import { Category, Link } from "types";
 import { HandleAxiosError, IsValidURL } from "utils/front";
 import { getSession } from "utils/session";
 
-import styles from "styles/create.module.scss";
+import styles from "styles/form.module.scss";
 
 function CreateLink({ categories }: { categories: Category[] }) {
   const autoFocusRef = useAutoFocus();
@@ -64,7 +64,7 @@ function CreateLink({ categories }: { categories: Category[] }) {
   };
 
   return (
-    <PageTransition className="page-link-create">
+    <PageTransition className={styles["form-container"]}>
       <FormLayout
         title="Créer un lien"
         categoryId={categoryIdQuery}
diff --git a/src/pages/link/edit/[lid].tsx b/src/pages/link/edit/[lid].tsx
index 883d55d..117746c 100644
--- a/src/pages/link/edit/[lid].tsx
+++ b/src/pages/link/edit/[lid].tsx
@@ -9,17 +9,16 @@ import PageTransition from "components/PageTransition";
 import Selector from "components/Selector";
 import TextBox from "components/TextBox";
 
+import PATHS from "constants/paths";
 import useAutoFocus from "hooks/useAutoFocus";
+import getUserCategories from "lib/category/getUserCategories";
+import getUserLink from "lib/link/getUserLink";
+import getUser from "lib/user/getUser";
 import { Category, Link } from "types";
 import { HandleAxiosError, IsValidURL } from "utils/front";
 import { getSession } from "utils/session";
 
-import getUserCategories from "lib/category/getUserCategories";
-import getUserLink from "lib/link/getUserLink";
-
-import PATHS from "constants/paths";
-import getUser from "lib/user/getUser";
-import styles from "styles/create.module.scss";
+import styles from "styles/form.module.scss";
 
 function EditLink({
   link,
@@ -85,7 +84,7 @@ function EditLink({
   };
 
   return (
-    <PageTransition className="page-link-edit">
+    <PageTransition className={styles["form-container"]}>
       <FormLayout
         title="Modifier un lien"
         errorMessage={error}
diff --git a/src/pages/link/remove/[lid].tsx b/src/pages/link/remove/[lid].tsx
index 6d02a51..0e4c249 100644
--- a/src/pages/link/remove/[lid].tsx
+++ b/src/pages/link/remove/[lid].tsx
@@ -15,7 +15,7 @@ import { Link } from "types";
 import { HandleAxiosError } from "utils/front";
 import { getSession } from "utils/session";
 
-import styles from "styles/create.module.scss";
+import styles from "styles/form.module.scss";
 
 function RemoveLink({ link }: { link: Link }) {
   const router = useRouter();
@@ -46,7 +46,7 @@ function RemoveLink({ link }: { link: Link }) {
   };
 
   return (
-    <PageTransition className="page-link-remove">
+    <PageTransition className={styles["form-container"]}>
       <FormLayout
         title="Supprimer un lien"
         categoryId={link.category.id.toString()}
diff --git a/src/styles/create.module.scss b/src/styles/form.module.scss
similarity index 59%
rename from src/styles/create.module.scss
rename to src/styles/form.module.scss
index 3866683..5e7a57a 100644
--- a/src/styles/create.module.scss
+++ b/src/styles/form.module.scss
@@ -1,34 +1,36 @@
 @import "keyframes.scss";
 @import "colors.scss";
 
-.create-app {
+.form-container {
   height: fit-content;
-  width: 680px;
-  margin-top: 150px;
+  width: 768px;
+  margin-top: 10em;
+  display: flex;
   flex-direction: column;
-  gap: 15px;
+  gap: 0.75em;
 
   & h2 {
     color: $blue;
   }
 
   & form {
-    height: 100%;
     width: 100%;
     display: flex;
-    gap: 5px;
+    gap: 0.5em;
     flex-direction: column;
   }
 
   & .input-field {
     display: flex;
-    gap: 5px;
+    gap: 0.25em;
     flex-direction: column;
   }
 }
 
-@media (max-width: 680px) {
-  .create-app {
+@media (max-width: 768px) {
+  .form-container {
     width: 100%;
+    margin-top: 5em;
+    padding: 0 1em;
   }
 }