Merge pull request 'fix/mobile-icons' (#322) from fix/mobile-icons into release/v9.0.0

Author: maxkadushkin

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

@@ -1,5 +1,9 @@
 import React, { useEffect, useState } from 'react'
 import { f7, Icon } from 'framework7-react';
+import { Device } from '../../../../common/mobile/utils/device';
+import SvgIcon from '@common/lib/component/SvgIcon'
+import IconPlusIos from '@common-ios-icons/icon-plus.svg?ios';
+import IconPlusAndroid from '@common-android-icons/icon-plus.svg?android';
 
 export const WheelColorPicker = ({ initialColor = '#ffffff', onSelectColor }) => {
   const [color, setColor] = useState(initialColor);
@@ -23,7 +27,10 @@ export const WheelColorPicker = ({ initialColor = '#ffffff', onSelectColor }) =>
           <div className='current-color-hsb-preview' style={{ backgroundColor: initialColor }}/>
         </div>
         <a href='#' id='add-new-color' className='button button-round' onClick={() => onSelectColor(color)}>
-          <Icon icon='icon-plus' slot="media"/>
+        {Device.ios ? 
+          <SvgIcon slot="media" symbolId={IconPlusIos.id} className='icon icon-svg' /> :
+          <SvgIcon slot="media" symbolId={IconPlusAndroid.id} className='icon icon-svg white' />
+        } 
         </a>
       </div>
     </div>

apps/common/mobile/lib/pages/CollaborationPage.jsx

@@ -30,7 +30,7 @@ const CollaborationPage = props => {
                         <Link sheetClose=".coauth__sheet">
                             {Device.ios ? 
                                 <SvgIcon slot="media" symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
-                                <SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                                <SvgIcon slot="media" symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
                             }
                         </Link>
                     </NavRight>

apps/common/mobile/lib/pages/UsersPage.jsx

@@ -20,7 +20,7 @@ const UsersPage = inject("users")(observer(props => {
                         <Link sheetClose=".coauth__sheet">
                             {Device.ios ? 
                                 <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
-                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
                             }
                         </Link>
                     </NavRight>

apps/common/mobile/lib/view/VersionHistory.jsx

@@ -4,7 +4,7 @@ import { useTranslation } from "react-i18next";
 import { observer, inject } from "mobx-react";
 import { Device } from '../../utils/device';
 import SvgIcon from '@common/lib/component/SvgIcon';
-import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg';
+import IconExpandDownIos from '@common-ios-icons/icon-expand-down.svg?ios';
 import IconExpandDownAndroid from '@common-android-icons/icon-expand-down.svg';
 
 const VersionHistoryView = inject('storeVersionHistory', 'users')(observer(props => {
@@ -56,7 +56,7 @@ const VersionHistoryView = inject('storeVersionHistory', 'users')(observer(props
                         <Link sheetClose="#version-history-sheet">
                             {Device.ios ? 
                                 <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
-                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
                             }
                         </Link>
                     </NavRight>
@@ -65,7 +65,7 @@ const VersionHistoryView = inject('storeVersionHistory', 'users')(observer(props
                             <Link popoverClose="#version-history-popover">
                                 {Device.ios ? 
                                     <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
-                                    <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                                    <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
                                 }
                             </Link>
                         </NavRight>

apps/common/mobile/lib/view/collaboration/Comments.jsx

@@ -733,7 +733,7 @@ const ViewComments = inject("storeComments", "storeAppOptions", "storeReview")(o
                         <Link sheetClose=".coauth__sheet">
                             {Device.ios ? 
                                 <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
-                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
                             }
                         </Link>
                     </NavRight>

apps/common/mobile/lib/view/collaboration/Review.jsx

@@ -35,7 +35,7 @@ const PageReview = props => {
                    <Link sheetClose=".coauth__sheet">
                         {Device.ios ?
                             <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
-                            <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
                         }
                    </Link>
                </NavRight>
@@ -95,7 +95,7 @@ const DisplayMode = props => {
                     <Link sheetClose=".coauth__sheet">
                         {Device.ios ? 
                             <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
-                            <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                            <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
                         }
                     </Link>
                 </NavRight>
@@ -150,7 +150,7 @@ const PageReviewChange = inject("storeAppOptions")(observer(props => {
                         <Link sheetClose=".coauth__sheet">
                             {Device.ios ? 
                                 <SvgIcon symbolId={IconExpandDownIos.id} className={'icon icon-svg'} /> :
-                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg'} />
+                                <SvgIcon symbolId={IconExpandDownAndroid.id} className={'icon icon-svg down'} />
                             }
                         </Link>
                     </NavRight>

apps/common/mobile/resources/icons/android/icon-accept-changes.svg

@@ -256,7 +256,7 @@
                 color: @fill-white;
                 .icon-svg {
                     opacity: 1;
-                    fill: var(--fill-white);
+                    fill:  @fill-white;
                 }
             }
         }

apps/common/mobile/resources/icons/android/icon-reject-changes.svg

@@ -20,27 +20,12 @@
             background: ~"url(@{common-image-path}/header/logo-ios.svg)" no-repeat center;
             background-size: contain;
         }
-        &.icon-show-password {
-            width: 25px;
-            height: 25px;
-            .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path fill-rule="evenodd" clip-rule="evenodd" d="M5.62546 12.5C7.1723 14.623 9.67579 16 12.5002 16C15.3246 16 17.8281 14.623 19.3749 12.5C17.8281 10.377 15.3246 9 12.5002 9C9.67579 9 7.1723 10.377 5.62546 12.5ZM20.5795 12.5C18.9043 9.79888 15.9123 8 12.5002 8C9.08806 8 6.09608 9.79888 4.4209 12.5C6.09608 15.2011 9.08806 17 12.5002 17C15.9123 17 18.9043 15.2011 20.5795 12.5Z"/><path d="M12.5002 10C13.8812 9.99654 14.9984 11.1189 15.0015 12.5C15.0046 13.8842 13.8843 15.0147 12.5002 15.0112C11.1195 15.0078 10.0083 13.8807 10.0114 12.5C10.0145 11.1224 11.1226 10.0035 12.5002 10Z"/></svg>', @text-secondary);
-        }
-        &.icon-hide-password {
-            width: 25px;
-            height: 25px;
-            .encoded-svg-mask('<svg xmlns="http://www.w3.org/2000/svg" width="25" height="25" viewBox="0 0 25 25"><path fill-rule="evenodd" clip-rule="evenodd" d="M11.3563 15.7651C11.7305 15.8154 12.1123 15.8414 12.5002 15.8414C15.3246 15.8414 17.8281 14.4644 19.3749 12.3414C18.6236 11.3102 18.166 10.7574 17.0361 10.1505L17.7591 9.41118C19.134 10.198 19.746 10.9975 20.5795 12.3414C18.9043 15.0425 15.9123 16.8414 12.5002 16.8414C11.8178 16.8414 11.1521 16.7695 10.5105 16.6327L11.3563 15.7651ZM8.12773 14.6323C7.14813 14.0435 6.29672 13.2627 5.62546 12.3414C7.1723 10.2184 9.67579 8.84141 12.5002 8.84141C13.0975 8.84141 13.2187 8.82442 13.7967 8.91092L14.721 8.06225C13.8906 7.82361 13.4176 7.8414 12.5148 7.84141H12.5002C9.08806 7.84141 6.09608 9.64029 4.4209 12.3414C5.17086 13.5507 6.18474 14.5791 7.38209 15.3462L8.12773 14.6323Z"/><path d="M16.0314 9.67145C15.7088 9.5343 15.3584 9.3959 15.0218 9.27392L9.15792 15.1593C9.49185 15.3022 9.83676 15.4243 10.191 15.5241L16.0314 9.67145Z"/><path d="M16.7904 8.91092C16.4786 8.76381 16.1396 8.6121 15.8163 8.47649L15.0218 9.27392C15.3584 9.3959 15.7088 9.5343 16.0314 9.67145L16.7904 8.91092Z"/><path d="M18.3454 7.35265L17.625 6.66113L15.8163 8.47649C16.1396 8.6121 16.4786 8.76381 16.7904 8.91092L18.3454 7.35265Z"/><path d="M9.39461 16.3222C9.05541 16.2049 8.72492 16.069 8.40438 15.9156L6.67677 17.6495L7.38209 18.3389L9.39461 16.3222Z"/><path d="M10.191 15.5241C9.83676 15.4243 9.49185 15.3022 9.15792 15.1593L8.40438 15.9156C8.72492 16.069 9.05541 16.2049 9.39461 16.3222L10.191 15.5241Z"/></svg>', @text-secondary);
-        }
-        &.icon-settings {
-            width: 24px;
-            height: 24px;
-            .encoded-svg-mask('<svg viewBox="0 0 24 24" fill="@{brandColor}" xmlns="http://www.w3.org/2000/svg"><path fill-rule="evenodd" clip-rule="evenodd" d="M21 12C21 16.9706 16.9706 21 12 21C7.02944 21 3 16.9706 3 12C3 7.02944 7.02944 3 12 3C16.9706 3 21 7.02944 21 12ZM22 12C22 17.5228 17.5228 22 12 22C6.47715 22 2 17.5228 2 12C2 6.47715 6.47715 2 12 2C17.5228 2 22 6.47715 22 12ZM15.5 12.25C15.5 11.5596 16.0596 11 16.75 11C17.4404 11 18 11.5596 18 12.25C18 12.9404 17.4404 13.5 16.75 13.5C16.0596 13.5 15.5 12.9404 15.5 12.25ZM12 11C11.3096 11 10.75 11.5596 10.75 12.25C10.75 12.9404 11.3096 13.5 12 13.5C12.6904 13.5 13.25 12.9404 13.25 12.25C13.25 11.5596 12.6904 11 12 11ZM7.25 11C6.55964 11 6 11.5596 6 12.25C6 12.9404 6.55964 13.5 7.25 13.5C7.94036 13.5 8.5 12.9404 8.5 12.25C8.5 11.5596 7.94036 11 7.25 11Z"/></svg>');
-        }
     }
 }
 
 .icon-svg {
     &.icon-svg__mask {
-        fill: var(--fill-white);
+        fill: @fill-white;
         vertical-align: middle;
     }
 }