добавлены иконки, прописана сетка тулбара, добавлено отображение уведомлений на иконках юзеров

src/components/mainScreen/toolbar/buttonContainer.tsx

@@ -4,13 +4,19 @@ import { BorderLine } from "./toolbarButtonContainerBorderLine";
 import { TypeToolbarButtons } from "./typeButtons";
 
 type TProps = {
-    buttons: Array<{type: TypeToolbarButtons, onClick: () => void}>
+    buttons: Array<{type: TypeToolbarButtons, isNotification?: boolean, onClick: () => void}>
 }
 
 export const ButtonContainer:React.FC<TProps> = React.memo((props) => {
     return <div className="toolbar-button-container">
         <BorderLine />
-        {props.buttons.map(button => <ToolbarButton onClick={button.onClick} type={button.type} />)}
+        {props.buttons.map((button, index) => 
+            <ToolbarButton
+                key={button.type + index}
+                onClick={button.onClick} 
+                type={button.type} 
+                isNotification={button?.isNotification}
+            />)}
         <BorderLine />
     </div>
 })

src/components/mainScreen/toolbar/icons/guestIcon.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="#9B51E0"/>
+<path d="M27.2145 28.2667L27.4783 28.6914H27.4783L27.2145 28.2667ZM12.8009 28.2667L13.0647 27.8419H13.0647L12.8009 28.2667ZM12.0075 26.5842L11.5093 26.5415L12.0075 26.5842ZM28.0079 26.5842L27.5097 26.627L27.5097 26.627L28.0079 26.5842ZM27.2779 24.0084L26.8218 24.2132L27.2779 24.0084ZM12.7375 24.0084L12.2814 23.8035L12.7375 24.0084ZM25.9965 21.9271L26.351 21.5745L25.9965 21.9271ZM14.0189 21.9271L14.3734 22.2796L14.0189 21.9271ZM20.0077 22.6252V23.1252V22.6252ZM24.1114 14.6038C24.1114 15.7464 23.6451 16.9349 22.8815 17.836C22.1186 18.7363 21.0975 19.3077 20.0076 19.3077V20.3077C21.4603 20.3077 22.7411 19.5485 23.6445 18.4825C24.5471 17.4173 25.1114 16.0039 25.1114 14.6038H24.1114ZM20.0076 19.3077C18.9177 19.3077 17.8966 18.7363 17.1336 17.836C16.3701 16.9349 15.9038 15.7464 15.9038 14.6038H14.9038C14.9038 16.0039 15.4681 17.4173 16.3707 18.4825C17.274 19.5485 18.5548 20.3077 20.0076 20.3077V19.3077ZM15.9038 14.6038C15.9038 12.3374 17.7411 10.5 20.0076 10.5V9.5C17.1888 9.5 14.9038 11.7851 14.9038 14.6038H15.9038ZM20.0076 10.5C22.2741 10.5 24.1114 12.3374 24.1114 14.6038H25.1114C25.1114 11.7851 22.8264 9.5 20.0076 9.5V10.5ZM26.9506 27.8419C26.4342 28.1628 25.8601 28.3338 24.8232 28.419C23.77 28.5056 22.3003 28.5002 20.0077 28.5002V29.5002C22.2755 29.5002 23.7998 29.5065 24.9052 29.4157C26.0268 29.3234 26.776 29.1277 27.4783 28.6914L26.9506 27.8419ZM20.0077 28.5002C17.715 28.5002 16.2454 28.5056 15.1922 28.419C14.1552 28.3338 13.5812 28.1628 13.0647 27.8419L12.5371 28.6914C13.2394 29.1277 13.9886 29.3234 15.1102 29.4157C16.2156 29.5065 17.7399 29.5002 20.0077 29.5002V28.5002ZM11.5093 26.5415C11.4375 27.3781 11.7853 28.2244 12.5371 28.6914L13.0647 27.8419C12.6758 27.6003 12.4614 27.1419 12.5056 26.627L11.5093 26.5415ZM27.5097 26.627C27.5539 27.1419 27.3396 27.6003 26.9506 27.8419L27.4783 28.6914C28.23 28.2244 28.5779 27.3781 28.5061 26.5415L27.5097 26.627ZM26.8218 24.2132C27.1389 24.9195 27.4373 25.783 27.5097 26.627L28.5061 26.5415C28.4201 25.5396 28.0735 24.5596 27.734 23.8035L26.8218 24.2132ZM12.5056 26.627C12.5781 25.783 12.8765 24.9195 13.1936 24.2132L12.2814 23.8035C11.9419 24.5596 11.5953 25.5396 11.5093 26.5415L12.5056 26.627ZM13.1936 24.2132C13.6265 23.2491 13.7723 22.8841 14.3734 22.2796L13.6643 21.5745C12.9194 22.3236 12.7107 22.8476 12.2814 23.8035L13.1936 24.2132ZM27.734 23.8035C27.3047 22.8476 27.096 22.3236 26.351 21.5745L25.642 22.2796C26.2431 22.8841 26.3888 23.2491 26.8218 24.2132L27.734 23.8035ZM26.351 21.5745C25.8449 21.0656 25.2894 20.8426 24.7027 20.825C24.1434 20.8083 23.592 20.9801 23.0838 21.1778C22.8269 21.2777 22.5642 21.3914 22.3099 21.4995C22.0518 21.6092 21.7975 21.7154 21.5399 21.8091C21.0242 21.9967 20.5197 22.1252 20.0077 22.1252V23.1252C20.6847 23.1252 21.3137 22.9555 21.8818 22.7488C22.1662 22.6453 22.4414 22.5302 22.7011 22.4198C22.9646 22.3078 23.208 22.2025 23.4463 22.1098C23.9284 21.9222 24.3235 21.8141 24.6728 21.8245C24.9946 21.8342 25.3097 21.9455 25.642 22.2796L26.351 21.5745ZM20.0077 22.1252C19.4957 22.1252 18.9912 21.9967 18.4755 21.8091C18.2179 21.7154 17.9636 21.6092 17.7055 21.4995C17.4512 21.3914 17.1884 21.2777 16.9316 21.1778C16.4234 20.9801 15.8719 20.8083 15.3127 20.825C14.726 20.8426 14.1704 21.0656 13.6643 21.5745L14.3734 22.2796C14.7057 21.9455 15.0208 21.8342 15.3426 21.8245C15.6918 21.8141 16.0869 21.9222 16.569 22.1098C16.8074 22.2025 17.0507 22.3078 17.3143 22.4198C17.574 22.5302 17.8492 22.6453 18.1335 22.7488C18.7017 22.9555 19.3307 23.1252 20.0077 23.1252V22.1252Z" fill="white"/>
+</svg>

