From 96166d79ada2ca4478d67d6134b84fc33a9cfdca Mon Sep 17 00:00:00 2001
From: Ilya Y <75578537+ilya-bkv@users.noreply.github.com>
Date: Wed, 10 Jan 2024 13:01:02 +0300
Subject: [PATCH] Share modal fix (#362)

* - Close modal after share
- revert opacity

* resolve conversation
---
 src/components/Nav/Modal/Modal.module.scss    |  2 +-
 .../_shared/ShareLinks/ShareLinks.tsx         | 21 ++++++++++++++-----
 .../_shared/ShareModal/ShareModal.tsx         |  2 ++
 3 files changed, 19 insertions(+), 6 deletions(-)

diff --git a/src/components/Nav/Modal/Modal.module.scss b/src/components/Nav/Modal/Modal.module.scss
index d475fb5a..f5785872 100644
--- a/src/components/Nav/Modal/Modal.module.scss
+++ b/src/components/Nav/Modal/Modal.module.scss
@@ -1,7 +1,7 @@
 .backdrop {
   align-items: center;
   display: flex;
-  background: rgb(20 20 20 / 7%);
+  background: rgb(20 20 20 / 90%);
   justify-content: center;
   height: 100%;
   left: 0;
diff --git a/src/components/_shared/ShareLinks/ShareLinks.tsx b/src/components/_shared/ShareLinks/ShareLinks.tsx
index a0478721..b2fd07c3 100644
--- a/src/components/_shared/ShareLinks/ShareLinks.tsx
+++ b/src/components/_shared/ShareLinks/ShareLinks.tsx
@@ -16,6 +16,7 @@ type Props = {
   imageUrl?: string
   class?: string
   variant: 'inModal' | 'inPopup'
+  onShareClick?: () => void
 }
 
 export const ShareLinks = (props: Props) => {
@@ -31,11 +32,21 @@ export const ShareLinks = (props: Props) => {
     url: props.shareUrl,
     description: props.description,
   }))
+
+  const handleShare = (network) => {
+    share(network)
+    if (props.variant === 'inModal') {
+      props.onShareClick()
+    }
+  }
   const copyLink = async () => {
     await navigator.clipboard.writeText(props.shareUrl)
     if (props.variant === 'inModal') {
       setIsLinkCopied(true)
-      setTimeout(() => setIsLinkCopied(false), 3000)
+      setTimeout(() => {
+        setIsLinkCopied(false)
+        props.onShareClick()
+      }, 3000)
     } else {
       showSnackbar({ body: t('Link copied') })
     }
@@ -45,25 +56,25 @@ export const ShareLinks = (props: Props) => {
     <div class={clsx(styles.ShareLinks, props.class, { [styles.inModal]: props.variant === 'inModal' })}>
       <ul class="nodash">
         <li>
-          <button role="button" class={styles.shareControl} onClick={() => share(FACEBOOK)}>
+          <button role="button" class={styles.shareControl} onClick={() => handleShare(FACEBOOK)}>
             <Icon name="facebook-white" class={styles.icon} />
             Facebook
           </button>
         </li>
         <li>
-          <button role="button" class={styles.shareControl} onClick={() => share(TWITTER)}>
+          <button role="button" class={styles.shareControl} onClick={() => handleShare(TWITTER)}>
             <Icon name="twitter-white" class={styles.icon} />
             Twitter
           </button>
         </li>
         <li>
-          <button role="button" class={styles.shareControl} onClick={() => share(TELEGRAM)}>
+          <button role="button" class={styles.shareControl} onClick={() => handleShare(TELEGRAM)}>
             <Icon name="telegram-white" class={styles.icon} />
             Telegram
           </button>
         </li>
         <li>
-          <button role="button" class={styles.shareControl} onClick={() => share(VK)}>
+          <button role="button" class={styles.shareControl} onClick={() => handleShare(VK)}>
             <Icon name="vk-white" class={styles.icon} />
             VK
           </button>
diff --git a/src/components/_shared/ShareModal/ShareModal.tsx b/src/components/_shared/ShareModal/ShareModal.tsx
index 1e7def7c..e80fb8ef 100644
--- a/src/components/_shared/ShareModal/ShareModal.tsx
+++ b/src/components/_shared/ShareModal/ShareModal.tsx
@@ -1,4 +1,5 @@
 import { useLocalize } from '../../../context/localize'
+import { hideModal } from '../../../stores/ui'
 import { Modal } from '../../Nav/Modal'
 import { ShareLinks } from '../ShareLinks'
 
@@ -20,6 +21,7 @@ export const ShareModal = (props: Props) => {
         shareUrl={props.shareUrl}
         imageUrl={props.imageUrl}
         description={props.description}
+        onShareClick={() => hideModal()}
       />
     </Modal>
   )