Changeset View
Changeset View
Standalone View
Standalone View
cashtab/src/components/Common/PrimaryButton.js
// 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, { css } from 'styled-components'; | ||||
import { Link } from 'react-router-dom'; | |||||
const CashtabBaseButton = styled.button` | const BaseButtonOrLinkCss = css` | ||||
font-size: 24px; | font-size: 24px; | ||||
padding: 20px 0; | padding: 20px 0; | ||||
border-radius: 9px; | border-radius: 9px; | ||||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||||
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; | 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: 16px; | font-size: 16px; | ||||
padding: 15px 0; | padding: 15px 0; | ||||
} | } | ||||
`; | `; | ||||
const CashtabBaseButton = styled.button` | |||||
${BaseButtonOrLinkCss} | |||||
`; | |||||
const CashtabBaseLink = styled(Link)` | |||||
${BaseButtonOrLinkCss} | |||||
`; | |||||
const PrimaryButton = styled(CashtabBaseButton)` | const PrimaryButton = styled(CashtabBaseButton)` | ||||
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: 1px solid | border: 1px solid | ||||
${props => (props.disabled ? 'none' : props.theme.eCashBlue)}; | ${props => (props.disabled ? 'none' : props.theme.eCashBlue)}; | ||||
${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-image: ${props.theme.buttons.primary.backgroundImage}; `}; | ||||
background-size: 200% auto; | background-size: 200% auto; | ||||
svg { | svg { | ||||
fill: ${props => props.theme.buttons.primary.color}; | fill: ${props => props.theme.buttons.primary.color}; | ||||
} | } | ||||
`; | `; | ||||
const SecondaryButton = styled(CashtabBaseButton)` | const SecondaryButtonOrLinkCss = css` | ||||
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: 1px solid | border: 1px solid | ||||
${props => (props.disabled ? 'none' : props.theme.eCashPurple)}; | ${props => (props.disabled ? 'none' : props.theme.eCashPurple)}; | ||||
${props => | ${props => | ||||
props.disabled | props.disabled | ||||
? `background: ${props.theme.buttons.disabled.background};` | ? `background: ${props.theme.buttons.disabled.background};` | ||||
: `background-image: ${props.theme.buttons.secondary.backgroundImage}; `}; | : `background-image: ${props.theme.buttons.secondary.backgroundImage}; `}; | ||||
background-size: 200% auto; | background-size: 200% auto; | ||||
svg { | svg { | ||||
fill: ${props => props.theme.buttons.secondary.color}; | fill: ${props => props.theme.buttons.secondary.color}; | ||||
} | } | ||||
`; | `; | ||||
const SecondaryButton = styled(CashtabBaseButton)` | |||||
${SecondaryButtonOrLinkCss} | |||||
`; | |||||
const SecondaryLink = styled(CashtabBaseLink)` | |||||
${SecondaryButtonOrLinkCss} | |||||
`; | |||||
export default PrimaryButton; | export default PrimaryButton; | ||||
export { SecondaryButton }; | export { SecondaryButton, SecondaryLink }; |