Parkreiner/etrian-character-customizer

Client – Redesign the entire app's layout

Opened this issue · 1 comments

As a consequence of me making all my mock-ups with pen and paper, rather than making more full-featured mock-ups in Figma, I have a big design problem. Namely, the interface for letting you edit colors is way too big for the container I made for it. There is overflow styling in place to prevent it from looking absolutely terrible, but (1) the design is not that great from a usability standpoint, and (2) it just looks weird.

Updating the layout for the project is going to require:

  • Updating the styles (and likely some non-semantic HTML elements) of virtually every component
  • Reorganizing how some child components are consumed by their parents
  • Ensuring that there are no visual regressions for the components that won't be changing

Even though the project currently does not use context or external stores, I can't imagine that reorganizing the components will require many (if any) changes to component API contracts (maybe the Tabs component will need to be rethought).

Because I don't expect functionality to change much, though, it's probably best to wait until all the core functionality is in place before starting this task.

Just leaving an update about the status of this issue:

  • It will be resolved
  • But probably not until closer to the end of the project.

The left and center panels have been redesigned, and the rest of the UI is functional enough still. I want to wait until I have a better idea of what the finished product needs before trying to redesign the UI further.