From 6753994332907db452a04f40ddeedb21950bb5a0 Mon Sep 17 00:00:00 2001
From: Andrey Shimagin <andrey.shimagin@onlyoffice.com>
Date: Mon, 21 Mar 2022 15:07:43 +0300
Subject: [PATCH] Refactoring less-styles v2

---
 apps/common/mobile/resources/less/common.less |  5 ++++
 apps/documenteditor/mobile/src/less/app.less  | 26 +------------------
 .../mobile/src/view/edit/EditShape.jsx        |  4 +--
 .../mobile/src/less/app.less                  |  2 +-
 .../mobile/src/view/edit/EditShape.jsx        |  4 +--
 .../src/view/settings/ApplicationSettings.jsx |  3 +--
 .../mobile/src/view/edit/EditShape.jsx        |  4 +--
 .../src/view/settings/ApplicationSettings.jsx |  9 +++----
 .../src/view/settings/SpreadsheetSettings.jsx |  8 +++---
 9 files changed, 20 insertions(+), 45 deletions(-)

diff --git a/apps/common/mobile/resources/less/common.less b/apps/common/mobile/resources/less/common.less
index 3cf3594fd..d15921a6e 100644
--- a/apps/common/mobile/resources/less/common.less
+++ b/apps/common/mobile/resources/less/common.less
@@ -68,8 +68,13 @@
             margin-top: 0;
         }
         .inner-range-title {
+            color: @text-normal;
             padding: 15px 0 0 15px;
         }
