diff --git a/public/images/arrowGroup.svg b/public/images/arrowGroup.svg deleted file mode 100644 index 59b845d9..00000000 --- a/public/images/arrowGroup.svg +++ /dev/null @@ -1,4 +0,0 @@ - - - - diff --git a/src/features/ArrowLoader/Icon.tsx b/src/features/ArrowLoader/Icon.tsx new file mode 100644 index 00000000..e02555ee --- /dev/null +++ b/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) => ( + + + + + +) diff --git a/src/features/ArrowLoader/index.tsx b/src/features/ArrowLoader/index.tsx index f3e4ed31..fbbb7b6b 100644 --- a/src/features/ArrowLoader/index.tsx +++ b/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} > - + ) diff --git a/src/features/ArrowLoader/styled.tsx b/src/features/ArrowLoader/styled.tsx index ae90adb3..c0b11389 100644 --- a/src/features/ArrowLoader/styled.tsx +++ b/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` - 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` opacity: 0.5; } ` - -export const Arrows = styled.div` - 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; - ` diff --git a/src/features/ArrowLoader/types.tsx b/src/features/ArrowLoader/types.tsx index 7b196eab..73e07b44 100644 --- a/src/features/ArrowLoader/types.tsx +++ b/src/features/ArrowLoader/types.tsx @@ -1,6 +1,5 @@ export type ArrowLoaderProps = { backgroundColor?: string, - backgroundSize?: string, className?: string, disabled?: boolean, width?:string, diff --git a/src/features/AuthServiceApp/config/clients/facr.tsx b/src/features/AuthServiceApp/config/clients/facr.tsx index 449cafc3..1c2065f5 100644 --- a/src/features/AuthServiceApp/config/clients/facr.tsx +++ b/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; diff --git a/src/features/AuthServiceApp/config/clients/instat.tsx b/src/features/AuthServiceApp/config/clients/instat.tsx index 5542a676..1e1b78bc 100644 --- a/src/features/AuthServiceApp/config/clients/instat.tsx +++ b/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; diff --git a/src/features/AuthServiceApp/config/clients/types.tsx b/src/features/AuthServiceApp/config/clients/types.tsx index 3fcb2e17..779f809e 100644 --- a/src/features/AuthServiceApp/config/clients/types.tsx +++ b/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, }, diff --git a/src/features/Background/index.tsx b/src/features/Background/index.tsx index 5381a717..4c6aabfe 100644 --- a/src/features/Background/index.tsx +++ b/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) => ( - {/* FakeArrowLoader пришлось добавить, чтобы при отсутствии интернета - всегда была доступена svg arrowGroup для отображения лоадера в NoNetwork */} - {children} diff --git a/src/features/NoNetworkPopup/styled.tsx b/src/features/NoNetworkPopup/styled.tsx index 50163c6b..3524ef8a 100644 --- a/src/features/NoNetworkPopup/styled.tsx +++ b/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; diff --git a/src/features/UserAccount/components/BankCard/index.tsx b/src/features/UserAccount/components/BankCard/index.tsx index 713c18b9..4bf9f13c 100644 --- a/src/features/UserAccount/components/BankCard/index.tsx +++ b/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 - ? + ? : } diff --git a/src/features/UserAccount/components/BankCard/styled.tsx b/src/features/UserAccount/components/BankCard/styled.tsx index 2cf2950d..830c7113 100644 --- a/src/features/UserAccount/components/BankCard/styled.tsx +++ b/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; +`