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

Changeset View

Standalone View

cashtab/src/components/Agora/styled.ts

// Copyright (c) 2024 The Bitcoin developers		// Copyright (c) 2024 The Bitcoin developers
// Distributed under the MIT software license, see the accompanying		// Distributed under the MIT software license, see the accompanying
// file COPYING or http://www.opensource.org/licenses/mit-license.php.		// file COPYING or http://www.opensource.org/licenses/mit-license.php.

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

		export const Wrapper = styled.div`
		width: 100%;
		@media (max-width: 768px) {
		padding: 0 10px;
		}
		`;
export const ActiveOffers = styled.div`		export const ActiveOffers = styled.div`
color: ${props => props.theme.primaryText};		color: ${props => props.theme.primaryText};
width: 100%;		width: 100%;
h2 {		h2 {
margin: 0 0 20px;		margin: 0 0 20px;
margin-top: 10px;		margin-top: 10px;
}		}
`;		`;
▲ Show 20 Lines • Show All 111 Lines • ▼ Show 20 Lines	export const SortSwitch = styled.div<{ active: boolean; disabled: boolean }>`
position: relative;		position: relative;
> div {		> div {
position: absolute;		position: absolute;
right: -12px;		right: -12px;
top: 50%;		top: 50%;
transform: translateY(-50%);		transform: translateY(-50%);
}		}
`;		`;

		export const SectionTitle = styled.h3`
		margin: 20px 0 8px;
		color: ${props => props.theme.primaryText};
		font-size: var(--text-lg);
		font-weight: 600;
		text-align: left;
		`;

		export const TokenList = styled.div`
		display: flex;
		flex-direction: column;
		gap: 0;
		width: 100%;
		margin-top: 12px;
		background: ${props => props.theme.secondaryBackground};
		border-radius: 8px;
		overflow: hidden;
		`;

		export const TokenRow = styled.a`
		display: flex;
		align-items: center;
		gap: 12px;
		padding: 12px 16px;
		color: ${props => props.theme.primaryText};
		text-decoration: none;
		transition: background-color 0.15s ease;
		border-bottom: 1px solid ${props => props.theme.primaryBackground};

		:hover {
		background-color: ${props => props.theme.accent};
		color: ${props => props.theme.primaryText};
		}

		img {
		flex-shrink: 0;
		border-radius: 50%;
		width: 50px;
		height: 50px;
		@media (max-width: 768px) {
		width: 40px;
		height: 40px;
		}
		}
		`;

		export const TokenRowName = styled.span`
		font-weight: 700;
		font-size: var(--text-base);
		flex: 1;
		min-width: 0;
		overflow: hidden;
		text-overflow: ellipsis;
		white-space: nowrap;
		display: flex;
		flex-direction: column;
		gap: 3px;
		text-align: left;
		`;

		export const TokenRowTicker = styled.span`
		color: ${props => props.theme.secondaryText};
		font-size: var(--text-sm);
		font-weight: normal;
		`;

		export const StatusText = styled.p`
		color: ${props => props.theme.secondaryText};
		`;