Fix avatar sanitize and cleanup code & css

[skjnldsv]

• Cleanup code & template
• Move css
• Cleanup css
• Fix inline js event xss

Xss svg examples (safe, fire an alert)

1.  <svg xmlns="http://www.w3.org/2000/svg" height="256" width="256" onload="alert('xss')">
    	<rect ry=".5" rx=".5" height="256" width="256" fill="#0082c9"/>
    	<g transform="translate(0 64)" stroke-width="22" fill="none" stroke="#fff">
    		<circle r="26" cy="64" cx="40"/>
    		<circle r="26" cy="64" cx="216"/>
    		<circle r="46" cy="64" cx="128"/>
    	</g>
    </svg>

2.  <svg xmlns="http://www.w3.org/2000/svg" height="256" width="256">
    	<rect ry=".5" rx=".5" height="256" width="256" fill="#0082c9"/>
    	<g transform="translate(0 64)" stroke-width="22" fill="none" stroke="#fff">
    		<circle r="26" cy="64" cx="40"/>
    		<circle r="26" cy="64" cx="216"/>
    		<circle r="46" cy="64" cx="128"/>
    	</g>
    	<script>alert('xss')</script>
    </svg>

---

[codecov]

Codecov Report

Merging #1786 into master will not change coverage.
The diff coverage is n/a.

@@            Coverage Diff            @@
##             master    #1786   +/-   ##
=========================================
  Coverage     34.38%   34.38%           
  Complexity      148      148           
=========================================
  Files            19       19           
  Lines           442      442           
=========================================
  Hits            152      152           
  Misses          290      290           

---

Continue to review full report at Codecov.

Legend - Click here to learn more
Δ = absolute <relative> (impact), ø = not affected, ? = missing data
Powered by Codecov. Last update c00530f...fbb5858. Read the comment docs.

[call-me-matt]

Seems the image-button-overlay now is visible all the time. It was only on mouse-over before. Is that on purpose?

[skjnldsv]

Seems the image-button-overlay now is visible all the time. It was only on mouse-over before. Is that on purpose?

Accessibility for keyboard and mobile users. If it's hidden, you don't know it's there. :)
Just pushed a fix for keyboard visual feedback that wasn't visible

[call-me-matt]

Thought that would be the reason we keep the second menu in the modal. But if its on purpose, that's fine for me.

[skjnldsv]

Thought that would be the reason we keep the second menu in the modal. But if its on purpose, that's fine for me.

Right! Let's ping @jancborchardt for when he gets back and let get this in :)
I'll handle the previous behaviour rollback if necessary! 🚀

[jancborchardt]

Seems the image-button-overlay now is visible all the time. It was only on mouse-over before. Is that on purpose?

Accessibility for keyboard and mobile users. If it's hidden, you don't know it's there. :)
Just pushed a fix for keyboard visual feedback that wasn't visible

I’d agree it would be nicer to only show it on hover/focus. Also showing it on focus makes sure it’s also visible to keyboard users. On mobile, I’d say people expect something to happen on tap of the avatar if they want to change it.
And if not avatar is set for a person, the button can still be shown by default, centered on top of the avatar – that way people also know it’s there. :)

[call-me-matt]

I'll handle the previous behaviour rollback if necessary!

@skjnldsv if you find the time, I would also prefer the hover behaviour.