fix(2058): loader in login and registration

public/images/arrowGroup.svg

@@ -1,4 +0,0 @@
-<svg width="37" height="34" viewBox="0 0 37 34" fill="none" xmlns="http://www.w3.org/2000/svg">
-<path d="M24.7273 23.7334L28.0666 27.1107C22.5472 32.6929 13.509 32.6929 7.98953 27.1107C6.30609 25.4081 5.216 23.3706 4.56746 21.2214L2.22168 21.8913C2.99441 24.4033 4.31908 26.7897 6.30609 28.7993C12.8329 35.4003 23.1957 35.4003 29.7225 28.7993L33.0618 32.1765L36.0423 20.8027H35.6007L24.7273 23.7334Z" fill="white"/>
-<path d="M11.3977 10.2801L8.03084 6.90283C13.5779 1.3206 22.6575 1.3206 28.1907 6.90283C29.8604 8.5775 30.9505 10.6011 31.599 12.7223L33.9448 12.0385C33.1721 9.55439 31.8474 7.1959 29.8604 5.20025C23.306 -1.40073 12.888 -1.40073 6.3336 5.20025L2.99432 1.823L0 13.1968H0.441558L11.3977 10.2801Z" fill="white"/>
-</svg>

src/features/ArrowLoader/Icon.tsx

@@ -0,0 +1,30 @@
+import styled from 'styled-components/macro'
+import { keyframes } from 'styled-components'
+
+const rotate = keyframes`
+  from {
+    transform: rotate(360deg);
+  }
+
+  to {
+    transform: rotate(0deg);
+  }
+`
+
+const Svg = styled.svg`
+  width: 36px;
+  height: 34px;
+  animation: ${rotate} 1s linear infinite;
+`
+
+type ArrowsProps = {
+  className?: string,
+}
+
+export const Arrows = ({ className }: ArrowsProps) => (
+  <Svg className={className} viewBox='0 0 37 34' fill='none' xmlns='http://www.w3.org/2000/svg'>
+    <path d='M24.7273 23.7334L28.0666 27.1107C22.5472 32.6929 13.509 32.6929 7.98953 27.1107C6.30609 25.4081 5.216 23.3706 4.56746 21.2214L2.22168 21.8913C2.99441 24.4033 4.31908 26.7897 6.30609 28.7993C12.8329 35.4003 23.1957 35.4003 29.7225 28.7993L33.0618 32.1765L36.0423 20.8027H35.6007L24.7273 23.7334Z' fill='currentColor' />
+    <path d='M11.3977 10.2801L8.03084 6.90283C13.5779 1.3206 22.6575 1.3206 28.1907 6.90283C29.8604 8.5775 30.9505 10.6011 31.599 12.7223L33.9448 12.0385C33.1721 9.55439 31.8474 7.1959 29.8604 5.20025C23.306 -1.40073 12.888 -1.40073 6.3336 5.20025L2.99432 1.823L0 13.1968H0.441558L11.3977 10.2801Z' fill='currentColor' />
+  </Svg>
+
+)

src/features/ArrowLoader/index.tsx

@@ -1,9 +1,9 @@
 import { ArrowLoaderProps } from './types'
