UI/UX Enhancement: Redesign CHECKORA Game Setup Screen

[jadhavkrushna]

Problem Statement

The current game setup screen of CHECKORA is functional but lacks a modern and polished user experience. The layout feels compressed, component spacing is inconsistent, and the UI does not fully reflect the premium aesthetic expected from a modern chess platform.

Some key issues include:

• Weak visual hierarchy
• Outdated typography and styling
• Inconsistent button and input designs
• Limited responsiveness across devices
• Minimal hover/focus interactions
• Flat background and lack of immersive visuals
• Navigation structure can be improved
• Missing “Back to Home” functionality

These issues reduce the overall usability and visual appeal of the application.

---

Proposed Solution

Redesign the Game Setup Screen with a modern, responsive, and chess-inspired UI while preserving all existing functionality.

Proposed Improvements:

• Introduce a premium dark theme with gold accents
• Improve layout spacing and alignment
• Add responsive design for desktop, tablet, and mobile
• Enhance buttons, dropdowns, and input fields
• Add smooth hover effects and micro-interactions
• Improve selected-state indicators for player selection
• Add subtle glow/shadow effects for active elements
• Introduce a chess-themed background or visual depth
• Add “Back to Home” navigation button
• Improve typography and overall visual hierarchy

The redesign should make the interface cleaner, more scalable, and visually engaging while maintaining simplicity and usability.

---

Alternatives Considered

Some alternative approaches considered:

• Keeping the existing layout and only updating colors
• Using a completely minimal flat UI without animations
• Adding heavy gaming-style effects and animations

Suggested design direction:

• Dark navy/black background
• Gold accent colors
• Glassmorphism or soft glow effects
• Rounded modern components
• Smooth transitions and hover animations
• Chess-inspired visual elements

Potential additions:

• Animated button hover states
• Focus animations on form controls
• Improved accessibility and readability
• Better mobile scaling and spacing

=========================================================================<> enhanced design <>

=========================================================================

<> original design <>

[jadhavkrushna]

Hi maintainers,

I would like to work on this issue under GSSoC.
Please assign this issue to me.

Thank you!

[Shraddha3838]

Hi @jadhavkrushna 👋

I would like to work on this issue under GSSoC'26.

After reviewing both the current and proposed UI direction, I understand that the goal is not just a visual redesign, but creating a cleaner, more immersive, and modern game setup experience while preserving the existing functionality and usability of CHECKORA.

My Planned Approach

UI/UX Redesign

I plan to redesign the setup screen with:

• improved spacing and layout hierarchy
• modern chess-inspired dark theme styling
• gold-accent visual system for premium appearance
• better typography and component consistency
• responsive layout improvements for desktop/tablet/mobile

Interactive Improvements

I’ll also enhance the overall user interaction experience by:

• adding smooth hover and focus transitions
• improving selected-state indicators
• refining button/input/dropdown styling
• adding subtle glow/shadow effects for active components
• improving accessibility and readability

Navigation & Responsiveness

I’ll ensure:

• proper scaling across screen sizes
• cleaner component alignment
• improved navigation flow
• implementation of a “Back to Home” button
• preservation of all current functionality while improving visual polish

Why I Would Be a Good Fit

I have experience working with:

• React/frontend UI systems
• Tailwind CSS and responsive layouts
• modern component-based design
• UI/UX-focused frontend development
• interactive and dashboard-style interfaces

Since this issue combines responsiveness, visual hierarchy, and frontend interaction improvements, I can provide a clean, scalable, and visually polished implementation while keeping the PR focused and maintainable.

Looking forward to contributing to CHECKORA , Please assign this to me.

[jadhavkrushna]

Hi @Shraddha3838 , this issue was opened by me, and I’m already working on it. Please try to pick a different open issue.