добавлена логика открытия/закрытия попапа для расшаривания

src/components/mainScreen/mainScreen.tsx

@@ -12,6 +12,7 @@ export const MainScreen:React.FC = React.memo(() => {
     const [showMobileOtherPart, setShowMobileOtherPart] = useState<boolean>(false);
     const [showMobileLangSelectorPart, setShowMobileLangSelectorPart] = useState<boolean>(false);
     const [showMobileSharePart, setShowMobileSharePart] = useState<boolean>(false);
+    const [showSharePopup, setShowSharePopup] = useState<boolean>(false);
     const showPartsStates = [
         setShowMobileUsersPart,
         setShowMobileOtherPart,
@@ -61,7 +62,7 @@ export const MainScreen:React.FC = React.memo(() => {
     function closeSharePart() {
         setShowMobileSharePart(false);
     }
-
+    
     function closeOthersParts(currentPart: React.Dispatch<React.SetStateAction<boolean>>) {
         showPartsStates.forEach(e => {
             if(currentPart !== e) {
@@ -70,6 +71,14 @@ export const MainScreen:React.FC = React.memo(() => {
         });
     }
 
+    function openSharePopup() {
+        setShowSharePopup(true);
+    }
+
+    function closeSharePopup() {
+        setShowSharePopup(false);
+    }
+
     return <div className="main-screen-container">
         <div className="main-screen-model"></div>
         <CSSTransition
@@ -84,13 +93,21 @@ export const MainScreen:React.FC = React.memo(() => {
                 isOpenUsersMobilePart={showMobileUsersPart}
                 onClickMobileOther={openMobileOther}
                 isOpenOtherMobilePart={showMobileOtherPart}
+                onClickShareButton={openSharePopup}
+            />
+        </CSSTransition>
+        <CSSTransition
+            in={showSharePopup}
+            timeout={300}
+            classNames='show-share-popup'
+            unmountOnExit
+        >
+            <SharePopup 
+                acceessCode="123 456"
+                href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+                onClickClose={closeSharePopup}
             />
         </CSSTransition>
-        <SharePopup 
-            acceessCode="123 456"
-            href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
-            onClickClose={() => null}
-        />
         {
             windowHeight < 700?
             <>

src/components/mainScreen/mobileAddPart/mobileAddPart.css

@@ -33,6 +33,7 @@
     font-weight: 400;
     font-size: 22px;
     line-height: 130%;
+    user-select: none;
 }
 
 .mobile-users-part-header-back-button {
@@ -42,6 +43,7 @@
     height: 24px;
     background: url('icons/backIcon.svg') 50% 50% no-repeat;
     background-size: 100% 100%;
+    cursor: pointer;
 }
 
 .mobile-users-part-header-close-button {
@@ -51,6 +53,7 @@
     background-color: transparent;
     background: url('closeIcon.svg') 50% 50% no-repeat;
     background-size: 100% 100%;
+    cursor: pointer;
 }
 
 .mobile-users-part-users-container {

src/components/mainScreen/sharePopup/sharePopup.css

@@ -26,6 +26,7 @@
     font-weight: 600;
     font-size: 18px;
     line-height: 22px;
+    user-select: none;
 }
 
 .share-popup-data-input {
@@ -89,4 +90,22 @@
     height: 24px;
     background: url('copyIcon.svg') 50% 50% no-repeat;
     background-size: 100% 100%;
+}
+
+.show-share-popup-enter {
+    opacity: 0;
+}
+
+.show-share-popup-enter-active {
+    opacity: 1;
+    transition: .3s;
+}
+
+.show-share-popup-exit {
+    opacity: 1;
+}
+
+.show-share-popup-exit-active {
+    opacity: 0;
+    transition: .3s;
 }

src/components/mainScreen/toolbar/buttonContainer.tsx

@@ -36,8 +36,8 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
     
     return <div className="toolbar-button-container">
         {
-            props?.isBorderLineTop === 'hide' ?
-                null
+            props?.isBorderLineTop === 'hide'
+            ? null
             : <BorderLine />
         }
         {props.buttons.map((button, index) => {
@@ -160,8 +160,8 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
             }
         )}
         {
-            props?.isBorderLineBottom === 'hide' ?
-                null
+            props?.isBorderLineBottom === 'hide'
+            ? null
             : <BorderLine />
         }
     </div>

src/components/mainScreen/toolbar/toolbar.tsx

@@ -7,11 +7,13 @@ import './toolbar.css';
 
 type TProps = {
     onClickOpenButton: () => void
-    onClickMobileUsers?: () => void
-    onClickMobileOther?: () => void
     isOpen: boolean
     isOpenUsersMobilePart?: boolean
     isOpenOtherMobilePart?: boolean
+    isOpenSharePopup?: boolean
+    onClickMobileUsers?: () => void
+    onClickMobileOther?: () => void
+    onClickShareButton?: () => void
 }
 
 export const Toolbar:React.FC<TProps> = React.memo((props) => {
@@ -149,7 +151,7 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
                     buttons={[
                         {
                             type:"share",
-                            onClick: () => null,
+                            onClick: props.onClickShareButton,
                             isCaption: true
                         },
                         {