From 9163b455253281e3cd5eab48639cf88c34beb3dc Mon Sep 17 00:00:00 2001
From: Yarmo Mackenbach <yarmo@yarmo.eu>
Date: Mon, 25 Sep 2023 16:12:20 +0200
Subject: [PATCH] feat: add updating icons to claims

---
 static-src/kx-claim.js    | 1 +
 static-src/kx-styles.scss | 8 ++++++++
 views/profile.pug         | 1 +
 3 files changed, 10 insertions(+)

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
                     |  [