[DESIGN] Major UI/UX Revamp

[CupapiOT]

Is your feature request related to a problem? Please describe.

The current UI, while functional and has a decently clear structure, looks visually unappealing and may be unintuitive to anyone unfamiliar with the site. The design choice that needs changing the most is the oddly proportioned graph, which seems be in a sort of 4:1 width-to-height ratio—this leads to a poor and confusing experience, especially considering that the graph would be the main focus of the user.

Aside from that:

• the UI elements could be larger and clearer for ease of use,
• the site is not yet responsive,
• the graph needs to be made to not constantly resize itself whenever a new matrix is added.
• the way the program displays the currently applied matrices could be made easier to read (rendering instead of displaying them in plain-text form); and
• the logs made by the site (e.g., when the user attempts to apply an inverse matrix to a zero-determinant matrix) could be moved to a more hidden spot toggle-able to view to reflect its nature of being less important.

---

Describe the solution you'd like

A visual overhaul of the UI, with the goal of creating a cleaner and more intuitive experience. This includes, but is not limited to:

1. Planning out a new layout, possibly taking inspiration from Desmos for user-familiarity, which includes things such as:
   • Planning and updating a color-palette.
   • Updating typography.
2. Ensuring the graph is more visible and easier to interact with.
3. Moving each of the other elements according to the planned layout.
4. Ensuring responsiveness for mobile, tablet, laptop, and desktop users alike—all of these are important due to how this web-app is meant to help educate people from all demographics.

---

Describe alternatives you've considered

• Minor tweaks to individual components instead of a full revamp, but that would feel patchy and inconsistent.
• Sticking with the current look for now and focusing only on functionality, but the poor UX could undermine usability, ease-of-development, and delay when the web-app is sufficiently-presentable in the future.

---

Additional context

• This revamp is visual-only—core logic and data flow will not be affected.
• This may be broken into smaller sub-issues (like adjusting the structure and layout, styling) depending on how much changes during design and framework exploration.

[CupapiOT]

2 May 2025 4:18pm

NOTE:

This issue was previously called "Major UI/UX Revamp + Migrate Frontend from Dash to Svelte", but upon further planning, I found that migrating the UI to svelte would take too much effort and that it would likely work much better to simply use Dash's Bootstrap components and regular CSS for styling. About learning JavaScript, I built a to-do app from scratch (no AI) to learn a bit of that--I did not enjoy it very much, and I choose not to go deeper into it.

Though, don't get me wrong, the main reason for cancelling the migration is still that it'd be unnecessarily complex for the needs of the app. I'd have to manually call callbacks from svelte for each component to integrate it with Python's dash.