[Avatar] remove border on images and use boxShadow

[oliviertassinari]

I can't find the border on the spec of material design.

[hai-cea]

@oliviertassinari When I was implementing lists, I notice the image Avatars have borders. Please see:

[oliviertassinari]

Ok but I feel like the border is less than 1px on this example.

On the project I'm working on, I have two issues.
The border is not present on Letter Avatar. And I feel like the border is too thick.
A box shadow inset may be more appropriate.
Somethings like box-shadow: 0 0 5px 1px rgba(0, 0, 0, 0.7) inset;

[oliviertassinari]

@hai-cea What do you think?

[hai-cea]

@oliviertassinari I think the box-shadow sounds good.

[oliviertassinari]

@hai-cea Updated. Left : this PR, right: master

[hai-cea]

Thanks @oliviertassinari - looks great. 👍

[JAStanton]

"remove border on images and use boxShadow" <-- border fast, boxShadow slow. you guys are trading asthetics for speed right now. Just saying. Maybe it's not a big deal but in the future. BoxShadows are terribly slow to render

[oliviertassinari]

I agree it's slower.
@JAStanton Have you noticed performance issues with scrolling?
In my use case, I set the boxShadow to none.

[hai-cea]

I think just changing the border color instead of using box-shadow could do the trick. Here are my tests - what do you think?

//new border color
border: solid 1px rgba(0,0,0,0.08)

//this PR
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.2) inset

//current on material-ui.com
border: solid 1px #e0e0e0

[JAStanton]

Looks good to me, and if anyone wants more they can always override themselves and take the perf penalty

[oliviertassinari]

@hai-cea Ok, why not. let's kill it.