Changed fontface to Google Sans | Overhaul typography hierarchy and theme font type settings

[devYaoYH]

• Updated MuiTheme defaults to render Google Sans font from fonts.googleapis CDN

• Updated custom MuiThemes to override a base AppThemeConfig object (preserves config such as fonts - previously, providing a different theme other than AppTheme will lose Google Sans font override)

• Font Type hierarchy:

  • body1 (subtitle1) > body2 (subtitle2) [body text + emphasis]
  • h3 (header) > h4 (smaller header)
  • h6 (Large emphasis) [1 level above body text]
  • color="secondary" fades out text (grey color)

• Added clampTextLines(maxLines: number) to utils.ts to strongly restrict maximum number of displayed lines

  • Will not trigger css overflow property (consequently, we do not currently detect this for the purposes of ItemDetail expansion - so not used to clamp 3 lines max for ItemDetail content yet)
  • Used for clamping titles in ItemCard

Demo

Home