Style sheets

[jtooker]

Make it look pretty

See the image in a comment below along with these tasks:

• Use a single table
• Have table's header have a master checkbox in place of select all/none
• Use a Material CSS library
  • Picked MUI as it was lightweight
  • I considered Materialize
• See at least one TODO to replace an inline (in-element?) style with a class
• Have title bar with open button
• Replace group boxes with cards
• Format the table
  • https://material.io/guidelines/components/data-tables.html#data-tables-tables-within-cards
  • Hover shading
  • Checked lines are also shaded (less so than hover?)
• Have rename button with text below the table (seems most clear)
  • Preferably with ripple
• Have a short description of what to do first on launch (in the area where the table will appear)
  • https://material.io/guidelines/patterns/empty-states.html#empty-states-displaying-empty-states
• Settings related:
  • Rename "Options" to "Settings" (Material design recommendation, but perhaps 'Rules' are clearer)
  • Consider using gear icon
  • Consider tapping the "Settings" title to collapse the card (but probably not)
  • Do we style 'check boxes' with the little sliders like Android or material icons?
• Handle scrolling better (probably just scroll the table - but make it look nice somehow)
  • Do this after getting cards and table design done
  • Android file-chooser dialog is a good example
• Create/choose a color palette
  • Blue as a main (title bar) color would seem pretty safe (Material "Blue" or "Light Blue", Indigo seems too dark)
  • Accent color? (and does 'rename' button be in the accent color or the main color)
  • Gray 50 as background
  • White as card background
  • Red 700 as error

[jtooker]