Make highlight color palette v.2

apps/common/mobile/lib/component/HighlightColorPalette.jsx

@@ -2,27 +2,29 @@ import React from 'react';
 import { f7, ListItem, List, Icon, Page } from 'framework7-react';
 import { useTranslation } from 'react-i18next';
 
-const HighlightColorPalette = ({onColorClick, curColor}) => {
+const HighlightColorPalette = ({changeColor, curColor}) => {
     const { t } = useTranslation();
     const highlightColors = [
-        'FFFF00', '00FF00', '00FFFF', 'FF00FF', '0000FF', 'FF0000', '00008B', '008B8B',
+        ['ffff00', '00ff00', '00ffff', 'ff00ff', '0000ff', 'ff0000', '00008b', '008b8b'],
-        '006400', '800080', '8B0000', '808000', 'FFFFFF', 'D3D3D3', 'A9A9A9', '000000'
+        ['006400', '800080', '8b0000', '808000', 'ffffff', 'd3d3d3', 'a9a9a9', '000000']
     ];
 
     return (
         <List>
             <ListItem>
-                <div className='palette'>
+                <div className='highlight-palette'>
-                    <div className="row">
+                    {highlightColors.map((row, index) => (
-                        {highlightColors.map((effect, index) => {
+                        <div key={index} className="row">
+                            {row.map((effect, index) => {
                                 return (
-                                <a key={index} className={(curColor && (curColor.color === effect  || curColor === effect)) ? 'highlight-color active' : 'highlight-color'} style={{ background: `#${effect}`}} onClick={() => {onColorClick(effect)}}></a>
+                                    <a key={index} className={(curColor && (curColor.color === effect  || curColor === effect)) ? 'highlight-color highlight-color_active' : 'highlight-color'} style={{ background: `#${effect}`}} onClick={() => {changeColor(effect)}}></a>
                                 );
                             })}
                         </div>
+                    ))}
                 </div>
             </ListItem>
-            <ListItem radio checked={true} title={t('Edit.textNoFill')}></ListItem>
+            <ListItem radio checked={(curColor && (curColor === 'transparent'))} title={t('Edit.textNoFill')}></ListItem>
         </List>
     )
 };

apps/common/mobile/resources/less/common-material.less

@@ -294,7 +294,7 @@
             .color-preview {
                 width: 30px;
                 height: 30px;
-                border-radius: 16px;
+                border-radius: 4px;
                 margin-top: -3px;
                 box-shadow: 0 0 0 1px rgba(0, 0, 0, .15) inset;
                 &.auto {

apps/common/mobile/resources/less/common.less

@@ -903,11 +903,26 @@ input[type="number"]::-webkit-inner-spin-button {
 
 // Highlight Colors
 
+.highlight-palette {
+    width: 100%;
+}
+
 .highlight-color {
-    width: 38px;
+    min-width: 10px;
-    height: 38px;
+    min-height: 34px;
     margin: 1px;
-    border: 0.5px solid #9E9E9E;
+    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.15) inset;
+    position: relative;
+    flex-grow: 1;
+    &_active:after {
+        content: ' ';
+        position: absolute;
+        width: 100%;
+        height: 100%;
+        box-shadow: 0 0 0 1px #ffffff, 0 0 0 4px #446995;
+        z-index: 1;
+        border-radius: 1px;
+    }
 }
 
 
@@ -916,3 +931,4 @@ input[type="number"]::-webkit-inner-spin-button {
 
 
 
+

apps/documenteditor/mobile/src/view/edit/EditText.jsx

@@ -491,7 +491,7 @@ const PageBackgroundColor = props => {
                     </NavRight>
                 }
             </Navbar>
-            <HighlightColorPalette />
+            <HighlightColorPalette changeColor={changeColor} curColor={backgroundColor} />
             {/* <ThemeColorPalette changeColor={changeColor} curColor={backgroundColor} customColors={customColors} transparent={true}/>
             <List>
                 <ListItem title={_t.textAddCustomColor} link={'/edit-text-custom-back-color/'} routeProps={{