fix: some ui fixies

src/components/avatar/avatar.css

@@ -1,5 +1,5 @@
 :host {
-  @apply inline-flex items-center justify-center relative overflow-hidden h-10 w-10 bg-accent rounded-full shrink-0;
+  @apply inline-flex items-center justify-center relative overflow-hidden h-10 w-10 bg-surface rounded-full shrink-0;
 }
 
 :host span {
@@ -28,6 +28,11 @@
 
 :host([size='xl']) svg,
 :host([size='xl']) {
+  @apply h-20 w-20 text-xl;
+}
+
+:host([size='2xl']) svg,
+:host([size='2xl']) {
   @apply h-36 w-36 text-xl;
 }
 

src/components/credential-card/d-credential-card.tsx

@@ -57,7 +57,7 @@ export class DCredentialCard {
             <div class="w-full flex justify-between items-start">
               <div class="inline-flex flex-col gap-3">
                 <div class="flex gap-2 items-start">
-                  <d-avatar name={this.name} src={this.logoSrc} size="s"></d-avatar>
+                  <d-avatar name={this.name} src={this.logoSrc} size="s" shape="square"></d-avatar>
                   <d-text size="xl" class="not-italic font-normal leading-7">
                     {this.name}
                   </d-text>

src/components/credential-card/test/d-credential-card.spec.tsx

@@ -17,7 +17,7 @@ describe('d-credential-card', () => {
               <div class="flex items-start justify-between w-full">
                 <div class="flex-col gap-3 inline-flex">
                   <div class="flex gap-2 items-start">
-                    <d-avatar size="s"></d-avatar>
+                    <d-avatar shape="square" size="s"></d-avatar>
                     <d-text class="font-normal leading-7 not-italic" size="xl"></d-text>
                   </div>
                 </div>

src/components/credential-detail/d-credential-detail.tsx

@@ -15,16 +15,16 @@ export class DCredentialDetail {
   render() {
     const longDescription = this.longDescription ? this.longDescription : '';
     return (
-      <Host>
-        <div class="frame">
-          <div class="heading">
-            <span class="name">{this.name}</span>
+      <Host class="w-full inline-flex flex-col items-start gap-2.5 px-0 py-5 rounded-lg bg-primary">
+        <div class="w-full flex flex-col items-start px-5 py-0 bg-primary">
+          <div class="flex text-on text-xl not-italic font-semibold items-center gap-2">
+            <span class="text-on text-2xl not-italic font-semibold leading-[20.5px] tracking-[-0.5px]">{this.name}</span>
           </div>
           <div class="info">
-            <span class="short-description">{this.description}</span>
-            <div class="details">
-              <span class="long-description">{longDescription}</span>
-              <span class="issuer">{this.issuer}</span>
+            <span class="text-on text-base not-italic font-medium leading-[20.5px] tracking-[-0.5px]">{this.description}</span>
+            <div class="flex flex-col items-start gap-4">
+              <span class="text-on-alt text-xs not-italic font-normal leading-[150%] tracking-[-0.5px]">{longDescription}</span>
+              <span class="self-stretch overflow-hidden text-on text-ellipsis text-xs not-italic font-normal leading-4">{this.issuer}</span>
             </div>
           </div>
           <div class="w-full">

src/components/credential-detail/test/d-credential-detail.spec.tsx

@@ -8,17 +8,17 @@ describe('d-credential-detail', () => {
       html: `<d-credential-detail></d-credential-detail>`,
     });
     expect(page.root).toEqualHtml(`
-      <d-credential-detail>
-        <mock:shadow-root>
-         <div class="frame">
-            <div class="heading">
-              <span class="name"></span>
-            </div>
+      <d-credential-detail class="bg-primary flex-col gap-2.5 inline-flex items-start px-0 py-5 rounded-lg w-full">
+       <mock:shadow-root>
+         <div class="bg-primary flex flex-col items-start px-5 py-0 w-full">
+           <div class="flex font-semibold gap-2 items-center not-italic text-on text-xl">
+             <span class="font-semibold leading-[20.5px] not-italic text-2xl text-on tracking-[-0.5px]"></span>
+           </div>
            <div class="info">
-             <span class="short-description"></span>
-             <div class="details">
-               <span class="long-description"></span>
-               <span class="issuer"></span>
+             <span class="font-medium leading-[20.5px] not-italic text-base text-on tracking-[-0.5px]"></span>
+             <div class="flex flex-col gap-4 items-start">
+               <span class="font-normal leading-[150%] not-italic text-on-alt text-xs tracking-[-0.5px]"></span>
+               <span class="font-normal leading-4 not-italic overflow-hidden self-stretch text-ellipsis text-on text-xs"></span>
              </div>
            </div>
            <div class="w-full">

src/components/d-did-box/d-did-box.tsx

@@ -18,7 +18,7 @@ export class DDidBox {
     return (
       <Host>
         <d-text size="s" class="text-gray">
-          <a class="flex" href={`https://explorer.did.dyne.org/details/did:${fullId}`}>
+          <a class="flex" href={`https://explorer.did.dyne.org/details/did:dyne:${fullId}`}>
             <d-text size="s" class="w-full flex justify-center flex-wrap space-y-0.5">
               <span class="w-5 h-5 flex mr-1">
                 <svg xmlns="http://www.w3.org/2000/svg" width="24" height="24" viewBox="0 0 24 24" fill="none">

src/components/d-organizations/d-organizations.tsx

@@ -18,7 +18,7 @@ export class DOrganizations {
         <d-heading size="xs" class="w-full block text-center">
           {this.heading}
         </d-heading>
-        <div class="mx-auto mt-8 flex w-11/12 flex-wrap items-center justify-between gap-2">
+        <div class="mx-auto mt-8 flex w-11/12 flex-wrap items-center gap-4 space-x-6">
           <slot />
         </div>
       </Host>

src/components/d-organizations/test/d-organizations.spec.tsx

@@ -11,7 +11,7 @@ describe('d-organizations', () => {
       <d-organizations class="flex flex-col items-center">
         <mock:shadow-root>
           <d-heading class="block text-center w-full" size="xs"></d-heading>
-          <div class="flex flex-wrap gap-2 items-center justify-between mt-8 mx-auto w-11/12">
+          <div class="flex flex-wrap gap-4 items-center mt-8 mx-auto space-x-6 w-11/12">
             <slot></slot>
           </div>
         </mock:shadow-root>

src/components/types.ts

@@ -1,4 +1,4 @@
-const SizeOptions = 'xs s m l xl'.split(' ');
+const SizeOptions = 'xs s m l xl 2xl'.split(' ');
 export const SizeArgTypes = {
   defaultValue: 'm',
   options: SizeOptions,