Feature: Improve overall app design (look and feel)

hatemhosny commented 6 months ago

Problem Statement

The overall visual design (look and feel) of LiveCodes app and embedded playgrounds needs improvement. Acknowledging that this is not an area I'm good at, I would very much appreciate help here.

This would also be related to allowing the app to have themes that can be set/changed by users #415 . The app styles are defined here: src/livecodes/styles/app.scss

Let's redesign LiveCodes in LiveCodes!

This is playground for a mock of the LiveCodes app (HTML structure with just enough TS to allow navigating through different screens), which should allow editing styles without having to keep rebuilding the app: https://livecodes.io/?x=id/rwurcbpr5ez

Please edit the styles to make new a design then share the playground URL below.

Best designs will be included in LiveCodes as official themes. 🎉

Light/dark modes, app screens and embed preview can be configured by changing the variables at the top of TypeScript code. Please also note that the mock allows navigating through different screens by selecting them from app menu and toolbar buttons. Split panes can be resized. Obviously this is not a functional app, it is just a mock for the UI for the ease of design changes.

Guides

Feel free to use whatever styling language (CSS/SCSS/Less/Stylus/...etc). SCSS is preferred.
No (or minimum) changes to HTML and TypeScript. I'm open to discussion if this is really needed.
Cannot use Tailwind CSS or similar (because we do not want changes to HTML).
The design has to be responsive for different screen sizes.
Each design needs to have light and dark modes (using CSS variables).
Bonus for generous use of CSS variables (which allows users to have variants of the design as custom themes when this feature is implemented, see #415 )

AmrTamer23 commented 6 months ago

Is there is a room for dark mode only theme? Wanted to have my favorite theme Vesper in live codes, and its core is a dark mode only.

hatemhosny commented 6 months ago

Is there is a room for dark mode only theme? Wanted to have my favorite theme Vesper in live codes, and its core is a dark mode only.

@AmrTamer23 I believe you are talking about code editor themes. Yes, editor themes can be dark/light only. You can find the full list of editor themes in Editor Settings screen (app menu -> Editor Settings) (direct link). LiveCodes uses Monaco editor (also CodeMirror6 and CodeJar/PrismJS). We need to have the theme available for any of these.

However, this issue is about LiveCodes App themes, not for code editors.

hatemhosny commented 2 months ago

hey @gigamaster I have seen your work here: https://gigamaster.github.io/livecodes/

wow! That's truly amazing 💯 Just beautiful, and so much cleaner than what I made.

Would you be interested in porting back your work to LiveCodes? I would be very grateful. I see it is still WIP, but just wanted to give a shout out.

gigamaster commented 1 month ago

Hi @hatemhosny

I was looking for an easy to use editor with the prospect of discovering something by sheer serendipity. It was a pleasant surprise to come across Livecodes and to test an installation on Github. So, I'm currently on vacation, once back home I will take the time to update the UI. Thank you for sharing Livecodes ^_^/

live-codes / livecodes