Format changes, left Justified. UI tweaks

[River-Mochi]

All of this is optional of course and only if you have time and feel like it :)

1. White boxes in User interface menu are easier to see. maybe make temp change boxes also white. the size of boxes in user interface is better too.

2. maybe change everything to left justified? the different items are shifted different spots so it's harder to follow them down the page.

3. Left justified so the eye doesn't have to work hard.
   

4. once everythign is left justified, make the slider bar just a little longer on soldering temp and boost.

5. suggestion to remove the green background and just have thick colored Box sections around Category of grouped settings to make it less busy.

6. for example Power Settings would be one box all white with color main border. and only the main heading "Power Settings" with drop down arrow would be only thing with full background color.

7. maybe each sub-menu item like PD timeout don't show the scrolling help message. maybe user has to hover over word PD Timeout to see pop-up with help text. OR on left side of "PD timeout" have a small flyout arrow and if you click it it opens to show help message. that would clean this up a lot. because people don't need to see the help messages all the time. they get used to what the items does. and if they forget they can click to see help message or click arrow for flyout? just a suggestion.
8. Collor of the sliding bards should be consistent. with color of the box info next to it so whatever border color is used for temperature and boost boxes for example, make the slider bar the same color.

These are all just thoughts, I'm not sure it will look good or worse with my suggestions. I do think all left justified will help and makeing all cartegories color like Power Settings, Sleep mode but having the main boxes be all white. with a color border around everything. More white space to keep things less clutterered.
Could go with Teal green/Orange/gray theme. or a Purple and teal theme like image by sticking to just 3 colors and grey and black for stuff but mostly white everywhere.

If you want some color background for the boxes. could go with a very light color like this entry boxes are White but see that the rest of the page is a very light share of bone white. and there is even a light grey shade there.

[River-Mochi]

• I did this in free paint on windows. dont laugh it only took me a few minutes and fast. just to show it's nice to have more white and only Main Titles have color. and can make box with temperature numbers larger? more obvious since those are important things people change more often.

• Technically inside the Set Temp box we could have a Drop down for °C and °F.

• but if you want it to be in same place as the User interface it can stay there. but whatever someone picks in User Interface, then that is what shows in Set °C and Boost °C for example (with degree symbol too). or it shows as °F if they picked °F in User interface Category.

• Other settings people don't change as often but i do tend to do the Temps more often so I think those two should be bigger box font. I probably made it too big, but you see what I mean.

• I used dark gray for the font because I think that is nicer than black.

• hiding all the help text makes it better looking and easier to navigate. if people forget what the item is, let them click it to display help text ?
  the arrow in my representation is just to similate your arrow you already have. It's all I had in Paint program.

[builder555]

I'll play around with the colours and the alignment, see what comes of it. We'll need to think about the descriptions though. Generally hover is great for the "clean look", but it's not recommended for the accessibility. Not that the app is terribly accessible right now, but this will make it even more difficult. Perhaps some kind of switch or a question mark that reveals all the descriptions? Not sure.

[River-Mochi]

not recommended for the accessibility.

agreed, on a Phone clicking an arrow next to name of function which shows the help message might be better. then click arrow again to collapse.
you have arrows now which collapse sections and is handy.

take a look in some of your phone apps to see how they offer extra help on a function.

[builder555]

what about something like this? @river-b

[builder555]

and this is with dark reader

[builder555]

this will be the latest colour/ui tweaks branch that you can download

[River-Mochi]

download this one and not from Readme?

[builder555]

correct

[River-Mochi]

will this have the iphone fix?

[builder555]

v1.0.13 should already have the iphone fix. you might need to refresh the page on iphone, sometimes it loads cached stuff

[River-Mochi]

I see this on PC windows chrome

[builder555]

it requires a few refreshes to get the css file loaded, i'll need to add cache-busting feature

[River-Mochi]

can i do something on my end like clear browser data?