Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Common/CustomIcons.js
import * as React from 'react'; | import * as React from 'react'; | ||||
import styled from 'styled-components'; | import styled from 'styled-components'; | ||||
import { | import { | ||||
CopyOutlined, | CopyOutlined, | ||||
DollarOutlined, | DollarOutlined, | ||||
LoadingOutlined, | LoadingOutlined, | ||||
WalletOutlined, | WalletOutlined, | ||||
QrcodeOutlined, | QrcodeOutlined, | ||||
} from '@ant-design/icons'; | } from '@ant-design/icons'; | ||||
export const CashLoadingIcon = ( | export const CashLoadingIcon = <LoadingOutlined className="cashLoadingIcon" />; | ||||
<LoadingOutlined | |||||
style={{ | |||||
fontSize: 48, | |||||
color: '#ff8d00', | |||||
}} | |||||
/> | |||||
); | |||||
export const ThemedCopyOutlined = styled(CopyOutlined)` | export const ThemedCopyOutlined = styled(CopyOutlined)` | ||||
color: ${props => props.theme.iconOutlined} !important; | color: ${props => props.theme.icons.outlined} !important; | ||||
`; | `; | ||||
export const ThemedDollarOutlined = styled(DollarOutlined)` | export const ThemedDollarOutlined = styled(DollarOutlined)` | ||||
color: ${props => props.theme.iconOutlined} !important; | color: ${props => props.theme.icons.outlined} !important; | ||||
`; | `; | ||||
export const ThemedWalletOutlined = styled(WalletOutlined)` | export const ThemedWalletOutlined = styled(WalletOutlined)` | ||||
color: ${props => props.theme.iconOutlined} !important; | color: ${props => props.theme.icons.outlined} !important; | ||||
`; | `; | ||||
export const ThemedQrcodeOutlined = styled(QrcodeOutlined)` | export const ThemedQrcodeOutlined = styled(QrcodeOutlined)` | ||||
color: ${props => props.theme.iconOutlined} !important; | color: ${props => props.theme.icons.outlined} !important; | ||||
`; | `; | ||||
export const LoadingBlock = styled.div` | export const LoadingBlock = styled.div` | ||||
width: 100%; | width: 100%; | ||||
display: flex; | display: flex; | ||||
align-items: center; | align-items: center; | ||||
justify-content: center; | justify-content: center; | ||||
padding: 24px; | padding: 24px; | ||||
flex-direction: column; | flex-direction: column; | ||||
svg { | svg { | ||||
width: 50px; | width: 50px; | ||||
height: 50px; | height: 50px; | ||||
fill: #ff8d00; | fill: ${props => props.theme.primary}; | ||||
} | } | ||||
`; | `; | ||||
export const CashLoader = () => ( | export const CashLoader = () => ( | ||||
<LoadingBlock> | <LoadingBlock> | ||||
<LoadingOutlined /> | <LoadingOutlined /> | ||||
</LoadingBlock> | </LoadingBlock> | ||||
); | ); |