From e8165287a510dc6bf6e28538736d5ecc21006b15 Mon Sep 17 00:00:00 2001
From: puria <puria@dyne.org>
Date: Sat, 27 Jan 2024 21:07:59 +0100
Subject: [PATCH] refactor: moved avatar attribute to the correct place fixed
 tests

---
 src/components/avatar/avatar.css              | 30 +++++++++----------
 .../d-credential-service.tsx                  |  3 +-
 .../test/d-credential-service.spec.tsx        |  2 +-
 tailwind.config.ts                            |  2 +-
 4 files changed, 18 insertions(+), 19 deletions(-)

diff --git a/src/components/avatar/avatar.css b/src/components/avatar/avatar.css
index 516a068..fed208a 100644
--- a/src/components/avatar/avatar.css
+++ b/src/components/avatar/avatar.css
@@ -1,42 +1,42 @@
 :host {
-  @apply inline-flex items-center justify-center relative overflow-hidden h-10 w-10 bg-accent rounded-full;
+  @apply inline-flex items-center justify-center relative overflow-hidden h-10 w-10 bg-accent rounded-full shrink-0;
 }
 
 :host span {
-  @apply text-on-accent
+  @apply text-on-accent;
 }
 
-:host([size="xs"]) svg,
-:host([size="xs"]) {
+:host([size='xs']) svg,
+:host([size='xs']) {
   @apply h-6 w-6 text-xs;
 }
 
-:host([size="s"]) svg,
-:host([size="s"]) {
+:host([size='s']) svg,
+:host([size='s']) {
   @apply h-8 w-8 text-sm;
 }
 
-:host([size="m"]) svg,
-:host([size="m"]) {
+:host([size='m']) svg,
+:host([size='m']) {
   @apply h-10 w-10;
 }
 
-:host([size="l"]) svg,
-:host([size="l"]) {
+:host([size='l']) svg,
+:host([size='l']) {
   @apply h-20 w-20 text-lg;
 }
 
-:host([size="xl"]) svg,
-:host([size="xl"]) {
+:host([size='xl']) svg,
+:host([size='xl']) {
   @apply h-36 w-36 text-xl;
 }
 
-:host([shape="round"]) {
+:host([shape='round']) {
   @apply rounded-full;
 }
 
-:host([shape="square"]) {
+:host([shape='square']) {
   @apply rounded-lg;
 }
 
-@include base-component();
\ No newline at end of file
+@include base-component();
diff --git a/src/components/credential-service/d-credential-service.tsx b/src/components/credential-service/d-credential-service.tsx
index 4ca7e12..a1fcbe1 100644
--- a/src/components/credential-service/d-credential-service.tsx
+++ b/src/components/credential-service/d-credential-service.tsx
@@ -1,5 +1,4 @@
 import { Component, Host, Prop, h } from '@stencil/core';
-import 'material-symbols';
 
 @Component({
   tag: 'd-credential-service',
@@ -16,7 +15,7 @@ export class DCredentialService {
   render() {
     const content = (
       <div>
-        <d-avatar class="shrink-0" name={this.name} src={this.logoSrc} size="l"></d-avatar>
+        <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>
diff --git a/src/components/credential-service/test/d-credential-service.spec.tsx b/src/components/credential-service/test/d-credential-service.spec.tsx
index 08484f2..a0e01cc 100644
--- a/src/components/credential-service/test/d-credential-service.spec.tsx
+++ b/src/components/credential-service/test/d-credential-service.spec.tsx
@@ -12,7 +12,7 @@ describe('d-credential-service', () => {
         <mock:shadow-root>
           <div>
             <d-avatar size="l"></d-avatar>
-            <div class="grow">
+            <div class="grow truncate">
               <span class="name"></span>
               <span class="description"></span>
               <span class="issuer"></span>
diff --git a/tailwind.config.ts b/tailwind.config.ts
index 10a1755..68ab3dc 100644
--- a/tailwind.config.ts
+++ b/tailwind.config.ts
@@ -6,7 +6,7 @@ export default {
     extend: {
       fontFamily: {
         sans: ['"Gantari Variable"', 'sans-serif'],
-        icon: ['"Material Symbols Rounded"', 'sans-serif],
+        icon: ['"Material Symbols Rounded"'],
       },
       colors: {
         'surface': 'var(--surface)',