From 667e577575ab3ff1f1a9736874832a2b154fb705 Mon Sep 17 00:00:00 2001
From: Alexander Platov <sas_lord@mail.ru>
Date: Wed, 1 Sep 2021 22:52:15 +0300
Subject: [PATCH] Fix social icons (#122)

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

diff --git a/plugins/contact-resources/src/components/ChannelsPresenter.svelte b/plugins/contact-resources/src/components/ChannelsPresenter.svelte
index d99758a4dd..d93c906ca1 100644
--- a/plugins/contact-resources/src/components/ChannelsPresenter.svelte
+++ b/plugins/contact-resources/src/components/ChannelsPresenter.svelte
@@ -67,14 +67,38 @@ let displayItems: Item[] = []
 
 <div class="container">
   {#each displayItems as item}
-    <Icon icon={item.icon} size={'medium'}/>
+    <div class="circle">
+      <div class="icon"><Icon icon={item.icon} size={'small'}/></div>
+    </div>
   {/each}
 </div>
 
 <style lang="scss">
   .container {
     display: flex;
+    flex-direction: row-reverse;
     align-items: center;
-    :global(svg + svg) { margin-left: .25rem; }
+
+    .circle {
+      display: flex;
+      justify-content: center;
+      align-items: center;
+      width: 1.5rem;
+      height: 1.5rem;
+      border: 1px solid var(--theme-bg-focused-color);
+      border-radius: 50%;
+      cursor: pointer;
+
+      .icon {
+        // transform-origin: center center;
+        // transform: scale(.75);
+        opacity: .4;
+      }
+      &:hover {
+        border-color: var(--theme-bg-focused-border);
+        .icon { opacity: 1; }
+      }
+    }
+    .circle + .circle { margin-right: .25rem; }
   }
 </style>