src/components/mainScreen/toolbar/icons/selfIcon.svg

@@ -0,0 +1,4 @@
+<svg width="40" height="40" viewBox="0 0 40 40" fill="none" xmlns="http://www.w3.org/2000/svg">
+<rect width="40" height="40" fill="#27AE60"/>
+<path d="M27.2145 28.2667L27.4783 28.6914H27.4783L27.2145 28.2667ZM12.8009 28.2667L13.0647 27.8419H13.0647L12.8009 28.2667ZM12.0075 26.5842L11.5093 26.5415L12.0075 26.5842ZM28.0079 26.5842L27.5097 26.627L27.5097 26.627L28.0079 26.5842ZM27.2779 24.0084L26.8218 24.2132L27.2779 24.0084ZM12.7375 24.0084L12.2814 23.8035L12.7375 24.0084ZM25.9965 21.9271L26.351 21.5745L25.9965 21.9271ZM14.0189 21.9271L14.3734 22.2796L14.0189 21.9271ZM20.0077 22.6252V23.1252V22.6252ZM24.1114 14.6038C24.1114 15.7464 23.6451 16.9349 22.8815 17.836C22.1186 18.7363 21.0975 19.3077 20.0076 19.3077V20.3077C21.4603 20.3077 22.7411 19.5485 23.6445 18.4825C24.5471 17.4173 25.1114 16.0039 25.1114 14.6038H24.1114ZM20.0076 19.3077C18.9177 19.3077 17.8966 18.7363 17.1336 17.836C16.3701 16.9349 15.9038 15.7464 15.9038 14.6038H14.9038C14.9038 16.0039 15.4681 17.4173 16.3707 18.4825C17.274 19.5485 18.5548 20.3077 20.0076 20.3077V19.3077ZM15.9038 14.6038C15.9038 12.3374 17.7411 10.5 20.0076 10.5V9.5C17.1888 9.5 14.9038 11.7851 14.9038 14.6038H15.9038ZM20.0076 10.5C22.2741 10.5 24.1114 12.3374 24.1114 14.6038H25.1114C25.1114 11.7851 22.8264 9.5 20.0076 9.5V10.5ZM26.9506 27.8419C26.4342 28.1628 25.8601 28.3338 24.8232 28.419C23.77 28.5056 22.3003 28.5002 20.0077 28.5002V29.5002C22.2755 29.5002 23.7998 29.5065 24.9052 29.4157C26.0268 29.3234 26.776 29.1277 27.4783 28.6914L26.9506 27.8419ZM20.0077 28.5002C17.715 28.5002 16.2454 28.5056 15.1922 28.419C14.1552 28.3338 13.5812 28.1628 13.0647 27.8419L12.5371 28.6914C13.2394 29.1277 13.9886 29.3234 15.1102 29.4157C16.2156 29.5065 17.7399 29.5002 20.0077 29.5002V28.5002ZM11.5093 26.5415C11.4375 27.3781 11.7853 28.2244 12.5371 28.6914L13.0647 27.8419C12.6758 27.6003 12.4614 27.1419 12.5056 26.627L11.5093 26.5415ZM27.5097 26.627C27.5539 27.1419 27.3396 27.6003 26.9506 27.8419L27.4783 28.6914C28.23 28.2244 28.5779 27.3781 28.5061 26.5415L27.5097 26.627ZM26.8218 24.2132C27.1389 24.9195 27.4373 25.783 27.5097 26.627L28.5061 26.5415C28.4201 25.5396 28.0735 24.5596 27.734 23.8035L26.8218 24.2132ZM12.5056 26.627C12.5781 25.783 12.8765 24.9195 13.1936 24.2132L12.2814 23.8035C11.9419 24.5596 11.5953 25.5396 11.5093 26.5415L12.5056 26.627ZM13.1936 24.2132C13.6265 23.2491 13.7723 22.8841 14.3734 22.2796L13.6643 21.5745C12.9194 22.3236 12.7107 22.8476 12.2814 23.8035L13.1936 24.2132ZM27.734 23.8035C27.3047 22.8476 27.096 22.3236 26.351 21.5745L25.642 22.2796C26.2431 22.8841 26.3888 23.2491 26.8218 24.2132L27.734 23.8035ZM26.351 21.5745C25.8449 21.0656 25.2894 20.8426 24.7027 20.825C24.1434 20.8083 23.592 20.9801 23.0838 21.1778C22.8269 21.2777 22.5642 21.3914 22.3099 21.4995C22.0518 21.6092 21.7975 21.7154 21.5399 21.8091C21.0242 21.9967 20.5197 22.1252 20.0077 22.1252V23.1252C20.6847 23.1252 21.3137 22.9555 21.8818 22.7488C22.1662 22.6453 22.4414 22.5302 22.7011 22.4198C22.9646 22.3078 23.208 22.2025 23.4463 22.1098C23.9284 21.9222 24.3235 21.8141 24.6728 21.8245C24.9946 21.8342 25.3097 21.9455 25.642 22.2796L26.351 21.5745ZM20.0077 22.1252C19.4957 22.1252 18.9912 21.9967 18.4755 21.8091C18.2179 21.7154 17.9636 21.6092 17.7055 21.4995C17.4512 21.3914 17.1884 21.2777 16.9316 21.1778C16.4234 20.9801 15.8719 20.8083 15.3127 20.825C14.726 20.8426 14.1704 21.0656 13.6643 21.5745L14.3734 22.2796C14.7057 21.9455 15.0208 21.8342 15.3426 21.8245C15.6918 21.8141 16.0869 21.9222 16.569 22.1098C16.8074 22.2025 17.0507 22.3078 17.3143 22.4198C17.574 22.5302 17.8492 22.6453 18.1335 22.7488C18.7017 22.9555 19.3307 23.1252 20.0077 23.1252V22.1252Z" fill="white"/>
+</svg>

