Inconsistent and duplicated styling and layout

[bombsimon]

I noticed there are quite a few different approaches to styling across apps. There's the "legacy" port of "Departures" which clearly comes from the T-Skylt era with a lot of app-unrelated settings. Then there's the sub-settings for screensaver that I addressed in #12. Finally, in the latest release of clock, I noticed there's a completely different style again (see below).

I think there's a lot to improve here that I would like to discuss and fix.

• Every app should have the same styling
  • Every app should share the same header, footer, way to exit the app, etc
• An app should only require HTML for its settings and use util methods to pull in styles, headers, footers
• Style base elements that we know will look the same
  Every input should always look the same in this app, no need for a class. This means that every app can simply use <input type="text" /> to get a nice looking input without having to set a specific class.
• The app does not need to support both dark and light theme, it's wast of resources
• Each app should be able to rely on shared existing styling
  • Removes code duplication
  • Bug fixes and changes affect all apps
  • No need to update existing app to update styling
  • Saves space by using less code on disk

To make things a bit more complex, I introduced a concept of "building" apps in #10. This doesn't currently involve anything related to styling, but if we do have a build pipeline, we could easily make use of templates and build each app settings page. However I don't think this should be done at this point in time.

I want to start working on this to ensure all apps look the same, keep code duplication to a minimum, make it hard to do wrong when building apps, making a global shared styling. A few things to iron out before starting:

• Should settings pages be dynamic in the sense that an app doesn't own any HTML and simply just defines settings, e.g. something like settings.json and:

{
  "name": "Last.fm",
  "config": {
    "Settings": {
      "Username": "input",
      "API key": "password"
    },
    "Colors": {
      "Artist Color": "color",
      "Title Color": "color",
      "Show title": "toggle"
    }
  }
}

• Which style do you plan to settle on? I strongly prefer the original darker theme which matches the LED panel concept in colors and setup and is used almost everywhere now. However the brighter clock style shown above is the most recent one. Posting the main screen for reference.

Current style	New style on `clock` app

[matrixbox]

This is a great idea, and while it does makes sense for apps to share CSS classes there could potentially be exceptions. For instance; the clock-app "facelift" derives from the webpage currently being made to advertise the existence of the clock itself (https://matrixbox.app/clock) and from the assumption that some people who potentially just want a pixel clock may not necessarily care about, or be interested in, the underlying system of the MatrixBox and its various other apps. Simply put, we thought the clock-webpage design might appeal more to less technically interested people. The plan is not to switch over to the clock-design on other apps, though.

It may also be difficult and/or impractical to enforce adherence to the shared CSS if MatrixBox develops into a broader device with serveral users with different design ideas and tastes. One could argue that the flexibility of being able to fully choose your design (CSS/JS/HTML) would allow for more creativity and hence more apps developed.

With that said, the proposed idea makes sense and we will consider it moving forward! 🙏