Differential D19604 Diff 58919 cashtab/src/components/Wallets/styles.ts

Changeset View

Standalone View

cashtab/src/components/Wallets/styles.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 WalletsList = styled.div`			export const WalletsList = styled.div`
	margin-top: 24px;			margin-top: 24px;
	padding: 12px;
	display: flex;			display: flex;
	flex-direction: column;			flex-direction: column;
	width: 100%;			width: 100%;
	align-items: center;			align-items: center;
	gap: 12px;			gap: 12px;
	color: ${props => props.theme.primaryText};			color: ${props => props.theme.primaryText};
	box-sizing: border-box;			box-sizing: border-box;
	*,			*,
	*:before,			*:before,
	*:after {			*:after {
	box-sizing: inherit;			box-sizing: inherit;
	}			}
	`;			`;

	export const WalletsPanel = styled.div`			export const WalletsPanel = styled.div`
	display: flex;			display: flex;
	flex-direction: column;			flex-direction: column;
	padding: 12px;
	width: 100%;			width: 100%;
	background-color: ${props => props.theme.primaryBackground};
	border-radius: 9px;
	margin-bottom: 12px;			margin-bottom: 12px;
	`;			`;
	export const Wallet = styled.div`			export const Wallet = styled.div`
	display: flex;			display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: space-between;
				margin-bottom: 12px;
				padding: 14px 12px;
				background: ${props => props.theme.secondaryBackground};
				border-radius: 10px;
				`;

				export const WalletLeftColumn = styled.div`
				display: flex;
	flex-direction: column;			flex-direction: column;
	border-top: 0.5px solid ${props => props.theme.border};			align-items: flex-start;
	gap: 0 12px;			gap: 8px;
	padding: 6px 0;			min-width: 0;
	`;			`;

	export const WalletRow = styled.div`			export const WalletRow = styled.div`
	display: flex;			display: flex;
	width: 100%;			width: 100%;
	align-items: center;			align-items: center;
	justify-content: space-between;			justify-content: space-between;
	`;			`;
	export const ActionsRow = styled.div``;

	export const WalletName = styled.div`			export const WalletName = styled.div`
	display: flex;			display: flex;
	text-align: left;			text-align: left;
	word-break: break-word;			word-break: break-word;
				color: ${props => props.theme.primaryText};
				font-weight: bold;
				font-size: var(--text-base);
				line-height: var(--text-base--line-height);
	`;			`;

	export const ActiveWalletName = styled(WalletName)`			export const ActiveWalletName = styled(WalletName)`
	font-weight: bold;			color: inherit;
	color: ${props => props.theme.accent};
	`;			`;

	export const SvgButtonPanel = styled.div`			export const SvgButtonPanel = styled.div`
	display: flex;			display: flex;
	align-items: baseline;
	`;
	export const ButtonPanel = styled.div`
	display: flex;
	gap: 9px;
	align-items: center;			align-items: center;
	justify-content: center;			gap: 4px;
				flex-shrink: 0;
	`;			`;

	export const ActivateButton = styled.button`			export const ActivateButton = styled.button<{ $active?: boolean }>`
	cursor: pointer;			cursor: pointer;
	color: ${props => props.theme.accent};			border-radius: 8px;
	border-radius: 9px;			border: none;
	border: 2px solid ${props => props.theme.accent};			padding: 6px 14px;
	background: transparent;			font-size: var(--text-sm);
				font-weight: 600;
				${props =>
				props.$active
				? `
				background: ${props.theme.accent};
				color: ${props.theme.primaryText};
				cursor: default;
				`
				: `
				background: ${props.theme.inputBackground};
				color: ${props.theme.primaryText};
	:hover {			:hover {
	background-color: ${props => props.theme.accent};			background: rgba(255, 255, 255, 0.15);
	color: ${props => props.theme.primaryText};
	}			}
				`}
	`;			`;

	export const AddressShareModal = styled.div`			export const AddressShareModal = styled.div`
	display: flex;			display: flex;
	flex-direction: column;			flex-direction: column;
	gap: 12px;			gap: 12px;
	`;			`;

	▲ Show 20 Lines • Show All 50 Lines • Show Last 20 Lines