Page MenuHomePhabricator
Differential D19604 Diff 58919 cashtab/src/components/Home/Tx/styled.ts

Changeset View

Standalone View

View Options

cashtab/src/components/Home/Tx/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, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { XecTxType } from 'chronik'; import { XecTxType } from 'chronik';
export const TxWrapper = styled.div` export const TxWrapper = styled.div`
background-color: ${props => props.theme.secondaryBackground}B3; background-color: ${props => props.theme.txRowBackground};
display: flex; display: flex;
flex-direction: column; flex-direction: column;
padding: 12px; padding: 14px;
border-radius: 6px; border-radius: 10px;
margin-bottom: 10px;
svg { svg {
width: 33px; width: 33px;
height: 33px; height: 33px;
} }
img { img {
height: 33px; height: 33px;
} }
box-sizing: border-box; box-sizing: border-box;
▲ Show 20 Lines • Show All 75 Lines • ▼ Show 20 Linesexport const IconCtn = styled.div<{ receive?: boolean }>`
justify-content: center; justify-content: center;
background-color: ${props => background-color: ${props =>
props.receive props.receive
? `${props.theme.accent}20` ? `${props.theme.accent}20`
: `${props.theme.primaryText}20`}; : `${props.theme.primaryText}20`};
border-radius: 50%; border-radius: 50%;
padding: 12px; padding: 12px;
svg { svg {
width: 25px; width: 18px;
height: 25px; height: 18px;
} }
@media (max-width: 768px) { @media (max-width: 768px) {
padding: 8px; padding: 8px;
svg { svg {
width: 15px; width: 15px;
height: 15px; height: 15px;
} }
} }
`; `;
export const AppTxIcon = styled.div``; export const AppTxIcon = styled.div``;
export const TxDescCol = styled.div` export const TxDescCol = styled.div`
flex-direction: row; flex-direction: row;
`; `;
// Top row of TxDescCol // Top row of TxDescCol
export const TxDescSendRcvMsg = styled.div` export const TxDescSendRcvMsg = styled.div`
display: inline-block; display: flex;
align-items: center;
gap: 3px;
font-size: var(--text-base);
font-weight: 700;
`; `;
export const TxDesc = styled.div` export const TxDesc = styled.div`
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
text-align: left; text-align: left;
width: 100%; width: 100%;
align-items: center; align-items: center;
gap: 6px; gap: 6px;
`; `;
// Bottom row of TxDescCol // Bottom row of TxDescCol
export const Timestamp = styled.div` export const Timestamp = styled.div`
display: flex; display: flex;
align-items: center; align-items: center;
width: 100%; width: 100%;
text-align: left; text-align: left;
font-size: var(--text-sm);
line-height: var(--text-sm--line-height);
color: ${props => props.theme.secondaryText}; color: ${props => props.theme.secondaryText};
margin-top: 4px; margin-top: 2px;
opacity: 0.8; font-size: 12px;
`; `;
export const TimestampSeperator = styled.div` export const TimestampSeperator = styled.div`
margin: 0 8px; margin: 0 6px;
`; `;
export const Ellipsis = styled.div` export const Ellipsis = styled.div`
@keyframes blink { @keyframes blink {
0% { 0% {
opacity: 0; opacity: 0;
} }
50% { 50% {
opacity: 1; opacity: 1;
Show All 19 Lines
export const AmountCol = styled.div` export const AmountCol = styled.div`
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
align-items: flex-end; align-items: flex-end;
text-align: right; text-align: right;
`; `;
// Top row of TxAmountCol // Top row of TxAmountCol
export const AmountTop = styled.div` export const AmountTop = styled.div`
font-weight: 600; font-weight: 700;
font-size: var(--text-base);
:hover { :hover {
text-decoration: underline; text-decoration: underline;
} }
`; `;
export const AmountBottom = styled.div` export const AmountBottom = styled.div`
color: ${props => props.theme.secondaryText}; color: ${props => props.theme.secondaryText};
font-size: var(--text-sm); margin-top: 2px;
line-height: var(--text-sm--line-height); font-size: 12px;
`; `;
export const CashtabMsg = styled.div` export const CashtabMsg = styled.div`
display: flex; display: flex;
width: 100%; width: 100%;
`; `;
export const TokenEntry = styled.div` export const TokenEntry = styled.div`
display: flex; display: flex;
width: 100%; width: 100%;
Show All 36 Linesexport const PanelLink = styled(Link)`
background: none; background: none;
cursor: pointer; cursor: pointer;
`; `;
export const ReplyLink = styled(PanelLink)` export const ReplyLink = styled(PanelLink)`
margin-left: auto; margin-left: auto;
`; `;
export const AddressLink = styled.a` export const AddressLink = styled.a`
padding: 0 3px; padding: 0 3px;
color: ${props => props.theme.accent};
&:hover {
color: ${props => props.theme.accent};
}
`; `;
export const AppAction = styled.div<{ type?: string }>` export const AppAction = styled.div<{ type?: string }>`
word-break: break-all; word-break: break-all;
${props => props.type === 'Received' && Incoming} ${props => props.type === 'Received' && Incoming}
background: ${props => props.theme.primaryText}10; /* background: rgba(255, 255, 255, 0.02);
background: ${props => props.theme.primaryBackground};
padding: 10px; padding: 10px;
border-radius: 6px; border-radius: 6px; */
padding: 10px 0 0px 10px;
border-top: 1px solid ${props => props.theme.border};
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
align-items: flex-start; align-items: flex-start;
`; `;
export const AppDescLabel = styled.div<{ noWordBreak?: boolean }>` export const AppDescLabel = styled.div<{ noWordBreak?: boolean }>`
word-break: ${props => (props.noWordBreak ? 'normal' : 'break-all')}; word-break: ${props => (props.noWordBreak ? 'normal' : 'break-all')};
`; `;
Show All 22 Linesexport const AppDescMsg = styled.div`
width: 100%; width: 100%;
margin-top: 5px; margin-top: 5px;
`; `;
export const TokenActionHolder = styled.div``; export const TokenActionHolder = styled.div``;
export const TokenInfoCol = styled.div` export const TokenInfoCol = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: flex-start;
text-align: left;
margin-left: 6px;
`; `;
export const UnknownMsgColumn = styled.div` export const UnknownMsgColumn = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
text-align: left; text-align: left;
`; `;
export const TokenType = styled.div``; export const TokenType = styled.div`
font-size: var(--text-sm);
`;
export const TokenName = styled(PanelLink)` export const TokenName = styled(PanelLink)`
text-decoration: none; font-size: var(--text-sm);
:hover {
color: ${props => props.theme.secondaryText};
text-decoration: underline;
}
`; `;
export const TokenTicker = styled.div``; export const TokenTicker = styled.div``;
export const TokenDesc = styled.div``; export const TokenDesc = styled.div`
font-size: var(--text-sm);
`;
export const ActionLink = styled.a``; export const ActionLink = styled.a``;
export const TokenAction = styled(AppAction)<{ export const TokenAction = styled(AppAction)<{
tokenTxType?: string; tokenTxType?: string;
noWordBreak?: boolean; noWordBreak?: boolean;
}>` }>`
word-break: ${props => (props.noWordBreak ? 'normal' : 'break-all')}; word-break: ${props => (props.noWordBreak ? 'normal' : 'break-all')};
flex-direction: row; flex-direction: row;
▲ Show 20 Lines • Show All 66 Lines • Show Last 20 Lines