Page MenuHomePhabricator
Differential D19604 Diff 58919 cashtab/src/components/Common/Buttons.tsx

Changeset View

Standalone View

View Options

cashtab/src/components/Common/Buttons.tsx

// 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 React, { ReactNode } from 'react'; import React, { ReactNode } from 'react';
import styled, { css } from 'styled-components'; import styled, { css } from 'styled-components';
import { Link } from 'react-router'; import { Link } from 'react-router';
import { CopyPasteIcon } from 'components/Common/CustomIcons'; import { CopyPasteIcon } from 'components/Common/CustomIcons';
import { toast } from 'react-toastify'; import { toast } from 'react-toastify';
const BaseButtonOrLinkCss = css<{ disabled?: boolean }>` const BaseButtonOrLinkCss = css<{ disabled?: boolean }>`
font-size: var(--text-xl); font-size: var(--text-lg);
line-height: var(--text-xl--line-height); line-height: var(--text-lg--line-height);
padding: 20px 12px; padding: 10px 0;
border-radius: 9px; border-radius: 8px;
transition: all 0.5s ease; transition:
box-shadow 0.15s ease-out,
border-color 0.15s ease-out,
color 0.15s ease-out;
width: 100%; width: 100%;
margin-bottom: 20px; margin-bottom: 20px;
cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')}; cursor: ${props => (props.disabled ? 'not-allowed' : 'pointer')};
:hover { :hover {
background-position: right center;
-webkit-box-shadow: ${props => props.theme.buttons.primary.hoverShadow}; -webkit-box-shadow: ${props => props.theme.buttons.primary.hoverShadow};
-moz-box-shadow: ${props => props.theme.buttons.primary.hoverShadow}; -moz-box-shadow: ${props => props.theme.buttons.primary.hoverShadow};
box-shadow: ${props => props.theme.buttons.primary.hoverShadow}; box-shadow: ${props => props.theme.buttons.primary.hoverShadow};
} }
@media (max-width: 768px) { @media (max-width: 768px) {
font-size: var(--text-base); font-size: var(--text-base);
line-height: var(--text-base--line-height); line-height: var(--text-base--line-height);
padding: 15px 0; padding: 15px 0;
Show All 9 Linesconst CashtabBaseLink = styled(Link)`
${BaseButtonOrLinkCss} ${BaseButtonOrLinkCss}
`; `;
const PrimaryButtonOrLinkCss = css<{ disabled?: boolean }>` const PrimaryButtonOrLinkCss = css<{ disabled?: boolean }>`
color: ${props => color: ${props =>
props.disabled props.disabled
? props.theme.buttons.disabled.color ? props.theme.buttons.disabled.color
: props.theme.buttons.primary.color}; : props.theme.buttons.primary.color};
border: ${props => ${props =>
props.disabled ? 'none' : `1px solid ${props.theme.accent}`}; props.disabled
? 'border: none;'
: `
border-top: 1px solid ${props.theme.buttons.primary.borderTop};
border-left: 1px solid ${props.theme.buttons.primary.borderTop};
border-right: 1px solid ${props.theme.buttons.primary.borderBottom};
border-bottom: 1px solid ${props.theme.buttons.primary.borderBottom};
`};
${props => ${props =>
props.disabled props.disabled
? `background: ${props.theme.buttons.disabled.background};` ? `background: ${props.theme.buttons.disabled.background};`
: `background-image: ${props.theme.buttons.primary.backgroundImage}; `}; : `
background-size: 200% auto; background: ${props.theme.buttons.primary.background};
`};
svg { svg {
fill: ${props => props.theme.buttons.primary.color}; fill: ${props => props.theme.buttons.primary.color};
} }
@media (hover: hover) {
&:hover:not(:disabled) {
border-bottom-color: rgba(255, 255, 255, 0.2);
}
}
`; `;
const PrimaryButton = styled(CashtabBaseButton)` const PrimaryButton = styled(CashtabBaseButton)`
${PrimaryButtonOrLinkCss} ${PrimaryButtonOrLinkCss}
`; `;
export const PrimaryLink = styled(CashtabBaseLink)` export const PrimaryLink = styled(CashtabBaseLink)`
${PrimaryButtonOrLinkCss} ${PrimaryButtonOrLinkCss}
text-decoration: none; text-decoration: none;
Show All 37 Linesconst SecondaryLink = styled(CashtabBaseLink)`
} }
`; `;
const SvgButtonOrLinkCss = css` const SvgButtonOrLinkCss = css`
border: none; border: none;
background: none; background: none;
cursor: pointer; cursor: pointer;
svg { svg {
height: 24px; height: 22px;
width: 24px; width: 22px;
fill: ${props => props.theme.accent}; fill: ${props => props.theme.primaryText};
path {
stroke: ${props => props.theme.primaryText};
}
} }
@media (hover: hover) { @media (hover: hover) {
&:hover { &:hover {
svg { svg {
fill: ${props => props.theme.secondaryAccent}; fill: ${props => props.theme.accent};
stroke: ${props => props.theme.secondaryAccent}; stroke: ${props => props.theme.accent};
path { path {
fill: ${props => props.theme.secondaryAccent}; stroke: ${props => props.theme.accent};
} }
} }
} }
} }
`; `;
const HeaderCopyButtonCss = css` const HeaderCopyButtonCss = css`
border: none; border: none;
background: ${props => props.theme.secondaryBackground};
width: 38px;
flex-shrink: 0; flex-shrink: 0;
height: 100%; height: 100%;
border-radius: 5px; padding: 0;
cursor: pointer; cursor: pointer;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
background: none;
svg { svg {
height: 18px; height: 20px;
width: 18px; width: 25px;
path { path {
fill: ${props => props.theme.secondaryText}; fill: ${props => props.theme.primaryText};
} }
} }
@media (hover: hover) { @media (hover: hover) {
&:hover { &:hover {
background: ${props => props.theme.accent};
svg { svg {
path { path {
fill: ${props => props.theme.primaryText}; fill: ${props => props.theme.accent};
} }
} }
} }
} }
`; `;
const SvgButton = styled.button<{ isHeader?: boolean }>` const SvgButton = styled.button<{ isHeader?: boolean }>`
${({ isHeader }) => (isHeader ? HeaderCopyButtonCss : SvgButtonOrLinkCss)} ${({ isHeader }) => (isHeader ? HeaderCopyButtonCss : SvgButtonOrLinkCss)}
▲ Show 20 Lines • Show All 70 Lines • Show Last 20 Lines