Add border around account icon in top right

MetaMask · Jul 8, 2019 · c05090a · c05090a
1 parent b780e97
commit c05090a
Show file tree

Hide file tree

Showing 3 changed files with 21 additions and 4 deletions.
diff --git a/ui/app/components/app/app-header/app-header.component.js b/ui/app/components/app/app-header/app-header.component.js
@@ -70,6 +70,7 @@ export default class AppHeader extends PureComponent {
         <Identicon
           address={selectedAddress}
           diameter={32}
+          addBorder={true}
         />
       </div>
     )

diff --git a/ui/app/components/ui/identicon/identicon.component.js b/ui/app/components/ui/identicon/identicon.component.js
@@ -16,6 +16,7 @@ const getStyles = diameter => (
 
 export default class Identicon extends PureComponent {
   static propTypes = {
+    addBorder: PropTypes.bool,
     address: PropTypes.string,
     className: PropTypes.string,
     diameter: PropTypes.number,
@@ -70,7 +71,7 @@ export default class Identicon extends PureComponent {
   }
 
   render () {
-    const { className, address, image, diameter, useBlockie } = this.props
+    const { className, address, image, diameter, useBlockie, addBorder } = this.props
 
     if (image) {
       return this.renderImage()
@@ -83,9 +84,11 @@ export default class Identicon extends PureComponent {
         return this.renderJazzicon()
       }
 
-      return useBlockie
-        ? this.renderBlockie()
-        : this.renderJazzicon()
+      return (
+        <div className={classnames({ 'identicon__address-wrapper': addBorder })}>
+          { useBlockie ? this.renderBlockie() : this.renderJazzicon() }
+        </div>
+      )
     }
 
     return (

diff --git a/ui/app/components/ui/identicon/index.scss b/ui/app/components/ui/identicon/index.scss
@@ -4,4 +4,17 @@
   align-items: center;
   justify-content: center;
   overflow: hidden;
+
+  &__address-wrapper {
+    height: 40px;
+    width: 40px;
+    border-radius: 18px;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    border-style: solid;
+    border-radius: 50%;
+    border-width: 2px;
+    border-color: $curious-blue;
+  }
 }