+        
+        .range-number {
+            color: @text-normal;  
+        }
     }
     .page-content {
         &.no-padding-top {
diff --git a/apps/documenteditor/mobile/src/less/app.less b/apps/documenteditor/mobile/src/less/app.less
index 7a4c94c7c..0d74a8bc7 100644
--- a/apps/documenteditor/mobile/src/less/app.less
+++ b/apps/documenteditor/mobile/src/less/app.less
@@ -151,7 +151,7 @@
 .table-styles .row div:not(:first-child) {
     margin: 2px auto 0px;
 }
-.table-styles li, .table-styles .row div {
+.table-styles .skeleton-list li, .table-styles .row div {
     padding: 0;
 }
 .table-styles .row .skeleton-list{
@@ -160,30 +160,6 @@
     height: 50px;
 }
 
-// Color Schemes
-
-.color-schemes-menu {
-    cursor: pointer;
-    display: block;
-    // background-color: #fff;
-    .item-inner {
-        justify-content: flex-start;
-    }
-    .color-schema-block {
-        display: flex;
-    }
-    .color {
-        min-width: 26px;
-        min-height: 26px;
-        margin: 0 2px 0 0;
-        box-shadow: 0 0 0 1px rgba(0,0,0,.15) inset;
-    }
-    .item-title {
-        margin-left: 20px;
-        // color: #212121;
-    }
-}
-
 // Picker 
 
 .row-picker {
diff --git a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
index e6ba1a45d..f447cc90b 100644
--- a/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
+++ b/apps/documenteditor/mobile/src/view/edit/EditShape.jsx
@@ -205,7 +205,7 @@ const PageStyle = props => {
                                        onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
                                 ></Range>
                             </div>
-                            <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                            <div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
                                 {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
                             </div>
                         </ListItem>
@@ -229,7 +229,7 @@ const PageStyle = props => {
                                        onRangeChanged={(value) => {props.onOpacity(value)}}
                                 ></Range>
                             </div>
-                            <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                            <div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
                                 {stateOpacity + ' %'}
                             </div>
                         </ListItem>
diff --git a/apps/presentationeditor/mobile/src/less/app.less b/apps/presentationeditor/mobile/src/less/app.less
index 960129624..ded0ee9f0 100644
--- a/apps/presentationeditor/mobile/src/less/app.less
+++ b/apps/presentationeditor/mobile/src/less/app.less
@@ -123,7 +123,7 @@
 .table-styles .row div:not(:first-child) {
     margin: 2px auto 0px;
 }
-.table-styles li, .table-styles .row div {
+.table-styles .skeleton-list li, .table-styles .row div {
     padding: 0;
 }
 .table-styles .row .skeleton-list{
diff --git a/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx b/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
index bd41e6a97..b851120ac 100644
--- a/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
+++ b/apps/presentationeditor/mobile/src/view/edit/EditShape.jsx
@@ -162,7 +162,7 @@ const PageStyle = props => {
                                        onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
                                 ></Range>
                             </div>
-                            <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                            <div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
                                 {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
                             </div>
                         </ListItem>
@@ -186,7 +186,7 @@ const PageStyle = props => {
                                        onRangeChanged={(value) => {props.onOpacity(value)}}
                                 ></Range>
                             </div>
-                            <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                            <div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
                                 {stateOpacity + ' %'}
                             </div>
                         </ListItem>
diff --git a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx
index 9a929743d..2007144e9 100644
--- a/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx
+++ b/apps/presentationeditor/mobile/src/view/settings/ApplicationSettings.jsx
@@ -37,8 +37,7 @@ const PageApplicationSettings = props => {
                                   onChange={() => changeMeasureSettings(2)}></ListItem>
                     </List>
                     <List>
-                        <ListItem>
-                            <span>{_t.textSpellcheck}</span>
+                        <ListItem title={_t.textSpellcheck}>
                             <Toggle checked={isSpellChecking}
                                     onToggleChange={() => {
                                         store.changeSpellCheck(!isSpellChecking);
diff --git a/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx b/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx
index a8cef2809..b20b26c0c 100644
--- a/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/edit/EditShape.jsx
@@ -156,7 +156,7 @@ const PageStyle = props => {
                                        onRangeChanged={(value) => {props.onBorderSize(borderSizeTransform.sizeByIndex(value))}}
                                 ></Range>
                             </div>
-                            <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                            <div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
                                 {stateTextBorderSize + ' ' + Common.Utils.Metric.getMetricName(Common.Utils.Metric.c_MetricUnits.pt)}
                             </div>
                         </ListItem>
@@ -180,7 +180,7 @@ const PageStyle = props => {
                                        onRangeChanged={(value) => {props.onOpacity(value)}}
                                 ></Range>
                             </div>
-                            <div slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
+                            <div className='range-number' slot='inner-end' style={{minWidth: '60px', textAlign: 'right'}}>
                                 {stateOpacity + ' %'}
                             </div>
                         </ListItem>
diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
index 52e08bb5d..30a319d05 100644
--- a/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/settings/ApplicationSettings.jsx
@@ -65,8 +65,7 @@ const PageApplicationSettings = props => {
             }
                 <BlockTitle>{_t.textCommentingDisplay}</BlockTitle>
                 <List>
-                    <ListItem>
-                        <span>{_t.textComments}</span>
+                    <ListItem title={_t.textComments}>
                         <Toggle checked={isComments}
                                 onToggleChange={() => {
                                     storeApplicationSettings.changeDisplayComments(!isComments);
@@ -74,8 +73,7 @@ const PageApplicationSettings = props => {
                                 }}
                         />
                     </ListItem>
-                    <ListItem>
-                        <span>{_t.textResolvedComments}</span>
+                    <ListItem title={_t.textResolvedComments}>
                         <Toggle checked={isResolvedComments} disabled={!isComments}
                                 onToggleChange={() => {
                                     storeApplicationSettings.changeDisplayResolved(!isResolvedComments);
@@ -85,8 +83,7 @@ const PageApplicationSettings = props => {
                     </ListItem>
                 </List>
                 <List>
-                    <ListItem>
-                        <span>{_t.textR1C1Style}</span>
+                    <ListItem title={_t.textR1C1Style}>
                         <Toggle checked={isRefStyle}
                                 onToggleChange={() => {
                                     storeApplicationSettings.changeRefStyle(!isRefStyle);
diff --git a/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx
index 2c7170a01..616f20df7 100644
--- a/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx
+++ b/apps/spreadsheeteditor/mobile/src/view/settings/SpreadsheetSettings.jsx
@@ -238,16 +238,14 @@ const PageSpreadsheetSettings = props => {
                     onPageMarginsChange: props.onPageMarginsChange
                 }}></ListItem>
             </List>
-            <List simpleList>
-                <ListItem>
-                    <span>{_t.textHideHeadings}</span>
+            <List>
+                <ListItem title={_t.textHideHeadings}>
                     <Toggle checked={isHideHeadings} onToggleChange={() => {
                         storeSpreadsheetSettings.changeHideHeadings(!isHideHeadings);
                         props.clickCheckboxHideHeadings(!isHideHeadings)
                     }} />
                 </ListItem>
-                <ListItem>
-                    <span>{_t.textHideGridlines}</span>
+                <ListItem title={_t.textHideGridlines}>
                     <Toggle checked={isHideGridlines} onToggleChange={() => {
                         storeSpreadsheetSettings.changeHideGridlines(!isHideGridlines);
                         props.clickCheckboxHideGridlines(!isHideGridlines)