feat: archive old navigation selector icons specification and add new implementation details

.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 `<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

.github/specs/feat-nav-selector-icons.md

@@ -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
-
-- [ ]