From 0ad6762116535a87190abf2d5f02a6bf08532496 Mon Sep 17 00:00:00 2001
From: puria <puria@dyne.org>
Date: Thu, 14 Mar 2024 14:13:27 +0100
Subject: [PATCH] fix: credential service minicard

---
 src/components/avatar/avatar.tsx                 |  4 ++--
 .../credential-service/d-credential-service.tsx  | 16 +++++++++-------
 src/components/credential-service/readme.md      |  2 ++
 src/components/text/readme.md                    |  2 ++
 4 files changed, 15 insertions(+), 9 deletions(-)

diff --git a/src/components/avatar/avatar.tsx b/src/components/avatar/avatar.tsx
index 2cd7062..65141a8 100644
--- a/src/components/avatar/avatar.tsx
+++ b/src/components/avatar/avatar.tsx
@@ -8,8 +8,8 @@ import { Shape, Size } from '../types';
 })
 export class Avatar {
   @Prop() name?: string;
-  @Prop() size?: Size = 'm';
-  @Prop() shape?: Shape = 'round';
+  @Prop({ reflect: true }) size?: Size = 'm';
+  @Prop({ reflect: true }) shape?: Shape = 'round';
   @Prop({ reflect: true }) src?: string;
 
   @State() error: boolean = false;
diff --git a/src/components/credential-service/d-credential-service.tsx b/src/components/credential-service/d-credential-service.tsx
index b41f68a..bfe214b 100644
--- a/src/components/credential-service/d-credential-service.tsx
+++ b/src/components/credential-service/d-credential-service.tsx
@@ -16,15 +16,17 @@ export class DCredentialService {
     const content = (
       <div>
         <d-avatar name={this.name} src={this.logoSrc} size="l"></d-avatar>
-        <div class="grow truncate">
-          <span class="name">{this.name}</span>
-          <span class="description">{this.description}</span>
-          <span class="issuer">{this.issuer}</span>
+        <div class="flex flex-col grow">
+          <d-text size="l">{this.name}</d-text>
+          <d-text size="s">{this.description}</d-text>
+          <d-text size="xs">{this.issuer}</d-text>
         </div>
         {this.href && (
-          <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
-            <path d="M3 12L21 12M21 12L12.5 20.5M21 12L12.5 3.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
-          </svg>
+          <div class="shrink-0">
+            <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="none">
+              <path d="M3 12L21 12M21 12L12.5 20.5M21 12L12.5 3.5" stroke-width="1.5" stroke-linecap="round" stroke-linejoin="round" />
+            </svg>
+          </div>
         )}
       </div>
     );
diff --git a/src/components/credential-service/readme.md b/src/components/credential-service/readme.md
index 120324b..e2be2a1 100644
--- a/src/components/credential-service/readme.md
+++ b/src/components/credential-service/readme.md
@@ -21,11 +21,13 @@
 ### Depends on
 
 - [d-avatar](../avatar)
+- [d-text](../text)
 
 ### Graph
 ```mermaid
 graph TD;
   d-credential-service --> d-avatar
+  d-credential-service --> d-text
   style d-credential-service fill:#f9f,stroke:#333,stroke-width:4px
 ```
 
diff --git a/src/components/text/readme.md b/src/components/text/readme.md
index a81a129..a338e3b 100644
--- a/src/components/text/readme.md
+++ b/src/components/text/readme.md
@@ -17,11 +17,13 @@
 
 ### Used by
 
+ - [d-credential-service](../credential-service)
  - [d-input](../input)
 
 ### Graph
 ```mermaid
 graph TD;
+  d-credential-service --> d-text
   d-input --> d-text
   style d-text fill:#f9f,stroke:#333,stroke-width:4px
 ```