diff --git a/static-src/kx-claim.js b/static-src/kx-claim.js index 87c9f42..4c7557a 100644 --- a/static-src/kx-claim.js +++ b/static-src/kx-claim.js @@ -64,6 +64,7 @@ export class Claim extends HTMLElement { root.querySelector('.info .title').innerText = claimJson.display.name; root.querySelector('.info .subtitle').innerText = claimJson.display.serviceProviderName ?? (claim.status < 300 ? '???' : '---'); + root.querySelector('.info img').setAttribute('src', `https://design.keyoxide.org/brands/service-providers/${claimJson.display.serviceProviderName.toLowerCase() || '_'}/icon.svg`); try { if (claim.status >= 200) { diff --git a/static-src/kx-styles.scss b/static-src/kx-styles.scss index 2928103..5416e54 100644 --- a/static-src/kx-styles.scss +++ b/static-src/kx-styles.scss @@ -100,6 +100,14 @@ kx-claim { color: var(--text-color); } + .info img { + width: 16px; + height: 16px; + margin-right: 8px; + vertical-align: sub; + opacity: 0.5; + } + .claim__links { p { diff --git a/views/profile.pug b/views/profile.pug index 335d9c7..c9a9e11 100644 --- a/views/profile.pug +++ b/views/profile.pug @@ -22,6 +22,7 @@ mixin generatePersona(persona, isPrimary) summary .info p + img(src=`https://design.keyoxide.org/brands/service-providers/_/icon.svg` onerror="this.src='https://design.keyoxide.org/brands/service-providers/_/icon.svg'") span.title= claim.display.name span.subtitle-wrapper | [