Frontend: Enhance Game Mode List & Description UI

[Mkalbani]

🎯 Objective

Enhance the Game Mode List and Game Mode Description to display all available game modes, set the first mode as default, and align the UI with the Figma design.

🔍 Context

The Game Mode selection should be intuitive, visually appealing, and match the game’s theme. This update ensures a better user experience by allowing players to explore all available game modes easily.

📋 Tasks

• Update the GameModeList component to display all game modes.
• Set the first game mode as the default selection.
• Update the UI styles for GameModeList and GameModeDescription to match the Figma design.
• Ensure smooth transitions between game mode selections.
• Maintain responsiveness across different screen sizes.

💻 Technical Implementation

1️⃣ Use React & Tailwind CSS for styling.
2️⃣ Implement state management to set and update the selected game mode (if not implemented).
3️⃣ Ensure UI updates instantly when switching between game modes.
4️⃣ Add hover & active states for a better user experience.

📌 Contributor Reminders

✅ Check the Contribution Guidelines: 🔗 CONTRIBUTING.md
✅ Sync with the latest changes from the LogiQuest repository before working on this issue.

📝 Acceptance Criteria

✅ All game modes are displayed in the GameModeList.
✅ The first game mode is set as the default selection.
✅ UI matches the Figma design and is fully responsive.
✅ No layout breaking or state management issues.

💪 Skills Required

• React
• Tailwind CSS
• State Management (if needed)
• Responsive Design

📈 Difficulty
Medium

[drips-wave]

This issue has been added to the Stellar Wave Program and is worth 150 Points.

🧑‍💻 Interested in contributing? Apply to work on this issue on Drips Wave, earn points, and receive rewards.

Warning

Only applications submitted via the apply link above will be considered. Please do not apply by commenting on the issue or opening a PR directly.

🤠 Repo maintainers: You can manage this issue's Points and Complexity on your Maintainer Dashboard here. Please keep an eye on applications and respond quickly 💙

ℹ️ Learn more about Drips Wave

[icedoutskay]

@icedoutskay has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hello maintainer, can i take up this issue?

ℹ️ Repo Maintainers: To accept this application, review their application or assign @icedoutskay to this issue.

[BigJohn-dev]

@BigJohn-dev has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

This issue appeals to me because it combines the challenge of solving complex frontend performance problems with the opportunity to deliver a smoother, more reliable user experience, while also sharpening my skills with emerging design and resolution patterns.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @BigJohn-dev to this issue.

[Froshboss]

@Froshboss has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi MindFlow Team, I’d like to claim this issue. I’m a frontend developer focused on React and Tailwind CSS, and I love building immersive, game-themed interfaces.
My Plan:
Implementation: Update GameModeList to render all modes dynamically, ensuring the first is selected by default via React state.
Transitions: Implement smooth CSS transitions between selections to match the high-quality feel of the Figma design.
Responsiveness: Ensure the list and description layout remains intuitive on both mobile and desktop.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Froshboss to this issue.

[edehvictor]

@edehvictor has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi 👋

I’d like to apply for this issue. I have experience building responsive React + Tailwind CSS interfaces and implementing dynamic state updates for interactive components.

My approach:

• Update the GameModeList component to display all available game modes
• Set the first game mode as the default selection and manage state for switching modes
• Update the UI for both GameModeList and GameModeDescription to match the Figma design
• Add smooth transitions, hover, and active states for a polished user experience
• Ensure responsiveness across mobile, tablet, and desktop screens
• Test that switching modes updates the UI instantly without layout breaks

ETA: 3–5 hours after assignment.

I’ll ensure the UI is fully aligned with the Figma design, interactive, and production-ready. Looking forward to contributing!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @edehvictor to this issue.

[Christopherdominic]

@Christopherdominic has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I’m interested in working on Issue #43 to enhance the Game Mode selection experience. I have extensive experience in building interactive game UIs with React and Tailwind CSS, and I’m confident in my ability to translate your Figma designs into a fluid, responsive interface.

