Page MenuHomePhabricator
Differential D19604 Diff 58919 cashtab/src/components/Etokens/Token/styled.ts

Changeset View

Standalone View

View Options

cashtab/src/components/Etokens/Token/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 OuterCtn = styled.div` export const OuterCtn = styled.div`
background-color: ${props => props.theme.primaryBackground};
padding: 20px;
border-radius: 10px;
max-width: 700px; max-width: 700px;
margin: auto; margin: auto;
margin-top: 20px;
@media (max-width: 768px) {
padding: 0 10px;
}
`; `;
export const TokenScreenWrapper = styled.div` export const TokenScreenWrapper = 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 All 27 Linesexport const SendTokenFormRow = styled.div`
justify-content: space-between; justify-content: space-between;
gap: 12px; gap: 12px;
margin: 3px; margin: 3px;
`; `;
export const InputRow = styled.div` export const InputRow = styled.div`
width: 100%; width: 100%;
`; `;
/** Shared section container for Buy, Redeem, Send, etc. */
export const SectionCtn = styled.div`
display: flex;
flex-direction: column;
width: 100%;
padding: 20px;
border-radius: 0 0 20px 20px;
background-color: ${props => props.theme.secondaryBackground};
border-top: 1px solid ${props => props.theme.primaryBackground};
`;
/** Optional section title label (e.g. when the primary input has no label prop) */
export const SectionLabel = 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 TokenStatsTable = styled.div` export const TokenStatsTable = styled.div`
display: flex; display: flex;
flex-direction: column; flex-direction: column;
justify-content: center; justify-content: center;
width: 100%; width: 100%;
color: ${props => props.theme.primaryText}; color: ${props => props.theme.primaryText};
border-radius: 20px 20px 0 0; border-radius: 20px 20px 0 0;
padding: 20px; padding: 0;
border: 1px solid ${props => props.theme.border};
border-bottom: none; border-bottom: none;
background: linear-gradient( background-color: ${props => props.theme.secondaryBackground};
0deg,
rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.1) 100%
);
`; `;
export const TokenStatsRowCtn = styled.div` export const TokenStatsRowCtn = styled.div`
width: 100%; width: 100%;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
border-top: 1px solid ${props => props.theme.border}; border-bottom: 1px solid ${props => props.theme.primaryBackground};
border-bottom: 1px solid ${props => props.theme.border}; padding: 15px;
padding: 20px 0;
margin-top: 20px;
`; `;
export const TokenStatsRow = styled.div` export const TokenStatsRow = styled.div`
width: 100%; width: 100%;
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
align-items: center; align-items: center;
text-align: center; text-align: center;
justify-content: center; justify-content: center;
gap: 3px; gap: 3px;
`; `;
export const TokenStatsCol = styled.div` export const TokenStatsCol = styled.div`
align-items: center; align-items: center;
justify-content: center; justify-content: flex-start;
display: flex; display: flex;
flex-direction: column; gap: 8px;
text-align: left;
border-bottom: 1px solid ${props => props.theme.primaryBackground};
padding: 15px;
img {
width: 60px;
height: 60px;
}
h2 { h2 {
margin: 0; margin: 0;
font-size: var(--text-2xl); font-size: var(--text-2xl);
line-height: var(--text-2xl--line-height); line-height: var(--text-2xl--line-height);
font-weight: 600; font-weight: 600;
text-align: center;
} }
span { span {
color: ${props => props.theme.secondaryText}; color: ${props => props.theme.secondaryText};
} }
`; `;
export const TokenUrlCol = styled(TokenStatsCol)` export const TokenUrlCol = styled.div`
text-overflow: ellipsis; text-overflow: ellipsis;
overflow: hidden; overflow: hidden;
white-space: nowrap; white-space: nowrap;
max-width: 300px; max-width: 300px;
@media (max-width: 768px) { @media (max-width: 768px) {
max-width: 200px; max-width: 200px;
} }
@media (max-width: 400px) { @media (max-width: 400px) {
max-width: 124px; max-width: 124px;
} }
`; `;
export const TokenStatsTableRow = styled.div<{ balance?: boolean }>` export const TokenStatsTableRow = styled.div`
width: 100%; width: 100%;
display: flex; display: flex;
align-items: flex-start; align-items: center;
gap: 20px; gap: 20px;
justify-content: space-between; justify-content: space-between;
color: ${props => margin-top: 5px;
props.balance ? props.theme.primaryText : props.theme.secondaryText}; font-size: var(--text-sm);
font-size: ${props => (props.balance ? '18px' : '16px')}; color: ${props => props.theme.primaryText};
@media (max-width: 768px) {
font-size: ${props => (props.balance ? '16px' : '14px')};
}
margin-bottom: ${props => (props.balance ? '15px' : '0')};
label { label {
flex-shrink: 0; flex-shrink: 0;
color: ${props => props.theme.secondaryText};
} }
> div { > div {
display: flex; display: flex;
align-items: center; align-items: center;
word-break: break-all; word-break: break-all;
text-align: right; text-align: right;
button { button {
display: flex; display: flex;
align-items: center; align-items: center;
padding: 0; padding: 0;
padding-left: 5px; padding-left: 5px;
} }
a { a {
color: ${props => props.theme.secondaryText}; color: ${props => props.theme.primaryText};
:hover { :hover {
color: ${props => props.theme.accent}; color: ${props => props.theme.accent};
text-decoration: underline; text-decoration: underline;
} }
} }
svg { svg {
width: 16px; width: 16px;
height: 16px; height: 16px;
g { g {
fill: ${props => props.theme.secondaryText}; fill: ${props => props.theme.primaryText};
} }
fill: ${props => props.theme.secondaryText}; fill: ${props => props.theme.primaryText};
:hover { :hover {
g { g {
fill: ${props => props.theme.secondaryAccent}; fill: ${props => props.theme.accent};
} }
fill: ${props => props.theme.secondaryAccent}; fill: ${props => props.theme.accent};
} }
} }
} }
`; `;
export const TokenInfoRow = styled.div<{ expand?: boolean }>`
width: 100%;
display: flex;
align-items: center;
gap: 20px;
justify-content: space-between;
font-size: var(--text-base);
label {
font-weight: bold;
}
svg {
width: 20px;
height: 20px;
}
${props =>
props.expand &&
`
margin-top: 8px;
cursor: pointer;
user-select: none;
:hover {
color: ${props.theme.accent};
path {
fill: ${props.theme.accent};
}
}
`}
`;
export const TokenStatsLabel = styled.div` export const TokenStatsLabel = styled.div`
font-weight: bold; font-weight: bold;
justify-content: flex-end; justify-content: flex-end;
text-align: right; text-align: right;
display: flex; display: flex;
width: 106px; width: 106px;
`; `;
export const SwitchHolder = styled.div` export const SwitchHolder = styled.div`
width: 100%; width: 100%;
display: flex; display: flex;
justify-content: flex-start; justify-content: flex-start;
gap: 12px; gap: 12px;
align-content: center; align-content: center;
align-items: center; align-items: center;
margin: 12px; margin: 12px;
`; `;
export const TokenActionBar = styled.div`
display: flex;
align-items: center;
width: 100%;
flex-wrap: wrap;
background: ${props => props.theme.secondaryBackground};
`;
export const TokenActionBtn = styled.button<{ $active?: boolean }>`
display: inline-flex;
align-items: center;
justify-content: center;
gap: 8px;
padding: 10px 18px;
font-size: var(--text-base);
cursor: pointer;
border: none;
flex-grow: 1;
height: 40px;
color: ${props => props.theme.primaryText};
border-right: 1px solid ${props => props.theme.primaryBackground};
background-color: ${props =>
props.$active ? props.theme.accent : props.theme.secondaryBackground};
transition:
background-color 0.15s ease,
color 0.15s ease;
:hover:not(:disabled) {
background-color: ${props =>
props.$active ? props.theme.accent : props.theme.border};
}
:disabled {
opacity: 0.5;
cursor: not-allowed;
}
`;
export const TokenActionMoreWrap = styled.div`
position: relative;
margin-left: auto;
`;
export const TokenActionDropdown = styled.div<{ $open: boolean }>`
position: absolute;
top: 100%;
right: 0;
margin-top: 4px;
min-width: 180px;
padding: 8px 0;
border-radius: 10px;
background-color: ${props => props.theme.secondaryBackground};
border: 1px solid ${props => props.theme.border};
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
z-index: 10;
display: ${props => (props.$open ? 'block' : 'none')};
`;
export const TokenActionDropdownItem = styled.button<{ $disabled?: boolean }>`
display: flex;
align-items: center;
gap: 8px;
width: 100%;
padding: 10px 16px;
border: none;
background: none;
color: ${props =>
props.$disabled ? props.theme.secondaryText : props.theme.primaryText};
font-size: var(--text-base);
text-align: left;
cursor: ${props => (props.$disabled ? 'not-allowed' : 'pointer')};
opacity: ${props => (props.$disabled ? 0.6 : 1)};
:hover:not(:disabled) {
background-color: ${props => props.theme.formBorder};
}
`;
export const ButtonDisabledMsg = styled.div` export const ButtonDisabledMsg = styled.div`
font-size: var(--text-sm); font-size: var(--text-sm);
line-height: var(--text-sm--line-height); line-height: var(--text-sm--line-height);
color: ${props => props.theme.formError}; color: ${props => props.theme.formError};
word-break: break-all; word-break: break-all;
`; `;
export const ButtonDisabledSpan = styled.span` export const ButtonDisabledSpan = styled.span`
color: ${props => props.theme.formError}; color: ${props => props.theme.formError};
`; `;
export const NftTitle = styled.div` export const NftTitle = styled.div`
color: ${props => props.theme.primaryText}; color: ${props => props.theme.primaryText};
font-size: var(--text-xl); font-size: var(--text-xl);
line-height: var(--text-xl--line-height); line-height: var(--text-xl--line-height);
text-align: center; text-align: center;
font-weight: bold; font-weight: bold;
`; `;
export const NftTable = styled.div` export const NftTable = styled.div`
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
justify-content: center; justify-content: center;
gap: 9px; gap: 9px;
width: 100%; width: 100%;
background-color: ${props => props.theme.secondaryBackground} background-color: ${props => props.theme.secondaryBackground};
border-radius: 9px; border-radius: 9px;
color: ${props => props.theme.primaryText}; color: ${props => props.theme.primaryText};
max-height: 220px; max-height: 220px;
overflow: auto; overflow: auto;
&::-webkit-scrollbar { &::-webkit-scrollbar {
width: 12px; width: 12px;
} }
▲ Show 20 Lines • Show All 103 Lines • Show Last 20 Lines