Differential D10970 Diff 32402 web/cashtab/src/components/Common/Atoms.js

Changeset View

Standalone View

web/cashtab/src/components/Common/Atoms.js

	import styled from 'styled-components';			import styled from 'styled-components';

	export const LoadingCtn = styled.div`			export const LoadingCtn = styled.div`
	width: 100%;			width: 100%;
	display: flex;			display: flex;
	align-items: center;			align-items: center;
	justify-content: center;			justify-content: center;
	height: 400px;			height: 400px;
	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 BalanceHeaderWrap = styled.div`			export const SidePaddingCtn = styled.div`
	color: ${props => props.theme.wallet.text.primary};			padding: 0px 30px;
	width: 100%;
	font-size: 30px;
	font-weight: bold;
	@media (max-width: 768px) {			@media (max-width: 768px) {
	font-size: 23px;			padding: 0px 15px;
	}			}
	`;			`;

				export const FormLabel = styled.label`
				font-size: 16px;
				margin-bottom: 5px;
				text-align: left;
				width: 100%;
				display: inline-block;
				color: ${props => props.theme.contrast};
				`;

				export const WalletInfoCtn = styled.div`
				background: ${props => props.theme.walletInfoContainer};
				width: 100%;
				padding: 40px 20px;
				`;

	export const BalanceHeaderFiatWrap = styled.div`			export const BalanceHeaderFiatWrap = styled.div`
	color: ${props => props.theme.wallet.text.secondary};			color: ${props => props.theme.contrast};
	width: 100%;			width: 100%;
	font-size: 18px;			font-size: 16px;
	margin-bottom: 20px;
	font-weight: bold;
	@media (max-width: 768px) {			@media (max-width: 768px) {
	font-size: 16px;			font-size: 16px;
	}			}
	`;			`;

				export const BalanceHeaderWrap = styled.div`
				color: ${props => props.theme.contrast};
				width: 100%;
				font-size: 28px;
				margin-bottom: 0px;
				font-weight: bold;
				line-height: 1.4em;
				@media (max-width: 768px) {
				font-size: 24px;
				}
				`;

	export const ZeroBalanceHeader = styled.div`			export const ZeroBalanceHeader = styled.div`
	color: ${props => props.theme.wallet.text.primary};			color: ${props => props.theme.contrast};
	width: 100%;			width: 100%;
	font-size: 14px;			font-size: 14px;
	margin-bottom: 5px;			margin-bottom: 5px;
	`;			`;

	export const TokenParamLabel = styled.span`			export const TokenParamLabel = styled.span`
	font-weight: bold;			font-weight: bold;
	`;			`;

	export const AlertMsg = styled.p`			export const AlertMsg = styled.p`
	color: ${props => props.theme.forms.error} !important;			color: ${props => props.theme.forms.error} !important;
	`;			`;

	export const ConvertAmount = styled.div`			export const ConvertAmount = styled.div`
	color: ${props => props.theme.wallet.text.secondary};			color: ${props => props.theme.contrast};
	width: 100%;			width: 100%;
	font-size: 14px;			font-size: 14px;
	margin-bottom: 10px;			margin-bottom: 10px;
	font-weight: bold;
	@media (max-width: 768px) {			@media (max-width: 768px) {
	font-size: 12px;			font-size: 12px;
	}			}
	`;			`;