sextant
sextant copied to clipboard
mattpocock
Redesign the GUI using Tailwind
We have the potential to build a beautiful, beautiful GUI. Currently, we have a bit of a gnarly one that I threw together.
An ideal contribution from someone visual-minded would be to go through and redesign the GUI from the ground up, adding the polish it deserves.
The codebase is your digital garden - go for it.
Can you identify a few problems that current design has? The current UI looks pretty solid to me (job well done!)
IMO one should not simply redesign for the purpose of redesign. So instead of inventing solutions can we list down the problems first?
Good question, let's outline the goals of a redesign.
Sextant should be able to be easily understood by anyone looking at it. Currently, it's designed for developers - that font-mono look gives it away. I want this tool to be useful as permanent documentation, not just an IDE.
I'd love to see the design grow to be something Jira/GitHub/Slack-like: functional, clear.
Here are the more specific issues I can see:
- Titles and descriptions have no labels, so are pretty hard to understand what they're doing.
- The main panel is not distinguished from other panels - there is no sense of priority of which panel is most important.
- There's no concept of which service in the left-hand-side panel is selected.
- The event payloads on the right-hand side don't match the colour scheme of the rest of the design.
- We need some contextual icons scattered near each action in the design.
@mattpocock what's the reason behind the choice of Tailwind? Is it set already or just a suggestion?
My experience with such frameworks is that they immediately lead to bloated and unreadable HTML, and eventually keep you from doing what you want with the design, because it takes a big number of utility classes plus some custom CSS to get what you want, and that is fragile because of the combinatorial explosion.
Is it ok to go ahead with bespoke CSS?
Asking because I'd like to work on this 😄
@edgerunner As long as you stick to a solid component model and keep tailwind configured in the repo, I don't see why not. I would prefer Tailwind, because it's natural both for me and makes adding quick fixes in PR's from contributors easy.
Either way, the design choices you make may be more important to the project than your actual code, so I don't want to dampen your creativity with tech choices. Fire away, and I can't wait to see what you come up with :)