UI: Main page

[amclain]

We would like to redesign the main page of the Xebow Studio UI.

Notes

• The design is available in Figma for margins, colors, fonts, etc.
• The following components were inspired by tailwindcss, which can be included as a dependency. (fomantic-ui is another option if we want more pre-built components.)
• Icons are from the fontawesome free set.
• We need to try to load assets from the hardware rather than from the web, as the user may not have an internet connection when using the device. If this is not possible, reasonable alternatives should be used when the user is offline.
• The speedometer icon is intended to link to the telemetry dashboard at /telemetry. This should open in a new tab, as the page does not contain a way to navigate back to Xebow Studio.
• The hamburger icon is intended for menu items, like device settings, which might not exist in the first iteration. This is ok and the icon can be omitted.
• The design does not need to be pixel-perfect if another implementation looks better.

Design

[doughsay]

Suggested key CSS

.key {
  background-color: something;

  border-radius: 6px;
  box-shadow: inset 0 -1px 0 3px rgba(0, 0, 0, 0.1),
    0 0 0 1px rgba(0, 0, 0, 0.3);
  border-left: 1px solid rgba(0, 0, 0, 0.1);
  border-right: 1px solid rgba(0, 0, 0, 0.1);

  padding-top: 6px;
}

[amclain]

The Milligram framework also came up in the planning meeting.