-
Notifications
You must be signed in to change notification settings - Fork 9
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Squished WAIL icon on loading screen #81
Comments
@machawk1 I use a circle effect to ensure the icon does not make the header portion too large |
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? |
@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.
|
@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. ;) |
@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. |
Still present in 1.2.0-beta. 😕 |
When loading, the WAIL icon has a pointier nose/head. Is the icon being dimensionally squeezed?
The text was updated successfully, but these errors were encountered: