Add an "active" mode state to differentiate between a mode being selected and actually on. See diff
Add bottom text to display the selected mode's current power state. See diff
Change text color so that the color only changes when a mode is active. The icon for that mode will still be colored when it is selected. This should make it clearer at a quick glance across the room what the overall state of the unit is.
What to test:
Please test on a real LCD as the text alignment and pixel ratio is not faithfully reproduced in a desktop browser.
Follow the workflow to see that it makes sense:
1, Here, heating is enabled, all the text is colored orange to show it is active, the icon is orange because it is selected, and blinking because it is running. Boost is also enabled so the timer is visible
Tapping cooling, the heat icon is still blinking to show it is running. The bottom text is showing that cooling is off because cooling is what is currently selected. Also note the text color here is white to further re-enforce the fact cooling is off.
Opening the power settings modal it will always be colored the same as the selected mode. Just below the modal the display text is visible to show you it is currently disabled in case you forgot.
Resolves #5 Resolves #6 Resolves #7
Changes made:
What to test:
1, Here, heating is enabled, all the text is colored orange to show it is active, the icon is orange because it is selected, and blinking because it is running. Boost is also enabled so the timer is visible