From 29c29b70a3ccb80ab0eaf3979f4dde42b835e935 Mon Sep 17 00:00:00 2001
From: Slooth <victor.guyot@epitech.eu>
Date: Fri, 2 Dec 2022 17:25:33 +0100
Subject: [PATCH 1/4] feat(front): added container component

---
 components/Container.js | 16 ++++++++++++++++
 1 file changed, 16 insertions(+)
 create mode 100644 components/Container.js

diff --git a/components/Container.js b/components/Container.js
new file mode 100644
index 0000000..3a86746
--- /dev/null
+++ b/components/Container.js
@@ -0,0 +1,16 @@
+const Container = ({fill, className, style, children}) => {
+
+  return (
+    <div
+    className={"inline-flex items-center justify-center shadow-lg shadow-gray-600 p-0.5 overflow-hidden rounded-lg bg-gradient-to-br from-primary to-secondary disabled:cursor-not-allowed"}
+    >
+      <span
+        style={style}
+        className={className + " transition-all ease-in duration-100 " + (fill ? "" : " bg-background rounded-md")}>
+          {children}
+      </span>
+    </div>
+  );
+};
+
+export default Container;
\ No newline at end of file

From 52f6f5a35bedfa09bf5ee72b3f6ce7eb113af776 Mon Sep 17 00:00:00 2001
From: Slooth <victor.guyot@epitech.eu>
Date: Fri, 2 Dec 2022 17:25:59 +0100
Subject: [PATCH 2/4] feat(front): refacto the button component

---
 components/MainButton.js   | 18 ++++++++----------
 components/SimpleButton.js | 18 ++++++++++++++++++
 pages/approve.js           |  8 ++++----
 pages/create.js            |  6 +++---
 pages/index.js             |  4 ++--
 5 files changed, 35 insertions(+), 19 deletions(-)
 create mode 100644 components/SimpleButton.js

diff --git a/components/MainButton.js b/components/MainButton.js
index 13527eb..d322544 100644
--- a/components/MainButton.js
+++ b/components/MainButton.js
@@ -1,20 +1,18 @@
 import Image from "next/image";
 