src/components/mainScreen/toolbar/openToolbarBorderHoverIcon.svg

@@ -0,0 +1,6 @@
+<svg width="26" height="130" viewBox="0 0 26 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0.5H0.5V1V129V129.5H1H4.69231H4.96719L5.11447 129.268L23.8655 99.7209C24.9331 98.0386 25.5 96.0872 25.5 94.0947V35.9053C25.5 33.9128 24.9331 31.9614 23.8655 30.2791L5.11447 0.732088L4.96719 0.5H4.69231H1Z" stroke="#4F4F4F"/>
+<path d="M1 1H4.69231L23.4433 30.547C24.4601 32.1492 25 34.0076 25 35.9053V94.0947C25 95.9924 24.4601 97.8508 23.4433 99.453L4.69231 129H1V1Z" fill="#4F4F4F"/>
+<rect x="1" width="4" height="2" fill="#4F4F4F"/>
+<rect x="1" y="128" width="4" height="2" fill="#4F4F4F"/>
+</svg>

src/components/mainScreen/toolbar/openToolbarBorderIcon.svg

@@ -0,0 +1,6 @@
+<svg width="26" height="130" viewBox="0 0 26 130" fill="none" xmlns="http://www.w3.org/2000/svg">
+<path d="M1 0.5H0.5V1V129V129.5H1H4.69231H4.96719L5.11447 129.268L23.8655 99.7209C24.9331 98.0386 25.5 96.0872 25.5 94.0947V35.9053C25.5 33.9128 24.9331 31.9614 23.8655 30.2791L5.11447 0.732088L4.96719 0.5H4.69231H1Z" stroke="#4F4F4F"/>
+<path d="M1 1H4.69231L23.4433 30.547C24.4601 32.1492 25 34.0076 25 35.9053V94.0947C25 95.9924 24.4601 97.8508 23.4433 99.453L4.69231 129H1V1Z" fill="#333333"/>
+<rect x="1" width="4" height="2" fill="#333333"/>
+<rect x="1" y="128" width="4" height="2" fill="#333333"/>
+</svg>

