Fixed share popup style

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>

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