ryan/chore
1
0
Fork 0
Code Issues 5 Pull Requests Actions Packages Projects 5 Releases Wiki Activity
Files
next
chore/specs/archive/feat-nav-selector-icons.md
T
ryan 7f0326eff1
Chore App Build, Test, and Push Docker Images / build-and-push (push) Successful in 4m51s
Details
feat: add child actions menu and achievements feature design 
- Introduced a new feature specification for displaying a menu with actions (Award Certificate, Award Badge) when a child's card is clicked in ParentView.
- Created a detailed plan for an achievements system, outlining phases for implementation, including achievement taxonomy, MVP set, and UX considerations.
- Added a template for future feature specifications to standardize documentation.
2026-07-12 18:52:59 -04:00

2.1 KiB
Raw Permalink Blame History

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

  • Children, Tasks, Rewards, and Notifications nav buttons display PNG images instead of SVG drawings
  • Images sourced from frontend/vue-app/public/nav/ as specified
  • Button and selector dimensions unchanged on desktop and mobile
  • Notifications unread badge dot continues to render correctly over the icon
  • Active and hover states visually reflected via opacity transition
Reference in New Issue View Git Blame Copy Permalink