refactor all buttons to work with new button preset
This commit is contained in:
parent
8267ea3c7a
commit
5eaf63bfe6
|
@ -1,15 +1,16 @@
|
|||
import { FunctionComponent } from 'react'
|
||||
import styled from '@emotion/styled'
|
||||
import tw from 'twin.macro'
|
||||
|
||||
const idleGradient = 'bg-gradient-to-r from-secondary-2-light to-primary-light'
|
||||
const activeGradient =
|
||||
export const idleGradient =
|
||||
'bg-gradient-to-r from-secondary-2-light to-primary-light'
|
||||
export const activeGradient =
|
||||
'bg-gradient-to-bl from-secondary-1-light via-primary-dark to-secondary-2-light'
|
||||
|
||||
const Button = styled.button`
|
||||
${tw`relative z-10 px-8 py-2 rounded-full text-fgd-1 ${idleGradient}`}
|
||||
|
||||
const StyledButton = styled.button<ButtonProps>`
|
||||
:before {
|
||||
${tw`absolute left-0 top-0 opacity-0 h-full w-full block transition-opacity duration-500 ${activeGradient}`}
|
||||
${tw`absolute left-0 top-0 opacity-0 h-full w-full block transition-opacity duration-500`}
|
||||
${({ gray }) => (gray ? tw`bg-bkg-3` : tw`${activeGradient}`)}
|
||||
border-radius: inherit;
|
||||
content: '';
|
||||
z-index: -10;
|
||||
|
@ -21,7 +22,7 @@ const Button = styled.button`
|
|||
}
|
||||
}
|
||||
|
||||
focus {
|
||||
:focus {
|
||||
${tw`ring-2 ring-secondary-2-light ring-opacity-40 outline-none`}
|
||||
}
|
||||
|
||||
|
@ -39,4 +40,30 @@ const Button = styled.button`
|
|||
}
|
||||
`
|
||||
|
||||
interface ButtonProps {
|
||||
className?: string
|
||||
gray?: boolean
|
||||
onClick?: () => void
|
||||
disabled?: boolean
|
||||
}
|
||||
|
||||
const Button: FunctionComponent<ButtonProps> = ({
|
||||
children,
|
||||
className,
|
||||
gray,
|
||||
...props
|
||||
}) => {
|
||||
return (
|
||||
<StyledButton
|
||||
className={`${className} relative z-10 px-8 py-2 rounded-full text-fgd-1 ${
|
||||
gray ? 'bg-bkg-4' : idleGradient
|
||||
}`}
|
||||
gray={gray}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
</StyledButton>
|
||||
)
|
||||
}
|
||||
|
||||
export default Button
|
||||
|
|
|
@ -4,6 +4,7 @@ import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
|
|||
import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||
import WalletSelect from './WalletSelect'
|
||||
import WalletIcon from './WalletIcon'
|
||||
import { LinkIcon } from '@heroicons/react/solid'
|
||||
import Button from './Button'
|
||||
|
||||
const StyledWalletTypeLabel = styled.div`
|
||||
|
@ -45,14 +46,18 @@ const ConnectWalletButton = () => {
|
|||
|
||||
export default ConnectWalletButton
|
||||
|
||||
export const ConnectWalletButtonSmall = ({ children, onClick }) => (
|
||||
export const ConnectWalletButtonSmall = ({ connected, ...props }) => (
|
||||
<div className="relative">
|
||||
<Button
|
||||
className="rounded-full h-9 w-44 z-30 relative"
|
||||
onClick={() => onClick()}
|
||||
gray={connected}
|
||||
{...props}
|
||||
>
|
||||
<div className="flex items-center justify-center text-sm">{children}</div>
|
||||
<LinkIcon className="h-4 w-4 relative top-1 mr-2" />
|
||||
{connected ? 'Disconnect' : 'Connect Wallet'}
|
||||
</Button>
|
||||
<div className="absolute animate-connect-wallet-ping bg-secondary-2-light top-0 rounded-full h-9 w-44 z-20" />
|
||||
{!connected && (
|
||||
<div className="absolute animate-connect-wallet-ping bg-secondary-2-light top-0 rounded-full h-10 w-48" />
|
||||
)}
|
||||
</div>
|
||||
)
|
||||
|
|
|
@ -4,7 +4,6 @@ import {
|
|||
LockClosedIcon,
|
||||
LockOpenIcon,
|
||||
} from '@heroicons/react/outline'
|
||||
import { LinkIcon } from '@heroicons/react/solid'
|
||||
import useWalletStore from '../stores/useWalletStore'
|
||||
import Input from './Input'
|
||||
import Button from './Button'
|
||||
|
@ -16,6 +15,10 @@ import WalletIcon from './WalletIcon'
|
|||
import useLargestAccounts from '../hooks/useLargestAccounts'
|
||||
import useVaults from '../hooks/useVaults'
|
||||
import usePool from '../hooks/usePool'
|
||||
import styled from '@emotion/styled'
|
||||
import 'twin.macro'
|
||||
|
||||
const SmallButton = styled.button``
|
||||
|
||||
const ContributionModal = () => {
|
||||
const actions = useWalletStore((s) => s.actions)
|
||||
|
@ -200,25 +203,23 @@ const ContributionModal = () => {
|
|||
</div>
|
||||
<div className="flex">
|
||||
{submitted ? (
|
||||
<Button
|
||||
<SmallButton
|
||||
className="ring-1 ring-secondary-1-light ring-inset hover:ring-secondary-1-dark hover:bg-transparent hover:text-secondary-1-dark font-normal rounded text-secondary-1-light text-xs py-0.5 px-1.5 mr-2"
|
||||
disabled={!connected}
|
||||
onClick={() => handleEditContribution()}
|
||||
secondary
|
||||
>
|
||||
Unlock
|
||||
</Button>
|
||||
</SmallButton>
|
||||
) : null}
|
||||
<Button
|
||||
<SmallButton
|
||||
className={`${
|
||||
disableFormInputs && 'opacity-30'
|
||||
} bg-bkg-4 font-normal rounded text-fgd-3 text-xs py-0.5 px-1.5`}
|
||||
} bg-bkg-4 hover:bg-bkg-3 font-normal rounded text-fgd-3 text-xs py-0.5 px-1.5`}
|
||||
disabled={disableFormInputs}
|
||||
onClick={() => handleMax()}
|
||||
secondary
|
||||
>
|
||||
Max
|
||||
</Button>
|
||||
</SmallButton>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center pb-4 relative">
|
||||
|
@ -273,25 +274,11 @@ const ContributionModal = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
{connected ? (
|
||||
<Button
|
||||
className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
|
||||
onClick={() => handleConnectDisconnect()}
|
||||
secondary
|
||||
>
|
||||
<div className="flex items-center text-sm">
|
||||
<LinkIcon className="h-4 w-4 mr-1" />
|
||||
Disconnect
|
||||
</div>
|
||||
</Button>
|
||||
) : (
|
||||
<ConnectWalletButtonSmall onClick={handleConnectDisconnect}>
|
||||
<div className="flex items-center justify-center text-sm">
|
||||
<LinkIcon className="h-4 w-4 mr-1" />
|
||||
Connect Wallet
|
||||
</div>
|
||||
</ConnectWalletButtonSmall>
|
||||
)}
|
||||
<ConnectWalletButtonSmall
|
||||
className="flex pl-6"
|
||||
connected={connected}
|
||||
onClick={handleConnectDisconnect}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
|
@ -2,8 +2,9 @@ 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`}
|
||||
const StyledButton = styled.a`
|
||||
font-weight: 700;
|
||||
cursor: pointer;
|
||||
|
||||
:hover {
|
||||
${tw`underline`}
|
||||
|
@ -28,23 +29,17 @@ const ChevronRightIcon = ({ className }) => (
|
|||
)
|
||||
|
||||
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`}
|
||||
className={`${className} pr-5 flex z-10 px-8 py-2 text-fgd-1 relative rounded-full`}
|
||||
{...props}
|
||||
>
|
||||
{children}
|
||||
|
|
|
@ -1,5 +1,4 @@
|
|||
import { useEffect, useState } from 'react'
|
||||
import { LinkIcon } from '@heroicons/react/solid'
|
||||
import useWalletStore from '../stores/useWalletStore'
|
||||
import Button from './Button'
|
||||
import Input from './Input'
|
||||
|
@ -156,25 +155,11 @@ const RedeemModal = () => {
|
|||
</div>
|
||||
</div>
|
||||
<div className="flex justify-center">
|
||||
{connected ? (
|
||||
<Button
|
||||
className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
|
||||
onClick={() => handleConnectDisconnect()}
|
||||
secondary
|
||||
>
|
||||
<div className="flex items-center text-sm">
|
||||
<LinkIcon className="h-4 w-4 mr-1" />
|
||||
Disconnect
|
||||
</div>
|
||||
</Button>
|
||||
) : (
|
||||
<ConnectWalletButtonSmall onClick={handleConnectDisconnect}>
|
||||
<div className="flex items-center justify-center text-sm">
|
||||
<LinkIcon className="h-4 w-4" />
|
||||
Connect Wallet
|
||||
</div>
|
||||
</ConnectWalletButtonSmall>
|
||||
)}
|
||||
<ConnectWalletButtonSmall
|
||||
className="flex pl-6"
|
||||
connected={connected}
|
||||
onClick={handleConnectDisconnect}
|
||||
/>
|
||||
</div>
|
||||
</>
|
||||
)}
|
||||
|
|
|
@ -1,8 +1,6 @@
|
|||
import ContributionPage from './ContributionPage'
|
||||
import RedeemPage from './RedeemPage'
|
||||
import Notifications from '../components/Notification'
|
||||
import Button from '../components/Button'
|
||||
import Link from '../components/Link'
|
||||
import TopBar from '../components/TopBar'
|
||||
|
||||
import usePool from '../hooks/usePool'
|
||||
|
|
Loading…
Reference in New Issue