implement antd responsive layout

frontend/src/components/DeleteArticleButton.tsx

@@ -16,6 +16,7 @@ function DeleteProductButton({ articleId }: { articleId: string }) {
       title="Supprimer cet article ? "
       description="Toutes les données le concernant seront perdues."
       okText="Oui"
+      className="bg-red-500 text-white hover:bg-red-600 focus:outline-none"
       cancelText="Non"
       onConfirm={() =>
         deleteArticle({

frontend/src/components/DeleteProductButton.tsx

@@ -25,7 +25,9 @@ function DeleteProductButton({ productId }: { productId: string }) {
         })
       }
     >
-      <Button>Supprimer</Button>
+      <Button className="bg-red-500 text-white hover:bg-red-600 focus:outline-none">
+        Supprimer
+      </Button>
     </Popconfirm>
   );
 }

frontend/src/components/EditProduct/EditProductRow.tsx

@@ -8,7 +8,12 @@ function EditProductRow({ product }: EditProductRowProps) {
 
   return (
     <>
-      <Button onClick={() => setIsModalOpen(true)}>Modifier</Button>
+      <Button
+        onClick={() => setIsModalOpen(true)}
+        className="bg-blue-500 text-white hover:bg-blue-600 focus:outline-none"
+      >
+        Modifier
+      </Button>
       <EditProductModal
         isModalOpen={isModalOpen}
         setIsModalOpen={setIsModalOpen}

frontend/src/components/Footer.tsx

@@ -1,13 +1,15 @@
 import { Link } from "react-router-dom";
+import { Layout } from "antd"
+
 
 function Footer() {
   return (
-    <div className="fixed bottom-0 flex justify-center w-full bg-lightBlue gap-4 p-4 mt-4 text-white text-xs">
+    <Layout.Footer className="fixed bottom-0 flex justify-center w-full bg-lightBlue gap-4 p-4 mt-4 text-white text-xs">
       <Link to="#">Lien 1</Link>
       <Link to="#">Lien 2</Link>
       <Link to="#">Lien 3</Link>
       <Link to="#">Lien 4</Link>
-    </div>
+    </Layout.Footer>
   );
 }
 

frontend/src/components/Layout.tsx

@@ -3,6 +3,8 @@ import { Outlet } from "react-router-dom";
 import Navbar from "./Navbar";
 import Footer from "./Footer";
 import { useWhoAmIQuery } from "../generated/graphql-types";
+import { Layout as AntLayout } from "antd"
+import { Content } from "antd/es/layout/layout";
 
 export const UserContext = createContext({
   isLoggedIn: false,
@@ -26,26 +28,26 @@ function Layout() {
 
   if (data) {
     return (
-      <UserContext.Provider
-        value={{
-          isLoggedIn: data.whoAmI.isLoggedIn,
-          email: data.whoAmI.email ?? "",
-          role: data.whoAmI.role ?? "",
-          firstname: data.whoAmI.firstname ?? "",
-          lastname: data.whoAmI.lastname ?? "",
-          refetch: refetch,
-        }}
-      >
-        <div>
-          <Navbar />
-          <main>
-            <Outlet />
-          </main>
-          <div className="flex justify-center">
-            <Footer />
-          </div>
-        </div>
-      </UserContext.Provider>
+        <UserContext.Provider
+          value={{
+            isLoggedIn: data.whoAmI.isLoggedIn,
+            email: data.whoAmI.email ?? "",
+            role: data.whoAmI.role ?? "",
+            firstname: data.whoAmI.firstname ?? "",
+            lastname: data.whoAmI.lastname ?? "",
+            refetch: refetch,
+          }}
+        >
+          <AntLayout>
+            <Navbar />
+            <Content>
+              <Outlet />
+            </Content>
+            <div className="flex justify-center">
+              <Footer />
+            </div>
+          </AntLayout>
+        </UserContext.Provider>
     );
   }