Merge pull request #5 from Tadesse-Alemayehu/style

Bookstore: styling

README.md

@@ -1,6 +1,6 @@
 # Book Store
 
-> This isBook Store project.
+> This is Book Store project.
 
 ## Built With
 
@@ -11,7 +11,7 @@
 
 ## Live Demo
 
-[Coming soon]()
+[Go Live](https://tadesse-bookstore.netlify.app/) 😎
 
 ## Getting Started
 

package.json

@@ -9,6 +9,7 @@
     "jest": "^28.0.3",
     "react": "^18.1.0",
     "react-dom": "^18.1.0",
+    "react-icons": "^4.3.1",
     "react-redux": "^8.0.1",
     "react-router-dom": "^6.3.0",
     "react-scripts": "5.0.1",
@@ -23,7 +24,7 @@
     "test": "react-scripts test",
     "eject": "react-scripts eject",
     "fix-script": "npx eslint . --fix",
-    "fix-style": "npx stylelint \"**/*.{css,scss}\""
+    "fix-style": "npx stylelint \"**/*.{css,scss}\" --fix"
   },
   "eslintConfig": {
     "extends": [

src/components/Books.js

@@ -11,12 +11,13 @@ export default function Books() {
     dispatch(getBooksFromServer());
   }, []);
   return (
-    <div>
+    <div id="books-container">
       {books.map((book) => (
         <Book
           key={book.id}
           title={book.title}
           author={book.author}
+          category={book.category}
           id={book.id}
         />
       ))}

src/components/Navbar.js

@@ -1,22 +1,17 @@
 import React from 'react';
 import { NavLink } from 'react-router-dom';
+import { FaUserAlt } from 'react-icons/fa';
+import './navbar.css';
 
 export default function Navbar() {
-  const navStyle = {
-    display: 'flex',
-    justifyContent: 'center',
-  };
-  const ulStyle = {
-    display: 'flex',
-    gap: '10px',
-    listStyle: 'none',
-  };
   return (
-    <nav style={navStyle}>
-      <ul style={ulStyle}>
+    <nav id="navbar">
+      <ul className="menuContainer">
+        <h1 className="logo">Bookstore CMS</h1>
         <li><NavLink to="/">Book</NavLink></li>
         <li><NavLink to="/categories">Category</NavLink></li>
       </ul>
+      <span id="profile-pic"><FaUserAlt className="icon" /></span>
     </nav>
   );
 }

src/components/navbar.css

@@ -0,0 +1,42 @@
+#navbar {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+  padding: 0 5vw;
+  background-color: white;
+}
+
+.menuContainer {
+  display: flex;
+  list-style: none;
+  align-items: center;
+  padding: 0;
+}
+
+.menuContainer li {
+  margin-left: 2vw;
+}
+
+.logo {
+  color: var(--blue);
+  font-size: 1.5rem;
+  font-weight: bold;
+}
+
+#profile-pic {
+  padding: 5px;
+  border: 1px silver solid;
+  border-radius: 50%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+
+.icon {
+  margin: auto;
+}
+
+ul {
+  list-style: none;
+  padding: 0;
+}

src/components/sub-components/AddNewBook.js

@@ -1,23 +1,28 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { addBook } from '../../redux/books/books';
+import './addBook.css';
 
 export default function AddNewBook() {
   const dispatch = useDispatch();
   const handleNewBookSubmit = (event) => {
     event.preventDefault();
-    const title = event.target.elements[0];
-    const author = event.target.elements[1];
+    const title = event.target.elements[1];
+    const author = event.target.elements[2];
     dispatch(addBook(title.value, author.value));
     title.value = '';
     author.value = '';
   };
   return (
     <div id="add-new-book">
+      <hr />
       <form action="#" method="POST" onSubmit={handleNewBookSubmit}>
-        <input type="text" name="title" id="title" placeholder="Book Title" required />
-        <input type="text" name="author" id="author" placeholder="Book author" required />
-        <button type="submit">Add Book</button>
+        <fieldset>
+          <legend>ADD NEW BOOK</legend>
+          <input className="book-title" type="text" name="title" id="title" placeholder="Book Title" required />
+          <input type="text" name="author" id="author" placeholder="Book author" required />
+          <button id="add-book-button" type="submit">Add Book</button>
+        </fieldset>
       </form>
     </div>
   );

src/components/sub-components/addBook.css

@@ -0,0 +1,39 @@
+#add-new-book fieldset {
+  border: none;
+  display: flex;
+  min-height: 100%;
+  gap: 2vw;
+  margin: 2vw 5vw;
+  color: var(--blur-silver);
+}
+
+legend {
+  font-weight: bolder;
+  margin: 1vw 0;
+}
+
+input {
+  min-width: 25%;
+  min-width: 100px;
+}
+
+#add-new-book input {
+  border: none;
+  outline: none;
+  padding: 0.5vw;
+}
+
+.book-title {
+  min-width: 45%;
+  flex-grow: 1;
+}
+
+#add-book-button {
+  padding: 0.5vw 3vw;
+  max-width: 200px;
+}
+
+hr {
+  margin: 5vw;
+  color: var(--blur-silver);
+}

