feat: UI/UX Enhancements for Improved User Experience

[viviyan-prince]

Problem statement

Hi @Abhash-Chakraborty ,

I would like to work on this UI/UX enhancement issue under GSSoC 2026.

I have reviewed the project and understand the current interface. I will focus on improving the user experience while maintaining consistency with the existing design and functionality. I'll ensure the changes are responsive, accessible, and aligned with the project's contribution guidelines.

I'll keep the changes focused, user-friendly, and aligned with the project's design guidelines.

Kindly assign this issue to me.

Thank you!

Proposed solution

Here are the UI/UX improvements I plan to make:

• Improve the overall visual consistency by refining spacing, alignment, and typography.
• Enhance the responsiveness so the interface works smoothly across different screen sizes.
• Improve button, input, and card styling for a cleaner and more modern appearance.
• Optimize the layout to make navigation more intuitive and reduce visual clutter.
• Add better hover, focus, and loading states to improve user interaction and feedback.
• Ensure accessibility by improving color contrast, focus indicators, and keyboard navigation where applicable.
• Maintain consistency with the existing design system while preserving all current functionality.

Scope and acceptance criteria

Scope

In Scope

• Improve the overall UI consistency by refining spacing, alignment, and typography.
• Enhance the visual design of buttons, forms, cards, and navigation components.
• Improve responsiveness across desktop, tablet, and mobile devices.
• Add proper hover, focus, loading, and disabled states for interactive elements.
• Improve accessibility through better color contrast, keyboard navigation, and focus indicators.
• Ensure all UI changes are consistent with the existing design language without affecting current functionality.

Out of Scope

• Backend logic changes or API modifications.
• Database schema or server-side changes.
• Introduction of new features unrelated to UI/UX.
• Major redesign of application workflows or architecture.

Acceptance Criteria

• UI is visually consistent across all updated pages/components.
• Layout is fully responsive on different screen sizes.
• Interactive elements provide appropriate hover, focus, and loading feedback.
• Accessibility improvements meet basic usability standards.
• Existing functionality remains unchanged with no regressions.
• Code follows the project's coding standards and passes all required checks.
• Changes are reviewed and tested before submission.

Additional context

No response

[Abhash-Chakraborty]

Thanks for the interest @viviyan-prince, and for writing up a proper scope section rather than a one-liner.

I'm not going to approve it in this shape though, and I want to be straight about why: it's an umbrella. "Refine spacing, alignment and typography", "optimize the layout", "improve button, input and card styling" — across the whole app, with no specific page named and no before/after that anyone can check. An issue like this produces a PR touching thirty files that I can't review properly and can't safely merge, and the acceptance criteria ("UI is visually consistent", "meets basic usability standards") aren't things either of us could point at and agree on.

That's a scoping problem, not a you problem. The fix is to narrow it.

Two ways forward — pick either:

1. Take a concrete one that's already scoped and waiting. All of these are the work you're describing, just bounded:

• fix: replace suppressed image alt text with meaningful accessible labels #338 — replace suppressed image alt text with meaningful accessible labels. good first issue, and a real accessibility bug.
• fix: make the navigation drawer focus-safe and prevent desktop link clipping #346 — make the navigation drawer focus-safe and stop desktop link clipping. Focus management plus a layout fix.
• feat: show version and a safe support summary in Settings #355 — show version and a safe support summary in Settings. good first issue.
• docs: refresh README screenshots for the current UI #335 — refresh the README screenshots for the current UI.

2. Re-scope this issue to one surface. Pick a single page — gallery, search, people, settings, whichever bothers you most — and rewrite the issue as: what's wrong with it now (screenshot), what it should look like instead, and what someone checks to confirm it's fixed. Then I'll approve it and assign it to you.

One thing to know before you touch any UI here: every page has to work in both light and dark mode. The tokens live in frontend/src/app/globals.css, with the light overrides around line 60. PRs that only get checked in dark mode are the single most common thing I send back.

Reply with which route you want and I'll get you moving.

[viviyan-prince]

Hi! @Abhash-Chakraborty Thanks for the detailed feedback—I understand the concern now. You're right that my original proposal was too broad to review effectively.

I'll take Route 2 and re-scope the issue to a single surface. I'll focus on the Settings page only.

The updated issue will include:

• A clear description of the current UI/UX problems.
• Before screenshots highlighting the issues.
• A proposed after state with specific improvements.
• Measurable acceptance criteria that can be verified during review.
• Confirmation that all changes will be tested in both light and dark mode, using the existing design tokens in frontend/src/app/globals.css.

I'll update the issue accordingly. Thanks again for the guidance.