diff --git a/.github/specs/archive/feat-nav-selector-icons.md b/.github/specs/archive/feat-nav-selector-icons.md new file mode 100644 index 0000000..1b13463 --- /dev/null +++ b/.github/specs/archive/feat-nav-selector-icons.md @@ -0,0 +1,36 @@ +# 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 `` 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 diff --git a/.github/specs/feat-nav-selector-icons.md b/.github/specs/feat-nav-selector-icons.md deleted file mode 100644 index c51e6bf..0000000 --- a/.github/specs/feat-nav-selector-icons.md +++ /dev/null @@ -1,58 +0,0 @@ -# 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 - ---- - -## Data Model Changes - -### Backend Model - -### Frontend Model - ---- - -## Backend Implementation - -## Backend Tests - -- [ ] - ---- - -## Frontend Implementation - -## Frontend Tests - -- [ ] - ---- - -## Future Considerations - ---- - -## Acceptance Criteria (Definition of Done) - -### Backend - -- [ ] - -### Frontend - -- [ ]