From 26ecc099e9f4d26bebfa4b0e329cae39b0db3efb Mon Sep 17 00:00:00 2001
From: DmitriyB <dimasik_burdin@inbox.ru>
Date: Thu, 11 Aug 2022 18:39:46 +0500
Subject: [PATCH] =?UTF-8?q?=D0=B4=D0=BE=D0=BF=D0=B8=D1=81=D0=B0=D0=BD?=
 =?UTF-8?q?=D0=B0=20=D0=BA=D0=BD=D0=BE=D0=BF=D0=BA=D0=B0=20=D0=B4=D0=BE?=
 =?UTF-8?q?=D0=BF=20=D0=BA=D0=BE=D0=BD=D1=82=D0=B5=D0=B9=D0=BD=D0=B5=D1=80?=
 =?UTF-8?q?=D0=B0,=20=D0=BA=D0=BE=D1=82=D0=BE=D1=80=D0=B0=D1=8F=20=D0=B8?=
 =?UTF-8?q?=D0=BC=D0=B5=D0=B5=D1=82=20=D0=B1=D0=BE=D0=BB=D1=8C=D1=88=D1=83?=
 =?UTF-8?q?=D1=8E=20=D1=88=D0=B8=D1=80=D0=B8=D0=BD=D1=83?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/components/mainScreen/toolbar/toolbar.css | 36 ++++++++++++++++---
 .../mainScreen/toolbar/toolbarButton.tsx      |  7 ++--
 2 files changed, 37 insertions(+), 6 deletions(-)

diff --git a/src/components/mainScreen/toolbar/toolbar.css b/src/components/mainScreen/toolbar/toolbar.css
index db52f22..1c2e128 100644
--- a/src/components/mainScreen/toolbar/toolbar.css
+++ b/src/components/mainScreen/toolbar/toolbar.css
@@ -103,9 +103,7 @@
     align-items: center;
 }
 
-.toolbar-button.large {
-    width: 196px;
-}
+
 
 .toolbar-button:hover {
     opacity: .7;    
@@ -119,7 +117,7 @@
     display: flex;
     padding: 8px;
     box-sizing: border-box;
-    border-radius: 28px;
+    border-radius: 50px;
     background: #333333;
     border: 1px solid #4F4F4F;
     gap: 8px;
@@ -282,10 +280,40 @@
     background-color: #CE56C2;
 }
 
+.toolbar-button.large,
+.toolbar-button.control.large {
+    width: 196px;    
+    background-image: none;
+}
 
+.toolbar-button-large-view {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    gap: 4px;
+    width: 100%;
+}
 
+.toolbar-button.large.control .toolbar-button-large-view-icon {
+    width: 24px;
+    height: 24px;
+    background: url('icons/constrolOffIcon.svg') 50% 50% no-repeat;
+    background-size: 100% 100%;
+}
 
+.toolbar-button.large.control.on .toolbar-button-large-view-icon {
+    width: 24px;
+    height: 24px;
+    background: url('icons/constrolOnIcon.svg') 50% 50% no-repeat;
+    background-size: 100% 100%;
+}
 
+.toolbar-button-large-view-title {
+    font-weight: 400;
+    font-size: 14px;
+    line-height: 130%;
+    color: #FFFFFF;
+}
 
 .show-toolbar-enter {
     transform: translateX(-60px);
diff --git a/src/components/mainScreen/toolbar/toolbarButton.tsx b/src/components/mainScreen/toolbar/toolbarButton.tsx
index 5c7aab2..4c4402a 100644
--- a/src/components/mainScreen/toolbar/toolbarButton.tsx
+++ b/src/components/mainScreen/toolbar/toolbarButton.tsx
@@ -32,7 +32,7 @@ export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
                 ${props.type} ${isActive ? 'on' : ''} 
                 ${props?.isNotification ? 'notification' : ''}
                 ${props?.isSelected ? 'selected' : ''}
-                ${props?.isLarge ? 'large' : ''}
+                ${props?.isLarge ? `large ${props.type}` : ''}
                 `
             } 
             onClick={() => {
@@ -45,7 +45,10 @@ export const ToolbarButton:React.FC<TProps> = React.memo((props) => {
         >
             {
                 props?.isLarge
-                ? CaptionToolbarButtons[props.type]
+                ? <div className="toolbar-button-large-view">
+                    <span className="toolbar-button-large-view-icon"></span>
+                    <span className="toolbar-button-large-view-title">{CaptionToolbarButtons[props.type]}</span>
+                </div>
                 : null
             }
         </button>