From 9776c524613567851606a17c33323f849181a341 Mon Sep 17 00:00:00 2001
From: Zwifi <contact@zwifi.eu>
Date: Sat, 6 Jan 2024 21:23:45 +0100
Subject: [PATCH 1/9] Make table border round

---
 src/components/Booklist.module.css | 9 ++++++++-
 1 file changed, 8 insertions(+), 1 deletion(-)

diff --git a/src/components/Booklist.module.css b/src/components/Booklist.module.css
index 9f01b17..49783fc 100644
--- a/src/components/Booklist.module.css
+++ b/src/components/Booklist.module.css
@@ -6,7 +6,14 @@
 .bookTable {
     border: solid black 1px ;
     margin: 1rem;
-    border-collapse: collapse;
+    border-spacing: 0;
+    /* Setting border-collapse to collapse prevents rounded corners.
+     * Setting border-spacing to 0 gets a similar result instead.
+     */
+    /* border-collapse: collapse; */
+    border-collapse: separate;
+    border-radius: 15px;
+    overflow: hidden;
 }
 
 .bookTable thead th {

From 12b9fcc30ed55387aff734543727047bc40e9630 Mon Sep 17 00:00:00 2001
From: Zwifi <contact@zwifi.eu>
Date: Sat, 6 Jan 2024 21:29:07 +0100
Subject: [PATCH 2/9] Refactor book addition page

---
 src/pages/AddPage.tsx | 16 ++++++----------
 1 file changed, 6 insertions(+), 10 deletions(-)

diff --git a/src/pages/AddPage.tsx b/src/pages/AddPage.tsx
index 05b2d22..5df4d58 100644
--- a/src/pages/AddPage.tsx
+++ b/src/pages/AddPage.tsx
@@ -10,16 +10,12 @@ export default function AddPage() {
   const {library } = useContext(LibraryContext);
   
   if (!session.info.isLoggedIn) {
-    return <div>Please log in to add a book to your library.</div>
+    return <p>Please log in to add a book to your library.</p>;
   }
 
-  return (
-    <div>
-      <h1>Add a book to your library, {session.info.webId}</h1>
-      { library !== undefined 
-        ? <AddBookForm/>
-        : <p>To be add books to your library, please define a library root first.</p>
-      }
-    </div>
-  )
+  if (library === undefined) {
+    return <p>To be add books to your library, please define a library root first.</p>;
+  }
+
+  return <AddBookForm/>;
 }

From a7234f5579461fdb5840186ac973bd1ecdd6e3b9 Mon Sep 17 00:00:00 2001
From: Zwifi <contact@zwifi.eu>
Date: Sat, 6 Jan 2024 21:47:10 +0100
Subject: [PATCH 3/9] Add book form border

---
 src/components/AddBookForm.module.css | 11 +++++++++++
 src/components/AddBookForm.tsx        |  8 +++++---
 2 files changed, 16 insertions(+), 3 deletions(-)
 create mode 100644 src/components/AddBookForm.module.css

diff --git a/src/components/AddBookForm.module.css b/src/components/AddBookForm.module.css
new file mode 100644
index 0000000..5d10a30
--- /dev/null
+++ b/src/components/AddBookForm.module.css
@@ -0,0 +1,11 @@
+.addBookFormContainer {
+    display: flex;
+    justify-content: center;
+}
+
+.addBookForm {
+    border: black solid 1px;
+    border-radius: 1em;
+    padding: 1em;
+    margin: 1em;
+}
\ No newline at end of file
diff --git a/src/components/AddBookForm.tsx b/src/components/AddBookForm.tsx
index 75519af..c03ca9e 100644
--- a/src/components/AddBookForm.tsx
+++ b/src/components/AddBookForm.tsx
@@ -9,6 +9,8 @@ import { getSourceIri, getThingAll, setThing } from "@inrupt/solid-client";
 import { LibraryContext } from "../contexts/libraryContext";
 import BarcodeReader from "./barcode";
 
+import style from "./AddBookForm.module.css";
+
 const BookTitleField = ({
   handleChange,
   title
@@ -39,7 +41,7 @@ const LangTagField = ({
 }) => {
   return (
     <label htmlFor="langTag">
-      Title:
+      Langue:
       <select
         name="langTag"
         id="langTag"
@@ -158,7 +160,7 @@ export default function AddBookForm() {
     setLibrary(addBookToDataset(book, library));
   }
 
-  return (<div>
+  return (<div className={ style.addBookFormContainer }>
     <Formik
       initialValues={initalValues}
       onSubmit={(book, { setSubmitting, resetForm }) => {
@@ -168,7 +170,7 @@ export default function AddBookForm() {
       }}
     >
       {props => (
-        <form onSubmit={props.handleSubmit}>
+        <form onSubmit={props.handleSubmit} className={ style.addBookForm }>
           <BookTitleField
             handleChange={props.handleChange}
             title={props.values.title}

From e2d6b73d89427b34a2995c6964f96483e7c968c1 Mon Sep 17 00:00:00 2001
From: Zwifi <contact@zwifi.eu>
Date: Sat, 6 Jan 2024 23:05:44 +0100
Subject: [PATCH 4/9] Make barcode scanner modal

---
 src/components/AddBookForm.module.css | 50 ++++++++++++++++++++++++++-
 src/components/AddBookForm.tsx        | 29 ++++++++++++++--
 src/components/domConstants.ts        |  2 +-
 src/lib/barcode.js                    |  6 ++--
 4 files changed, 79 insertions(+), 8 deletions(-)

diff --git a/src/components/AddBookForm.module.css b/src/components/AddBookForm.module.css
index 5d10a30..b6cda68 100644
--- a/src/components/AddBookForm.module.css
+++ b/src/components/AddBookForm.module.css
@@ -8,4 +8,52 @@
     border-radius: 1em;
     padding: 1em;
     margin: 1em;
-}
\ No newline at end of file
+}
+
+ /* The Modal (background) */
+ .barcode-modal {
+    display: none; /* Hidden by default */
+    position: fixed; /* Stay in place */
+    z-index: 1; /* Sit on top */
+    left: 0;
+    top: 0;
+    width: 100%; /* Full width */
+    height: 100%; /* Full height */
+    overflow: auto; /* Enable scroll if needed */
+    background-color: rgb(0,0,0); /* Fallback color */
+    background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
+  }
+
+  .barcode-container {
+    display: flex;
+    justify-content: center;
+  }
+
+  .barcode-container canvas {
+    /* The barcode library adds an extraneous canvas */
+    display: none;
+  }
+  
+  /* Modal Content/Box */
+  .barcode-viewer {
+    /* background-color: #fefefe; */
+    /* margin: 15% auto; */
+    padding: 1em;
+    /* border: 1px solid #888; */
+    /* width: 80%; */
+  }
+  
+  /* The Close Button */
+  .close {
+    color: #aaa;
+    float: right;
+    font-size: 28px;
+    font-weight: bold;
+  }
+  
+  .close:hover,
+  .close:focus {
+    color: black;
+    text-decoration: none;
+    cursor: pointer;
+  } 
\ No newline at end of file
diff --git a/src/components/AddBookForm.tsx b/src/components/AddBookForm.tsx
index c03ca9e..71bfdef 100644
--- a/src/components/AddBookForm.tsx
+++ b/src/components/AddBookForm.tsx
@@ -1,8 +1,8 @@
 "use client";
 
-import { BARCODE_CONTAINER_ID } from "../../src/components/domConstants";
+import { BARCODE_VIEWER_ID } from "../../src/components/domConstants";
 import { Field, FieldArray, Formik, useFormikContext } from "formik";
-import { ChangeEventHandler, useContext, useState } from "react";
+import { ChangeEventHandler, useContext, useEffect, useState } from "react";
 import type { Book } from "../lib/data/books";
 import { addBookToDataset, bookToRdf } from "../lib/data/books";
 import { getSourceIri, getThingAll, setThing } from "@inrupt/solid-client";
@@ -68,6 +68,25 @@ const IsbnField = ({
   const {
     setFieldValue,
   } = useFormikContext()
+
+  useEffect(() => {
+    const modal = document.getElementById("barcode-modal");
+    const modalContainer = document.getElementById("barcode-container");
+    if(modal === null) {
+      return;
+    }
+    if (scanEnabled) {
+      modal.style.display = "block";
+      window.onclick = (event) => {
+        if (event.target === modal || event.target === modalContainer) {
+          setScanEnabled(false);
+        }
+      }
+    } else {
+      modal.style.display = "none";
+    }
+  }, [scanEnabled]);
+
   return (
     <label htmlFor="isbn">
       <button type="button" onClick={() => setScanEnabled((prev) => !prev)}>ISBN: </button>
@@ -203,6 +222,10 @@ export default function AddBookForm() {
         )}
     </Formik>
     {/* The following must be present for the BarcodeReader component to anchor into. */}
-    <div id={BARCODE_CONTAINER_ID}></div>
+    <div className={style["barcode-modal"]} id="barcode-modal">
+      <div className={style["barcode-container"]} id="barcode-container">
+        <div id={BARCODE_VIEWER_ID} className={style["barcode-viewer"]}></div>
+      </div>
+    </div>
   </div>)
 }
diff --git a/src/components/domConstants.ts b/src/components/domConstants.ts
index d84dff5..f642850 100644
--- a/src/components/domConstants.ts
+++ b/src/components/domConstants.ts
@@ -1 +1 @@
-export const BARCODE_CONTAINER_ID = 'barcode-container';
+export const BARCODE_VIEWER_ID = 'barcode-viewer';
diff --git a/src/lib/barcode.js b/src/lib/barcode.js
index 6becccb..ba12d77 100644
--- a/src/lib/barcode.js
+++ b/src/lib/barcode.js
@@ -1,9 +1,9 @@
 import Quagga from "quagga";
-import { BARCODE_CONTAINER_ID } from "../components/domConstants"
+import { BARCODE_VIEWER_ID } from "../components/domConstants"
 
 function stopScanning() {
   Quagga.stop();
-  const container = document.querySelector(`#${BARCODE_CONTAINER_ID}`);
+  const container = document.querySelector(`#${BARCODE_VIEWER_ID}`);
   if(container !== null) {
     Array.from(container.childNodes).forEach((child) => {
       container.removeChild(child);
@@ -21,7 +21,7 @@ export function runDetection(onDetectedCallback) {
         facingMode: "environment",
         aspectRatio: {min: 1, max: 2}
     },
-      target: document.querySelector(`#${BARCODE_CONTAINER_ID}`)
+      target: document.querySelector(`#${BARCODE_VIEWER_ID}`)
     },
     locator: {
       patchSize: "medium",

From fd0e94c2e1ce6842d0ad0727d937a23eb147256b Mon Sep 17 00:00:00 2001
From: Zwifi <contact@zwifi.eu>
Date: Sat, 6 Jan 2024 23:11:46 +0100
Subject: [PATCH 5/9] Close modal on detected barcode

---
 src/components/AddBookForm.tsx | 7 ++++++-
 1 file changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/components/AddBookForm.tsx b/src/components/AddBookForm.tsx
index 71bfdef..112d6d5 100644
--- a/src/components/AddBookForm.tsx
+++ b/src/components/AddBookForm.tsx
@@ -90,7 +90,12 @@ const IsbnField = ({
   return (
     <label htmlFor="isbn">
       <button type="button" onClick={() => setScanEnabled((prev) => !prev)}>ISBN: </button>
-      <BarcodeReader enabled={scanEnabled} onDetectedCallback={(value) => { setFieldValue("isbn", value) }}/>
+      <BarcodeReader enabled={scanEnabled} onDetectedCallback={
+        (value) => { 
+          setFieldValue("isbn", value);
+          setScanEnabled(false);
+        }
+      }/>
       <input
         type="text"
         name="isbn"

From e2fa0958d0b299bd157b9601287bebfa8a35acce Mon Sep 17 00:00:00 2001
From: Zwifi <contact@zwifi.eu>
Date: Sun, 4 Feb 2024 15:10:04 +0100
Subject: [PATCH 6/9] WIP

---
 src/components/AddBookForm.module.css | 7 +++----
 1 file changed, 3 insertions(+), 4 deletions(-)

diff --git a/src/components/AddBookForm.module.css b/src/components/AddBookForm.module.css
index b6cda68..2b489fc 100644
--- a/src/components/AddBookForm.module.css
+++ b/src/components/AddBookForm.module.css
@@ -24,6 +24,9 @@
     background-color: rgba(0,0,0,0.4); /* Black w/ opacity */
   }
 
+  /* See the following link for ideas */
+  /* https://codepen.io/havardob/pen/eYJPwdb */
+
   .barcode-container {
     display: flex;
     justify-content: center;
@@ -36,11 +39,7 @@
   
   /* Modal Content/Box */
   .barcode-viewer {
-    /* background-color: #fefefe; */
-    /* margin: 15% auto; */
     padding: 1em;
-    /* border: 1px solid #888; */
-    /* width: 80%; */
   }
   
   /* The Close Button */

From 15e415a16101e46a3e9813f2ca24a16ff6883435 Mon Sep 17 00:00:00 2001
From: Zwifi <contact@zwifi.eu>
Date: Sun, 4 Feb 2024 22:43:19 +0100
Subject: [PATCH 7/9] Rephrase comment

---
 app/id/route.ts | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/app/id/route.ts b/app/id/route.ts
index 751c46d..d8d2503 100644
--- a/app/id/route.ts
+++ b/app/id/route.ts
@@ -10,8 +10,7 @@ function buildClientIdentifierDoc() {
       post_logout_redirect_uris: [baseUrl],
       // Support refresh_tokens for refreshing the session:
       grant_types: ["authorization_code", "refresh_token"],
-      // The scope must be explicit, as the default doesn't include offline_access,
-      // preventing the refresh token from being issued.
+      // The default scopes don't include offline_access
       scope: "openid webid offline_access",
       response_types: ["code"],
       token_endpoint_auth_method: "none",

From cea0c417f1a1c2ca57fab9602071f7fbf683b2cf Mon Sep 17 00:00:00 2001
From: Zwifi <contact@zwifi.eu>
Date: Sat, 10 Feb 2024 23:41:11 +0100
Subject: [PATCH 8/9] Install fontawesome

---
 package-lock.json | 78 +++++++++++++++++++++++++++++++++++++++++++++++
 package.json      |  2 ++
 2 files changed, 80 insertions(+)

diff --git a/package-lock.json b/package-lock.json
index 526493a..6b62fa0 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -10,6 +10,8 @@
       "dependencies": {
         "@emotion/react": "^11.11.1",
         "@emotion/styled": "^11.11.0",
+        "@fortawesome/free-solid-svg-icons": "^6.5.1",
+        "@fortawesome/react-fontawesome": "^0.2.0",
         "@inrupt/solid-client": "^1.30.0",
         "@inrupt/solid-client-authn-browser": "^1.17.1",
         "@inrupt/solid-ui-react": "^2.9.0",
@@ -463,6 +465,52 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
+    "node_modules/@fortawesome/fontawesome-common-types": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
+      "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A==",
+      "hasInstallScript": true,
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz",
+      "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==",
+      "hasInstallScript": true,
+      "peer": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==",
+      "hasInstallScript": true,
+      "dependencies": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      },
+      "engines": {
+        "node": ">=6"
+      }
+    },
+    "node_modules/@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "dependencies": {
+        "prop-types": "^15.8.1"
+      },
+      "peerDependencies": {
+        "@fortawesome/fontawesome-svg-core": "~1 || ~6",
+        "react": ">=16.3"
+      }
+    },
     "node_modules/@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
@@ -5436,6 +5484,36 @@
       "resolved": "https://registry.npmjs.org/@floating-ui/utils/-/utils-0.1.6.tgz",
       "integrity": "sha512-OfX7E2oUDYxtBvsuS4e/jSn4Q9Qb6DzgeYtsAdkPZ47znpoNsMgZw0+tVijiv3uGNR6dgNlty6r9rzIzHjtd/A=="
     },
+    "@fortawesome/fontawesome-common-types": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-common-types/-/fontawesome-common-types-6.5.1.tgz",
+      "integrity": "sha512-GkWzv+L6d2bI5f/Vk6ikJ9xtl7dfXtoRu3YGE6nq0p/FFqA1ebMOAWg3XgRyb0I6LYyYkiAo+3/KrwuBp8xG7A=="
+    },
+    "@fortawesome/fontawesome-svg-core": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/fontawesome-svg-core/-/fontawesome-svg-core-6.5.1.tgz",
+      "integrity": "sha512-MfRCYlQPXoLlpem+egxjfkEuP9UQswTrlCOsknus/NcMoblTH2g0jPrapbcIb04KGA7E2GZxbAccGZfWoYgsrQ==",
+      "peer": true,
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      }
+    },
+    "@fortawesome/free-solid-svg-icons": {
+      "version": "6.5.1",
+      "resolved": "https://registry.npmjs.org/@fortawesome/free-solid-svg-icons/-/free-solid-svg-icons-6.5.1.tgz",
+      "integrity": "sha512-S1PPfU3mIJa59biTtXJz1oI0+KAXW6bkAb31XKhxdxtuXDiUIFsih4JR1v5BbxY7hVHsD1RKq+jRkVRaf773NQ==",
+      "requires": {
+        "@fortawesome/fontawesome-common-types": "6.5.1"
+      }
+    },
+    "@fortawesome/react-fontawesome": {
+      "version": "0.2.0",
+      "resolved": "https://registry.npmjs.org/@fortawesome/react-fontawesome/-/react-fontawesome-0.2.0.tgz",
+      "integrity": "sha512-uHg75Rb/XORTtVt7OS9WoK8uM276Ufi7gCzshVWkUJbHhh3svsUUeqXerrM96Wm7fRiDzfKRwSoahhMIkGAYHw==",
+      "requires": {
+        "prop-types": "^15.8.1"
+      }
+    },
     "@humanwhocodes/config-array": {
       "version": "0.11.8",
       "resolved": "https://registry.npmjs.org/@humanwhocodes/config-array/-/config-array-0.11.8.tgz",
diff --git a/package.json b/package.json
index 158a721..63da87c 100644
--- a/package.json
+++ b/package.json
@@ -11,6 +11,8 @@
   "dependencies": {
     "@emotion/react": "^11.11.1",
     "@emotion/styled": "^11.11.0",
+    "@fortawesome/free-solid-svg-icons": "^6.5.1",
+    "@fortawesome/react-fontawesome": "^0.2.0",
     "@inrupt/solid-client": "^1.30.0",
     "@inrupt/solid-client-authn-browser": "^1.17.1",
     "@inrupt/solid-ui-react": "^2.9.0",

From f06a4759373baa082308657055c31bc34b3cb230 Mon Sep 17 00:00:00 2001
From: Zwifi <contact@zwifi.eu>
Date: Sat, 10 Feb 2024 23:41:29 +0100
Subject: [PATCH 9/9] Style book form

Use CSS grid, and improve looks of the book addition form.
---
 src/components/AddBookForm.module.css |  34 ++++++
 src/components/AddBookForm.tsx        | 142 +++++++++++++++-----------
 2 files changed, 115 insertions(+), 61 deletions(-)

diff --git a/src/components/AddBookForm.module.css b/src/components/AddBookForm.module.css
index 2b489fc..a0ab6de 100644
--- a/src/components/AddBookForm.module.css
+++ b/src/components/AddBookForm.module.css
@@ -8,6 +8,40 @@
     border-radius: 1em;
     padding: 1em;
     margin: 1em;
+    display: grid;
+    grid-template-columns: 1fr 1fr;
+    grid-template-rows: min-content min-content min-content;
+}
+
+#bookTitleField {
+  grid-column: 1;
+  grid-row: 1;
+}
+
+#langTagField {
+  grid-column: 2;
+  grid-row: 1;
+}
+
+#authorField {
+  grid-column: 1;
+  grid-row: 2;
+}
+
+#seriesField {
+  grid-column: 2;
+  grid-row: 2;
+  display: flex;
+}
+
+#isbnField {
+  grid-column: 1;
+  grid-row: 3;
+}
+
+#submitButton {
+  grid-column: 1 / span 2;
+  grid-row: 4;
 }
 
  /* The Modal (background) */
diff --git a/src/components/AddBookForm.tsx b/src/components/AddBookForm.tsx
index 112d6d5..79b7d18 100644
--- a/src/components/AddBookForm.tsx
+++ b/src/components/AddBookForm.tsx
@@ -10,6 +10,8 @@ import { LibraryContext } from "../contexts/libraryContext";
 import BarcodeReader from "./barcode";
 
 import style from "./AddBookForm.module.css";
+import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
+import { faBarcode } from "@fortawesome/free-solid-svg-icons";
 
 const BookTitleField = ({
   handleChange,
@@ -19,16 +21,18 @@ const BookTitleField = ({
   title: string
 }) => {
   return (
-    <label htmlFor="title">
-      Title:
+    <div id={style.bookTitleField}>
+      <label htmlFor="title">Titre</label><br />
       <input
         type="text"
         name="title"
         id="title"
         onChange={handleChange}
         value={title}
+        placeholder="Les gaffes d'un gars gonflé"
       />
-    </label>
+    </div>
+    
   )
 }
 
@@ -40,8 +44,8 @@ const LangTagField = ({
   langTag: string
 }) => {
   return (
-    <label htmlFor="langTag">
-      Langue:
+    <div id={style.langTagField}>
+      <label htmlFor="langTag">Langue</label><br />
       <select
         name="langTag"
         id="langTag"
@@ -53,7 +57,7 @@ const LangTagField = ({
         <option value={"es"}>es</option>
         <option value={"ru"}>ru</option>
       </select>
-    </label>
+    </div>
   )
 }
 
@@ -88,8 +92,8 @@ const IsbnField = ({
   }, [scanEnabled]);
 
   return (
-    <label htmlFor="isbn">
-      <button type="button" onClick={() => setScanEnabled((prev) => !prev)}>ISBN: </button>
+    <div id={style.isbnField}>
+      <label htmlFor="isbn">ISBN</label> <button type="button" onClick={() => setScanEnabled((prev) => !prev)}><FontAwesomeIcon icon={faBarcode} /></button><br />
       <BarcodeReader enabled={scanEnabled} onDetectedCallback={
         (value) => { 
           setFieldValue("isbn", value);
@@ -102,8 +106,9 @@ const IsbnField = ({
         id="isbn"
         onChange={handleChange}
         value={isbn}
+        placeholder="9782800159102"
       />
-    </label>
+    </div> 
   )
 }
 
@@ -115,23 +120,25 @@ const AuthorsField = ({
   return (
     <FieldArray name="authors">
       {({ remove, push }) => (
-        <div>
+        <div id={style.authorField}>
+          <label>Auteurs</label>
+          <button type="button" onClick={() => push("") }>+</button>
+          <br/>
           {authors.map((_author, index) => {
             return (
-              <label htmlFor={`authors.${index}`} key={index}>
-              Author:
-              <Field
-                type="text"
-                name={`authors.${index}`}
-                id={`authors.${index}`}
-              >
-              </Field>
-              {index !== 0 ? <button type="button" onClick={() => {remove(index)} }>x</button> : <></>}
-              <br/>
-              </label>
+              <div key={index}>
+                <Field
+                  type="text"
+                  name={`authors.${index}`}
+                  id={`authors.${index}`}
+                  placeholder="Franquin"
+                >
+                </Field>
+                {index !== 0 ? <button type="button" onClick={() => {remove(index)} }>x</button> : <></>}
+                <br/>
+              </div>
             )
           })}
-          <button type="button" onClick={() => push("") }>+</button>
         </div>)
       }
     </FieldArray>
@@ -149,16 +156,26 @@ const SeriesField = ({
   handleChange: ChangeEventHandler
 }) => {
   return (
-    <div>
-      <label htmlFor="series.name">
-        Series name: 
-        <Field name="series.name" onChange={handleChange} />
-      </label>
-      <br />
-      <label htmlFor="series.index">
-        Series index:
-        <Field name="series.index" onChange={handleChange} />
-      </label>
+    <div id={style.seriesField}>
+      <div id={style.seriesTitle}>
+        <label htmlFor="series.name">Série</label><br />
+        <Field 
+          name="series.name"
+          onChange={handleChange} 
+          component={
+            () => <input type="text" placeholder="Gaston Lagaffe" />
+          }
+        />
+      </div>
+      <div id={style.seriesNumber}>
+        <label htmlFor="series.index">Tome</label><br />
+        <Field 
+          name="series.index"
+          onChange={handleChange}
+          component={
+            () => <input type="number" placeholder="6" size={"Tome".length} />
+          }/>
+      </div>
     </div>
   )
 }
@@ -194,35 +211,38 @@ export default function AddBookForm() {
       }}
     >
       {props => (
-        <form onSubmit={props.handleSubmit} className={ style.addBookForm }>
-          <BookTitleField
-            handleChange={props.handleChange}
-            title={props.values.title}
-          />
-          { props.errors.title && props.touched.title }
-          <LangTagField
-            handleChange={props.handleChange}
-            langTag={props.values.langTag}
-          />
-          <br />
-          <IsbnField
-            handleChange={props.handleChange}
-            isbn={props.values.isbn}
-          />
-          {props.errors.isbn && props.touched.isbn}
-          <br />
-          <AuthorsField
-            authors={props.values.authors}
-          />
-          <br />
-          <SeriesField 
-            series={props.values.series}
-            handleChange={props.handleChange}
-          />
-          <br />
-          <button type="submit" disabled={props.isSubmitting}>
-            Submit
-          </button>
+        <form onSubmit={props.handleSubmit}>
+          <fieldset className={ style.addBookForm }>
+            <legend>Ajoute un livre à ta collection</legend>
+            <BookTitleField
+              handleChange={props.handleChange}
+              title={props.values.title}
+            />
+            { props.errors.title && props.touched.title }
+            <LangTagField
+              handleChange={props.handleChange}
+              langTag={props.values.langTag}
+            />
+            <br />
+            <IsbnField
+              handleChange={props.handleChange}
+              isbn={props.values.isbn}
+            />
+            {props.errors.isbn && props.touched.isbn}
+            <br />
+            <AuthorsField
+              authors={props.values.authors}
+            />
+            <br />
+            <SeriesField 
+              series={props.values.series}
+              handleChange={props.handleChange}
+            />
+            <br />
+            <button type="submit" disabled={props.isSubmitting} id={style.submitButton}>
+              Enregistrer
+            </button>
+          </fieldset>
         </form>
         )}
     </Formik>