src/components/sub-components/book.js

@@ -1,25 +1,42 @@
 import React from 'react';
 import { useDispatch } from 'react-redux';
 import { removeBook } from '../../redux/books/books';
+import './books.css';
 
-export default function book({ title, author, id }) {
+export default function book({
+  title, author, id, category,
+}) {
   const dispatch = useDispatch();
   const handelRemoveBook = (event) => {
-    dispatch(removeBook(event.target.getAttribute('id')));
+    event.preventDefault();
+    dispatch(removeBook(event.target.getAttribute('data-id')));
   };
   return (
-    <article>
-      <div>
-        <h3>{title}</h3>
-        <small>{author}</small>
+    <article id="book">
+      <div className="content">
+        <p className="category">{category}</p>
+        <h3 className="title">{title}</h3>
+        <small className="author">{author}</small>
         <ul>
           <li><a href="#temp">Comment</a></li>
-          <li><a href="#temp">Remove</a></li>
+          <li><a href="#temp" data-id={id} onClick={handelRemoveBook}>Remove</a></li>
           <li><a href="#temp">Edit</a></li>
         </ul>
+      </div>
+      <div id="completed">
+        <div className="percent-circle" />
+        <div>
+          <h1>{Math.floor(Math.random() * 100)}</h1>
+          <small>completed</small>
+        </div>
+      </div>
+      <div>
+        <p className="curent-chapter">curent chapter</p>
+        <p className="chapter">chapter 17</p>
         <button
+          className="remove-book"
           type="submit"
-          id={id}
+          data-id={id}
           onClick={handelRemoveBook}
         >
           Remove this book

src/components/sub-components/books.css

@@ -0,0 +1,72 @@
+#book {
+  display: flex;
+  margin: 2vw 5vw;
+  padding: 2vw 3vw;
+  background-color: white;
+  justify-content: space-between;
+}
+
+#book ul {
+  display: flex;
+  gap: 2vw;
+  font-size: small;
+}
+
+h1,
+h2,
+h3,
+h4,
+p {
+  margin: 0;
+}
+
+.category {
+  font-size: small;
+}
+
+.content {
+  width: 45%;
+  max-width: 45%;
+}
+
+#book a,
+.author {
+  color: var(--blue-blur);
+}
+
+#book a:hover {
+  font-weight: bolder;
+}
+
+.remove-book {
+  padding: 1vw 2vw;
+  box-shadow: 0 0 5px #0000007a;
+  border-radius: 3px;
+}
+
+.curent-chapter {
+  color: silver;
+  margin-bottom: 5px;
+}
+
+.chapter {
+  margin-bottom: 10px;
+}
+
+#completed {
+  align-self: center;
+  display: flex;
+  align-items: center;
+  gap: 1vw;
+}
+
+.percent-circle {
+  width: 4vw;
+  height: 4vw;
+  border-left: 3px solid silver;
+  border-top: 3px solid var(--blue);
+  border-right: 3px solid var(--blue);
+  border-bottom: 3px solid var(--blue);
+  border-radius: 50%;
+  transform: rotate(45deg);
+}

src/index.css

@@ -1,5 +1,37 @@
+@import url('https://fonts.googleapis.com/css2?family=Lexend+Deca:wght@100;200;400&display=swap');
+
+:root {
+  --blue: #0290ff;
+  --blue-blur: #4386bf;
+  --blur-silver: #888;
+}
+
 html,
 body {
   margin: 0;
   padding: 0;
+  background-color: #fafafa;
+  font-family: 'Lexend Deca', sans-serif;
+  font-weight: 300;
+}
+
+a {
+  text-decoration: none;
+  color: rgb(120, 117, 117);
+}
+
+a.active {
+  color: black;
+  font-weight: bold;
+}
+
+.icon {
+  color: var(--blue);
+}
+
+button {
+  background-color: var(--blue);
+  border: none;
+  outline: none;
+  color: white;
 }