добавлена кнопка для передачи контроля, добавлены кнопки да/нет

src/components/mainScreen/toolbar/buttonContainer.tsx

@@ -1,5 +1,6 @@
 import React, { useContext, useState } from "react";
 import { ContextWindowHeight } from "../../contextWindowHeight";
+import { ControlButton } from "./controlButton";
 import { ToolbarButton } from "./toolbarButton";
 import { BorderLine } from "./toolbarButtonContainerBorderLine";
 import { TypeToolbarButtons } from "./typeButtons";
@@ -20,7 +21,16 @@ type TProps = {
 
 export const ButtonContainer:React.FC<TProps> = React.memo((props) => { 
     const [openedAddButtons, setOpenedAddButtons] = useState<string>('');
+    const controlStates = ['default', 'questing', 'return', 'questing'];// temp
+    const [currentControlState, setCurrentControlState] = useState<number>(0); // temp
     const windowHeight = useContext(ContextWindowHeight);
+
+    // temp
+    function nextControlState() {
+        if(currentControlState + 1 < controlStates.length)
+            setCurrentControlState(currentControlState + 1);
+        else setCurrentControlState(0);
+    }
     
     return <div className="toolbar-button-container">
         {
@@ -70,13 +80,57 @@ export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
                             caption={''}
                             isCaption={false}
                         />
-                        <ToolbarButton
-                            onClick={() => null}
-                            type={"control"} 
-                            caption={''}
-                            isCaption={false}
-                            size={"large"}
-                        />
+                        {
+                            // temp
+                            currentControlState === 0
+                            ? <ControlButton
+                                onClick={() => nextControlState()}
+                                state={"default"}
+                                userType={'admin'}
+                            />
+                            : currentControlState === 1
+                            ? <>
+                                <ToolbarButton
+                                    onClick={() => nextControlState()}
+                                    type={"no"}
+                                    caption={''}
+                                    isCaption={false}
+                                    size={"medium"}
+                                />
+                                <ToolbarButton
+                                    onClick={() => nextControlState()}
+                                    type={"yes"}
+                                    caption={''}
+                                    isCaption={false}
+                                    size={"medium"}
+                                />
+                            </>
+                            : currentControlState === 2
+                            ? <ControlButton
+                                onClick={() => nextControlState()}
+                                state={"return"}
+                                userType={'admin'}
+                            />
+                            : currentControlState === 3
+                            ? <>
+                                <ToolbarButton
+                                    onClick={() => nextControlState()}
+                                    type={"no"}
+                                    caption={''}
+                                    isCaption={false}
+                                    size={"medium"}
+                                />
+                                <ToolbarButton
+                                    onClick={() => nextControlState()}
+                                    type={"yes"}
+                                    caption={''}
+                                    isCaption={false}
+                                    size={"medium"}
+                                />
+                            </>
+                            : null
+                        }
+                        
                     </div>
                     : null
                 }

src/components/mainScreen/toolbar/controlButton.tsx

@@ -0,0 +1,42 @@
+import React from "react";
+import controlOnIcon from './icons/constrolOnIcon.svg';
+import controlOffIcon from './icons/constrolOffIcon.svg';
+
+type TProps = {
+    state: 'default' | 'waiting' | 'return'
+    userType: 'admin' | 'user'
+    onClick: () => void
+}
+
+const titleButtonAdmin = {
+    default: 'Передать управление',
+    waiting: 'Передать управление',
+    return: 'Вернуть управление'
+}
+
+const titleButtonUser = {
+    default: 'Запросить управление',
+    waiting: 'Запросить управление',
+    return: 'Вернуть управление'
+}
+
+export const ControlButton:React.FC<TProps> = React.memo((props) => {
+    return <div className={`control-button ${props.state}`} onClick={() => props.onClick()}>
+        <img 
+            className="control-button-icon"
+            alt="control icon"
+            src={
+                props.userType === "admin" || props.state === 'return'
+                ? controlOnIcon
+                : controlOffIcon
+            }
+        />
+        <span className="constrol-button-title">
+            {
+                props.userType === "admin"
+                ? titleButtonAdmin[props.state]
+                : titleButtonUser[props.state]
+            }
+        </span>
+    </div>
+})

src/components/mainScreen/toolbar/toolbar.css

@@ -102,6 +102,10 @@
     display: flex;
     gap: 10px;
     align-items: center;
+    color: #FFFFFF;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 17px;
 }
 
 
@@ -301,7 +305,13 @@
     background-image: none;
 }
 
-.toolbar-button-large-view {
+.toolbar-button.medium {
+    width: 94px;
+    background-image: none;
+}
+
+.toolbar-button-large-view,
+.toolbar-button-medium-view {
     display: flex;
     align-items: center;
     justify-content: center;
@@ -323,13 +333,80 @@
     background-size: 100% 100%;
 }
 
-.toolbar-button-large-view-title {
+.toolbar-button-large-view-title,
+.toolbar-button-medium-view-title {
     font-weight: 400;
     font-size: 14px;
     line-height: 130%;
     color: #FFFFFF;
 }
 
+.toolbar-button.yes .toolbar-button-medium-view-icon {
+    width: 24px;
+    height: 24px;
+    background: url('icons/constrolOnIcon.svg') 50% 50% no-repeat;
+    background-size: 100% 100%;
+}
+
+.toolbar-button.yes {
+    background-color: #219653;
+}
+
+.toolbar-button.no .toolbar-button-medium-view-icon {
+    width: 24px;
+    height: 24px;
+    background: url('icons/constrolOffIcon.svg') 50% 50% no-repeat;
+    background-size: 100% 100%;
+}
+
+.toolbar-button.no {
+    background-color: #EB5757;
+}
+
+.control-button {
+    box-sizing: border-box;
+    display: flex;
+    width: 196px;
+    height: 44px;
+    border-radius: 50px;
+    justify-content: center;
+    align-items: center;
+    gap: 4px;
+    background: #4F4F4F;
+    color: #FFFFFF;
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 17px;
+    cursor: pointer;
+    user-select: none;
+}
+
+.control-button.waiting {
+    background: #F2994A;
+}
+
+.control-button:hover {
+    opacity: .7;
+}
+
+
+.control-button-icon {
+    width: 24px;
+    height: 24px;
+}
+
+
+
+
+
+
+
+
+
+
+
+
+
 .show-toolbar-enter {
     transform: translateX(-60px);
 }

src/components/mainScreen/toolbar/toolbar.tsx

@@ -1,10 +1,9 @@
 import React, { useContext, useState } from "react";
 import { ContextWindowHeight } from "../../contextWindowHeight";
 import { ButtonContainer } from "./buttonContainer";
-import './toolbar.css';
 import { ToolbarButton } from "./toolbarButton";
-import { BorderLine } from "./toolbarButtonContainerBorderLine";
 import { CaptionToolbarButtons } from "./typeCaptionButtons";
+import './toolbar.css';
 
 type TProps = {
     onClickOpenButton: () => void

src/components/mainScreen/toolbar/toolbarButton.tsx

@@ -28,7 +28,7 @@ export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
                 ${props.type} ${isActive ? 'on' : ''} 
                 ${props?.isNotification ? 'notification' : ''}
                 ${props?.isSelected ? 'selected' : ''}
-                ${props?.size ? `large ${props.type}` : ''}
+                ${props?.size === 'large' ? `large ${props.type}` : props?.size === 'medium' ? `medium ${props.type}` : ''}
                 `
             } 
             onClick={() => {

src/components/mainScreen/toolbar/typeButtons.ts

@@ -16,4 +16,6 @@ export type TypeToolbarButtons =
     | 'copy'
     | 'share'
     | 'language ru'
-    | 'language en'
+    | 'language en'
+    | 'yes'
+    | 'no'

src/components/mainScreen/toolbar/typeCaptionButtons.ts

@@ -16,5 +16,7 @@ export const CaptionToolbarButtons = {
     'copy': 'Скопировать',
     'share': 'Поделиться',
     'language ru': 'Язык',
-    'language en': 'Language'
+    'language en': 'Language',
+    'yes': 'Да',
+    'no': 'Нет'
 }