переписана структура доп контейнера для адаптива, созданы компоненты кнопок для настроек

src/components/mainScreen/mainScreen.tsx

@@ -3,7 +3,6 @@ import { CSSTransition } from "react-transition-group";
 import { ContextWindowHeight } from "../contextWindowHeight";
 import './mainScreen.css';
 import { MobileAddPart } from "./mobileAddPart/mobileAddPart";
-import { MobileUsersPart } from "./mobileUsersPart/mobileUsersPart";
 import { Toolbar } from "./toolbar/toolbar";
 
 export const MainScreen:React.FC = React.memo(() => {

src/components/mainScreen/mobileAddPart/mobileAddPart.css

@@ -77,6 +77,46 @@
     gap: 8px;
 }
 
+.setting-buttons-container {
+    display: flex;
+    flex-direction: column;
+    padding-top: 12px;
+    height: 100%;
+    justify-content: space-between;    
+}
+
+.setting-buttons-row {
+    display: flex;
+    gap: 8px;
+}
+
+.setting-button-container {
+    width: 100%;
+    height: 48px;
+    box-sizing: border-box;
+    display: flex;
+    justify-content: space-between;
+    align-items: center;
+    background-color: #4F4F4F;
+    border-radius: 16px;
+}
+
+.setting-button-container.exit {
+    width: 106px;
+    background-color: #EB5757;
+    align-self: flex-end;
+}
+
+
+
+
+
+
+
+
+
+
+
 .show-mobile-users-enter {
     transform: translateX(-15%);
     opacity: 0;

src/components/mainScreen/mobileAddPart/mobileAddPart.tsx

@@ -3,6 +3,8 @@ import { BorderLine } from "./borderLine";
 import { MobileAddPartHeader } from "./mobileAddPartHeader";
 import './mobileAddPart.css';
 import { AddPartItem } from "./addPartItem";
+import { UsersList } from "./usersList";
+import { SettingButtons } from "./settingButtons";
 
 type TProps = {
     onClickClose: () => void
@@ -19,31 +21,19 @@ export const MobileAddPart:React.FC<TProps> = React.memo((props) => {
             onClick={props.onClickClose}
             title={props.title}
         />
-        <BorderLine />
-        <div className="mobile-users-part-users-container">
-            {
-                props.type === 'users' ?
-                <>
-                    <AddPartItem typeUser="user admin"/>
-                    <AddPartItem typeUser="user self" />
-                    <AddPartItem typeUser="user guest" />
-                    <AddPartItem typeUser="user guest" />
-                    <AddPartItem typeUser="user guest" />
-                    <AddPartItem typeUser="user guest" />
-                    <AddPartItem typeUser="user guest" />
-                </>
-                : <>
-                    <AddPartItem
-                        typeUser="share"
-                        onClickItem={props?.onClickShare}
-                    />
-                    <AddPartItem 
-                        typeUser="exit"
-                        onClickItem={props?.onClickExit}
-                    />
-                </>
-            }
-            
-        </div>
+        <BorderLine />        
+        {
+            props.type === 'users'
+            ? <UsersList />
+            : <SettingButtons />
+        }        
+        {/* <AddPartItem
+            typeUser="share"
+            onClickItem={props?.onClickShare}
+        />
+        <AddPartItem 
+            typeUser="exit"
+            onClickItem={props?.onClickExit}
+        /> */}
     </div>
 })

src/components/mainScreen/mobileAddPart/settingButton.tsx

@@ -0,0 +1,27 @@
+import React from "react";
+
+type TProps = {
+    icon: string
+    text: string
+    onClick: () => void
+    isExitButton?: boolean
+    helpText?: string
+    helpIcon?: string
+}
+
+export const SettingButton:React.FC<TProps> = React.memo((props) => {
+    return <div className={`setting-button-container ${props.isExitButton ? 'exit' : ''}`} onClick={() => props.onClick()}>
+        <img className="setting-button-icon" src={props.icon} alt={props.text}></img>
+        <div className="setting-button-text-container">
+            <span className="setting-button-text">{props.text}</span>
+            {
+                props.helpText &&
+                <span className="setting-button-help-text">{props.helpText}</span>
+            }
+        </div>        
+        {
+            props.helpIcon &&
+            <img className="setting-button-help-icon" src={props.helpIcon} alt='' />
+        }
+    </div>
+})

src/components/mainScreen/mobileAddPart/settingButtons.tsx

@@ -0,0 +1,31 @@
+import React from "react";
+import { SettingButton } from "./settingButton";
+
+type TProps = {
+
+}
+
+export const SettingButtons:React.FC<TProps> = React.memo((props) => {
+    return <div className="setting-buttons-container">
+        <div className="setting-buttons-row">
+            <SettingButton
+                text="Пригласить"
+                icon={''}
+                onClick={() => null}
+            />
+            <SettingButton
+                text="Язык"
+                helpText="Русский"
+                icon={''}
+                helpIcon={''}
+                onClick={() => null}
+            />
+        </div>
+        <SettingButton 
+            text="Выйти"
+            isExitButton={true}
+            icon={''}
+            onClick={() => null}
+        />
+    </div>
+})

src/components/mainScreen/mobileAddPart/usersList.tsx

@@ -0,0 +1,18 @@
+import React from "react";
+import { AddPartItem } from "./addPartItem";
+
+type TProps = {
+    users?: '???'
+}
+
+export const UsersList:React.FC<TProps> = React.memo((props) => {
+    return <div className="mobile-users-part-users-container">
+        <AddPartItem typeUser="user admin"/>
+        <AddPartItem typeUser="user self" />
+        <AddPartItem typeUser="user guest" />
+        <AddPartItem typeUser="user guest" />
+        <AddPartItem typeUser="user guest" />
+        <AddPartItem typeUser="user guest" />
+        <AddPartItem typeUser="user guest" />
+    </div>
+})

src/components/mainScreen/mobileUsersPart/borderLine.tsx

@@ -1,5 +0,0 @@
-import React from "react";
-
-export const BorderLine:React.FC = React.memo(() => {
-    return <div className="border-line"></div>
-})

src/components/mainScreen/mobileUsersPart/closeIcon.svg

@@ -1,3 +0,0 @@
-<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M12 12L16.9996 17M12 12L17 7M12 12L7 17M12 12L7.00002 7" stroke="white" stroke-linecap="round" stroke-linejoin="round"/>
-</svg>

src/components/mainScreen/mobileUsersPart/mobileUsersPart.css

@@ -1,90 +0,0 @@
-.mobile-users-part {
-    position: relative;
-    width: 100%;
-    height: 100%;
-    display: flex;
-    padding: 32px;
-    display: flex;
-    flex-direction: column;
-    color: #FFFFFF;
-    box-sizing: border-box;
-    background-color: #333333;
-}
-
-.border-line {
-    width: 100%;
-    height: 1px;
-    background-color: #4F4F4F;
-}
-
-.mobile-users-part-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding-bottom: 24px;
-}
-
-.mobile-users-part-header-title {
-    font-weight: 600;
-    font-size: 22px;
-    line-height: 130%;
-}
-
-.mobile-users-part-header-close-button {
-    width: 30px;
-    height: 30px;
-    border: none;
-    background-color: transparent;
-    background: url('closeIcon.svg') 50% 50% no-repeat;
-    background-size: 100% 100%;
-}
-
-.mobile-users-part-users-container {
-    display: flex;
-    flex-direction: column;
-    gap: 12px;
-    overflow-y: auto;
-    padding-top: 12px;
-}
-
-.user-item {
-    display: flex;
-    flex-direction: row;
-    gap: 8px;
-}
-
-.user-item-user-info-container {
-    display: flex;
-    flex-direction: column;    
-    width: 100%;
-    gap: 12px;
-}
-
-.user-item-user-info {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-}
-
-.user-item-user-info-buttons {
-    display: flex;
-    gap: 8px;
-}
-
-.show-mobile-users-enter {
-    opacity: 0;
-}
-
-.show-mobile-users-enter-active {
-    opacity: 1;
-    transition: .3s;
-}
-
-.show-mobile-users-exit {
-    opacity: 1;
-}
-
-.show-mobile-users-exit-active {
-    opacity: 0;
-    transition: .3s;
-}

src/components/mainScreen/mobileUsersPart/mobileUsersPart.tsx

@@ -1,32 +0,0 @@
-import React from "react";
-import { BorderLine } from "./borderLine";
-import './mobileUsersPart.css'
-import { UserItem } from "./userItem";
-
-type TProps = {
-    onClickClose: () => void
-}
-
-export const MobileUsersPart:React.FC<TProps> = React.memo((props) => {
-    return <div className="mobile-users-part">
-        <div className="mobile-users-part-header">
-            <span className="mobile-users-part-header-title">
-                Участники демонастрации
-            </span>
-            <button 
-                className="mobile-users-part-header-close-button" 
-                onClick={() => props.onClickClose()} 
-            ></button>
-        </div>
-            <BorderLine />
-        <div className="mobile-users-part-users-container">
-            <UserItem typeUser="user admin"/>
-            <UserItem typeUser="user self" />
-            <UserItem typeUser="user guest" />
-            <UserItem typeUser="user guest" />
-            <UserItem typeUser="user guest" />
-            <UserItem typeUser="user guest" />
-            <UserItem typeUser="user guest" />            
-        </div>
-    </div>
-})

src/components/mainScreen/mobileUsersPart/userItem.tsx

@@ -1,42 +0,0 @@
-import React from "react";
-import { ToolbarButton } from "../toolbar/toolbarButton";
-import { TypeToolbarButtons } from "../toolbar/typeButtons";
-import { BorderLine } from "./borderLine";
-import { CaptionToolbarButtons } from "../toolbar/typeCaptionButtons";
-
-type TProps = {
-    typeUser: TypeToolbarButtons
-}
-
-export const UserItem:React.FC<TProps> = React.memo((props) => {
-    return <div className="user-item">
-        <ToolbarButton
-            type={props.typeUser}
-            caption=""
-            isCaption={false}
-            onClick={() => null}            
-        />
-        <div className="user-item-user-info-container">
-            <div className="user-item-user-info">
-                <span className="user-item-user-info-name">{CaptionToolbarButtons[props.typeUser]}</span>
-                <div className="user-item-user-info-buttons">
-                    <ToolbarButton 
-                        type="micro" 
-                        active={true} 
-                        caption='' 
-                        isCaption={false}
-                        onClick={() => null}                        
-                    />
-                    <ToolbarButton 
-                        type="control" 
-                        active={false} 
-                        caption='' 
-                        isCaption={false}
-                        onClick={() => null}                        
-                    />
-                </div>
-            </div>
-            <BorderLine />
-        </div>
-    </div>
-})