Changeset View
Changeset View
Standalone View
Standalone View
web/cashtab/src/components/Common/PrimaryButton.js
import styled from 'styled-components'; | import styled from 'styled-components'; | ||||
const PrimaryButton = styled.button` | const PrimaryButton = styled.button` | ||||
border: none; | border: none; | ||||
color: #fff; | color: ${props => props.theme.buttons.primary.color}; | ||||
background-image: linear-gradient(270deg, #ff8d00 0%, #bb5a00 100%); | background-image: ${props => props.theme.buttons.primary.backgroundImage}; | ||||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||||
background-size: 200% auto; | background-size: 200% auto; | ||||
font-size: 18px; | font-size: 18px; | ||||
width: 100%; | width: 100%; | ||||
padding: 20px 0; | padding: 20px 0; | ||||
border-radius: 4px; | border-radius: 4px; | ||||
margin-bottom: 20px; | margin-bottom: 20px; | ||||
cursor: pointer; | cursor: pointer; | ||||
:hover { | :hover { | ||||
background-position: right center; | background-position: right center; | ||||
-webkit-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | -webkit-box-shadow: ${props => props.theme.buttons.primary.hoverShadow}; | ||||
-moz-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | -moz-box-shadow: ${props => props.theme.buttons.primary.hoverShadow}; | ||||
box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | box-shadow: ${props => props.theme.buttons.primary.hoverShadow}; | ||||
} | } | ||||
svg { | svg { | ||||
fill: #fff; | fill: ${props => props.theme.buttons.primary.color}; | ||||
} | } | ||||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||||
font-size: 16px; | font-size: 16px; | ||||
padding: 15px 0; | padding: 15px 0; | ||||
} | } | ||||
`; | `; | ||||
const SecondaryButton = styled.button` | const SecondaryButton = styled.button` | ||||
border: none; | border: none; | ||||
color: #444; | color: ${props => props.theme.buttons.secondary.color}; | ||||
background: #e9eaed; | background: ${props => props.theme.buttons.secondary.background}; | ||||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||||
font-size: 18px; | font-size: 18px; | ||||
width: 100%; | width: 100%; | ||||
padding: 15px 0; | padding: 15px 0; | ||||
border-radius: 4px; | border-radius: 4px; | ||||
cursor: pointer; | cursor: pointer; | ||||
outline: none; | outline: none; | ||||
margin-bottom: 20px; | margin-bottom: 20px; | ||||
:hover { | :hover { | ||||
-webkit-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | -webkit-box-shadow: ${props => | ||||
-moz-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | props.theme.buttons.secondary.hoverShadow}; | ||||
box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | -moz-box-shadow: ${props => props.theme.buttons.secondary.hoverShadow}; | ||||
box-shadow: ${props => props.theme.buttons.secondary.hoverShadow}; | |||||
} | } | ||||
svg { | svg { | ||||
fill: #444; | fill: ${props => props.theme.buttons.secondary.color}; | ||||
} | } | ||||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||||
font-size: 16px; | font-size: 16px; | ||||
padding: 12px 0; | padding: 12px 0; | ||||
} | } | ||||
`; | `; | ||||
const SmartButton = styled.button` | const SmartButton = styled.button` | ||||
background-image: ${({ disabled = false }) => | ${({ disabled = false, ...props }) => | ||||
disabled === true | disabled === true | ||||
? 'none' | ? ` | ||||
: 'linear-gradient(270deg, #ff8d00 0%, #bb5a00 100%);'}; | background-image: 'none'; | ||||
color: ${({ disabled = false }) => (disabled === true ? '#444;' : '#fff;')}; | color: ${props.theme.buttons.secondary.color}; | ||||
background: ${({ disabled = false }) => | background: ${props.theme.buttons.secondary.background}; | ||||
disabled === true ? '#e9eaed;' : ''}; | :hover { | ||||
-webkit-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | |||||
-moz-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | |||||
box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | |||||
} | |||||
svg { | |||||
fill: ${props.theme.buttons.secondary.color}; | |||||
} | |||||
` | |||||
: ` | |||||
background-image: ${props.theme.buttons.primary.backgroundImage}; | |||||
color: ${props.theme.buttons.primary.color}; | |||||
:hover { | |||||
background-position: right center; | |||||
-webkit-box-shadow: ${props.theme.buttons.primary.hoverShadow}; | |||||
-moz-box-shadow: ${props.theme.buttons.primary.hoverShadow}; | |||||
box-shadow: ${props.theme.buttons.primary.hoverShadow}; | |||||
svg { | |||||
fill: ${props.theme.buttons.primary.color}; | |||||
} | |||||
}`} | |||||
border: none; | border: none; | ||||
transition: all 0.5s ease; | transition: all 0.5s ease; | ||||
font-size: 18px; | font-size: 18px; | ||||
width: 100%; | width: 100%; | ||||
padding: 15px 0; | padding: 15px 0; | ||||
border-radius: 4px; | border-radius: 4px; | ||||
cursor: pointer; | cursor: pointer; | ||||
outline: none; | outline: none; | ||||
margin-bottom: 20px; | margin-bottom: 20px; | ||||
:hover { | |||||
-webkit-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | |||||
-moz-box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | |||||
box-shadow: 0px 3px 10px -5px rgba(0, 0, 0, 0.75); | |||||
} | |||||
svg { | |||||
fill: #444; | |||||
} | |||||
@media (max-width: 768px) { | @media (max-width: 768px) { | ||||
font-size: 16px; | font-size: 16px; | ||||
padding: 12px 0; | padding: 12px 0; | ||||
} | } | ||||
`; | `; | ||||
export default PrimaryButton; | export default PrimaryButton; | ||||
export { SecondaryButton, SmartButton }; | export { SecondaryButton, SmartButton }; |