Add final touches #5
Conversation
Baayeh
commented
Nov 8, 2022
Baayeh
commented
- Added some styling
There was a problem hiding this comment.
Hi @Baayeh
Good job so far!
There are some issues that you still need to work on to go to the next project but you are almost there!
Required Changes ♻️
- Check the inline comments under the review for sections to improve.
Optional suggestions
Every comment with the [OPTIONAL] prefix is not crucial enough to stop the approval of this PR. However, I strongly recommend you to take them into account as they can make your code better.
N/A
Cheers and Happy coding!
Feel free to leave any questions or comments in the PR thread if something is not 100% clear.
Please, remember to tag me @Whoistolu in your question so I can receive the notification.
Please, do not open a new Pull Request for re-reviews. You should use the same Pull Request submitted for the first review, either valid or invalid unless it is requested otherwise.
As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
src/components/AddBook.jsx
Outdated
| <input | ||
| type="text" | ||
| className="p-2 border focus:outline-none w-[12.5rem] md:w-[27rem] lg:w-[35rem]" | ||
| className="p-3 md:p-2 border focus:outline-none col-span-1" | ||
| placeholder="Book title" | ||
| value={title} | ||
| onChange={(e) => setTitle(e.target.value)} | ||
| required | ||
| /> | ||
| <input | ||
| type="text" | ||
| className="p-2 border focus:outline-none w-[12.5rem] md:w-[27rem] lg:w-[35rem]" | ||
| className="p-3 md:p-2 border focus:outline-none" | ||
| placeholder="Author" | ||
| value={author} | ||
| onChange={(e) => setAuthor(e.target.value)} | ||
| required | ||
| /> |
There was a problem hiding this comment.
- [REQUIRED] For this field where a book gets added, you need to follow the exact styles as used in the zeplin design. Kindly change the font, color, font weight, and every other property the (Add new book, book title, category, add book button) has.
Your Design
Zeplin Design
If you click on the ADD NEW BOOK for example, you will get a property of it on the right side of your screen. Kindly apply these properties for every content of your design.
For example
src/components/Book.jsx
Outdated
| <button | ||
| type="button" | ||
| className="pr-2 text-blue-700 text-sm hover:text-blue-900" | ||
| > | ||
| Comments | ||
| </button> | ||
| <button | ||
| type="button" | ||
| className="px-2 text-blue-700 border-l-2 border-r-2 text-sm hover:text-blue-900" | ||
| onClick={deleteBook} | ||
| > | ||
| Remove | ||
| </button> | ||
| <button | ||
| type="button" | ||
| className="px-2 text-blue-700 text-sm hover:text-blue-900" | ||
| > | ||
| Edit | ||
| </button> |
There was a problem hiding this comment.
- REQUIRED] The button (comments, remove, edit) also needs to follow the exact styles as used in the zeplin design. Kindly change the font, color, font weight, and every property they have on zeplin.
- [REQUIRED] Kindly apply the same to the other h-tags (Fiction, dfsdf, sdfsdfsd, chapter 3, current chapter), update-progress-button.
Your design
Zeplin Design
There was a problem hiding this comment.
STATUS: APPROVED ✔️ ✔️
Hi @Baayeh,
✔️ Nice styling
Your project is complete! There is nothing else to say other than... it's time to merge it 
Congratulations! 🎉
Cheers and Happy coding!👏👏👏
Feel free to leave any questions or comments in the PR thread if something is not 100% clear. And please, remember to tag me in your question so I can receive the notification.
As described in the Code reviews limits policy you have a limited number of reviews per project (check the exact number in your Dashboard). If you think that the code review was not fair, you can request a second opinion using this form.
