This document tracks how and why the UI of Spelly has changed
- ✔️ Simple layout, one text box, one button, everything else clearly not intractable
- ❌ No visual separation between Input and Preview
⁉️ Too wide or simply using all the screen real estate?
- ✔️ Good examples of a bunch of different elements in the docs
- ✔️ Lots of StackOverflow content
- ❌ have to "View Page Source" to see how all the example templates were made
- ❌ Feels a lot like writings CSS still
- ❌ Everything has to go into one big long
className='blah foo bar'string instead of named properties
| Light | Dark |
|---|---|
 |
 |
- ✔️ dark/light theme swapping
- ✔️ more consistent spacing and content locations
- ❌ more buttons and features that no one asked for
- ❌ Only the
Inputform has a right-column header, everything else is explained only on the left - ❌ The icon for swapping from light->dark kinda looks like a Settings
Gear Icon
- ✔️ Built-in dark/light theme swapping support via useColorMode
- ✔️ Nicely organized docs with visual examples followed by code snippet
- ✔️ Useful, elegant looking component library from community member for inspiration choc-ui.tech
- ✔️ Named properties for all the CSS properties being applied to a component
- ❌ smaller community and StackOverflow content
- ✔️ Active community on Discord
| Light | Dark |
|---|---|
 |
 |
- ✔️ removed hidden knowledge of which chat clients are supported by swaping drop-down for button group where all choices are visible
- ❌ The Input/Preview/Output headings eat a lot of vertical space on mobile and you have to scroll to see the copy button
- ✔️ Less buttons make the UI cleaner and keeps the focus on the core feature of Spelly
| Light | Dark |
|---|---|
 |
 |
- ✔️ Remove side panel helper text that explained the obvious purpose each element
- ✔️ Remove section separators and rely on drop-shadow to lighten the page