tweaking styling

ui/app/components/blockies/blockies-component.js

@@ -3,25 +3,30 @@ const createElement  = require('react').createElement
 const blockies = require("ethereum-blockies");
 
 class BlockiesIdenticon extends Component {
+
   constructor(props) {
     super(props);
   }
+
   getOpts () {
     return {
-      seed: this.props.seed || "foo",
+      seed: this.props.seed,
-      color: this.props.color || "#dfe",
+      color: this.props.color,
-      bgcolor: this.props.bgcolor || "#a71",
+      bgcolor: this.props.bgcolor,
-      size: this.props.size || 15,
+      size: this.props.size,
-      scale: this.props.scale || 3,
+      scale: this.props.scale,
-      spotcolor: this.props.spotcolor || "#000"
+      spotcolor: this.props.spotcolor,
     };
   }
+
   componentDidMount() {
     this.draw();
   }
+
   draw() {
     blockies.render(this.getOpts(), this.canvas);
   }
+
   render() {
     return createElement("canvas", {ref: canvas => this.canvas = canvas});
   }

ui/app/components/identicon.js

@@ -32,9 +32,22 @@ IdenticonComponent.prototype.render = function () {
   return address
     ? (
       useBlockie
-        ? h(BlockiesIdenticon, {
+        ? h('div', {
-          seed: address,
+            className: `${className} identicon`,
-        })
+            style: {
+              display: 'flex',
+              alignItems: 'center',
+              justifyContent: 'center',
+              height: diameter,
+              width: diameter,
+              borderRadius: diameter / 2,
+              overflow: 'hidden',
+            },
+          }, [
+            h(BlockiesIdenticon, {
+              seed: address
+            })
+          ])
         : h('div', {
           className: `${className} identicon`,
           key: 'identicon-' + address,