diff --git a/js/src/ui/Balance/balance.css b/js/src/ui/Balance/balance.css index ed0f79e7b..81e0fa798 100644 --- a/js/src/ui/Balance/balance.css +++ b/js/src/ui/Balance/balance.css @@ -28,6 +28,7 @@ } .empty { + min-height: 24px; line-height: 24px; opacity: 0.25; overflow: hidden; diff --git a/js/src/ui/Balance/balance.js b/js/src/ui/Balance/balance.js index 04fed6942..18652fa85 100644 --- a/js/src/ui/Balance/balance.js +++ b/js/src/ui/Balance/balance.js @@ -96,7 +96,7 @@ export default class Balance extends Component {
); diff --git a/js/src/ui/Certifications/certifications.css b/js/src/ui/Certifications/certifications.css index 0b1930c6a..8e16cf2d5 100644 --- a/js/src/ui/Certifications/certifications.css +++ b/js/src/ui/Certifications/certifications.css @@ -19,29 +19,40 @@ margin-top: 1em; } -.certification { +.certification, +.certificationIcon { + border-radius: 1em; display: inline-block; - position: relative; - margin-top: 1em; - margin-right: .5em; - padding: .3em .6em .2em 2.6em; - border-radius: 1em; line-height: 1em; - text-transform: uppercase; + position: relative; + + .icon { + width: 2em; + height: 2em; + margin: 0; + padding: 0; + border-radius: 1em; + } +} + +.certificationIcon { + margin-left: 0.5em; +} + +.certification { background-color: rgba(255, 255, 255, 0.07); -} + margin-right: 0.5em; + margin-top: 1em; + padding: 0.3em 0.6em 0.2em 2.6em; + text-transform: uppercase; -.certification:last-child { - margin-right: 0; -} + &:last-child { + margin-right: 0; + } -.icon { - position: absolute; - top: -.25em; - left: 0; - width: 2em; - height: 2em; - margin: 0; - padding: 0; - border-radius: 1em; + .icon { + position: absolute; + top: -.25em; + left: 0; + } } diff --git a/js/src/ui/Certifications/certifications.js b/js/src/ui/Certifications/certifications.js index 79eaf029e..0693cf2d7 100644 --- a/js/src/ui/Certifications/certifications.js +++ b/js/src/ui/Certifications/certifications.js @@ -28,7 +28,8 @@ class Certifications extends Component { address: PropTypes.string.isRequired, certifications: PropTypes.array.isRequired, className: PropTypes.string, - dappsUrl: PropTypes.string.isRequired + dappsUrl: PropTypes.string.isRequired, + showOnlyIcon: PropTypes.bool } render () { @@ -46,16 +47,47 @@ class Certifications extends Component { } renderCertification = (certification) => { - const { name, title, icon } = certification; - const { dappsUrl } = this.props; + const { name, icon } = certification; + const { dappsUrl, showOnlyIcon } = this.props; - const classNames = `${styles.certification} ${!icon ? styles.noIcon : ''}`; - const img = icon ? dappsUrl + hashToImageUrl(icon) : defaultIcon; + const classNames = [ + showOnlyIcon + ? styles.certificationIcon + : styles.certification, + !icon + ? styles.noIcon + : '' + ]; return ( -
- -
{ title || name }
+
+ + { this.renderCertificationName(certification) } +
+ ); + } + + renderCertificationName = (certification) => { + const { showOnlyIcon } = this.props; + const { name, title } = certification; + + if (showOnlyIcon) { + return null; + } + + return ( +
+ { title || name }
); } diff --git a/js/src/views/Accounts/Summary/summary.js b/js/src/views/Accounts/Summary/summary.js index c6a9f73ff..6b077e558 100644 --- a/js/src/views/Accounts/Summary/summary.js +++ b/js/src/views/Accounts/Summary/summary.js @@ -144,7 +144,10 @@ class Summary extends Component { } />
- { this.renderBalance(true) } +
+ { this.renderBalance(true) } + { this.renderCertifications(true) } +
); } @@ -251,7 +254,7 @@ class Summary extends Component { ); } - renderCertifications () { + renderCertifications (onlyIcon) { const { showCertifications, account } = this.props; if (!showCertifications) { @@ -261,7 +264,12 @@ class Summary extends Component { return ( ); } diff --git a/js/src/views/Accounts/accounts.css b/js/src/views/Accounts/accounts.css index a8bd97a72..de6ce3ab5 100644 --- a/js/src/views/Accounts/accounts.css +++ b/js/src/views/Accounts/accounts.css @@ -41,8 +41,19 @@ margin-top: 1.5em; } - .ethBalances { - opacity: 1; + .summary { + position: relative; + + .ethBalances { + opacity: 1; + } + + .iconCertifications { + bottom: -0.25em; + opacity: 1; + position: absolute; + right: 0; + } } .owners { @@ -71,6 +82,10 @@ .ethBalances { opacity: 0; } + + .iconCertifications { + opacity: 0; + } } }