-import { Wrapper, Arrows } from './styled'
+import { Wrapper } from './styled'
+import { Arrows } from './Icon'
 
 export const ArrowLoader = ({
   backgroundColor,
-  backgroundSize,
   className,
   disabled,
   width,
@@ -14,7 +14,7 @@ export const ArrowLoader = ({
     backgroundColor={backgroundColor}
     disabled={disabled}
   >
-    <Arrows backgroundSize={backgroundSize} />
+    <Arrows />
   </Wrapper>
 )
 

src/features/ArrowLoader/styled.tsx

@@ -1,24 +1,14 @@
 import styled from 'styled-components/macro'
-import { keyframes } from 'styled-components'
 
-import { ArrowLoaderProps } from './types'
-
-const rotate = keyframes`
-  from {
-    transform: rotate(360deg);
-  }
+import { client } from 'features/AuthServiceApp/config/clients'
 
-  to {
-    transform: rotate(0deg);
-  }
-`
+import { ArrowLoaderProps } from './types'
 
 export const Wrapper = styled.div<ArrowLoaderProps>`
-  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.3);
+  ${client.styles.loader}
   border-color: transparent;
   width: ${({ width = 'auto' }) => width};
   height: 2.4rem;
-  background-color: ${({ backgroundColor = '#294fc4' }) => backgroundColor};
   border-radius: 5px;
   display: flex;
   align-items: center;
@@ -27,13 +17,3 @@ export const Wrapper = styled.div<ArrowLoaderProps>`
     opacity: 0.5;
   }
 `
-
-export const Arrows = styled.div<ArrowLoaderProps>`
-  width: 36px;
-  height: 34px;
-  background-size: ${({ backgroundSize = 'contain' }) => backgroundSize};
-  background-image: url(/images/arrowGroup.svg);
-  background-repeat: no-repeat;
-  background-position: center;
-  animation: ${rotate} 1s linear infinite;
-  `

src/features/ArrowLoader/types.tsx

@@ -1,6 +1,5 @@
 export type ArrowLoaderProps = {
   backgroundColor?: string,
-  backgroundSize?: string,
   className?: string,
   disabled?: boolean,
   width?:string,

src/features/AuthServiceApp/config/clients/facr.tsx

@@ -27,6 +27,9 @@ export const facr: ClientConfig = {
     inputGroup: css`
       border: 1px solid ${({ theme }) => theme.colors.text100};
     `,
+    loader: css`
+      color: #00257A;
+    `,
     logo: css`
       background-image: url(/images/facr_auth_logo.png);
       height: 163px;

src/features/AuthServiceApp/config/clients/instat.tsx

@@ -11,6 +11,9 @@ export const instat: ClientConfig = {
   background: Background,
   name: 'instat',
   styles: {
+    loader: css`
+      color: white;
+    `,
     logo: css`
       background-image: url(/images/logo.svg);
       height: 54px;

src/features/AuthServiceApp/config/clients/types.tsx

@@ -13,6 +13,7 @@ export type ClientConfig = {
   styles: {
     input?: StyledCss,
     inputGroup?: StyledCss,
+    loader?: StyledCss,
     logo: StyledCss,
     submitButton?: StyledCss,
   },

src/features/Background/index.tsx

@@ -1,7 +1,5 @@
 import { ReactNode } from 'react'
 
-import { FakeArrowLoader } from 'features/NoNetworkPopup/styled'
-
 import { GradientBackground, ImageBackground } from './styled'
 
 type Props = {
@@ -11,9 +9,6 @@ type Props = {
 export const Background = ({ children }: Props) => (
   <ImageBackground>
     <GradientBackground>
-      {/* FakeArrowLoader пришлось добавить, чтобы при отсутствии интернета
-       всегда была доступена svg arrowGroup для отображения лоадера в NoNetwork */}
-      <FakeArrowLoader />
       {children}
     </GradientBackground>
   </ImageBackground>

src/features/NoNetworkPopup/styled.tsx

@@ -1,6 +1,6 @@
 import styled from 'styled-components/macro'
 
-import { Arrows } from 'features/ArrowLoader/styled'
+import { Arrows } from 'features/ArrowLoader/Icon'
 import { T9n } from 'features/T9n'
 
 export const Wrapper = styled.div`
@@ -35,13 +35,6 @@ export const Logo = styled.div`
   }
 `
 
-export const FakeArrowLoader = styled.div`
-  width: 0;
-  height: 0;
-  visibility: hidden;
-  background-image: url(/images/arrowGroup.svg);
-`
-
 export const ArrowLoader = styled(Arrows)`
   width: 94px;
   height: 87px;

src/features/UserAccount/components/BankCard/index.tsx

@@ -1,10 +1,13 @@
 import type { Card } from 'requests/getCardsList'
 
 import { T9n } from 'features/T9n'
-import { Arrows } from 'features/ArrowLoader/styled'
 
 import { InlineButton } from '../../styled'
-import { CardNumberWrapper, CustomRadio } from './styled'
+import {
+  Arrows,
+  CardNumberWrapper,
+  CustomRadio,
+} from './styled'
 
 type Props = {
   card: Card,
@@ -32,7 +35,7 @@ export const BankCard = ({
       onClick={() => onDelete(card.id)}
     >
       {loader
-        ? <Arrows backgroundSize='20px 20px' />
+        ? <Arrows />
         : <T9n t='remove' />}
     </InlineButton>
   </CardNumberWrapper>

src/features/UserAccount/components/BankCard/styled.tsx

@@ -6,6 +6,7 @@ import { isMobileDevice } from 'config/userAgent'
 import { Label } from 'features/Common/Radio/styled'
 import { RadioSvg } from 'features/Common/Radio/Icon'
 import { Radio } from 'features/Common'
+import { Arrows as ArrowsBase } from 'features/ArrowLoader/Icon'
 
 import { InlineButton } from '../../styled'
 
@@ -69,3 +70,8 @@ export const CustomRadio = styled(Radio)`
     }
   }
 `
+
+export const Arrows = styled(ArrowsBase)`
+  width: 20px;
+  height: 20px;
+`