From 001b00e6f6568f3d66134249fa9c1ffcc7631cdf Mon Sep 17 00:00:00 2001
From: Martin Kaintas <martinkaintas@gmail.com>
Date: Tue, 25 Jun 2024 14:14:21 +0300
Subject: [PATCH] fix: alignment on AccountInfo

---
 src/popup/components/AccountInfo.vue      | 10 +++++++---
 src/popup/components/AddressTruncated.vue |  1 +
 src/popup/components/Avatar.vue           |  2 +-
 3 files changed, 9 insertions(+), 4 deletions(-)

diff --git a/src/popup/components/AccountInfo.vue b/src/popup/components/AccountInfo.vue
index 88868ddfb..39d65f666 100644
--- a/src/popup/components/AccountInfo.vue
+++ b/src/popup/components/AccountInfo.vue
@@ -70,7 +70,7 @@ import { getDefaultAccountLabel } from '@/utils';
 import { ProtocolAdapterFactory } from '@/lib/ProtocolAdapterFactory';
 import { useAeNames } from '@/protocols/aeternity/composables/aeNames';
 
-import Avatar from './Avatar.vue';
+import Avatar, { type AvatarSize } from './Avatar.vue';
 import CopyText from './CopyText.vue';
 import Truncate from './Truncate.vue';
 import AddressTruncated from './AddressTruncated.vue';
@@ -84,7 +84,7 @@ export default defineComponent({
   },
   props: {
     account: { type: Object as PropType<Partial<IAccount>>, required: true },
-    avatarSize: { type: String, default: 'lg' },
+    avatarSize: { type: String as PropType<AvatarSize>, default: 'lg' },
     customName: { type: String, default: null },
     canCopyAddress: Boolean,
     isMultisig: Boolean,
@@ -133,13 +133,17 @@ export default defineComponent({
   }
 
   .account-details {
+    display: flex;
+    flex-direction: column;
+    justify-content: center;
+    align-items: flex-start;
+    gap: 4px;
     max-width: 250px;
     font-weight: 500;
 
     .account-name {
       @extend %face-sans-16-medium;
 
-      margin: 4px 0;
       line-height: 20px; // Avoid cutting off bottom part of some letters, e.g.: "g"
     }
 
diff --git a/src/popup/components/AddressTruncated.vue b/src/popup/components/AddressTruncated.vue
index 0956a2757..888848216 100644
--- a/src/popup/components/AddressTruncated.vue
+++ b/src/popup/components/AddressTruncated.vue
@@ -3,6 +3,7 @@
     <ProtocolIcon
       v-if="showProtocolIcon"
       :protocol="protocol"
+      icon-size="rg"
       class="protocol-icon"
     />
     <div class="address-truncated-chunks">
diff --git a/src/popup/components/Avatar.vue b/src/popup/components/Avatar.vue
index 70db87998..6ae8c1f7e 100644
--- a/src/popup/components/Avatar.vue
+++ b/src/popup/components/Avatar.vue
@@ -37,7 +37,7 @@ import { isContract } from '@/protocols/aeternity/helpers';
 import { useAeNetworkSettings } from '@/protocols/aeternity/composables';
 
 const SIZES = ['xs', 'sm', 'rg', 'md', 'lg', 'xl'] as const;
-type AvatarSize = typeof SIZES[number];
+export type AvatarSize = typeof SIZES[number];
 
 const VARIANTS = ['primary', 'grey'] as const;
 type AvatarVariant = typeof VARIANTS[number];