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, | ||||
SettingOutlined, | SettingOutlined, | ||||
LockOutlined, | LockOutlined, | ||||
} from '@ant-design/icons'; | } from '@ant-design/icons'; | ||||
import { Image } from 'antd'; | import { Image } from 'antd'; | ||||
import { currency } from '@components/Common/Ticker'; | import { currency } from '@components/Common/Ticker'; | ||||
import { ReactComponent as Send } from '@assets/send.svg'; | |||||
import { ReactComponent as Receive } from '@assets/receive.svg'; | |||||
import { ReactComponent as Genesis } from '@assets/flask.svg'; | |||||
import { ReactComponent as Unparsed } from '@assets/alert-circle.svg'; | |||||
import { ReactComponent as Home } from '@assets/home.svg'; | |||||
import { ReactComponent as Settings } from '@assets/cog.svg'; | |||||
export const CashLoadingIcon = <LoadingOutlined className="cashLoadingIcon" />; | export const CashLoadingIcon = <LoadingOutlined className="cashLoadingIcon" />; | ||||
export const CashReceivedNotificationIcon = () => ( | export const CashReceivedNotificationIcon = () => ( | ||||
<Image height={'33px'} width={'30px'} src={currency.logo} preview={false} /> | <Image height={'33px'} width={'30px'} src={currency.logo} preview={false} /> | ||||
); | ); | ||||
export const TokenReceivedNotificationIcon = () => ( | export const TokenReceivedNotificationIcon = () => ( | ||||
<Image | <Image | ||||
Show All 17 Lines | |||||
`; | `; | ||||
export const ThemedDollarOutlined = styled(DollarOutlined)` | export const ThemedDollarOutlined = styled(DollarOutlined)` | ||||
color: ${props => props.theme.icons.outlined} !important; | color: ${props => props.theme.icons.outlined} !important; | ||||
`; | `; | ||||
export const ThemedWalletOutlined = styled(WalletOutlined)` | export const ThemedWalletOutlined = styled(WalletOutlined)` | ||||
color: ${props => props.theme.icons.outlined} !important; | color: ${props => props.theme.icons.outlined} !important; | ||||
`; | `; | ||||
export const ThemedQrcodeOutlined = styled(QrcodeOutlined)` | export const ThemedQrcodeOutlined = styled(QrcodeOutlined)` | ||||
color: ${props => props.theme.icons.outlined} !important; | color: ${props => props.theme.walletBackground} !important; | ||||
`; | `; | ||||
export const ThemedSettingOutlined = styled(SettingOutlined)` | export const ThemedSettingOutlined = styled(SettingOutlined)` | ||||
color: ${props => props.theme.icons.outlined} !important; | color: ${props => props.theme.icons.outlined} !important; | ||||
`; | `; | ||||
export const ThemedLockOutlined = styled(LockOutlined)` | export const ThemedLockOutlined = styled(LockOutlined)` | ||||
color: ${props => props.theme.icons.outlined} !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: ${props => props.theme.primary}; | fill: ${props => props.theme.eCashBlue}; | ||||
} | } | ||||
`; | `; | ||||
export const CashLoader = () => ( | export const CashLoader = () => ( | ||||
<LoadingBlock> | <LoadingBlock> | ||||
<LoadingOutlined /> | <LoadingOutlined /> | ||||
</LoadingBlock> | </LoadingBlock> | ||||
); | ); | ||||
export const ReceiveIcon = () => <Receive />; | |||||
export const GenesisIcon = () => <Genesis />; | |||||
export const UnparsedIcon = () => <Unparsed />; | |||||
export const HomeIcon = () => <Home />; | |||||
export const SettingsIcon = () => <Settings />; | |||||
export const SendIcon = styled(Send)` | |||||
transform: rotate(-35deg); | |||||
`; |