Update: the README and view for the bookDetails

README.md

@@ -8,6 +8,10 @@ Add books to a shelf, read later, edit the book information, and categorize your
   This repository is setup to run a consistent default code format with Prettier and linting with Eslint. Before commit, lint-staged and Husky is ured run enforce these rules so that every commit adheres to the standards set for everyone contributing to the repository.
 </h6>
 
+**Application Functionality**
+
+![App Functionality](/src/assets/images/helm_bookstore.gif)
+
 **Husky and Lint-Stage Sample**
 
 ![husky-lint](/src/assets/images/husky-lintstaged.png)

src/assets/styles/main.scss

@@ -4,7 +4,7 @@ body {
   padding: 0;
   font-size: 15px;
   font-family: Arial, Helvetica, sans-serif;
-  background-color: #f5f5f5;
+  background: rgb(221, 218, 218) !important;
   margin: 0;
   padding: 0;
   height: 100vh;
@@ -25,4 +25,10 @@ body {
       min-height: 10rem;
     }
   }
+
+  .bookDetailsPage {
+    height: calc(100vh - 7rem);
+    max-width: 500px;
+    margin: 0 auto;
+  }
 }

src/components/UpdateBook/index.tsx

@@ -66,7 +66,10 @@ const UpdateBook = () => {
   }
 
   return (
-    <form className="d-flex mt-3">
+    <form className="d-flex flex-column justify-content-center align-items-center mt-3 bookDetailsPage">
+      <div className="text-center text-info my-3">
+        <h5>Details for {formData.title}</h5>
+      </div>
       <div className="row">
         <div className="col col-md-6 form-group my-2">
           <input