diff --git a/web/cashtab/src/components/Common/QRCode.js b/web/cashtab/src/components/Common/QRCode.js --- a/web/cashtab/src/components/Common/QRCode.js +++ b/web/cashtab/src/components/Common/QRCode.js @@ -21,8 +21,8 @@ fill: ${props => props.theme.qr.background}; } :hover { - border-color: ${({ bch = 0, ...props }) => - bch === 1 ? props.theme.primary : props.theme.qr.token}; + border-color: ${({ xec = 0, ...props }) => + xec === 1 ? props.theme.primary : props.theme.qr.token}; } @media (max-width: 768px) { border-radius: 18px; @@ -36,12 +36,11 @@ font-weight: bold; width: 100%; text-align: center; - - background-color: ${({ bch = 0, ...props }) => - bch === 1 ? props.theme.primary : props.theme.qr.token}; + background-color: ${({ xec = 0, ...props }) => + xec === 1 ? props.theme.primary : props.theme.qr.token}; border: 1px solid; - border-color: ${({ bch = 0, ...props }) => - bch === 1 + border-color: ${({ xec = 0, ...props }) => + xec === 1 ? props.theme.qr.copyBorderCash : props.theme.qr.copyBorderToken}; color: ${props => props.theme.contrast}; @@ -53,10 +52,34 @@ padding: 20px 0; } `; +const PrefixLabel = styled.span` + text-align: right; + font-size: 14px; + font-weight: bold; + @media (max-width: 768px) { + font-size: 12px; + } + @media (max-width: 400px) { + font-size: 10px; + } +`; +const AddressHighlightTrim = styled.span` + font-weight: bold; + font-size: 14px; + @media (max-width: 768px) { + font-size: 12px; + } + @media (max-width: 400px) { + font-size: 10px; + } +`; const CustomInput = styled.div` - font-size: 15px; - color: ${props => props.theme.wallet.text.secondary}; + font-size: 12px; + color: ${({ xec = 0, ...props }) => + xec === 1 + ? props.theme.wallet.text.secondary + : props.theme.brandSecondary}; text-align: center; cursor: pointer; margin-bottom: 0px; @@ -64,11 +87,6 @@ font-family: 'Roboto Mono', monospace; border-radius: 5px; - span { - font-weight: bold; - color: ${props => props.theme.wallet.text.primary}; - font-size: 16px; - } input { border: none; width: 100%; @@ -92,22 +110,16 @@ color: ${props => props.theme.wallet.text.primary}; } @media (max-width: 768px) { - font-size: 11px; - span { - font-size: 12px; - } + font-size: 10px; input { - font-size: 11px; + font-size: 10px; margin-bottom: 10px; } } - @media (max-width: 340px) { - font-size: 10px; - span { - font-size: 11px; - } + @media (max-width: 400px) { + font-size: 7px; input { - font-size: 11px; + font-size: 10px; margin-bottom: 10px; } } @@ -115,27 +127,21 @@ export const QRCode = ({ address, - legacy, size = 210, onClick = () => null, ...otherProps }) => { + address = address ? convertToEcashPrefix(address) : ''; + const [visible, setVisible] = useState(false); const trimAmount = 8; - // Set address format to legacy or not - - if (!legacy) { - address = address ? convertToEcashPrefix(address) : ''; - } - // get the prefix + const address_trim = address ? address.length - trimAmount : ''; const addressSplit = address ? address.split(':') : ['']; const addressPrefix = addressSplit[0]; const prefixLength = addressPrefix.length + 1; const isCash = isValidCashPrefix(address); - const address_trim = address ? address.length - trimAmount : ''; - const txtRef = React.useRef(null); const handleOnClick = evt => { @@ -148,7 +154,7 @@ const handleOnCopy = () => { // Event.("Category", "Action", "Label") - // BCH or slp? + // xec or etoken? let eventLabel = currency.ticker; if (address) { const isToken = isValidTokenPrefix(address); @@ -177,7 +183,7 @@ >