darkmode toggle and various other UX/UI improvements

[colinpeddle]

Primarily wanted to add dark mode, but also took the opportunity to clean up some of the UX/UI of the controller's pages.

At some point this will need to be converted to React in the near future. Due to the nature of the initial build of the HTML dark mode is a bit wonky but the primary goal of not being blinded whilst in a dark hot tub or elsewhere is achieved.

Stylistically some of the CSS and design queues were updated to be cleaner, but work remains. For example, the buttons on the controller for temp/air temp, etc. need be improved.

• moved VA logo from background to the header along side the page title, and added a subtitle
  

• made this a link back to the home page
  

• improved navigation and introduced a slide-in-out animation for navigation
  

• added dark mode toggle in header which is stored in localstorage (which is why we need to switch to react as this needs to be set for each html page)
  

• converted the menu hamburger to an HTML character allowing for the removal of menu.png
  

• with VA logo being used in a smaller scale it could be rastered out smaller
  

• ^ should maybe be integrated into the favicon
  

• updated the styling of toggles and sliders in general
  

• removed the bottom border on Sections and converted the differentiation for sections to a contrasting background color instead
  

• introduced ::root in the main.css to control and allow for faster color changes and future-proof for potential introduction of themes
  

• adjusted the blue of the theme color in html element to match that of the blue in the header element
  

• moved the Display component of the main page — which shows the current temp of the tub — to be immediately below the header, perhaps in the future it may be merged into the following section with the three Temp readings to improve the look of the app
• adjusted the styling and some inconsistencies with buttons

[visualapproach]

Thanks, sounds interesting. I'll check it out when I get home in a few days.

[colinpeddle]

Still a few things to do on the UI/UX side. Have to add some clarity to the design on dark mode toggle just as an indicator of what it is for (sun/moon HTML characters probably). Also have added back the design for heateron and heateroff classes to better indicate the heater is heating, as you had it originally.

…

________________________________ From: visualapproach ***@***.***> Sent: Friday, January 26, 2024 12:42:47 PM To: visualapproach/WiFi-remote-for-Bestway-Lay-Z-SPA ***@***.***> Cc: Colin Peddle ***@***.***>; Author ***@***.***> Subject: Re: [visualapproach/WiFi-remote-for-Bestway-Lay-Z-SPA] darkmode toggle and various other UX/UI improvements (PR #667) Merged #667<#667> into development_v4. — Reply to this email directly, view it on GitHub<#667 (comment)>, or unsubscribe<https://github.com/notifications/unsubscribe-auth/AFB7X2C4OFULUDBJBRRMADTYQPIX7AVCNFSM6AAAAABCHMLFK6VHI2DSMVQWIX3LMV45UABCJFZXG5LFIV3GK3TUJZXXI2LGNFRWC5DJN5XDWMJRGYYTANJZGU3TCOA>. You are receiving this because you authored the thread.Message ID: ***@***.***>

[visualapproach]

I merged the PR. I think it had a fresh look to it.