Skip to content

feat(menu): improve visual structure with cards, icons and timeline#370

Open
sumitakhuli wants to merge 1 commit into
open-source-uom:mainfrom
sumitakhuli:feat/improve-menu-display
Open

feat(menu): improve visual structure with cards, icons and timeline#370
sumitakhuli wants to merge 1 commit into
open-source-uom:mainfrom
sumitakhuli:feat/improve-menu-display

Conversation

@sumitakhuli
Copy link
Copy Markdown
Contributor

@sumitakhuli sumitakhuli commented Feb 15, 2026

Description (Fixes #369 )

This PR addresses the need for a Better Visual Structure for the Menu Display by implementing a modern, card-based layout for the daily menu and a visual timeline for the weekly schedule.

Key changes:

  • Card Layout for Today's Menu: Replaced simple buttons with large, icon-based toggle cards (SunIcon for Lunch, MoonIcon for Dinner).
  • Visual Timeline: The weekly menu is now displayed as a connected vertical timeline with circular day indicators, improved spacing, and card-based day headers.
  • Color Coding: Added distinct accent colors (Orange, Purple, Green, Pink) to different food categories (Main, Special, Salad, Dessert) for easier scanning.
  • Enhanced Styles: Used Syne font consistently and applied specific border colors/shadows to align with the design system.

Related Issue

Fixes "Menu Display Needs Better Visual Structure" #369

Motivation and Context

The previous menu display was functional but lacked visual hierarchy and engagement. The new design makes it easier for users to distinguish between meal types and scan the weekly schedule at a glance.

How Has This Been Tested?

Tested locally in the development environment:

  1. Toggle: Verified that clicking Lunch/Dinner cards correctly switches the displayed menu.
  2. Timeline: Verified that the weekly menu renders as a connected timeline.
  3. Responsive: Checked layout on mobile and desktop breakpoints.
  4. Dark Mode: Verified that colors adapt correctly (using useColorModeValue) to dark mode.

Screenshots or GIF:

Before

Screenshot 2026-02-16 at 3 16 34 AM Screenshot 2026-02-16 at 3 16 40 AM

After

Screenshot 2026-02-16 at 3 20 53 AM Screenshot 2026-02-16 at 3 21 00 AM Screenshot 2026-02-16 at 3 21 14 AM ## Types of changes - [ ] Bug fix (non-breaking change which fixes an issue) - [x] New feature (non-breaking change which adds functionality) - [ ] Breaking change (fix or feature that would cause existing functionality to change)

Checklist:

  • My code follows the code style of this project.
  • My change requires a change to the documentation.
  • I have updated the documentation accordingly.
  • I have added tests to cover my changes.
  • All new and existing tests passed.

@GeorgeFkd
Copy link
Copy Markdown
Contributor

Aesthetically i am more biased to the simpler version although some novelty could be nice. The single letters for the days i find a bit redundant.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

Menu Display Needs Better Visual Structure

2 participants