добавлен попап для приглашения в демку для декстопа

src/components/mainScreen/mainScreen.tsx

@@ -3,6 +3,7 @@ import { CSSTransition } from "react-transition-group";
 import { ContextWindowHeight } from "../contextWindowHeight";
 import './mainScreen.css';
 import { MobileAddPart } from "./mobileAddPart/mobileAddPart";
+import { SharePopup } from "./sharePopup/sharePopup";
 import { Toolbar } from "./toolbar/toolbar";
 
 export const MainScreen:React.FC = React.memo(() => {
@@ -85,6 +86,11 @@ export const MainScreen:React.FC = React.memo(() => {
                 isOpenOtherMobilePart={showMobileOtherPart}
             />
         </CSSTransition>
+        <SharePopup 
+            acceessCode="123 456"
+            href="https://www.youtube.com/watch?v=dQw4w9WgXcQ"
+            onClickClose={() => null}
+        />
         {
             windowHeight < 700?
             <>

src/components/mainScreen/mobileAddPart/mobileAddPart.css

@@ -16,6 +16,7 @@
     height: 1px;
     background-color: #4F4F4F;
     align-self: center;
+    flex-shrink: 0;
 }
 
 .mobile-users-part-header {

src/components/mainScreen/mobileAddPart/mobileAddPartHeader.tsx

@@ -5,10 +5,11 @@ type TProps = {
     title: string
     isBackButton?: boolean
     onClickBackButton?: () => void
+    paddingBottom?: '0px' | '12px' | '24px'
 }
 
 export const MobileAddPartHeader:React.FC<TProps> = React.memo((props) => {
-    return <div className="mobile-users-part-header">
+    return <div className="mobile-users-part-header" style={{paddingBottom: props?.paddingBottom ? props.paddingBottom : null}}>
         <span className="mobile-users-part-header-title">
             {
                 props.isBackButton

src/components/mainScreen/sharePopup/copyIcon.svg

@@ -0,0 +1,4 @@
+<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M8 8.22609C8 6.99665 9.02335 6 10.2857 6H15.7143C16.9767 6 18 6.99665 18 8.22609V17.7739C18 19.0033 16.9767 20 15.7143 20H10.2857C9.02335 20 8 19.0033 8 17.7739V8.22609Z" stroke="white" stroke-linecap="round"/>
+<path d="M6 16.7739V6.22609C6 4.99665 7.02335 4 8.28571 4H14.7143" stroke="white" stroke-linecap="round"/>
+</svg>

src/components/mainScreen/sharePopup/sharePopup.css

@@ -0,0 +1,92 @@
+.share-popup-container {
+    position: absolute;
+    display: flex;
+    flex-direction: column;
+    width: 494px;
+    height: 469px;
+    box-sizing: border-box;
+    border: 1px solid #4F4F4F;
+    border-radius: 32px;
+    top: calc(50% - 469px / 2);
+    left: calc(50% - 494px / 2);
+    background-color: #333333;
+    color: #FFFFFF;
+    padding: 48px;
+    /* gap: 24px; */
+    justify-content: space-between;
+}
+
+.share-popup-data-container {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
+
+.share-popup-data-title {
+    font-weight: 600;
+    font-size: 18px;
+    line-height: 22px;
+}
+
+.share-popup-data-input {
+    background-color: #4F4F4F;
+    outline: none;
+    width: 100%;
+    border: none;
+    border-radius: 12px;
+    color: #FFFFFF;
+    box-sizing: border-box;
+}
+
+.share-popup-data-input.code {
+    height: 76px;    
+    font-weight: 300;
+    font-size: 38px;
+    line-height: 46px;
+    letter-spacing: 0.3em;
+    text-align: center;
+    padding: 15px 0;
+}
+
+.share-popup-data-input.href {
+    height: 48px;
+    padding: 14.5px 16px;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+}
+
+.share-popup-copy-button {
+    display: flex;
+    box-sizing: border-box;
+    width: 176px;
+    height: 48px;
+    align-items: center;
+    justify-content: center;
+    border-radius: 12px;
+    background-color: #CE56C2;
+    border: none;
+    color: #FFFFFF;
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
+    gap: 4px;
+    cursor: pointer;
+    transition: .3s;
+}
+
+.share-popup-copy-button:hover {
+    opacity: .7;
+}
+
+.share-popup-copy-button.copied {
+    background-color: #219653;
+    transition: .3s;
+}
+
+.share-popup-copy-button-icon {
+    width: 24px;
+    height: 24px;
+    background: url('copyIcon.svg') 50% 50% no-repeat;
+    background-size: 100% 100%;
+}

src/components/mainScreen/sharePopup/sharePopup.tsx

@@ -0,0 +1,50 @@
+import React, { useState } from "react";
+import { BorderLine } from "../mobileAddPart/borderLine";
+import { MobileAddPartHeader } from "../mobileAddPart/mobileAddPartHeader";
+import './sharePopup.css';
+
+type TProps = {
+    acceessCode: string
+    href: string
+    onClickClose: () => void
+}
+
+export const SharePopup:React.FC<TProps> = React.memo((props) => {
+    const [isCopied, setIsCopied] = useState<boolean>(false);
+
+    function copyHref() {
+        navigator.clipboard.writeText(props.href).then(() => {            
+            setIsCopied(true)
+            setTimeout(() => {
+                setIsCopied(false)
+            }, 2000);
+        })
+    }
+
+    return <div className="share-popup-container">
+        <MobileAddPartHeader        
+            onClick={props.onClickClose}
+            title='Пригласить на демонстрацию'
+            paddingBottom="0px"
+        />
+        <div className="share-popup-data-container">
+            <span className="share-popup-data-title">Код подключения</span>
+            <input className="share-popup-data-input code" value={props.acceessCode} readOnly></input>
+        </div>
+        <BorderLine width="80%" />
+        <div className="share-popup-data-container">
+            <span className="share-popup-data-title">Ссылка для подключения</span>
+            <input className="share-popup-data-input href" value={props.href} readOnly></input>
+            <button className={`share-popup-copy-button ${isCopied ? 'copied' : ''}`} onClick={() => copyHref()}>
+                <span className="share-popup-copy-button-icon"></span>
+                <span className="share-popup-copy-button-title">
+                    {
+                        isCopied
+                        ? 'Скопировано'
+                        : 'Скопировать'
+                    }
+                </span>
+            </button>
+        </div>        
+    </div>
+})