-const MainButton = ({ label, iconSrc, callback, type, isDisabled }) => {
+const MainButton = ({ style, className, callback, type, disabled, children }) => {
+
   return (
     <button
       type={type}
       onClick={callback}
-      disabled={isDisabled}
-      className={"w-80 relative inline-flex items-center justify-center shadow-lg shadow-gray-600 p-0.5 overflow-hidden rounded-lg group bg-gradient-to-br from-primary to-secondary disabled:cursor-not-allowed"}
+      disabled={disabled}
+      className={"inline-flex items-center justify-center shadow-lg shadow-gray-600 p-0.5 overflow-hidden rounded-lg bg-gradient-to-br from-primary to-secondary"}
     >
-      <span className={"w-80 items-center justify-between align-center flex px-5 py-2.5 transition-all ease-in duration-75 " + (isDisabled ? "" : "bg-background rounded-md group-hover:bg-opacity-0")}>
-        <p className="text-xl">{label}</p>
-        {iconSrc && !isDisabled ? (
-          <Image src={iconSrc} width={48} height={48} alt="icon"></Image>
-        ) : (
-          <></>
-        )}
+      <span
+        style={style}
+        className={className + " transition-all ease-in duration-100 " + (disabled ? "" : "bg-background rounded-md hover:bg-opacity-0")}>
+        {children}
       </span>
     </button>
   );
diff --git a/components/SimpleButton.js b/components/SimpleButton.js
new file mode 100644
index 0000000..cd705c7
--- /dev/null
+++ b/components/SimpleButton.js
@@ -0,0 +1,18 @@
+import Image from "next/image";
+import MainButton from "./MainButton";
+
+const SimpleButton = ({ label, iconSrc, callback, type, disabled }) => {
+
+  return (
+    <MainButton type={type} callback={callback} disabled={disabled} className={"w-80 items-center justify-between align-center flex px-5 py-2.5"}>
+        <p className="text-xl">{label}</p>
+        {iconSrc && !disabled ? (
+          <Image src={iconSrc} width={48} height={48} alt="icon"></Image>
+        ) : (
+          <></>
+        )}
+    </MainButton>
+  );
+};
+
+export default SimpleButton;
\ No newline at end of file
diff --git a/pages/approve.js b/pages/approve.js
index cc90353..9802c91 100644
--- a/pages/approve.js
+++ b/pages/approve.js
@@ -1,6 +1,6 @@
 import Image from "next/image";
 import DefaultLayout from "../modules/layout";
-import MainButton from "../components/MainButton";
+import SimpleButton from "../components/SimpleButton";
 import { useRouter } from "next/router";
 import { ToastContainer, toast } from "react-toastify";
 import React, { useState, useEffect } from "react";
@@ -136,12 +136,12 @@ const ApprovePage = () => {
             you and the license&#39;s provider
           </p>
           <div className="flex">
-            <MainButton
+            <SimpleButton
               label={alreadyOwned ? "Already owned" : (!waitingTrans ? "Get license" : "Loading...")}
               iconSrc={"/add_icon.svg"}
               callback={handleGetLicense}
-              isDisabled={alreadyOwned}
-            ></MainButton>
+              disabled={alreadyOwned}
+            ></SimpleButton>
           </div>
         </section>
       ) : (
diff --git a/pages/create.js b/pages/create.js
index 3e59edf..95756f1 100644
--- a/pages/create.js
+++ b/pages/create.js
@@ -1,6 +1,6 @@
 import Image from "next/image";
 import DefaultLayout from "../modules/layout";
-import MainButton from "../components/MainButton";
+import SimpleButton from "../components/SimpleButton";
 import { ToastContainer, toast } from "react-toastify";
 
 import React, { useState, useEffect } from "react";
@@ -161,11 +161,11 @@ const CreatePage = () => {
                 ></input>
               </ul>
               <div className="flex w-3/4 justify-between items-center">
-                <MainButton
+                <SimpleButton
                   type="submit"
                   label={!waitingTrans ? "Create" : "Loading..."}
                   iconSrc={"/add_icon.svg"}
-                ></MainButton>
+                ></SimpleButton>
                 {licenseId ? (
                   <h1 className="text-2xl text-center">
                     Your license has the id number:
diff --git a/pages/index.js b/pages/index.js
index 76900f1..ef1d1e9 100644
--- a/pages/index.js
+++ b/pages/index.js
@@ -1,7 +1,7 @@
 import Image from "next/image";
 import DefaultLayout from "../modules/layout";
 import { useRouter } from "next/router";
-import MainButton from "../components/MainButton";
+import SimpleButton from "../components/SimpleButton";
 
 import dynamic from "next/dynamic";
 const Animator = dynamic(
@@ -30,7 +30,7 @@ const ApprovePage = () => {
   return (
     <div className="bg-background ">
       <div className="absolute top-6 right-12">
-        <MainButton
+        <SimpleButton
           callback={navigateCreate}
           label="Create license"
           iconSrc="/arrow_forward.svg"

From fca24326057809f3c8fb1d32cf6600b8fe00534d Mon Sep 17 00:00:00 2001
From: Slooth <victor.guyot@epitech.eu>
Date: Sat, 3 Dec 2022 22:36:40 +0100
Subject: [PATCH 3/4] fix(front) removed unused var

---
 components/MainButton.js | 2 --
 1 file changed, 2 deletions(-)

diff --git a/components/MainButton.js b/components/MainButton.js
index d322544..98e7472 100644
--- a/components/MainButton.js
+++ b/components/MainButton.js
@@ -1,5 +1,3 @@
-import Image from "next/image";
-
 const MainButton = ({ style, className, callback, type, disabled, children }) => {
 
   return (

From 344ed67a5a7419cf1ea68e96915acf3a12ebe4ef Mon Sep 17 00:00:00 2001
From: Slooth <victor.guyot@epitech.eu>
Date: Sun, 4 Dec 2022 03:02:37 +0100
Subject: [PATCH 4/4] fix(front): overflow hidden position

---
 components/Container.js | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/components/Container.js b/components/Container.js
index 3a86746..231f0cb 100644
--- a/components/Container.js
+++ b/components/Container.js
@@ -2,11 +2,11 @@ const Container = ({fill, className, style, children}) => {
 
   return (
     <div
-    className={"inline-flex items-center justify-center shadow-lg shadow-gray-600 p-0.5 overflow-hidden rounded-lg bg-gradient-to-br from-primary to-secondary disabled:cursor-not-allowed"}
+    className={"h-min flex items-center justify-center shadow-lg shadow-gray-600 p-0.5  rounded-lg bg-gradient-to-br from-primary to-secondary disabled:cursor-not-allowed"}
     >
       <span
         style={style}
-        className={className + " transition-all ease-in duration-100 " + (fill ? "" : " bg-background rounded-md")}>
+        className={className + " transition-all ease-in duration-100 overflow-hidden" + (fill ? "" : " bg-background rounded-md")}>
           {children}
       </span>
     </div>