Differential D19604 Diff 58919 cashtab/src/components/Agora/OrderBook/styled.ts

Changeset View

Standalone View

cashtab/src/components/Agora/OrderBook/styled.ts

Show All 9 Lines	export const OrderBookLoading = styled.div`
display: flex;		display: flex;
justify-content: center;		justify-content: center;
width: 100%;		width: 100%;
margin: 12px auto;		margin: 12px auto;
`;		`;

export const OfferWrapper = styled.div<{ borderRadius: boolean }>`		export const OfferWrapper = styled.div<{ borderRadius: boolean }>`
border-radius: ${props => (props.borderRadius ? '20px' : '0 0 20px 20px')};		border-radius: ${props => (props.borderRadius ? '20px' : '0 0 20px 20px')};
border: 1px solid ${props => props.theme.border};
width: 100%;		width: 100%;
min-width: 0;		min-width: 0;
max-width: 100%;		max-width: 100%;
display: flex;		display: flex;
flex-direction: column;		flex-direction: column;
flex-grow: 1;		flex-grow: 1;
background: ${props =>		background: ${props => props.theme.secondaryBackground};
!props.borderRadius		padding-top: 20px;
? props.theme.primaryBackground		border-top: 1px solid ${props => props.theme.primaryBackground};
: `linear-gradient(
0deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.1) 100%
)`};
border-top: ${props => (!props.borderRadius ? 'none' : '')};
@media (max-width: 768px) {		@media (max-width: 768px) {
margin-bottom: 20px;		margin-bottom: 20px;
width: 100%;		width: 100%;
}		}
`;		`;

export const OfferHeader = styled.div<{ noIcon?: boolean }>`		export const OfferHeader = styled.div<{ noIcon?: boolean }>`
display: flex;		display: flex;
▲ Show 20 Lines • Show All 144 Lines • ▼ Show 20 Lines	export const TentativeAcceptBar = styled.div<{ acceptPercent: number }>`
position: absolute;		position: absolute;
top: 0;		top: 0;
right: 0;		right: 0;
background-color: ${props => props.theme.genesisGreen};		background-color: ${props => props.theme.genesisGreen};
height: 100%;		height: 100%;
width: ${props => props.acceptPercent}%;		width: ${props => props.acceptPercent}%;
`;		`;

		export const QuantityLabel = styled.span`
		display: block;
		font-size: var(--text-lg);
		line-height: var(--text-lg--line-height);
		font-weight: 600;
		color: ${props => props.theme.primaryText};
		margin-bottom: 10px;
		text-align: left;
		`;

export const BuyOrderCtn = styled.div`		export const BuyOrderCtn = styled.div`
display: flex;		display: flex;
flex-direction: column;		flex-direction: column;
word-break: break-all;		word-break: break-all;
padding: 20px;		padding: 20px;
color: ${props => props.theme.primaryText};		color: ${props => props.theme.primaryText};
border-radius: 0 0 20px 20px;		border-radius: 0 0 20px 20px;
flex-grow: 1;		flex-grow: 1;
Show All 14 Lines	button {
line-height: var(--text-base--line-height);		line-height: var(--text-base--line-height);
padding: 14px 10px;		padding: 14px 10px;
border-radius: 4px;		border-radius: 4px;
margin-top: 30px;		margin-top: 30px;
margin-bottom: 0;		margin-bottom: 0;
margin-top: auto;		margin-top: auto;
}		}
`;		`;

		export const BuyOrderSummaryRow = styled.div`
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		margin-bottom: 8px;
		&:last-of-type {
		margin-bottom: 20px;
		}
		`;

		export const BuyOrderSummaryLabel = styled.span`
		font-size: var(--text-base);
		line-height: var(--text-base--line-height);
		color: ${props => props.theme.secondaryText};
		`;

		export const BuyOrderSummaryValue = styled.span`
		font-size: var(--text-base);
		line-height: var(--text-base--line-height);
		color: ${props => props.theme.primaryText};
		font-weight: bold;
		`;

		export const BuyOrderSummaryValueEmphasis = styled.span`
		font-size: var(--text-base);
		line-height: var(--text-base--line-height);
		color: ${props => props.theme.primaryText};
		font-weight: bold;
		`;
export const MintIconSpotWrapper = styled.div`		export const MintIconSpotWrapper = styled.div`
svg {		svg {
height: 24px;		height: 24px;
width: 24px;		width: 24px;
}		}
`;		`;

export const DeltaSpan = styled.span`		export const DeltaSpan = styled.span`
color: ${props => props.theme.secondaryAccent};		color: ${props => props.theme.secondaryAccent};
`;		`;

export const AgoraWarningParagraph = styled.div`		export const AgoraWarningParagraph = styled.div`
font-weight: bold;		font-weight: bold;
text-align: center;		text-align: center;
color: ${props => props.theme.secondaryAccent};		color: ${props => props.theme.secondaryAccent};
`;		`;

export const PercentageButton = styled.button<{ isActive?: boolean }>`		export const PercentageButton = styled.button<{ isActive?: boolean }>`
background-color: ${props =>		background-color: ${props =>
props.isActive ? props.theme.genesisGreen : 'rgba(255, 255, 255, 0.1)'};		props.isActive ? props.theme.genesisGreen : 'rgba(255, 255, 255, 0.1)'};
color: ${props =>		color: ${props =>
props.isActive		props.isActive
? props.theme.primaryBackground		? props.theme.primaryBackground
: props.theme.primaryText};		: props.theme.primaryText};
border: 1px solid		border: none;
${props =>		margin-bottom: 10px !important;
props.isActive
? props.theme.genesisGreen
: 'rgba(255, 255, 255, 0.2)'};
border-radius: 4px;		border-radius: 4px;
padding: 6px 10px;		padding: 6px 10px;
font-size: var(--text-sm);		font-size: var(--text-sm);
line-height: var(--text-sm--line-height);		line-height: var(--text-sm--line-height);
font-weight: 600;		font-weight: 600;
cursor: pointer;		cursor: pointer;
transition: all ease-in-out 200ms;		transition: all ease-in-out 200ms;
flex: 1;		flex: 1;
Show All 30 Lines