egullickson/motovaultpro
0
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: differentiate Stations icon from Fuel Logs in bottom nav (#162) #181

New Issue
Closed
opened 2026-02-13 22:25:39 +00:00 by egullickson · 2 comments
egullickson commented 2026-02-13 22:25:39 +00:00
Owner
Copy Link
Copy Source

Relates to #162

Severity: Minor

Problem

The gas pump icon used for "Stations" in the bottom nav is very similar to the fuel log icon. This could cause confusion between the two navigation items.

Recommendation

Use a map pin or location marker icon for Stations to differentiate it from Fuel Logs.

Acceptance Criteria

  • Stations uses a distinct icon (map pin, location marker, or similar) in bottom nav
  • Icon is clearly different from the Fuel Logs icon
  • Icon communicates "location/station" rather than "fuel"
  • Tested on mobile (320px, 768px)
Relates to #162 ## Severity: Minor ## Problem The gas pump icon used for "Stations" in the bottom nav is very similar to the fuel log icon. This could cause confusion between the two navigation items. ## Recommendation Use a map pin or location marker icon for Stations to differentiate it from Fuel Logs. ## Acceptance Criteria - Stations uses a distinct icon (map pin, location marker, or similar) in bottom nav - Icon is clearly different from the Fuel Logs icon - Icon communicates "location/station" rather than "fuel" - Tested on mobile (320px, 768px)
egullickson added the
status
backlog
type
chore
 labels 2026-02-13 22:25:56 +00:00
egullickson added this to the Sprint 2026-02-02 milestone 2026-02-13 22:26:12 +00:00
egullickson commented 2026-02-14 01:15:01 +00:00
Author
Owner
Copy Link
Copy Source

Implementation Plan (from #162 -- Milestone 5)

Phase: 2 (Navigation cleanup) | Priority: Minor | Depends on: None | Blocks: None

Context

The Stations icon in the bottom nav uses LocalGasStationRoundedIcon, which is too similar to the Fuel Logs icon. Users cannot visually distinguish the two at a glance.

Implementation

1. In frontend/src/shared-minimal/components/mobile/BottomNavigation.tsx:

  • Change the Stations bottom nav icon from LocalGasStationRoundedIcon to PlaceRoundedIcon (map pin)
  • Add import: import PlaceRoundedIcon from '@mui/icons-material/PlaceRounded';
  • Update the icon reference in the rightNavItems array

Files

  • frontend/src/shared-minimal/components/mobile/BottomNavigation.tsx

Commit Convention

chore: differentiate Stations icon from Fuel Logs in bottom nav (refs #181)

Test Criteria

  • Stations icon is clearly visually different from the Fuel Logs icon
  • Icon is recognizable as a "location/station" concept
  • Navigation still works correctly when tapping the Stations icon
  • Verify on mobile (320px, 768px) viewports

Branch

Work on branch issue-162-ux-design-audit-cleanup (shared with all #162 sub-issues)

## Implementation Plan (from #162 -- Milestone 5) **Phase**: 2 (Navigation cleanup) | **Priority**: Minor | **Depends on**: None | **Blocks**: None ### Context The Stations icon in the bottom nav uses `LocalGasStationRoundedIcon`, which is too similar to the Fuel Logs icon. Users cannot visually distinguish the two at a glance. ### Implementation **1. In `frontend/src/shared-minimal/components/mobile/BottomNavigation.tsx`:** - Change the Stations bottom nav icon from `LocalGasStationRoundedIcon` to `PlaceRoundedIcon` (map pin) - Add import: `import PlaceRoundedIcon from '@mui/icons-material/PlaceRounded';` - Update the icon reference in the `rightNavItems` array ### Files - `frontend/src/shared-minimal/components/mobile/BottomNavigation.tsx` ### Commit Convention ``` chore: differentiate Stations icon from Fuel Logs in bottom nav (refs #181) ``` ### Test Criteria - Stations icon is clearly visually different from the Fuel Logs icon - Icon is recognizable as a "location/station" concept - Navigation still works correctly when tapping the Stations icon - Verify on mobile (320px, 768px) viewports ### Branch Work on branch `issue-162-ux-design-audit-cleanup` (shared with all #162 sub-issues)
egullickson added
status
in-progress
 and removed
status
backlog
 labels 2026-02-14 01:39:44 +00:00
egullickson commented 2026-02-14 01:40:17 +00:00
Author
Owner
Copy Link
Copy Source

Milestone: Implementation Complete

Phase: Execution | Agent: Developer | Status: PASS

Changes

  • Replaced LocalGasStationRoundedIcon with PlaceRoundedIcon (map pin) for Stations in BottomNavigation.tsx
  • Stations now uses a distinct location/map pin icon, clearly different from Fuel Logs' gas pump icon

Verification

  • TypeScript type-check: PASS
  • ESLint: PASS
  • Commit: bc9c386 on branch issue-162-ux-design-audit-cleanup

Verdict: PASS | Next: Visual verification on mobile viewports

## Milestone: Implementation Complete **Phase**: Execution | **Agent**: Developer | **Status**: PASS ### Changes - Replaced `LocalGasStationRoundedIcon` with `PlaceRoundedIcon` (map pin) for Stations in `BottomNavigation.tsx` - Stations now uses a distinct location/map pin icon, clearly different from Fuel Logs' gas pump icon ### Verification - TypeScript type-check: PASS - ESLint: PASS - Commit: `bc9c386` on branch `issue-162-ux-design-audit-cleanup` *Verdict*: PASS | *Next*: Visual verification on mobile viewports
Sign in to join this conversation.
No Branch/Tag Specified
Branches Tags
Labels
Clear labels
status
backlog
status/blocked
status
done
status
in-progress
status
ready
status
review
type
bug
type
chore
type
docs
type
feature
No labels
status
in-progress
type
chore
Milestone
No items
No Milestone Sprint 2026-02-02
Projects
Clear projects
No projects
Assignees
Clear assignees
egullickson
No Assignees
1 Participants
Notifications
Due Date
No due date set.
Dependencies

No dependencies set.

Reference: egullickson/motovaultpro#181