Светлый стиль для прелоадера картинки на странице кода mfa

Выводим XXXX для непрогруженного кода

src/components/profile/multiFactorAuth/keyForm/KeyForm.js

@@ -15,8 +15,7 @@ export default function KeyForm({secret, qrCodeSrc}: {
     secret: string,
     qrCodeSrc: string
 }) {
-    // we are using invisible symbol (\u2063) as a placeholder till we get actual secret
-    const formattedSecret = formatSecret(secret) || '\u2063';
+    const formattedSecret = formatSecret(secret || (new Array(24)).join('X'));
 
     return (
         <div className={profileForm.formBody}>

src/components/ui/loader/ImageLoader.js

@@ -2,6 +2,7 @@
 import React from 'react';
 import classNames from 'classnames';
 import { ComponentLoader } from 'components/ui/loader';
+import { SKIN_LIGHT } from 'components/ui';
 
 import styles from './imageLoader.scss';
 
@@ -49,7 +50,7 @@ export default class ImageLoader extends React.Component<{
 
                 {isLoading && (
                     <div className={styles.loader}>
-                        <ComponentLoader />
+                        <ComponentLoader skin={SKIN_LIGHT} />
                     </div>
                 )}
 

src/components/ui/loader/componentLoader.scss

@@ -12,7 +12,6 @@
 .spin {
     height: 20px;
     width: 20px;
-    // background: $green;
     display: inline-block;
     margin: 10px 2px;
     opacity: 0;
@@ -44,7 +43,7 @@
  */
 .lightComponentLoader {
     .spin {
-        background: #fff;
+        background: #aaa;
     }
 }
 
@@ -56,15 +55,15 @@
 
 @keyframes loaderAnimation {
     0% {
-        opacity:0;
+        opacity: 0;
     }
 
     50% {
-        opacity:1;
+        opacity: 1;
         transform: scaleY(2)
     }
 
     100% {
-        opacity:0;
+        opacity: 0;
     }
 }