Skip to content

feat: improve button UI in light mode#158

Open
nazneen-p1 wants to merge 2 commits into
Dev-Card:mainfrom
nazneen-p1:ui/light-mode-buttons
Open

feat: improve button UI in light mode#158
nazneen-p1 wants to merge 2 commits into
Dev-Card:mainfrom
nazneen-p1:ui/light-mode-buttons

Conversation

@nazneen-p1
Copy link
Copy Markdown
Contributor

@nazneen-p1 nazneen-p1 commented May 18, 2026

Summary

This PR improves the Light Mode UI of the DevCard page by enhancing visual consistency, spacing, and overall user experience. The changes focus on refining the layout and styling to make the interface cleaner and more modern without affecting functionality.

Closes #78


Type of Change

  • Bug fix
  • New feature
  • Refactor (no functional change)
  • UI / Design change
  • Tests only
  • Documentation
  • Infrastructure / DevOps
  • Security

What Changed

  • Improved layout spacing and alignment in +page.svelte
  • Enhanced card container styling for better visual hierarchy
  • Updated background colors for a cleaner Light Mode experience
  • Added subtle hover effects to improve user interaction

How to Test

  1. Run the project locally using pnpm dev
  2. Open the DevCard page in the browser
  3. Verify improved spacing, layout consistency, and visual appearance in Light Mode

Checklist

  • My code follows the project's coding style (pnpm -r run lint passes).
  • TypeScript compiles without errors (pnpm -r run typecheck).
  • I have added or updated tests for the changes I made.
  • All tests pass locally (pnpm -r run test).
  • I have updated documentation where necessary.
  • No new console.log or debug statements left in the code.
  • Breaking changes are documented in this PR description.

Screenshots / Recordings

Before:
image

image

After:
image

image image

Additional Context

This PR focuses on incremental UI improvements for the DevCard page. Further UI enhancements (buttons, navbar, forms) will be addressed in separate PRs to keep changes modular and easy to review.

@Harxhit Harxhit added the UX label May 18, 2026
@ShantKhatri
Copy link
Copy Markdown
Contributor

@nazneen-p1 Please add SS of the feature.

@nazneen-p1
Copy link
Copy Markdown
Contributor Author

Before:

  • Buttons had very minimal visual distinction
  • Color contrast was less noticeable
  • Shadow effect was either missing or very subtle
  • UI looked a bit flat overall

After:

  • Improved button colors while maintaining the existing design consistency
  • Enhanced shadows for better depth and visibility
  • Added subtle hover effects for improved interactivity
  • Overall UI looks cleaner and more polished without breaking the original design

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

Labels

Projects

None yet

Development

Successfully merging this pull request may close these issues.

UI Improvement: Enhance Light Mode Design Across the Entire Website

3 participants