src/components/mainScreen/toolbar/toolbar.css

@@ -24,13 +24,35 @@
     background: #333333;
     padding: 14px 15px;
     box-sizing: border-box;
-    /* border-right: 1px solid red; */
+    height: 100%;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;    
+}
+
+.toolbar-field-part {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.toolbar-button-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+}
+
+.toolbar-button-container-border-line {
+    width: 100%;
+    height: 1px;
+    background-color: #4F4F4F;
 }
 
 .toolbar-open-button {
+    z-index: 0;
     position: absolute;
     top: calc((100% - 128px) / 2);
-    left: calc(100% - 5px);
+    left: calc(100% - 4px);
     display: flex;
     justify-content: center;
     align-items: center;
@@ -56,6 +78,78 @@
     background: url('closeToolbarIcon.svg') 50% 50% no-repeat;
 }
 
+.toolbar-button {
+    position: relative;
+    width: 40px;
+    height: 40px;
+    border: none;
+    border-radius: 50px;
+    background-size: 100% 100%;
+}
+
+.toolbar-button.notification::after {
+    content: '';
+    position: absolute;
+    right: 0;
+    top: 0;
+    width: 12px;
+    height: 12px;
+    border-radius: 50px;
+    background-color: #F2994A;
+}
+
+.toolbar-button.fullscreen {
+    background: url('./icons/disableFullscreenIcon.svg');
+}
+
+.toolbar-button.admin {
+    background: url('./icons/adminIcon.svg');
+}
+
+.toolbar-button.self {
+    background: url('./icons/selfIcon.svg');
+}
+
+.toolbar-button.guest {
+    background: url('./icons/guestIcon.svg');
+}
+
+.toolbar-button.users {
+    background: url('./icons/disableFullscreenIcon.svg');
+}
+
+.toolbar-button.micro {
+    background: url('./icons/microDisabledIcon.svg');
+}
+
+.toolbar-button.control {
+    background: url('./icons/controlDisabledIcon.svg');
+}
+
+.toolbar-button.other {
+    background: url('./icons/disableFullscreenIcon.svg');
+}
+
+.toolbar-button.sound {
+    background: url('./icons/disableFullscreenIcon.svg');
+}
+
+.toolbar-button.exit {
+    background: url('./icons/exitIcon.svg');
+}
+
+.toolbar-button.copy {
+    background: url('./icons/disableFullscreenIcon.svg');
+}
+
+.toolbar-button.share {
+    background: url('./icons/shareIcon.svg');
+}
+
+
+
+
+
 
 .show-toolbar-enter {
     transform: translateX(-70px);

src/components/mainScreen/toolbar/toolbar.tsx

@@ -2,6 +2,7 @@ import React from "react";
 import { ButtonContainer } from "./buttonContainer";
 import './toolbar.css';
 import { ToolbarButton } from "./toolbarButton";
+import { BorderLine } from "./toolbarButtonContainerBorderLine";
 
 type TProps = {
     onClickOpenButton: () => void
@@ -11,7 +12,7 @@ type TProps = {
 export const Toolbar:React.FC<TProps> = React.memo((props) => {
     return <div className={`toolbar-container ${props.isOpen ? 'opened' : 'closed'}`}>
         <div className="toolbar-field">
-            <div className="toolbar-field-top-part">
+            <div className="toolbar-field-part">
                 <ToolbarButton 
                     type="fullscreen"
                     onClick={() => null}
@@ -19,25 +20,26 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
                 <ButtonContainer 
                     buttons={[
                         {
-                            type: "user",
+                            type: "admin",
+                            onClick: () => console.log('click'),
+                        },
+                        {
+                            type: "self",
                             onClick: () => console.log('click')
                         },
                         {
-                            type: "user",
+                            type: "guest",
                             onClick: () => console.log('click')
                         },
                         {
-                            type: "user",
+                            type: "guest",
-                            onClick: () => console.log('click')
+                            onClick: () => console.log('click'),
-                        },
+                            isNotification: true
-                        {
-                            type: "user",
-                            onClick: () => console.log('click')
                         }
                     ]}
                 />
             </div>
-            <div className="toolbar-field-bottom-part">
+            <div className="toolbar-field-part">
                 <ButtonContainer 
                     buttons={[
                         {
@@ -50,14 +52,11 @@ export const Toolbar:React.FC<TProps> = React.memo((props) => {
                         }                        
                     ]}
                 />
-                <ButtonContainer 
+                <ToolbarButton 
-                    buttons={[
+                    type="share"
-                        {
+                    onClick={() => console.log('click')}
-                            type: "share",
-                            onClick: () => console.log('click')
-                        }
-                    ]}
                 />
+                <BorderLine />                
                 <ToolbarButton 
                     type="exit"
                     onClick={() => null}

src/components/mainScreen/toolbar/toolbarButton.tsx

@@ -4,8 +4,12 @@ import { TypeToolbarButtons } from "./typeButtons";
 type TProps = {
     onClick: () => void
     type: TypeToolbarButtons
+    isNotification?: boolean
 }
 
 export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
-    return <button className={`toolbar-button ${props.type}`} onClick={() => props.onClick()}></button>
+    return <button 
+        className={`toolbar-button ${props.type} ${props?.isNotification ? 'notification' : ''}`} 
+        onClick={() => props.onClick()}>            
+        </button>
 })

src/components/mainScreen/toolbar/typeButtons.ts

@@ -1,7 +1,9 @@
 export type TypeToolbarButtons = 
     'fullscreen' 
-    | 'user' 
+    | 'admin'
-    | 'userse'
+    | 'guest'
+    | 'self'
+    | 'users'
     | 'micro'
     | 'control'
     | 'other'

tsconfig.json

@@ -18,7 +18,8 @@
     "resolveJsonModule": true,
     "isolatedModules": true,
     "noEmit": true,
-    "jsx": "react-jsx"
+    "jsx": "react-jsx",
+    "strictNullChecks": false
   },
   "include": [
     "src"