Theme Generator UX - Wizard UI Structure

[Sarenor]

Before submitting the PR:

• Does your PR reference an issue? If not, please chat to the team on Discord or GitHub before submission.
• Did you update and run tests before submission using npm run test?
• Does your branch follow our naming convention? If not, please amend the branch name using branch -m new-branch-name
• Did you update documentation related to your new feature or changes?

What does your PR address?

Initial and very ugly draft to refactor the Theme Generator into a Wizard Based Approach

Partially fixes #1141

[vercel]

The latest updates on your projects. Learn more about Vercel for Git ↗︎

Name	Status	Preview	Comments	Updated (UTC)
skeleton-docs	✅ Ready (Inspect)	Visit Preview	💬 Add feedback	Apr 23, 2023 0:16am

[Sarenor]

Still to do:

• Wait for feedback
• Add "set color & generate palette" color input
• fix color palette display on wider screens
• Implement Theme settings for border radius, etc
• Fix logic for Theme export in CSS & JSON
• Fix Popups in ColorStep & Advanced Generator
• Implement site- wide preview
• Clean up mess
• Write useful documentation
• Write tests

[endigo9740]

@Sarenor make sure to sync with Rhys if you haven't yet. He was already making progress on some Theme Generator improvements.

[Sarenor]

@Sarenor make sure to sync with Rhys if you haven't yet. He was already making progress on some Theme Generator improvements.

Checked his PR, as far as I saw it was only in the "Color-Service-Layer" (unless that changed, if so that's on me and I'll handle the merge conflict, if we even deem this good enough to merge)

[endigo9740]

@Sarenor I believe you said you wouldn't be available to work on this again until tomorrow or the next day, so let's plan to sync on this then (time wiling). Thanks!

[endigo9740]

@Sarenor sorry for taking so long to circle back to this. Unfortunately testing the current version throws a 500 error. If you can get this back in a working state I can review and provide more guidance and feedback on this.

That said, I've been thinking about this since the idea came up. The original goal was to segment things, to reduce the information density thrown at you at once. We proposed the wizard idea, but the more I think about it the more I think a "tabbed" interface might work better. Either full on Tabs or the AppRail might work well here. Here's a quick wireframe mock:

The general idea is you would have a three column layout:

1. Left - the app rail navigation between sections or controls
2. Middle - the currently selected rail option settings
3. Right - the preview elements (buttons, etc)

By doing this you can quickly navigate between options while seeing the preview at a glance.

Anyways, just a thought. Let me know what you think.

[Sarenor]

Probably a better way, yeah.
I'm thinking about the sidebar, maybe we should hide it while you're in theme generation? Not sure though, probably better not to.

[endigo9740]

Just so it's stated here - I'm leaning towards closing out this issue, but still using some of the learning and discussion from it in my new updates next week. I'll leave this be for now, but just a heads up so you don't implement more work that won't carry forward.

[Sarenor]

Noted. Then I'll spent my weekend doing other things

[endigo9740]

Per our discussion on Discord I'm closing this but will take the changes into consideration when we revisit theme generation soon. Thanks!