fix close parts, доверстано окно Поделиться

src/components/mainScreen/mainScreen.tsx

@@ -10,10 +10,12 @@ export const MainScreen:React.FC = React.memo(() => {
     const [showMobileUsersPart, setShowMobileUsersPart] = useState<boolean>(false);
     const [showMobileOtherPart, setShowMobileOtherPart] = useState<boolean>(false);
     const [showMobileLangSelectorPart, setShowMobileLangSelectorPart] = useState<boolean>(false);
+    const [showMobileSharePart, setShowMobileSharePart] = useState<boolean>(false);
     const showPartsStates = [
         setShowMobileUsersPart,
         setShowMobileOtherPart,
-        setShowMobileLangSelectorPart
+        setShowMobileLangSelectorPart,
+        setShowMobileSharePart
     ]
     const windowHeight = useContext(ContextWindowHeight);
 
@@ -46,6 +48,19 @@ export const MainScreen:React.FC = React.memo(() => {
         setShowMobileLangSelectorPart(true);
     }
 
+    function closeLangSelector() {
+        setShowMobileLangSelectorPart(false);
+    }
+
+    function openSharePart() {
+        closeOthersParts(setShowMobileSharePart);
+        setShowMobileSharePart(true);
+    }
+
+    function closeSharePart() {
+        setShowMobileSharePart(false);
+    }
+
     function closeOthersParts(currentPart: React.Dispatch<React.SetStateAction<boolean>>) {
         showPartsStates.forEach(e => {
             if(currentPart !== e) {
@@ -94,6 +109,7 @@ export const MainScreen:React.FC = React.memo(() => {
                     <MobileAddPart 
                         onClickClose={closeMobileOther}
                         onClickChangeLang={openLangSelector}
+                        onClickShare={openSharePart}
                         title='Дополнительно'
                         type="other"
                     />
@@ -105,13 +121,27 @@ export const MainScreen:React.FC = React.memo(() => {
                     unmountOnExit
                 >
                     <MobileAddPart 
-                        onClickClose={closeMobileOther}
+                        onClickClose={closeLangSelector}
                         title='Выбор языка'
                         type="selectLang"
                         isContainBack={true}
                         onClickBackButton={openMobileOther}
                     />
                 </CSSTransition>
+                <CSSTransition
+                    in={showMobileSharePart}
+                    timeout={300}
+                    classNames='show-mobile-users'
+                    unmountOnExit
+                >
+                    <MobileAddPart 
+                        onClickClose={closeSharePart}
+                        title='Пригласить на демонстрацию'
+                        type="share"
+                        isContainBack={true}
+                        onClickBackButton={openMobileOther}
+                    />
+                </CSSTransition>
             </>
             : null
         }

src/components/mainScreen/mobileAddPart/borderLine.tsx

@@ -1,5 +1,12 @@
 import React from "react";
 
-export const BorderLine:React.FC = React.memo(() => {
+type TProps = {
-    return <div className="border-line"></div>
+    width?: '80%' | '100%'
+}
+
+export const BorderLine:React.FC<TProps> = React.memo((props) => {
+    return <div 
+        className="border-line" 
+        style={{width: props?.width ? props.width : '100%'}} 
+    ></div>
 })

src/components/mainScreen/mobileAddPart/icons/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/mobileAddPart/icons/pinkCopyIcon.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="#CE56C2" stroke-linecap="round"/>
+<path d="M6 16.7739V6.22609C6 4.99665 7.02335 4 8.28571 4H14.7143" stroke="#CE56C2" stroke-linecap="round"/>
+</svg>

src/components/mainScreen/mobileAddPart/mobileAddPart.css

@@ -15,6 +15,7 @@
     width: 100%;
     height: 1px;
     background-color: #4F4F4F;
+    align-self: center;
 }
 
 .mobile-users-part-header {
@@ -94,7 +95,7 @@
     flex-direction: column;
     padding-top: 12px;
     height: 100%;
-    justify-content: space-between;    
+    justify-content: space-between;
 }
 
 .setting-buttons-row {
@@ -192,16 +193,109 @@
     height: 24px;
 }
 
+.share-container {
+    display: flex;
+    flex-direction: column;
+    padding-top: 12px;
+    height: 100%;
+    gap: 18px;
+    color: #FFFFFF;
+}
 
+.share-container-item {
+    display: flex;
+    flex-direction: column;
+    gap: 16px;
+}
 
+.share-container-item-title {
+    font-weight: 600;
+    font-size: 16px;
+    line-height: 19px;
+}
 
+.share-container-item-buttons {
+    display: flex;
+    gap: 8px;
+}
 
+.share-container-item-input {
+    height: 48px;
+    background-color: #4F4F4F;
+    outline: none;
+    border: none;
+    border-radius: 12px;
+    box-sizing: border-box;
+    color: #FFFFFF;
+}
 
+.share-container-item-input.code {
+    flex: 2;
+    text-align: center;
+    vertical-align: middle;
+    font-weight: 300;
+    font-size: 24px;
+    line-height: 29px;
+    letter-spacing: 0.3em;
+}
 
+.share-container-item-input.href {
+    width: 100%;
+    font-weight: 400;
+    font-size: 16px;
+    line-height: 19px;
+    padding: 14.5px 16px;
+}
 
+.share-container-item-copy-code-button-container {
+    height: 48px;
+    flex: 1;
+    box-sizing: border-box;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 10px;
+    background-color: #CE56C2;
+    border-radius: 12px;
 
+    font-weight: 500;
+    font-size: 16px;
+    line-height: 20px;
 
+    user-select: none;
+}
 
+.share-container-item-copy-code-button-icon {
+    width: 24px;
+    height: 24px;
+    background: url('icons/copyIcon.svg') 50% 50% no-repeat;
+    background-size: 100% 100%;
+}
+
+.share-container-item-copy-code-button-container:active {
+    background-color: #FFFFFF;
+    color: #CE56C2;    
+}
+
+.share-container-item-copy-code-button-container:active .share-container-item-copy-code-button-icon {
+    background: url('icons/pinkCopyIcon.svg') 50% 50% no-repeat;
+}
+
+.share-container-item-copy-href-button {
+    width: 48px;
+    height: 48px;
+    border: none;
+    border-radius: 12px;
+    background: url('icons/copyIcon.svg') 50% 50% no-repeat;
+    background-color: #CE56C2;
+    background-size: 24px 24px;
+    flex-shrink: 0;
+}
+
+.share-container-item-copy-href-button:active {
+    background: url('icons/pinkCopyIcon.svg') 50% 50% no-repeat;
+    background-color: #FFFFFF;
+}
 
 
 

src/components/mainScreen/mobileAddPart/mobileAddPart.tsx

@@ -4,6 +4,7 @@ import { MobileAddPartHeader } from "./mobileAddPartHeader";
 import { UsersList } from "./usersList";
 import { SettingButtons } from "./settingButtons";
 import './mobileAddPart.css';
+import { ShareContainer } from "./shareContainer";
 
 type TProps = {
     onClickClose: () => void
@@ -42,6 +43,8 @@ export const MobileAddPart:React.FC<TProps> = React.memo((props) => {
                 type="selectLang"
                 onClickSelectLang={props.onClickSelectLang}
             />
+            : props.type === 'share'
+            ? <ShareContainer />
             : null
         }        
     </div>

src/components/mainScreen/mobileAddPart/shareContainer.tsx

@@ -10,18 +10,22 @@ export const ShareContainer:React.FC<TProps> = React.memo((props) => {
         <div className="share-container-item">
             <span className="share-container-item-title">Код подключения</span>
             <div className="share-container-item-buttons">
-                <input className="share-container-item-input code"></input>
+                <input className="share-container-item-input code" value={'123 456'} readOnly></input>
                 <div className="share-container-item-copy-code-button-container">
                     <span className="share-container-item-copy-code-button-icon"></span>
                     <span className="share-container-item-copy-code-button-text">Скопировать</span>
                 </div>
             </div>
         </div>
-        <BorderLine />
+        <BorderLine width="80%"/>
         <div className="share-container-item">
             <span className="share-container-item-title">Ссылка для подключения</span>
             <div className="share-container-item-buttons">
-                <input className="share-container-item-input href"></input>
+                <input 
+                    className="share-container-item-input href" 
+                    value={'https://www.youtube.com/watch?v=dQw4w9WgXcQ'}
+                    readOnly
+                ></input>
                 <button className="share-container-item-copy-href-button"></button>
             </div>
         </div>