From 0f224f61e37238b5e686803e0a8251aeb71b9b7a Mon Sep 17 00:00:00 2001
From: phoebus-84 <ennio@dyne.org>
Date: Mon, 19 Feb 2024 21:43:56 +0100
Subject: [PATCH 1/2] fix: card background for both dark and light mode

---
 src/components/credential-card/d-credential-card.css | 3 ++-
 src/components/credential-card/d-credential-card.tsx | 5 ++---
 src/global/global.css                                | 3 +++
 3 files changed, 7 insertions(+), 4 deletions(-)

diff --git a/src/components/credential-card/d-credential-card.css b/src/components/credential-card/d-credential-card.css
index d6d6640..ac3d3d9 100644
--- a/src/components/credential-card/d-credential-card.css
+++ b/src/components/credential-card/d-credential-card.css
@@ -1,5 +1,6 @@
 :host {
-  @apply w-full inline-flex flex-col items-start gap-2.5 px-5 py-5 rounded-lg bg-primary bg-no-repeat bg-cover;
+  @apply w-full inline-flex flex-col items-start gap-2.5 px-5 py-5 rounded-lg bg-no-repeat bg-cover bg-gradient-to-r from-primary to-transparent;
+  background-image: var(--background-card-url);
 }
 
 .between {
diff --git a/src/components/credential-card/d-credential-card.tsx b/src/components/credential-card/d-credential-card.tsx
index f284b8a..67d3d4f 100644
--- a/src/components/credential-card/d-credential-card.tsx
+++ b/src/components/credential-card/d-credential-card.tsx
@@ -1,4 +1,4 @@
-import { Component, Host, Prop, getAssetPath, h } from '@stencil/core';
+import { Component, Host, Prop, h } from '@stencil/core';
 
 const verifiedUser = (
   <svg width="22" height="21" viewBox="0 0 22 21" fill="none" xmlns="http://www.w3.org/2000/svg">
@@ -43,9 +43,8 @@ export class DCredentialCard {
   @Prop() expirationDate?: string;
 
   render() {
-    const imageSrc = getAssetPath('./assets/rect-dark.png');
     return (
-      <Host style={{ 'background-image': `url(${imageSrc})` }}>
+      <Host>
         <div class="between">
           <div class="info">
             <div class="heading">
diff --git a/src/global/global.css b/src/global/global.css
index e3a5287..d514034 100644
--- a/src/global/global.css
+++ b/src/global/global.css
@@ -26,6 +26,7 @@
     --error: #ee342b;
     --sans-font-family: 'Gantari Variable', 'sans-serif';
     --icon-font-family: 'Material Symbols Rounded';
+    --background-card-url: url('/dist/didroom-components/assets/rect.png');
   }
 
   .dark {
@@ -38,6 +39,7 @@
     --success: #4ecb71;
     --warning: #ff9601;
     --error: #ff443b;
+    --background-card-url: url('/dist/didroom-components/assets/rect-dark.png');
   }
 
   @media (prefers-color-scheme: dark) {
@@ -51,6 +53,7 @@
       --success: #4ecb71;
       --warning: #ff9601;
       --error: #ff443b;
+      --background-card-url: url('/dist/didroom-components/assets/rect-dark.png');
     }
   }
 }

From c71f89ab5a71f6163aac09a9fc6c4eaa67b009c6 Mon Sep 17 00:00:00 2001
From: phoebus-84 <ennio@dyne.org>
Date: Tue, 20 Feb 2024 02:23:17 +0100
Subject: [PATCH 2/2] test: fix credential-card

---
 src/components/credential-card/test/d-credential-card.spec.tsx | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/components/credential-card/test/d-credential-card.spec.tsx b/src/components/credential-card/test/d-credential-card.spec.tsx
index bc49019..64192b9 100644
--- a/src/components/credential-card/test/d-credential-card.spec.tsx
+++ b/src/components/credential-card/test/d-credential-card.spec.tsx
@@ -8,7 +8,7 @@ describe('d-credential-card', () => {
       html: `<d-credential-card></d-credential-card>`,
     });
     expect(page.root).toEqualHtml(`
-      <d-credential-card style="background-image: url(/assets/rect-dark.png);">
+      <d-credential-card>
         <mock:shadow-root>
           <div class="between">
             <div class="info">