My Implementation Plan:

Dynamic State Management: I will implement a selectedMode state that defaults to gameModes[0] on initial render, ensuring the Description UI is never empty.

Figma-to-Code Fidelity: I’ll focus on the specific typography, spacing, and color tokens defined in your design, including custom "Active" and "Hover" states for the mode list items to provide immediate visual feedback.

Smooth Transitions: I’ll use Tailwind’s transition and duration utilities (or Framer Motion if preferred) to ensure that the description updates feel smooth and integrated, rather than abrupt.

Responsive Layout: I will utilize a flexible grid or flexbox strategy to ensure the list and description stack logically on mobile devices without losing readability.

I am ready to sync with the latest LogiQuest changes and start building immediately.

Best regards,

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Christopherdominic to this issue.

[ReinaMaze]

@ReinaMaze has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi, can I work on this issue
I am a frontend developer and the best fit for this issue
Please assign the issue to me

ℹ️ Repo Maintainers: To accept this application, review their application or assign @ReinaMaze to this issue.

[jerrybarry]

@jerrybarry has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi, my name is Jerry. I’m a full-stack developer with 3+ years of experience building successful products.

I can confidently handle this issue.
Here is my portfolio and projects I have handled:
https://www.tafscraper.com/
https://app.tinnitaid.com/
http://www.tafhub.com/

ℹ️ Repo Maintainers: To accept this application, review their application or assign @jerrybarry to this issue.

[estyemma]

@estyemma has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I’d like to work on this frontend issue. I have experience with Web3 UI integration, wallet connections, and responsive React-based interfaces.
I can start immediately. Thanks!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @estyemma to this issue.

[melissacinta]

@melissacinta has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi team — I’m a Senior Frontend Engineer (5+ years) with strong experience in React, TailwindCSS, and building responsive, interactive UI systems for dashboards and product interfaces. I focus on clean component architecture, smooth state-driven updates, and pixel-accurate Figma implementations.

Plan

Refactor GameModeList to render all modes dynamically and set the first as default via state.

Sync selection with GameModeDescription for instant UI updates.

Match Figma styles using Tailwind (hover/active states, transitions, responsiveness).

Add smooth animations and ensure no layout shifts across screen sizes.

ETA

4–8 hours max.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @melissacinta to this issue.

[Austinaminu2]

@Austinaminu2 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hi, I’d like to take on this issue.

🧩 Proposed Approach

• Update the GameModeList component to dynamically render all available game modes.
• Automatically set the first game mode as the default active selection using React state.
• Sync the GameModeDescription component to update instantly when the selected mode changes.
• Apply Tailwind CSS for all styling updates to align perfectly with the Figma design.
• Add hover and active states for better interactivity and UX.
• Ensure full responsiveness across mobile, tablet, and desktop.

⚙️ Implementation Details

1. Use useState or an existing global state to manage the selected game mode.
2. Add smooth transition effects when switching between modes using Tailwind’s transition utilities.
3. Ensure visual consistency and accessibility (contrast, focus states).
4. Test across breakpoints to maintain a responsive layout.

Once assigned, I’ll create a PR that includes:

• Updated UI components
• Consistent theme alignment with Figma
• Responsive behavior verification

Thanks!

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Austinaminu2 to this issue.

[Nacho1499]

@Nacho1499 has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

Hello, I am Emmanuel.
Experience frontend developer with lots of years in the field. I believe I can contribute to this project. By hencing the game mode list and description UI. Making the overall UI match the desired design. I look forward to this contribution. Thanks.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @Nacho1499 to this issue.

[vicajohn]

@vicajohn has applied to work on this issue as part of the Stellar Wave Program's 2nd wave.

I’m interested in contributing to this project and delivering well-structured, reliable work. I have experience working within existing codebases and focus on writing clear, maintainable code.

I’m eager to collaborate, learn from feedback, and contribute features that align with the project’s standards and goals.

ℹ️ Repo Maintainers: To accept this application, review their application or assign @vicajohn to this issue.