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 styled from '@emotion/styled'
|
||||||
import tw from 'twin.macro'
|
import tw from 'twin.macro'
|
||||||
|
|
||||||
const idleGradient = 'bg-gradient-to-r from-secondary-2-light to-primary-light'
|
export const idleGradient =
|
||||||
const activeGradient =
|
'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'
|
'bg-gradient-to-bl from-secondary-1-light via-primary-dark to-secondary-2-light'
|
||||||
|
|
||||||
const Button = styled.button`
|
const StyledButton = styled.button<ButtonProps>`
|
||||||
${tw`relative z-10 px-8 py-2 rounded-full text-fgd-1 ${idleGradient}`}
|
|
||||||
|
|
||||||
:before {
|
: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;
|
border-radius: inherit;
|
||||||
content: '';
|
content: '';
|
||||||
z-index: -10;
|
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`}
|
${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
|
export default Button
|
||||||
|
|
|
@ -4,6 +4,7 @@ import { WALLET_PROVIDERS, DEFAULT_PROVIDER } from '../hooks/useWallet'
|
||||||
import useLocalStorageState from '../hooks/useLocalStorageState'
|
import useLocalStorageState from '../hooks/useLocalStorageState'
|
||||||
import WalletSelect from './WalletSelect'
|
import WalletSelect from './WalletSelect'
|
||||||
import WalletIcon from './WalletIcon'
|
import WalletIcon from './WalletIcon'
|
||||||
|
import { LinkIcon } from '@heroicons/react/solid'
|
||||||
import Button from './Button'
|
import Button from './Button'
|
||||||
|
|
||||||
const StyledWalletTypeLabel = styled.div`
|
const StyledWalletTypeLabel = styled.div`
|
||||||
|
@ -45,14 +46,18 @@ const ConnectWalletButton = () => {
|
||||||
|
|
||||||
export default ConnectWalletButton
|
export default ConnectWalletButton
|
||||||
|
|
||||||
export const ConnectWalletButtonSmall = ({ children, onClick }) => (
|
export const ConnectWalletButtonSmall = ({ connected, ...props }) => (
|
||||||
<div className="relative">
|
<div className="relative">
|
||||||
<Button
|
<Button
|
||||||
className="rounded-full h-9 w-44 z-30 relative"
|
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>
|
</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>
|
</div>
|
||||||
)
|
)
|
||||||
|
|
|
@ -4,7 +4,6 @@ import {
|
||||||
LockClosedIcon,
|
LockClosedIcon,
|
||||||
LockOpenIcon,
|
LockOpenIcon,
|
||||||
} from '@heroicons/react/outline'
|
} from '@heroicons/react/outline'
|
||||||
import { LinkIcon } from '@heroicons/react/solid'
|
|
||||||
import useWalletStore from '../stores/useWalletStore'
|
import useWalletStore from '../stores/useWalletStore'
|
||||||
import Input from './Input'
|
import Input from './Input'
|
||||||
import Button from './Button'
|
import Button from './Button'
|
||||||
|
@ -16,6 +15,10 @@ import WalletIcon from './WalletIcon'
|
||||||
import useLargestAccounts from '../hooks/useLargestAccounts'
|
import useLargestAccounts from '../hooks/useLargestAccounts'
|
||||||
import useVaults from '../hooks/useVaults'
|
import useVaults from '../hooks/useVaults'
|
||||||
import usePool from '../hooks/usePool'
|
import usePool from '../hooks/usePool'
|
||||||
|
import styled from '@emotion/styled'
|
||||||
|
import 'twin.macro'
|
||||||
|
|
||||||
|
const SmallButton = styled.button``
|
||||||
|
|
||||||
const ContributionModal = () => {
|
const ContributionModal = () => {
|
||||||
const actions = useWalletStore((s) => s.actions)
|
const actions = useWalletStore((s) => s.actions)
|
||||||
|
@ -200,25 +203,23 @@ const ContributionModal = () => {
|
||||||
</div>
|
</div>
|
||||||
<div className="flex">
|
<div className="flex">
|
||||||
{submitted ? (
|
{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"
|
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}
|
disabled={!connected}
|
||||||
onClick={() => handleEditContribution()}
|
onClick={() => handleEditContribution()}
|
||||||
secondary
|
|
||||||
>
|
>
|
||||||
Unlock
|
Unlock
|
||||||
</Button>
|
</SmallButton>
|
||||||
) : null}
|
) : null}
|
||||||
<Button
|
<SmallButton
|
||||||
className={`${
|
className={`${
|
||||||
disableFormInputs && 'opacity-30'
|
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}
|
disabled={disableFormInputs}
|
||||||
onClick={() => handleMax()}
|
onClick={() => handleMax()}
|
||||||
secondary
|
|
||||||
>
|
>
|
||||||
Max
|
Max
|
||||||
</Button>
|
</SmallButton>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex items-center pb-4 relative">
|
<div className="flex items-center pb-4 relative">
|
||||||
|
@ -273,25 +274,11 @@ const ContributionModal = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
{connected ? (
|
<ConnectWalletButtonSmall
|
||||||
<Button
|
className="flex pl-6"
|
||||||
className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
|
connected={connected}
|
||||||
onClick={() => handleConnectDisconnect()}
|
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>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -2,8 +2,9 @@ import { FunctionComponent } from 'react'
|
||||||
import styled from '@emotion/styled'
|
import styled from '@emotion/styled'
|
||||||
import tw from 'twin.macro'
|
import tw from 'twin.macro'
|
||||||
|
|
||||||
const StyledButton = styled.button`
|
const StyledButton = styled.a`
|
||||||
${tw`relative z-10 px-8 py-2 rounded-full text-fgd-1`}
|
font-weight: 700;
|
||||||
|
cursor: pointer;
|
||||||
|
|
||||||
:hover {
|
:hover {
|
||||||
${tw`underline`}
|
${tw`underline`}
|
||||||
|
@ -28,23 +29,17 @@ const ChevronRightIcon = ({ className }) => (
|
||||||
)
|
)
|
||||||
|
|
||||||
interface LinkProps {
|
interface LinkProps {
|
||||||
onClick?: (x?) => void
|
|
||||||
disabled?: boolean
|
|
||||||
className?: string
|
className?: string
|
||||||
}
|
}
|
||||||
|
|
||||||
const Link: FunctionComponent<LinkProps> = ({
|
const Link: FunctionComponent<LinkProps> = ({
|
||||||
children,
|
children,
|
||||||
onClick,
|
|
||||||
disabled = false,
|
|
||||||
className,
|
className,
|
||||||
...props
|
...props
|
||||||
}) => {
|
}) => {
|
||||||
return (
|
return (
|
||||||
<StyledButton
|
<StyledButton
|
||||||
onClick={onClick}
|
className={`${className} pr-5 flex z-10 px-8 py-2 text-fgd-1 relative rounded-full`}
|
||||||
disabled={disabled}
|
|
||||||
className={`${className} pr-5 flex z-10 px-8 py-2 text-fgd-1`}
|
|
||||||
{...props}
|
{...props}
|
||||||
>
|
>
|
||||||
{children}
|
{children}
|
||||||
|
|
|
@ -1,5 +1,4 @@
|
||||||
import { useEffect, useState } from 'react'
|
import { useEffect, useState } from 'react'
|
||||||
import { LinkIcon } from '@heroicons/react/solid'
|
|
||||||
import useWalletStore from '../stores/useWalletStore'
|
import useWalletStore from '../stores/useWalletStore'
|
||||||
import Button from './Button'
|
import Button from './Button'
|
||||||
import Input from './Input'
|
import Input from './Input'
|
||||||
|
@ -156,25 +155,11 @@ const RedeemModal = () => {
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="flex justify-center">
|
<div className="flex justify-center">
|
||||||
{connected ? (
|
<ConnectWalletButtonSmall
|
||||||
<Button
|
className="flex pl-6"
|
||||||
className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
|
connected={connected}
|
||||||
onClick={() => handleConnectDisconnect()}
|
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>
|
|
||||||
)}
|
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
|
|
|
@ -1,8 +1,6 @@
|
||||||
import ContributionPage from './ContributionPage'
|
import ContributionPage from './ContributionPage'
|
||||||
import RedeemPage from './RedeemPage'
|
import RedeemPage from './RedeemPage'
|
||||||
import Notifications from '../components/Notification'
|
import Notifications from '../components/Notification'
|
||||||
import Button from '../components/Button'
|
|
||||||
import Link from '../components/Link'
|
|
||||||
import TopBar from '../components/TopBar'
|
import TopBar from '../components/TopBar'
|
||||||
|
|
||||||
import usePool from '../hooks/usePool'
|
import usePool from '../hooks/usePool'
|
||||||
|
|
Loading…
Reference in New Issue