Add Caregiver Baby Book Main Pages & Update Admin Baby Book Page #144
Conversation
✅ Deploy Preview for motherhoodbeyondbars ready!
To edit notification comments on pull requests, go to your Netlify site configuration. |
|
Path to DO NOT DELETE's caregiver album: /caregiver/book/bd89888ca382e490a04183167a810518f2aa9f39?iv=af3abe9304c706f681857b64fc4e6127 |
There was a problem hiding this comment.
Great work, especially on the Admin page! Everything works really well and is clean which I know is difficult to do in the Admin side since the older code is hard to work with 😅 I left a few small comments about code fixes, but the functionality itself works really well and looks great!
web/components/BabyBook/Topbar.tsx
Outdated
| layout="fixed" | ||
| src={admin_portal_gradient} | ||
| <div className="flex items-center justify-center min-w-[164px] h-[81px] overflow-hidden bg-admin-baby-book-background"> | ||
| <svg |
There was a problem hiding this comment.
Use the logo SVG from /public/MBBLogo.svg or create a new SVG in public or file in Icons if it's too different to keep the code clear and the logo consistent!
web/pages/admin/book/[babyId].tsx
Outdated
| const deselectImage = () => { | ||
| setIsPictureSelected(false); | ||
| }; | ||
|
|
||
| console.log( |
There was a problem hiding this comment.
Don't forget to remove unneeded console.logs!
web/pages/admin/book/[babyId].tsx
Outdated
| {selectedForDownload.size > 0 && ( | ||
| <div className="absolute w-[70vw] left-[50%] translate-x-[-50%] rounded shadow bottom-3.5 px-6 py-[1.125rem] flex justify-between bg-background"> | ||
| <div className="flex items-center gap-[18px]"> | ||
| <svg |
There was a problem hiding this comment.
Move this to /components/Icons so that it's easier to tell which Icon this is in the code and so that it can be more easily reused
| iv, | ||
| }: Props) { | ||
| return ( | ||
| <div className="flex flex-col my-6 md:my-15 mx-4 md:mx-10 items-center gap-[18px] w-full"> |
There was a problem hiding this comment.
Use rem units instead of px for custom values since rem is relative to the font size which is super important if someone needs to set the font size larger or needs to zoom into the website. To convert from px to rem divide the value by 16 so 18px would be 1.125rem. This is less important for the Admin portal since less people will be using it, but many Caregivers are older so accessibility is more important for Caregiver pages!
| <> | ||
| <div | ||
| key={imageUrl} | ||
| className="h-[160px] md:h-[240px] overflow-hidden relative shadow-lg cursor-pointer" |
There was a problem hiding this comment.
Change to rem units! Also thanks for adding the TODO comment so we can clearly find where to put the single-page functionality :D
| <Image | ||
| key={imageUrl} | ||
| src={imageUrl} | ||
| alt={`Baby image from ${new Date(date.seconds * 1000).toLocaleDateString()}`} |
…d/motherhood-beyond-bars into 142-isaiah-baby-book
What does this Pull Request change?
Adds the caregiver baby book pages. Updates the admin baby book page
Important Changes
/caregiver/bookand/caregiver/book/[babyId]for viewing and editing baby books/admin/book/[babyId]to reflect new design and add ability to select images