Ryan Kegel
ea0166d198
All checks were successful
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 1m53s
37 lines
2.1 KiB
Markdown
37 lines
2.1 KiB
Markdown
# Feature: Change navigation selector icons
|
||
|
||
## Overview
|
||
|
||
**Goal:** The current view navigation that is displayed in parent mode currently displays custom svg drawing for Children, Tasks, Rewards, and Notifications. I have new png image files that I'd like to replace them with.
|
||
|
||
**User Story:**
|
||
As a user, when I am in parent mode, I should be able to use the navigation selector as usual but see the updated images in the buttons.
|
||
|
||
**Rules:**
|
||
The size of the navigation view-selector should still remain the same for both desktop and mobile. The images should replace the svg drawings.
|
||
This will most likely only affect ParentView.vue / ParentLayout.vue
|
||
|
||
**Drawing to image replacements:**
|
||
aria-label: "Children" -> frontend/vue-app/public/nav/children.png
|
||
aria-label: "Tasks" -> frontend/vue-app/public/nav/chores.png
|
||
aria-label: "Rewards" -> frontend/vue-app/public/nav/rewards.png
|
||
aria-label: "Notifications" -> frontend/vue-app/public/nav/notifications.png
|
||
|
||
---
|
||
|
||
## Frontend Implementation
|
||
|
||
- Replaced all four SVG drawings in the view-selector nav in `ParentLayout.vue` with `<img>` tags pointing to the corresponding PNG files under `/nav/`.
|
||
- The Notifications button wraps its image in a positioned container so the existing unread badge dot continues to render correctly over the icon.
|
||
- Added `.nav-icon` scoped styles: fixed 40×40px, `object-fit: contain`, and a reduced opacity (0.55) at rest that transitions to full opacity on active/hover.
|
||
- Added `.nav-icon-wrap` scoped styles for the Notifications icon wrapper to keep the badge positioned correctly.
|
||
- No changes to button sizing, layout, or responsive breakpoints — the selector dimensions are unchanged on both desktop and mobile.
|
||
|
||
### Frontend
|
||
|
||
- [x] Children, Tasks, Rewards, and Notifications nav buttons display PNG images instead of SVG drawings
|
||
- [x] Images sourced from `frontend/vue-app/public/nav/` as specified
|
||
- [x] Button and selector dimensions unchanged on desktop and mobile
|
||
- [x] Notifications unread badge dot continues to render correctly over the icon
|
||
- [x] Active and hover states visually reflected via opacity transition
|