UI Theme & Components

[SHIV5T3R]

This issue aims to enhance the user experience and overall aesthetics of the code editor by implementing a robust UI theme system and a well-defined set of reusable components.

Expected Behaviour

UI Theme

Users should be able to choose from a selection of pre-defined themes (e.g., light, dark, high contrast) or customize the editor's appearance using their preferred colour schemes. The selected theme should be applied consistently across all menus on the client.

Consistent Components

The code editor should have a comprehensive set of consistent components that provide essential functionality, such as buttons, dropdowns, input fields, modals, and panels. These components should be visually cohesive and blend seamlessly with the chosen UI theme.

Accessibility

Care should be taken to ensure that the UI themes and components maintain high accessibility standards, providing a great user experience for all users, including those with disabilities.

Testing

Thorough testing should be performed to verify the correctness and stability of the implemented UI theme system and components. Unit and end-to-end tests should be created to cover different usage scenarios.

Performance Considerations

While implementing the UI theme system and components, performance should be considered, ensuring that the code editor remains efficient and responsive, even when used in resource-constrained environments.

---

These enhancements will significantly contribute to the overall user experience of CO-DE, attracting more users and encouraging broader adoption.

[blackmouse572]

I will take this.

[danielmc02]

"The selected theme should be applied consistently across all editor instances for a coherent experience during real-time collaboration." Shouldn't the theme data (light, dark, etc) only be persisted per user instead of each project sharing the same theme?

[ravvi-kumar]

I want to introduce shadcn ui and tailwind css for creating reusable components. I have experience in setting ui theme from scratch. Let me know your thoughts on shadcn ui

[SHIV5T3R]

"The selected theme should be applied consistently across all editor instances for a coherent experience during real-time collaboration." Shouldn't the theme data (light, dark, etc) only be persisted per user instead of each project sharing the same theme?

Per user, yeah. Across all editors is incorrect. I'll update that.

[SHIV5T3R]

https://www.figma.com/file/jOvvuPJjWZIuR4UbDRmLLL/CO-DE-UI-Design?type=design&node-id=0%3A1&mode=design&t=ZgsHBQlzbcGkK9ha-1

For those who want to work on the UI, a blank figma project.

[KingXP-Pythoner]

I'll take part on this. I'll also suggest utilizing shadcn ui and tailwind. I can collaborate on the figma design and the react code as well. My discord username in the server's king_codes. Happy to plan and collaborate on this.

[MrBisquit]

Colour pallet and other design here: https://www.figma.com/file/o1qgBpCL4TntAuHcgWbc87/UI-Design?type=design&node-id=0%3A1&mode=design&t=r5WzAVwEytbBaDzy-1

[Duesenberg]

I want to take part in this as well, I have experience with react and a bit of Tailwind as well

[sarah-is-coding]

If there’s still room I’d also like to work on this. I’m a bit more of a beginner, but I have some experience with Tailwind CSS and a bit of React. Looking to learn and help with what I can.

[Android789515]

I'd like to help out with what I can.

[blackmouse572]

For those one who working on color scheme, we discussed and decided to use Tokyo Theme as default (for now). You can ref here: https://github.com/enkia/tokyo-night-vscode-theme

[KingXP-Pythoner]

We'll be using Tokyo Night Storm for dark version and Tokyo Night Light version as well