Squished WAIL icon on loading screen

[machawk1]

When loading, the WAIL icon has a pointier nose/head. Is the icon being dimensionally squeezed?

[N0taN3rd]

@machawk1 I use a circle effect to ensure the icon does not make the header portion too large

[machawk1]

That explains the pointiness, @N0taN3rd . Is there any way to prevent the clipping? How would the icon being square cause the header portion to be any larger?

[N0taN3rd]

@machawk1 the icon is displayed via material-ui/Avatar and internally they apply

root: {
      color: color || avatar.color,
      backgroundColor: backgroundColor || avatar.backgroundColor,
      userSelect: 'none',
      display: 'inline-flex',
      alignItems: 'center',
      justifyContent: 'center',
      fontSize: size / 2,
      borderRadius: '50%',
      height: size,
      width: size
 },
icon: {
      color: color || avatar.color,
      width: size * 0.6,
      height: size * 0.6,
      fontSize: size * 0.6,
      margin: size * 0.2   
 }

Which maybe causing the clipping.

How would the icon being square cause the header portion to be any larger?
Previous versions of Material-UI when the image displayed was largish and you did not supply styling the original width/height was used.
So I used the circle effect to contain the icon as I was using the 256 sized icon to ensure that on high dpi screens (macs retina screens etc) the icon would look sharp.

[machawk1]

@N0taN3rd Can you customize the Avatar lib to not use a border-radius? It's good that you accounted for high-res screens but on those screen it will be both crisp and clipped. ;)

[N0taN3rd]

@machawk1 I do believe I can easily since the material-ui library has matured from the time I created the component for the header and displaying the icon. But if not css tweaking will probably do the trick.

[machawk1]

Still present in 1.2.0-beta. 😕