Fix display of identicon on Connect page

[Gudahtt]

The identicon was showing as a white circle on the connect page. This was a CSS error introduced when jazzicon was updated in #7898.

The white circle shown was the white border around the identicon. This circle is an adjacent div in the DOM, and was rendered underneath the identicon itself because it was placed first in the DOM.
Unfortunately the new version of jazzicon is no longer explicitly positioned (it used to have position: relative set internally), so now it's lower in the stack order regardless of DOM position.

Rather than placing the border adjacent and relying upon both elements being positioned, the border has been changed into a wrapping div instead. Now the stack order is more explicit.

Screenshots:

Before:

After:

[metamaskbot]

Builds ready [9b98767]

• builds: chrome, firefox, opera
• bundle viz: background, ui, inpage, contentscript, ui-libs, bg-libs, phishing-detect
• dep viz: background
• all artifacts

Page Load Metrics (665 ± 58 ms)

Platform	Page	Metric	Min (ms)	Max (ms)	Average (ms)	StandardDeviation (ms)	MarginOfError (ms)
Chrome	Notification	firstPaint	NaN	NaN	NaN	NaN	NaN
		domContentLoaded	339	1024	663	120	58
		load	340	1026	665	120	58
		domInteractive	339	1023	663	120	58

[Gudahtt]

I left alone the icon-with-fallback styles. I think it'd be nicer to update all of our icon borders to work this way as well, but that can come in a later PR.

[Gudahtt]

cc @danfinlay , this could have also been fixed by adding position: relative to the jazzicon styles. Raphael had set position: relative internally on the svg element, so when Raphael was dropped for v2, the position was as well.

I think it's fine that jazzicon doesn't set the position anymore. The consumer can position it however they like. Just something to be aware of I guess.

[whymarrh]

LGTM!