Update: style for the Modal

ClaytonSiby · Oct 11, 2023 · 067ba89 · 067ba89
1 parent 4f05e65
commit 067ba89
Showing 1 changed file with 14 additions and 7 deletions.
diff --git a/src/components/BookForm/index.tsx b/src/components/BookForm/index.tsx
@@ -74,7 +74,7 @@ const CreateBook = () => {
           <input
             type="text"
             className="form-control"
-            placeholder="Book Title"
+            placeholder="title"
             aria-label="Book Title"
             name="title"
             value={formData.title}
@@ -85,7 +85,7 @@ const CreateBook = () => {
           <input
             type="text"
             className="form-control"
-            placeholder="Author Name"
+            placeholder="author"
             aria-label="Author Name"
             name="author"
             value={formData.author}
@@ -94,32 +94,39 @@ const CreateBook = () => {
         </div>
         <div className="form-group my-2">
           <select
-            className="form-select"
+            className="form-select text-body-secondary p-0"
             id="inlineFormSelectPref"
             name="categories"
             value={formData.categories}
             onChange={handleInputChange}
             multiple={true}
           >
+            <option className="border-bottom border-info py-1 text-info disabled">
+              Select Category
+            </option>
             {distinctCategories?.map((category) => (
-              <option key={category.id} value={category.id}>
-                {category.name}
+              <option
+                key={category.id}
+                value={category.id}
+                className="py-1 w-lighter"
+              >
+                <small className="py-1 w-lighter">{category.name}</small>
               </option>
             ))}
           </select>
         </div>
         <div className="form-group my-2">
           <div className="form-floating">
             <textarea
-              className="form-control"
+              className="form-control h-75"
               placeholder="Leave a comment here"
               id="floatingTextarea"
               name="description"
               value={formData.description}
               onChange={handleInputChange}
             ></textarea>
             <label htmlFor="floatingTextarea" className="text-secondary">
-              details
+              description
             </label>
           </div>
         </div>