fix: card background for both dark and light mode (#57)

* fix: card background for both dark and light mode * test: fix credential-card
ForkbombEu · Feb 20, 2024 · 4ec07fd · 4ec07fd
1 parent 3ffa248
commit 4ec07fd
Show file tree

Hide file tree

Showing 4 changed files with 8 additions and 5 deletions.
diff --git 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
@@ -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/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">

diff --git 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');
     }
   }
 }