добавлены визуальные эффекты

src/components/mainScreen/toolbar/toolbar.css

@@ -82,6 +82,9 @@
 
 .toolbar-button-area {
     position: relative;
+    display: flex;
+    background-color: #333333;
+    border-top-left-radius: 50px solid #4f4f4f;
 }
 
 .toolbar-button {
@@ -93,19 +96,29 @@
     background-size: 100% 100%;
     background-color: #4F4F4F;
     cursor: pointer;
+    flex-shrink: 0;
 }
 
 .toolbar-button:hover {
     opacity: .7;
 }
 
+.toolbar-button-add-buttons {
+    background-color: #333333;
+    position: absolute;    
+    top: 0;
+    left: 100%;
+    display: flex;
+}
+
 .toolbar-button-description-container {
+    margin-left: 2px;
     opacity: 0;
     position: absolute;
     left: 100%;
     height: 24px;
     top: calc(50% - 12px);
-    background-color: #27AE60;
+    /* background-color: #27AE60; */
     transition: .3s;
     pointer-events: none;
     display: flex;
@@ -123,13 +136,27 @@
     /* display: inline-block; */
     white-space: nowrap;
     /* flex-shrink: 0; */
+    background-color: #333333;
+    height: 24px;
+    border-top-right-radius: 50px;
+    border-bottom-right-radius: 50px;
+    border: 1px solid #4F4F4F;
+    color: white;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    padding: 0 12px 0 8px;
+    font-weight: 400;
+    font-size: 12px;
+    line-height: 15px;
 }
 
 .toolbar-button-description-triangle {
     display: flex;
     width: 18px;
-    height: 24px;
+    height: 26px;
     background-color: #EB5757;
+    background: url('icons/descriptTiriangleIcon.svg');
 }
 
 .toolbar-button.notification::after {
@@ -173,23 +200,23 @@
     background: url('./icons/disableFullscreenIcon.svg');
 }
 
-.toolbar-button.microOff {
+.toolbar-button.micro {
     background: url('./icons/microOffIcon.svg') 50% 50% no-repeat;
     background-color: #4F4F4F;
 }
 
-.toolbar-button.microOn {
+.toolbar-button.micro.on {
     background: url('./icons/microOnIcon.svg') 50% 50% no-repeat;
     background-color: #4F4F4F;
 }
 
-.toolbar-button.controlOff {
+.toolbar-button.control {
     background: url('./icons/constrolOffIcon.svg') 50% 50% no-repeat;
     background-color: #4F4F4F;
 }
 
-.toolbar-button.controlOn {
-    background: url('./icons/constrolOffIcon.svg') 50% 50% no-repeat;
+.toolbar-button.control.on {
+    background: url('./icons/constrolOnIcon.svg') 50% 50% no-repeat;
     background-color: #4F4F4F;
 }
 

src/components/mainScreen/toolbar/toolbar.tsx

@@ -45,11 +45,11 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
                 <ButtonContainer 
                     buttons={[
                         {
-                            type: "controlOff",
+                            type: "control on",
                             onClick: () => console.log('click')
                         },
                         {
-                            type: "microOff",
+                            type: "micro",
                             onClick: () => console.log('click')
                         }                        
                     ]}

src/components/mainScreen/toolbar/toolbarButton.tsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import { TypeToolbarButtons } from "./typeButtons";
 
 type TProps = {
@@ -9,15 +9,46 @@ type TProps = {
 }
 
 export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
+    const [isActive, setIsActive] = useState(false);
+    const [isActive2, setIsActive2] = useState(false);
+    const [showAddButtons, setShowAddBUttons] = useState(false)
+    function onClick() {
+        setIsActive(!isActive)
+    }
+
+    function onClick2() {
+        setIsActive2(!isActive2)
+    }
+
+    function showAdd() {
+        setShowAddBUttons(!showAddButtons);
+    }
+
     return <div className="toolbar-button-area">
         <button 
             className={`toolbar-button ${props.type} ${props?.isNotification ? 'notification' : ''}`} 
-            onClick={() => props.onClick()}
+            onClick={() => showAdd()}
         >
         </button>
-        <div className="toolbar-button-description-container">
+        {
+            showAddButtons && props.type.includes('user')
+            &&
+            <div className="toolbar-button-add-buttons">
+                <button 
+                    className={`toolbar-button micro ${isActive ? 'on' : ''}`} 
+                    onClick={() => onClick()}
+                >
+                </button>
+                <button 
+                    className={`toolbar-button control ${isActive2 ? 'on' : ''}`} 
+                    onClick={() => onClick2()}
+                >
+                </button>
+            </div>
+        }        
+        {/* <div className="toolbar-button-description-container">
             <span className="toolbar-button-description-triangle"></span>
             <span className="toolbar-button-description-rectangle">{props.caption}</span>
-        </div>
+        </div> */}
     </div>    
 })

src/components/mainScreen/toolbar/typeButtons.ts

@@ -5,10 +5,10 @@ export type TypeToolbarButtons =
     | 'user guest'
     | 'user self'
     | 'users'
-    | 'microOn'
-    | 'microOff'
-    | 'controlOn'
-    | 'controlOff'
+    | 'micro'
+    | 'micro on'
+    | 'control'
+    | 'control on'
     | 'other'
     | 'soundOn'
     | 'soundOff'

src/components/mainScreen/toolbar/typeCaptionButtons.ts

@@ -5,10 +5,10 @@ export const CaptionToolbarButtons = {
     'user guest': 'Гость',
     'user self': 'Вы',
     'users': 'Пользователи',
-    'microOff': 'Включить микрофон',
-    'microOn': 'Выключить микрофон',
-    'controlOn': '',
-    'controlOff': 'Запрос управления',
+    'micro': 'Включить микрофон',
+    'micro on': 'Выключить микрофон',
+    'control on': '',
+    'control': 'Запрос управления',
     'other': '',
     'soundOn': '',
     'soundOff': '',