From 4d142b902171ed4fe2fa8ef194db0d6a254c0883 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Thu, 9 Sep 2021 10:35:17 +0300
Subject: [PATCH] Layout PersonPresenter (#168)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/PersonPresenter.svelte     | 23 +++++++++++++++++--
 1 file changed, 21 insertions(+), 2 deletions(-)

diff --git a/plugins/contact-resources/src/components/PersonPresenter.svelte b/plugins/contact-resources/src/components/PersonPresenter.svelte
index 8f1491d210..3621e9ae40 100644
--- a/plugins/contact-resources/src/components/PersonPresenter.svelte
+++ b/plugins/contact-resources/src/components/PersonPresenter.svelte
@@ -17,7 +17,7 @@
 <script lang="ts">
 import { getResource } from '@anticrm/platform'
 import type { Person } from '@anticrm/contact'
-import { UserInfo, getClient } from '@anticrm/presentation'
+import { Avatar, getClient } from '@anticrm/presentation'
 import { showPopup } from '@anticrm/ui'
 import view from '@anticrm/view'
 
@@ -34,5 +34,24 @@ async function onClick() {
 
 </script>
 
-<UserInfo size={'x-small'} {value} on:click={onClick}/>
+<div class="flex-row-center user-container" on:click={onClick}>
+  <Avatar size={'x-small'} />
+  <div class="overflow-label user">{value.firstName + ' ' + value.lastName}</div>
+</div>
 
+<style lang="scss">
+  .user-container {
+    cursor: pointer;
+    
+    .user {
+      margin-left: .5rem;
+      font-weight: 500;
+      text-align: left;
+      color: var(--theme-content-accent-color);
+    }
+    &:hover .user {
+      text-decoration: underline;
+      color: var(--theme-caption-color);
+    }
+  }
+</style>