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;
+ }
}
}