From 1bdc5c98d601cc45d87ebed60fdfee706208d870 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Mon, 4 Oct 2021 20:31:12 +0300
Subject: [PATCH] Fix Channels, CircleButton. Update icons for social. (#232)

Signed-off-by: Alexander Platov <sas_lord@mail.ru>
---
 .../src/components/Channels.svelte            |  4 +--
 .../ui/src/components/CircleButton.svelte     |  5 ++-
 plugins/contact-assets/assets/icons.svg       | 35 ++++++++++---------
 .../src/components/EditCandidate.svelte       | 30 ++++++++--------
 .../src/components/SocialEditor.svelte        |  1 -
 5 files changed, 39 insertions(+), 36 deletions(-)

diff --git a/packages/presentation/src/components/Channels.svelte b/packages/presentation/src/components/Channels.svelte
index b67626061c..dcd0f4b68a 100644
--- a/packages/presentation/src/components/Channels.svelte
+++ b/packages/presentation/src/components/Channels.svelte
@@ -107,8 +107,8 @@
 
       .small {
         transform-origin: center center;
-        transform: scale(.75);
-        opacity: .4;
+        transform: scale(.55);
+        opacity: 1;
       }
 
       &-icon {
diff --git a/packages/ui/src/components/CircleButton.svelte b/packages/ui/src/components/CircleButton.svelte
index 8a62492f33..fa0b859f6c 100644
--- a/packages/ui/src/components/CircleButton.svelte
+++ b/packages/ui/src/components/CircleButton.svelte
@@ -20,9 +20,10 @@
 
   export let icon: Asset | AnySvelteComponent
   export let size: 'small' | 'medium' | 'large' = 'large'
+  export let selected: boolean = false
 </script>
 
-<div class="icon-button icon-{size}" on:click>
+<div class="icon-button icon-{size}" class:selected on:click>
   <div class="content">
     {#if typeof (icon) === 'string'}
       <Icon {icon} size={'small'}/>
@@ -47,12 +48,14 @@
       transform: scale(.75);
       pointer-events: none;
     }
+    &.selected { background-color: var(--theme-button-bg-hovered); }
     &:hover { border-color: var(--theme-bg-focused-border); }
     &:active { background-color: var(--theme-bg-accent-color); }
   }
   .icon-small {
     width: 1.5rem;
     height: 1.5rem;
+    .content { transform: scale(.55); }
   }
   .icon-medium {
     width: 1.75rem;
diff --git a/plugins/contact-assets/assets/icons.svg b/plugins/contact-assets/assets/icons.svg
index 98f077a9df..6abfc11b47 100644
--- a/plugins/contact-assets/assets/icons.svg
+++ b/plugins/contact-assets/assets/icons.svg
@@ -1,42 +1,43 @@
 <svg xmlns="http://www.w3.org/2000/svg" style="display: none;">
   <symbol id="phone" viewBox="0 0 16 16">
-    <path d="M12,9.4l1.3,1.3c0.3,0.3,0.3,0.7,0,1c-1.5,1.5-3.9,1.7-5.6,0.4l-0.1-0.1c-1.3-1-2.4-2.1-3.4-3.4L4,8.6 C2.8,6.8,2.9,4.4,4.4,2.9c0.3-0.3,0.7-0.3,1,0l1.3,1.3c0.4,0.4,0.4,1,0,1.4L5.9,6.5C5.7,6.7,5.7,7,5.8,7.2C6.5,8.6,7.6,9.7,9,10.4 c0.2,0.1,0.5,0.1,0.7-0.1l0.9-0.9C11,9,11.6,9,12,9.4z"/>
+    <path d="M13.6,10.4l2,2c0.5,0.5,0.5,1.1,0,1.5c-2.3,2.3-6,2.6-8.7,0.6l-0.2-0.2c-2-1.5-3.7-3.2-5.3-5.3l-0.3,0 c-1.9-2.8-1.7-6.5,0.6-8.8c0.5-0.5,1.1-0.5,1.5,0l2,2C6.1,3,6.1,4,5.4,4.6L4.2,6C3.9,6.3,3.9,6.7,4.1,7C5.1,9.2,6.8,10.9,9,12 c0.3,0.2,0.8,0.2,1.1-0.2l1.4-1.4C12.1,9.8,13,9.8,13.6,10.4z"/>
   </symbol>
   <symbol id="email" viewBox="0 0 16 16">
-    <path d="M2.8 4.1c-.3.3-.3.8-.3 1.7v4.6c0 .9 0 1.4.3 1.7.3.3.8.3 1.7.3h7c.9 0 1.4 0 1.7-.3.3-.3.3-.8.3-1.7V5.8c0-.9 0-1.4-.3-1.7-.3-.3-.8-.3-1.7-.3h-7c-.9 0-1.4 0-1.7.3zm1.8 1.7c-.2-.1-.5-.1-.7.2-.1.2-.1.5.2.7l3.1 2.1c.5.3 1.2.3 1.7 0L12 6.7c.2-.2.3-.5.1-.7-.2-.2-.5-.3-.7-.1l-3.1 2c-.2.1-.4.1-.6 0L4.6 5.8z" fill-rule="evenodd" clip-rule="evenodd"/>  </symbol>
+    <path d="M0.4,2.2C0,2.6,0,3.3,0,4.7v6.7c0,1.3,0,2,0.4,2.5s1.2,0.4,2.5,0.4h10.2c1.3,0,2,0,2.5-0.4 c0.4-0.4,0.4-1.2,0.4-2.5V4.7c0-1.3,0-2-0.4-2.5c-0.4-0.4-1.2-0.4-2.5-0.4H2.9C1.6,1.7,0.9,1.7,0.4,2.2z M3.1,4.7 C2.8,4.5,2.3,4.5,2,4.9C1.9,5.2,1.9,5.7,2.3,6L6.8,9c0.7,0.4,1.7,0.4,2.5,0L13.8,6c0.3-0.3,0.4-0.7,0.1-1s-0.7-0.4-1-0.1L8.4,7.7 c-0.3,0.1-0.6,0.1-0.9,0L3.1,4.7z" fill-rule="evenodd" clip-rule="evenodd"/>
+  </symbol>
   <symbol id="discord" viewBox="0 0 16 16">
-    <path d="M12.2,4.7C11.4,4.4,10.6,4.1,9.7,4C9.6,4.2,9.5,4.4,9.4,4.6c-0.9-0.1-1.8-0.1-2.7,0C6.5,4.4,6.4,4.2,6.3,4 C5.4,4.1,4.6,4.4,3.8,4.7c-1.6,2.2-2,4.4-1.8,6.5c1,0.7,2,1.2,3,1.5c0.2-0.3,0.5-0.7,0.7-1c-0.4-0.1-0.7-0.3-1-0.5 c0.1-0.1,0.2-0.1,0.3-0.2c2,0.9,4.1,0.9,6.1,0c0.1,0.1,0.2,0.1,0.3,0.2c-0.3,0.2-0.7,0.3-1,0.5c0.2,0.4,0.4,0.7,0.7,1 c1-0.3,2-0.7,3-1.5C14.2,8.8,13.5,6.6,12.2,4.7z M6,9.9c-0.6,0-1.1-0.5-1.1-1.2c0-0.6,0.5-1.2,1.1-1.2c0.6,0,1.1,0.5,1.1,1.2 C7.1,9.4,6.6,9.9,6,9.9z M10,9.9c-0.6,0-1.1-0.5-1.1-1.2c0-0.6,0.5-1.2,1.1-1.2c0.6,0,1.1,0.5,1.1,1.2C11.1,9.4,10.6,9.9,10,9.9z"/>
+    <path d="M13.5,3.2c-1.1-0.4-2.1-0.8-3.3-0.9c-0.1,0.3-0.3,0.5-0.4,0.8c-1.2-0.1-2.4-0.1-3.6,0C6,2.8,5.9,2.5,5.7,2.3 C4.5,2.4,3.5,2.8,2.4,3.2C0.3,6.1-0.2,9,0.1,11.8c1.3,0.9,2.6,1.6,3.9,2c0.3-0.4,0.7-0.9,0.9-1.3C4.4,12.3,4,12,3.6,11.8 c0.1-0.1,0.3-0.1,0.4-0.3c2.6,1.2,5.4,1.2,8,0c0.1,0.1,0.3,0.1,0.4,0.3c-0.4,0.3-0.9,0.4-1.3,0.7c0.3,0.5,0.5,0.9,0.9,1.3 c1.3-0.4,2.6-0.9,3.9-2C16.1,8.6,15.2,5.7,13.5,3.2z M5.3,10c-0.8,0-1.4-0.7-1.4-1.6c0-0.8,0.7-1.6,1.4-1.6s1.4,0.7,1.4,1.6 S6.1,10,5.3,10z M10.6,10c-0.8,0-1.4-0.7-1.4-1.6c0-0.8,0.7-1.6,1.4-1.6c0.8,0,1.4,0.7,1.4,1.6S11.4,10,10.6,10z"/>
   </symbol>
   <symbol id="facebook" viewBox="0 0 16 16">
-    <path d="M11.1,8.7l0.3-2.2H9.3V5.1C9.3,4.6,9.6,4,10.6,4h1V2.1c0,0-0.9-0.1-1.7-0.1C8.1,2,6.9,3,6.9,4.9v1.6H5v2.2h1.9v5.2 C7.3,14,7.7,14,8.1,14c0.4,0,0.8,0,1.2-0.1V8.7H11.1z"/>
+    <path d="M12,8.9L12.4,6H9.6V4.1c0-0.7,0.4-1.5,1.7-1.5h1.3V0.1c0,0-1.2-0.1-2.3-0.1c-2.4,0-4,1.3-4,3.9V6H3.9v2.9h2.5v6.9 C7,16,7.5,16,8,16c0.5,0,1.1,0,1.6-0.1V8.9H12z"/>
   </symbol>
   <symbol id="instagram" viewBox="0 0 16 16">
-    <path d="M11.3,3.8c-0.5,0-0.9,0.4-0.9,0.9s0.4,0.9,0.9,0.9c0.5,0,0.9-0.4,0.9-0.9S11.8,3.8,11.3,3.8z"/>
-    <path d="M8,5C6.3,5,5,6.3,5,8s1.3,3,3,3s3-1.3,3-3S9.7,5,8,5z M8,9.8C7,9.8,6.2,9,6.2,8C6.2,7,7,6.2,8,6.2 C9,6.2,9.8,7,9.8,8C9.8,9,9,9.8,8,9.8z"/>
-    <path d="M13.6,4c-0.3-0.7-0.9-1.2-1.6-1.6C11.3,2,10.3,2,8.2,2H7.8c-2,0-3,0-3.8,0.4C3.3,2.7,2.7,3.3,2.4,4 C2,4.7,2,5.7,2,7.8v0.5c0,2,0,3,0.4,3.8c0.3,0.7,0.9,1.2,1.6,1.6C4.7,14,5.7,14,7.8,14h0.5c2,0,3,0,3.8-0.4 c0.7-0.3,1.2-0.9,1.6-1.6C14,11.3,14,10.3,14,8.2V7.8C14,5.7,14,4.7,13.6,4z M12.8,8.2c0,1,0,1.7,0,2.3c0,0.5-0.1,0.8-0.2,1 c-0.2,0.5-0.6,0.8-1,1c-0.2,0.1-0.5,0.2-1,0.2c-0.5,0-1.2,0-2.3,0H7.8c-1,0-1.7,0-2.3,0c-0.5,0-0.8-0.1-1-0.2c-0.5-0.2-0.8-0.6-1-1 c-0.1-0.2-0.2-0.5-0.2-1c0-0.5,0-1.2,0-2.3V7.8c0-1,0-1.7,0-2.3c0-0.5,0.1-0.8,0.2-1c0.2-0.5,0.6-0.8,1-1c0.2-0.1,0.5-0.2,1-0.2 c0.5,0,1.2,0,2.3,0h0.5c1,0,1.7,0,2.3,0c0.5,0,0.8,0.1,1,0.2c0.5,0.2,0.8,0.6,1,1c0.1,0.2,0.2,0.5,0.2,1c0,0.5,0,1.2,0,2.3V8.2z"/>
+    <path d="M12.4,2.4c-0.7,0-1.2,0.5-1.2,1.2s0.5,1.2,1.2,1.2c0.7,0,1.2-0.5,1.2-1.2S13.1,2.4,12.4,2.4z"/>
+    <path d="M8,4C5.7,4,4,5.7,4,8s1.7,4,4,4s4-1.7,4-4S10.3,4,8,4z M8,10.4c-1.3,0-2.4-1.1-2.4-2.4S6.7,5.6,8,5.6 s2.4,1.1,2.4,2.4S9.3,10.4,8,10.4z"/>
+    <path d="M15.5,2.7c-0.4-0.9-1.2-1.6-2.1-2.1C12.4,0,11.1,0,8.3,0H7.7c-2.7,0-4,0-5.1,0.5C1.7,0.9,0.9,1.7,0.5,2.7 C0,3.6,0,4.9,0,7.7v0.7c0,2.7,0,4,0.5,5.1c0.4,0.9,1.2,1.6,2.1,2.1C3.6,16,4.9,16,7.7,16h0.7c2.7,0,4,0,5.1-0.5 c0.9-0.4,1.6-1.2,2.1-2.1C16,12.4,16,11.1,16,8.3V7.7C16,4.9,16,3.6,15.5,2.7z M14.4,8.3c0,1.3,0,2.3,0,3.1c0,0.7-0.1,1.1-0.3,1.3 c-0.3,0.7-0.8,1.1-1.3,1.3c-0.3,0.1-0.7,0.3-1.3,0.3s-1.6,0-3.1,0H7.7c-1.3,0-2.3,0-3.1,0c-0.7,0-1.1-0.1-1.3-0.3 c-0.7-0.3-1.1-0.8-1.3-1.3c-0.1-0.3-0.3-0.7-0.3-1.3c0-0.7,0-1.6,0-3.1V7.7c0-1.3,0-2.3,0-3.1C1.7,4,1.9,3.6,2,3.3 C2.3,2.7,2.8,2.3,3.3,2C3.6,1.9,4,1.7,4.7,1.7s1.6,0,3.1,0h0.7c1.3,0,2.3,0,3.1,0c0.7,0,1.1,0.1,1.3,0.3c0.7,0.3,1.1,0.8,1.3,1.3 c0.1,0.3,0.3,0.7,0.3,1.3s0,1.6,0,3.1V8.3z"/>
   </symbol>
   <symbol id="linkedin" viewBox="0 0 16 16">
-    <path d="M3.4,2C2.6,2,2,2.6,2,3.4c0,0.7,0.6,1.4,1.4,1.4c0.8,0,1.4-0.6,1.4-1.4C4.9,2.6,4.2,2,3.4,2z"/>
-    <rect x="2.2" y="5.7" width="2.5" height="7.5"/>
-    <path d="M11.2,5.6c-1.3,0-2.1,0.6-2.5,1.1v-1H6.2v7.5h2.5c0,0,0-2.4,0-3.8c0-0.9,0.3-1.8,1.5-1.8c1.4,0,1.4,1.2,1.3,2.1 c0,1.2,0,2.4,0,3.6H14v-4C14,6.7,13.3,5.6,11.2,5.6z"/>
+    <path d="M1.9,0.5C0.8,0.5,0,1.3,0,2.3c0,0.9,0.8,1.9,1.9,1.9s1.9-0.8,1.9-1.9C3.9,1.3,2.9,0.5,1.9,0.5z"/>
+    <rect x="0.3" y="5.4" width="3.3" height="10"/>
+    <path d="M12.3,5.3c-1.7,0-2.8,0.8-3.3,1.5V5.4H5.6v10h3.3c0,0,0-3.2,0-5.1c0-1.2,0.4-2.4,2-2.4c1.9,0,1.9,1.6,1.7,2.8 c0,1.6,0,3.2,0,4.8H16v-5.3C16,6.7,15.1,5.3,12.3,5.3z"/>
   </symbol>
   <symbol id="telegram" viewBox="0 0 16 16">
-    <path d="M13.4,3.9c0.1-0.6-0.5-1-1-0.8L2.3,7.5c-0.4,0.2-0.3,0.7,0,0.8L4.4,9c0.4,0.1,0.8,0.1,1.2-0.2l4.7-3.3 c0.1-0.1,0.3,0.1,0.2,0.2L7.1,9.3c-0.3,0.3-0.3,0.9,0.1,1.2l3.8,2.4c0.4,0.3,1,0,1.1-0.5L13.4,3.9z"/>
+    <path d="M16,2.2c0.1-0.8-0.7-1.4-1.4-1.1L0.4,7.2c-0.6,0.3-0.4,1,0,1.1l3,1C3.9,9.5,4.5,9.5,5,9.1l6.6-4.6c0.1-0.1,0.4,0.1,0.3,0.3 L7.1,9.8c-0.4,0.4-0.4,1.3,0.1,1.7l5.3,3.4c0.6,0.4,1.4,0,1.5-0.7L16,2.2z"/>
   </symbol>
   <symbol id="twitter" viewBox="0 0 16 16">
-    <path d="M5.8,12.9c-1.4,0-2.7-0.4-3.8-1.1c0.9,0.1,2.6-0.1,3.6-1.1C4,10.6,3.4,9.5,3.3,9c0.1,0,0.7,0.1,1.1,0c-1.8-0.4-2-2-2-2.4 c0.3,0.2,0.9,0.3,1.1,0.3c-1.6-1.2-1-2.9-0.8-3.3C3.9,5.1,5.7,6,7.9,6.1c0-0.2-0.1-0.4-0.1-0.6C7.8,4.1,8.9,3,10.3,3 c0.7,0,1.4,0.3,1.8,0.8c0.5-0.1,1.2-0.4,1.6-0.6c-0.2,0.6-0.7,1.2-1.1,1.4c0,0,0,0,0,0c0.3,0,1.1-0.2,1.4-0.4 c-0.2,0.4-0.7,1-1.2,1.3C12.9,9.4,9.8,12.9,5.8,12.9z"/>
+    <path d="M5.1,14.6c-1.9,0-3.6-0.5-5.1-1.5c1.2,0.1,3.5-0.1,4.8-1.5c-2.1-0.1-2.9-1.6-3.1-2.3c0.1,0,0.9,0.1,1.5,0 C0.8,8.9,0.5,6.7,0.5,6.2C0.9,6.5,1.7,6.6,2,6.6C-0.1,5,0.7,2.7,0.9,2.2c1.6,2,4,3.2,6.9,3.3c0-0.3-0.1-0.5-0.1-0.8 c0-1.9,1.5-3.3,3.3-3.3c0.9,0,1.9,0.4,2.4,1.1c0.7-0.1,1.6-0.5,2.1-0.8c-0.3,0.8-0.9,1.6-1.5,1.9l0,0c0.4,0,1.5-0.3,1.9-0.5 c-0.3,0.5-0.9,1.3-1.6,1.7C14.5,9.9,10.4,14.6,5.1,14.6z"/>
   </symbol>
   <symbol id="vk" viewBox="0 0 16 16">
-    <path d="M12.2,9.4C12,9.2,12,9,12.1,8.9c0.2-0.5,2.7-3.5,1.7-3.5c-0.7,0-1.6,0-2.3,0c-0.1,0-0.2,0.1-0.3,0.2 c-0.4,0.9-0.9,2.1-1.7,2.9c-0.1,0.1-0.2,0.1-0.3,0c-0.5-0.5,0-2.4-0.3-3.2C8.9,5.2,8.7,5.1,8.6,5.1C7.9,4.9,6.3,5,6,5.3 C6,5.4,5.9,5.5,6,5.5c0.2,0,0.4,0.1,0.5,0.3c0.2,0.4,0.3,2.7-0.2,2.7c-0.6,0-1.5-2.3-1.8-2.9C4.5,5.4,4.3,5.3,4.1,5.3l-1.7,0 C2.1,5.3,1.9,5.5,2,5.8c0.9,2.2,2.8,6.5,5.8,6.4c0.3,0,0.8,0.1,1-0.1c0.3-0.4-0.1-1.2,0.5-1.5c0.1-0.1,0.3,0,0.4,0.1 c0.6,0.5,0.9,1.3,1.7,1.5c0.1,0,0.2,0.1,0.3,0l1.6,0c0.3,0,0.6-0.1,0.5-0.5C13.7,10.9,12.8,10.1,12.2,9.4z"/>
+    <path d="M13.6,9c-0.3-0.3-0.3-0.5-0.1-0.7c0.3-0.7,3.6-4.6,2.3-4.6c-0.9,0-2.1,0-3.1,0c-0.1,0-0.3,0.1-0.4,0.3 C11.7,5.2,11,6.8,10,7.8C9.9,8,9.7,8,9.6,7.8c-0.7-0.7,0-3.2-0.4-4.2c0-0.1-0.3-0.3-0.4-0.3C7.9,3.1,5.7,3.2,5.3,3.6 c0,0.1-0.1,0.3,0,0.3C5.6,3.9,5.9,4,6,4.3c0.3,0.5,0.4,3.6-0.3,3.6c-0.8,0-2-3.1-2.4-3.8c0-0.3-0.3-0.4-0.5-0.4H0.6 C0.2,3.6-0.1,3.9,0,4.3c1.2,2.9,3.7,8.6,7.7,8.5c0.4,0,1.1,0.1,1.3-0.1c0.4-0.5-0.1-1.6,0.7-2c0.1-0.1,0.4,0,0.5,0.1 c0.8,0.7,1.2,1.7,2.3,2c0.1,0,0.3,0.1,0.4,0H15c0.4,0,0.8-0.1,0.7-0.7C15.6,11,14.4,10,13.6,9z"/>
   </symbol>
   <symbol id="whatsapp" viewBox="0 0 16 16">
-    <path d="M11,9.2C10.6,9,9.9,8.6,9.8,8.6c-0.2-0.1-0.2,0-0.3,0.1C9.3,8.8,9,9.2,8.9,9.3c-0.1,0.1-0.2,0-0.3,0 C8.4,9.2,7.8,8.9,7.3,8.4c-0.6-0.6-0.6-0.8-0.8-1c-0.1-0.1,0-0.2,0-0.3c0.1-0.2,0.3-0.4,0.4-0.5c0.1-0.1,0-0.3,0-0.4 C6.8,5.8,6.6,5.4,6.5,5.2C6.4,4.9,6.1,5,5.9,5c-0.4,0-1,0.5-1,1.4C4.9,7,5.2,7.8,6.3,9c1,1.1,2.4,1.7,3.5,1.7c1.1,0,1.4-1,1.4-1.3 C11.2,9.2,11.1,9.2,11,9.2z"/>
-    <path d="M8,2C4.7,2,2,4.7,2,8c0,1.1,0.3,2.1,0.8,3L2,14l3.1-0.7C6,13.7,7,14,8,14c3.3,0,6-2.7,6-6S11.3,2,8,2z M8,13.1 c-1.1,0-2.1-0.3-2.9-0.9l-1.7,0.4l0.5-1.7C3.3,10.1,2.9,9.1,2.9,8c0-2.8,2.3-5.1,5.1-5.1s5.1,2.3,5.1,5.1S10.8,13.1,8,13.1z"/>
+    <path d="M12,9.6c-0.5-0.3-1.5-0.8-1.6-0.8c-0.3-0.1-0.3,0-0.4,0.1C9.7,9.1,9.3,9.6,9.2,9.7c-0.1,0.1-0.3,0-0.4,0 C8.5,9.6,7.7,9.2,7.1,8.5C6.3,7.7,6.3,7.5,6,7.2C5.9,7.1,6,6.9,6,6.8c0.1-0.3,0.4-0.5,0.5-0.7s0-0.4,0-0.5C6.4,5.1,6.1,4.5,6,4.3 C5.9,3.9,5.5,4,5.2,4C4.7,4,3.9,4.7,3.9,5.9c0,0.8,0.4,1.9,1.9,3.5c1.3,1.5,3.2,2.3,4.7,2.3s1.9-1.3,1.9-1.7 C12.3,9.6,12.1,9.6,12,9.6z"/>
+    <path d="M8,0C3.6,0,0,3.6,0,8c0,1.5,0.4,2.8,1.1,4L0,16l4.1-0.9C5.3,15.6,6.7,16,8,16c4.4,0,8-3.6,8-8S12.4,0,8,0z M8,14.8c-1.5,0-2.8-0.4-3.9-1.2l-2.3,0.5l0.7-2.3C1.7,10.8,1.2,9.5,1.2,8c0-3.7,3.1-6.8,6.8-6.8s6.8,3.1,6.8,6.8S11.7,14.8,8,14.8z"/>
   </symbol>
   <symbol id="youtube" viewBox="0 0 16 16">
-    <path d="M13.9,5.7c-0.1-0.8-0.7-1.5-1.6-1.6C11.1,4.1,9.3,4,8,4S4.9,4.1,3.7,4.1c-0.8,0-1.5,0.7-1.6,1.6C2.1,6.5,2,7.5,2,8.3 s0.1,1.8,0.1,2.6c0.1,0.8,0.7,1.5,1.6,1.6c1.2,0.1,3,0.1,4.3,0.1s3.1-0.1,4.3-0.1c0.8,0,1.5-0.7,1.6-1.6c0.1-0.8,0.1-1.8,0.1-2.6 S13.9,6.5,13.9,5.7z M6.7,10V6.6l3.4,1.7L6.7,10z"/>
+    <path d="M15.9,4.5c-0.1-1.1-0.9-2-2.1-2.1c-1.6,0-4-0.1-5.7-0.1S3.9,2.4,2.3,2.4c-1.1,0-2,0.9-2.1,2.1C0.1,5.6,0,6.9,0,8 s0.1,2.4,0.1,3.5c0.1,1.1,0.9,2,2.1,2.1c1.6,0.1,4,0.1,5.7,0.1s4.1-0.1,5.7-0.1c1.1,0,2-0.9,2.1-2.1C16,10.4,16,9.1,16,8 S15.9,5.6,15.9,4.5z M6.3,10.3V5.7L10.8,8L6.3,10.3z"/>
   </symbol>
   <symbol id="github" viewBox="0 0 16 16">
-    <path d="M14,8.2c0-3.3-2.7-6-6-6s-6,2.7-6,6c0,2.6,1.7,4.9,4,5.7c0.1-0.1,0.3-0.2,0.3-0.4c0-0.3,0-1.2,0-1.2 s-0.3,0-0.6,0c-0.9,0-1.2-0.6-1.4-0.9c-0.2-0.4-0.4-0.6-0.7-0.8c-0.2-0.1-0.2-0.2,0-0.3c0.8-0.2,1,0.9,1.6,1.1 c0.4,0.1,0.9,0.1,1.2-0.1c0-0.3,0.3-0.6,0.5-0.8c-1.4-0.1-2.2-0.6-2.7-1.4l0-0.1L4.1,8.8l0-0.1C3.9,8.3,3.8,7.8,3.8,7.3 c0-0.9,0.3-1.2,0.7-1.7c-0.3-1,0.1-1.7,0.1-1.7s0.6-0.1,1.8,0.7C7,4.3,8.6,4.3,9.4,4.5c0.5-0.3,1.4-0.8,1.7-0.6 c0.1,0.2,0.3,0.6,0.1,1.6c0.1,0.2,0.8,0.7,0.8,2c0,0.5-0.1,0.9-0.2,1.2l-0.1,0.2c0,0,0,0.1-0.1,0.2l0,0.1c-0.4,0.9-1.3,1.3-2.7,1.4 c0.4,0.3,0.6,0.6,0.6,1.6s0,1.1,0,1.3c0,0.2,0.2,0.3,0.3,0.4C12.3,13,14,10.8,14,8.2z"/>
+  	<path d="M16,8c0-4.4-3.6-8-8-8S0,3.6,0,8c0,3.5,2.3,6.5,5.3,7.6c0.1-0.1,0.4-0.3,0.4-0.5c0-0.4,0-1.6,0-1.6 s-0.4,0-0.8,0c-1.2,0-1.6-0.8-1.9-1.2c-0.3-0.5-0.5-0.8-0.9-1.1c-0.3-0.1-0.3-0.3,0-0.4c1.1-0.3,1.3,1.2,2.1,1.5 c0.5,0.1,1.2,0.1,1.6-0.1c0-0.4,0.4-0.8,0.7-1.1c-1.9-0.1-2.9-0.8-3.6-1.9V9.1L2.8,8.8V8.7C2.5,8.1,2.4,7.5,2.4,6.8 c0-1.2,0.4-1.6,0.9-2.3C2.9,3.2,3.5,2.3,3.5,2.3s0.8-0.1,2.4,0.9c0.8-0.4,2.9-0.4,4-0.1c0.7-0.4,1.9-1.1,2.3-0.8 c0.1,0.3,0.4,0.8,0.1,2.1c0.1,0.3,1.1,0.9,1.1,2.7c0,0.7-0.1,1.2-0.3,1.6l-0.1,0.3c0,0,0,0.1-0.1,0.3v0.1c-0.5,1.2-1.7,1.7-3.6,1.9 C9.7,11.6,10,12,10,13.3s0,1.5,0,1.7s0.3,0.4,0.4,0.5C13.7,14.4,16,11.5,16,8z"/>
   </symbol>
 </svg>
diff --git a/plugins/recruit-resources/src/components/EditCandidate.svelte b/plugins/recruit-resources/src/components/EditCandidate.svelte
index 21dc659e05..d6a46b105f 100644
--- a/plugins/recruit-resources/src/components/EditCandidate.svelte
+++ b/plugins/recruit-resources/src/components/EditCandidate.svelte
@@ -16,7 +16,7 @@
 <script lang="ts">
   import { createEventDispatcher } from 'svelte'
   import type { Ref, Space, Doc, Class } from '@anticrm/core'
-  import { CircleButton, EditBox, Link, showPopup, IconFile as FileIcon } from '@anticrm/ui'
+  import { CircleButton, EditBox, Link, showPopup, IconFile as FileIcon, IconAdd, Label } from '@anticrm/ui'
   import type { Attachment } from '@anticrm/chunter'
   import FileUpload from './icons/FileUpload.svelte'
   import { getClient, createQuery, Channels, AttributeEditor, PDFViewer } from '@anticrm/presentation'
@@ -65,10 +65,6 @@
 {#if object !== undefined}
 <Panel icon={Contact} title={formatName(object.name)} {object} on:close={() => { dispatch('close') }}>
   <AttributesBar slot="subtitle" />
-  <!-- <svelte:fragment slot="subtitle">
-    <div class="flex-between flex-reverse" style="width: 100%">
-    </div>
-  </svelte:fragment> -->
 
   <div class="flex-row-center">
     <div class="avatar">
@@ -80,8 +76,15 @@
       <div class="name"><EditBox placeholder="Appleseed" maxWidth="20rem" bind:value={lastName} on:change={ lastNameChange }/></div>
       <div class="title"><AttributeEditor maxWidth="20rem" _class={recruit.class.Candidate} {object} key="title"/></div>
       <!-- <div class="city"><AttributeEditor maxWidth="20rem" _class={recruit.class.Candidate} {object} key="city"/></div> -->
-      <Channels value={object.channels}/>
-      <CircleButton icon={Edit} label={'Edit'} on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />      
+      <div class="flex-row-center channels">
+        {#if !object.channels || object.channels.length === 0}
+          <CircleButton icon={IconAdd} size={'small'} selected on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
+          <span><Label label={'Add social links'} /></span>
+        {:else}
+          <Channels value={object.channels} size={'small'} />
+          <CircleButton icon={Edit} size={'small'} selected on:click={(ev) => showPopup(SocialEditor, { values: object.channels ?? [] }, ev.target, (result) => { saveChannels(result) })} />
+        {/if}
+      </div>
     </div>
   </div>
 
@@ -132,16 +135,13 @@
     font-size: 1.25rem;
     color: var(--theme-caption-color);
   }
-  .title, .city {
-    font-weight: 500;
+  .title {
+    margin-top: .25rem;
     font-size: .75rem;
-    color: var(--theme-content-color);
   }
-  .title { margin-top: .75rem; }
-  .resume a {
-    font-size: .75rem;
-    color: var(--theme-content-dark-color);
-    &:hover { color: var(--theme-content-color); }
+  .channels {
+    margin-top: .75rem;
+    span { margin-left: .5rem; }
   }
 
   .attachments {
diff --git a/plugins/recruit-resources/src/components/SocialEditor.svelte b/plugins/recruit-resources/src/components/SocialEditor.svelte
index aa5643339a..e49c9df605 100644
--- a/plugins/recruit-resources/src/components/SocialEditor.svelte
+++ b/plugins/recruit-resources/src/components/SocialEditor.svelte
@@ -101,7 +101,6 @@
       }
     }
   }
-  .popup-block + .popup-block { margin-top: 2rem; }
   .buttons {
     display: flex;
     align-items: center;