[wip] refactor button styles
This commit is contained in:
parent
d67e3968cc
commit
895564eae0
|
@ -3,35 +3,96 @@ import styled from '@emotion/styled'
|
|||
import tw from 'twin.macro'
|
||||
|
||||
type StyledButtonProps = {
|
||||
disabled: boolean
|
||||
secondary: boolean
|
||||
}
|
||||
|
||||
const StyledButton = styled.button<StyledButtonProps>`
|
||||
const idleGradient = 'bg-gradient-to-r from-secondary-2-light to-primary-light'
|
||||
const activeGradient =
|
||||
'bg-gradient-to-bl from-secondary-1-light via-primary-dark to-secondary-2-light'
|
||||
|
||||
export const PrimaryButton = styled.button`
|
||||
${tw`relative z-10 px-8 py-2 rounded-full text-fgd-1 ${idleGradient}`}
|
||||
|
||||
:before {
|
||||
${tw`absolute left-0 top-0 opacity-0 h-full w-full block bg-gradient-to-tl from-secondary-1-light via-secondary-1-dark to-secondary-2-light transition-opacity duration-500`}
|
||||
${tw`absolute left-0 top-0 opacity-0 h-full w-full block transition-opacity duration-500 ${activeGradient}`}
|
||||
border-radius: inherit;
|
||||
content: '';
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
:hover {
|
||||
:before {
|
||||
${tw`opacity-100`}
|
||||
}
|
||||
}
|
||||
|
||||
focus {
|
||||
${tw`ring-2 ring-secondary-2-light ring-opacity-40 outline-none`}
|
||||
}
|
||||
|
||||
:active {
|
||||
:before {
|
||||
${tw`ring-2 ring-secondary-2-light ring-opacity-40`}
|
||||
}
|
||||
}
|
||||
|
||||
:disabled {
|
||||
${tw`cursor-not-allowed opacity-60`}
|
||||
:before {
|
||||
${tw`hidden`}
|
||||
}
|
||||
}
|
||||
`
|
||||
|
||||
export const SecondaryButton = styled.button`
|
||||
${tw`relative z-10 px-8 py-2 rounded-full text-fgd-1`}
|
||||
|
||||
:hover {
|
||||
${tw`underline`}
|
||||
}
|
||||
|
||||
:disabled {
|
||||
${tw`cursor-not-allowed opacity-60`}
|
||||
}
|
||||
`
|
||||
|
||||
// use before as an overlay to have nice alpha transitions
|
||||
export const StyledButton = styled.button<StyledButtonProps>`
|
||||
:before {
|
||||
${tw`absolute left-0 top-0 opacity-0 h-full w-full block transition-opacity duration-500`}
|
||||
${({ secondary, disabled }) =>
|
||||
!secondary && !disabled && tw`${activeGradient}`}
|
||||
border-radius: inherit;
|
||||
content: '';
|
||||
z-index: -10;
|
||||
}
|
||||
|
||||
:hover {
|
||||
${({ secondary }) => secondary && tw`underline`}
|
||||
|
||||
:before {
|
||||
${tw`opacity-100`};
|
||||
${({ disabled, secondary }) => (disabled || secondary) && tw`hidden`}
|
||||
${({ disabled }) => disabled && tw`hidden`}
|
||||
}
|
||||
}
|
||||
|
||||
:focus {
|
||||
${tw`ring-4 ring-secondary-2-light ring-opacity-40`}
|
||||
${tw`ring-2 ring-secondary-2-light ring-opacity-40 outline-none`}
|
||||
${({ secondary }) => secondary && tw`ring-0`}
|
||||
}
|
||||
|
||||
:active {
|
||||
:before {
|
||||
${tw`ring-4 ring-secondary-2-light ring-opacity-40`}
|
||||
${tw`ring-2 ring-secondary-2-light ring-opacity-40`}
|
||||
${({ secondary }) => secondary && tw`ring-0`}
|
||||
}
|
||||
}
|
||||
|
||||
:disabled {
|
||||
${tw`cursor-not-allowed opacity-60`}
|
||||
}
|
||||
|
||||
${({ secondary }) => secondary && tw`bg-none`}
|
||||
`
|
||||
|
||||
|
@ -54,7 +115,7 @@ const Button: FunctionComponent<ButtonProps> = ({
|
|||
<StyledButton
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={`${className} bg-gradient-to-br from-secondary-1-light via-secondary-1-dark to-secondary-2-light relative z-10 default-transition px-6 py-2 rounded-lg text-fgd-1 hover:bg-bkg-3 focus:outline-none disabled:cursor-not-allowed disabled:opacity-60`}
|
||||
className={`${className} relative z-10 px-8 py-2 rounded-full text-fgd-1 ${idleGradient}`}
|
||||
secondary={secondary}
|
||||
{...props}
|
||||
>
|
||||
|
@ -63,4 +124,31 @@ const Button: FunctionComponent<ButtonProps> = ({
|
|||
)
|
||||
}
|
||||
|
||||
// default heroicon does not allow customizing stroke
|
||||
const ChevronRightIcon = ({ className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
className={className}
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
export const ButtonWithChevronRight: FunctionComponent<ButtonProps> = ({
|
||||
children,
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<Button className={`${className} pr-5 flex`} {...props}>
|
||||
{children}{' '}
|
||||
<ChevronRightIcon
|
||||
className={`relative stroke-3 top-1 h-4 w-4 text-fgd-1 ml-1`}
|
||||
/>
|
||||
</Button>
|
||||
)
|
||||
}
|
||||
export default Button
|
||||
|
|
|
@ -0,0 +1,58 @@
|
|||
import { FunctionComponent } from 'react'
|
||||
import styled from '@emotion/styled'
|
||||
import tw from 'twin.macro'
|
||||
|
||||
const StyledButton = styled.button`
|
||||
${tw`relative z-10 px-8 py-2 rounded-full text-fgd-1`}
|
||||
|
||||
:hover {
|
||||
${tw`underline`}
|
||||
}
|
||||
|
||||
:disabled {
|
||||
${tw`cursor-not-allowed opacity-60`}
|
||||
}
|
||||
`
|
||||
|
||||
// default heroicon does not allow customizing stroke
|
||||
const ChevronRightIcon = ({ className }) => (
|
||||
<svg
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
fill="none"
|
||||
viewBox="0 0 24 24"
|
||||
stroke="currentColor"
|
||||
className={className}
|
||||
>
|
||||
<path strokeLinecap="round" strokeLinejoin="round" d="M9 5l7 7-7 7"></path>
|
||||
</svg>
|
||||
)
|
||||
|
||||
interface LinkProps {
|
||||
onClick?: (x?) => void
|
||||
disabled?: boolean
|
||||
className?: string
|
||||
}
|
||||
|
||||
const Link: FunctionComponent<LinkProps> = ({
|
||||
children,
|
||||
onClick,
|
||||
disabled = false,
|
||||
className,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<StyledButton
|
||||
onClick={onClick}
|
||||
disabled={disabled}
|
||||
className={`${className} pr-5 flex z-10 px-8 py-2 text-fgd-1`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
<ChevronRightIcon
|
||||
className={`relative stroke-3 top-1 h-4 w-4 text-fgd-1 ml-1`}
|
||||
/>
|
||||
</StyledButton>
|
||||
)
|
||||
}
|
||||
|
||||
export default Link
|
|
@ -1,6 +1,11 @@
|
|||
import ContributionPage from './ContributionPage'
|
||||
import RedeemPage from './RedeemPage'
|
||||
import Notifications from '../components/Notification'
|
||||
import Button, {
|
||||
ButtonWithChevronRight,
|
||||
PrimaryButton,
|
||||
} from '../components/Button'
|
||||
import Link from '../components/Link'
|
||||
import TopBar from '../components/TopBar'
|
||||
|
||||
import usePool from '../hooks/usePool'
|
||||
|
@ -11,9 +16,34 @@ const Index = () => {
|
|||
return (
|
||||
<div className={`bg-bkg-1 text-fgd-1 transition-all`}>
|
||||
<TopBar />
|
||||
<Notifications />
|
||||
<div>
|
||||
<div>
|
||||
<PrimaryButton>Primary</PrimaryButton>
|
||||
</div>
|
||||
<div>
|
||||
<Button disabled>Disabled</Button>
|
||||
</div>
|
||||
<div>
|
||||
<Link>Link</Link>
|
||||
</div>
|
||||
<div>
|
||||
<Link disabled>Disabled</Link>
|
||||
</div>
|
||||
</div>
|
||||
<div>
|
||||
<div>
|
||||
<ButtonWithChevronRight>Primary</ButtonWithChevronRight>
|
||||
</div>
|
||||
<div>
|
||||
<ButtonWithChevronRight disabled>Disabled</ButtonWithChevronRight>
|
||||
</div>
|
||||
<div>
|
||||
<ButtonWithChevronRight secondary>Secondary</ButtonWithChevronRight>
|
||||
</div>
|
||||
</div>
|
||||
{/* <Notifications />
|
||||
{endIdo?.isAfter() && <ContributionPage />}
|
||||
{endIdo?.isBefore() && <RedeemPage />}
|
||||
{endIdo?.isBefore() && <RedeemPage />} */}
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
|
|
@ -54,6 +54,13 @@ module.exports = {
|
|||
},
|
||||
},
|
||||
},
|
||||
strokeWidth: {
|
||||
3: '3',
|
||||
4: '4',
|
||||
5: '5',
|
||||
6: '6',
|
||||
7: '7',
|
||||
},
|
||||
},
|
||||
},
|
||||
variants: {
|
||||
|
|
Loading…
Reference in New Issue