Secure your code as it's written. Use Snyk Code to scan source code in minutes - no build needed - and fix issues immediately.
const OutlineButton = styled(Button).attrs(props => ({
primarycolor: themeGet('colors.primary', '#000')(props),
}))`
& {
${styledSystem.borders}
${styledSystem.borderRadius}
${styledSystem.borderColor}
/** Text */
${styledSystem.color}
${styledSystem.fontSize}
${styledSystem.fontWeight}
${styledSystem.letterSpacing}
${styledSystem.lineHeight}
${styledSystem.textAlign}
outline: none;
&:disabled {
background-color: ${styledSystem.themeGet('colors.black.50')};
cursor: not-allowed;
}
&:focus, &:hover:not(:disabled) {
border-color: ${styledSystem.themeGet('colors.primary.300')};
}
&::placeholder {
color: ${styledSystem.themeGet('colors.black.400')};
}
`;
/**
* A styled textarea that can grows with its content.
*/
export default class StyledTextarea extends React.PureComponent {
props => ({
fontFamily: 'inherit',
display: 'inline-block',
verticalAlign: 'middle',
border: 0,
appearance: 'none',
'&:focus': {
outline: 'none',
boxShadow: `inset 0 0 0 1px ${themeGet('colors.blue')(props)}`,
},
'&:disabled': {
opacity: 1/4
},
}))
function getColor(props) {
return props.isHovered
? themeGet('colors.lightningOrange')(props)
: themeGet('colors.primaryText')(props)
}
import Input from './Input'
import Eye from 'components/Icon/Eye'
import EyeOff from 'components/Icon/EyeOff'
const iconCss = `
cursor: pointer;
height: 32px;
padding: 0 8px;
position: absolute;
right: 8px;
user-select: none;
width: 32px;
`
const StyledEyeIcon = styled(Eye)`
${iconCss}
color: ${themeGet('colors.gray')};
`
const StyledEyeOffIcon = styled(EyeOff)`
${iconCss}
color: ${themeGet('colors.gray')};
`
const PasswordInput = props => {
const [isPasswordVisible, setPasswordVisible] = useState(false)
const toggleIsPasswordVisible = () => {
setPasswordVisible(!isPasswordVisible)
}
return (
props => ({
'&:focus': {
outline: 'none',
boxShadow: `0 0 0 2px ${themeGet('colors.' + props.bg, props.bg)(props)}`
}
}),
'fontSize',