From 2a91b041480a0ee1077d14cdb7ef48781c50c586 Mon Sep 17 00:00:00 2001
From: kvakazyambra <kvakazyambra@gmail.com>
Date: Wed, 8 Feb 2023 23:43:59 +0300
Subject: [PATCH] Fixed share popup style

---
 src/components/Article/SharePopup.tsx          | 10 +++++-----
 src/components/_shared/Popup/Popup.module.scss | 16 ++++++++++++++++
 2 files changed, 21 insertions(+), 5 deletions(-)

diff --git a/src/components/Article/SharePopup.tsx b/src/components/Article/SharePopup.tsx
index 155a6dbe..ac5b0910 100644
--- a/src/components/Article/SharePopup.tsx
+++ b/src/components/Article/SharePopup.tsx
@@ -31,31 +31,31 @@ export const SharePopup = (props: SharePopupProps) => {
     <Popup {...props} variant="bordered">
       <ul class="nodash">
         <li>
-          <button role="button" onClick={() => share(VK)}>
+          <button role="button" class={styles.shareControl} onClick={() => share(VK)}>
             <Icon name="vk-white" class={styles.icon} />
             VK
           </button>
         </li>
         <li>
-          <button role="button" onClick={() => share(FACEBOOK)}>
+          <button role="button" class={styles.shareControl} onClick={() => share(FACEBOOK)}>
             <Icon name="facebook-white" class={styles.icon} />
             Facebook
           </button>
         </li>
         <li>
-          <button role="button" onClick={() => share(TWITTER)}>
+          <button role="button" class={styles.shareControl} onClick={() => share(TWITTER)}>
             <Icon name="twitter-white" class={styles.icon} />
             Twitter
           </button>
         </li>
         <li>
-          <button role="button" onClick={() => share(TELEGRAM)}>
+          <button role="button" class={styles.shareControl} onClick={() => share(TELEGRAM)}>
             <Icon name="telegram-white" class={styles.icon} />
             Telegram
           </button>
         </li>
         <li>
-          <button role="button" onClick={copyLink}>
+          <button role="button" class={styles.shareControl} onClick={copyLink}>
             <Icon name="link-white" class={styles.icon} />
             {t('Copy link')}
           </button>
diff --git a/src/components/_shared/Popup/Popup.module.scss b/src/components/_shared/Popup/Popup.module.scss
index 16d8f85a..ab1b6cd3 100644
--- a/src/components/_shared/Popup/Popup.module.scss
+++ b/src/components/_shared/Popup/Popup.module.scss
@@ -5,6 +5,7 @@
 .popup {
   background: #fff;
   color: #000;
+  cursor: default;
   min-width: 144px;
   opacity: 1;
   position: absolute;
@@ -88,6 +89,21 @@
       transition: filter 0.3s;
     }
   }
+
+  .shareControl {
+    text-align: left;
+    transition: color 0.3s, background-color 0.3s;
+    white-space: nowrap;
+
+    &:hover {
+      background: #000;
+      color: #fff;
+
+      .icon img {
+        filter: invert(0);
+      }
+    }
+  }
 }
 
 // TODO: animation