gradient border once submitted
This commit is contained in:
saml33
parent
c3d168086f
commit
a72c04ae60
|
|
@ -53,6 +53,6 @@ export const ConnectWalletButtonSmall = ({ children, onClick }) => (
|
|||
>
|
||||
<div className="flex items-center justify-center text-sm">{children}</div>
|
||||
</Button>
|
||||
<div className="absolute animate-ping-small bg-secondary-2-light top-0 rounded-full h-9 w-44 z-20" />
|
||||
<div className="absolute animate-connect-wallet-ping bg-secondary-2-light top-0 rounded-full h-9 w-44 z-20" />
|
||||
</div>
|
||||
)
|
||||
|
|
|
|||
|
|
@ -13,8 +13,29 @@ import Loading from './Loading'
|
|||
import WalletIcon from './WalletIcon'
|
||||
|
||||
const StyledModalWrapper = styled.div`
|
||||
height: 414px;
|
||||
${tw`bg-bkg-2 border border-bkg-3 flex flex-col items-center rounded-lg shadow-lg p-7 w-96`}
|
||||
height: 414px;
|
||||
${tw`bg-bkg-2 flex flex-col items-center relative rounded-lg shadow-lg p-7 w-96`}
|
||||
`
|
||||
type StyledModalBorderProps = {
|
||||
animate: boolean
|
||||
}
|
||||
|
||||
const StyledModalBorder = styled.div<StyledModalBorderProps>`
|
||||
height: 416px;
|
||||
width: 386px;
|
||||
top: -1px;
|
||||
left: -1px;
|
||||
z-index: -1;
|
||||
position: absolute;
|
||||
|
||||
:after {
|
||||
content: '';
|
||||
background-size: 300% 300%;
|
||||
${tw`bg-bkg-3 absolute top-0 left-0 right-0 bottom-0 rounded-lg`}
|
||||
|
||||
${({ animate }) =>
|
||||
animate &&
|
||||
tw`animate-gradient opacity-60 bg-gradient-to-br from-secondary-1-light via-secondary-3-light to-primary-light`}
|
||||
}
|
||||
`
|
||||
|
||||
|
|
@ -33,8 +54,6 @@ const ContributionModal = () => {
|
|||
|
||||
const handleConnectDisconnect = () => {
|
||||
if (connected) {
|
||||
// setContributionAmount(0)
|
||||
// setSliderPercentage(0)
|
||||
setSubmitted(false)
|
||||
setEditContribution(false)
|
||||
wallet.disconnect()
|
||||
|
|
@ -95,155 +114,158 @@ const ContributionModal = () => {
|
|||
const disableFormInputs = submitted || !connected || loading
|
||||
|
||||
return (
|
||||
<StyledModalWrapper>
|
||||
<div className="pb-4 text-center">
|
||||
{!submitted && !submitting && !editContribution ? (
|
||||
<>
|
||||
<h2>Plant your seed</h2>
|
||||
<p>This is the start of something big.</p>
|
||||
</>
|
||||
) : null}
|
||||
<div className="relative z-10">
|
||||
<StyledModalWrapper>
|
||||
<div className="pb-4 text-center">
|
||||
{!submitted && !submitting && !editContribution ? (
|
||||
<>
|
||||
<h2>Plant your seed</h2>
|
||||
<p>This is the start of something big.</p>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{!submitted && submitting ? (
|
||||
<>
|
||||
<h2>Approve the transaction</h2>
|
||||
<p>Almost there...</p>
|
||||
</>
|
||||
) : null}
|
||||
{!submitted && submitting ? (
|
||||
<>
|
||||
<h2>Approve the transaction</h2>
|
||||
<p>Almost there...</p>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{submitted && !submitting ? (
|
||||
<>
|
||||
<h2>Your contribution amount</h2>
|
||||
<p>A new seed planted...</p>
|
||||
</>
|
||||
) : null}
|
||||
{submitted && !submitting ? (
|
||||
<>
|
||||
<h2>Your contribution amount</h2>
|
||||
<p>A new seed planted...</p>
|
||||
</>
|
||||
) : null}
|
||||
|
||||
{editContribution && !submitting ? (
|
||||
<>
|
||||
<h2>Funds unlocked</h2>
|
||||
<p>Increase or reduce your contribution...</p>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
{submitting ? (
|
||||
<div className="flex items-center h-full">
|
||||
<Loading className="h-6 w-6 mb-3 text-primary-light" />
|
||||
{editContribution && !submitting ? (
|
||||
<>
|
||||
<h2>Funds unlocked</h2>
|
||||
<p>Increase or reduce your contribution...</p>
|
||||
</>
|
||||
) : null}
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={`${
|
||||
connected ? 'opacity-100' : 'opacity-30'
|
||||
} pb-6 transiton-all duration-1000 w-full`}
|
||||
>
|
||||
<div className="flex justify-between pb-2">
|
||||
<div className="flex items-center text-xs text-fgd-4">
|
||||
<WalletIcon className="w-4 h-4 mr-1 text-fgd-3 fill-current" />
|
||||
{connected ? (
|
||||
loading ? (
|
||||
<div className="bg-bkg-4 rounded w-10 h-4 animate-pulse" />
|
||||
{submitting ? (
|
||||
<div className="flex items-center h-full">
|
||||
<Loading className="h-6 w-6 mb-3 text-primary-light" />
|
||||
</div>
|
||||
) : (
|
||||
<>
|
||||
<div
|
||||
className={`${
|
||||
connected ? 'opacity-100' : 'opacity-30'
|
||||
} pb-6 transiton-all duration-1000 w-full`}
|
||||
>
|
||||
<div className="flex justify-between pb-2">
|
||||
<div className="flex items-center text-xs text-fgd-4">
|
||||
<WalletIcon className="w-4 h-4 mr-1 text-fgd-3 fill-current" />
|
||||
{connected ? (
|
||||
loading ? (
|
||||
<div className="bg-bkg-4 rounded w-10 h-4 animate-pulse" />
|
||||
) : (
|
||||
<span className="font-display text-fgd-1 ml-1">
|
||||
{usdcBalance}
|
||||
</span>
|
||||
)
|
||||
) : (
|
||||
<span className="font-display text-fgd-1 ml-1">
|
||||
{usdcBalance}
|
||||
</span>
|
||||
)
|
||||
) : (
|
||||
'----'
|
||||
)}
|
||||
<img
|
||||
alt=""
|
||||
width="16"
|
||||
height="16"
|
||||
src="/icons/usdc.svg"
|
||||
className={`ml-1`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex">
|
||||
{submitted ? (
|
||||
'----'
|
||||
)}
|
||||
<img
|
||||
alt=""
|
||||
width="16"
|
||||
height="16"
|
||||
src="/icons/usdc.svg"
|
||||
className={`ml-1`}
|
||||
/>
|
||||
</div>
|
||||
<div className="flex">
|
||||
{submitted ? (
|
||||
<Button
|
||||
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>
|
||||
) : null}
|
||||
<Button
|
||||
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()}
|
||||
className={`${
|
||||
submitted && 'opacity-30'
|
||||
} bg-bkg-4 font-normal rounded text-fgd-3 text-xs py-0.5 px-1.5`}
|
||||
disabled={disableFormInputs}
|
||||
onClick={() => handleMax()}
|
||||
secondary
|
||||
>
|
||||
Unlock
|
||||
Max
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center pb-4 relative">
|
||||
{submitted ? (
|
||||
<LockClosedIcon className="absolute text-secondary-2-light h-4 w-4 mb-0.5 left-2 z-10" />
|
||||
) : null}
|
||||
<Button
|
||||
className={`${
|
||||
submitted && 'opacity-30'
|
||||
} bg-bkg-4 font-normal rounded text-fgd-3 text-xs py-0.5 px-1.5`}
|
||||
{editContribution ? (
|
||||
<LockOpenIcon className="absolute text-secondary-1-light h-4 w-4 mb-0.5 left-2 z-10" />
|
||||
) : null}
|
||||
<Input
|
||||
className={(submitted || editContribution) && 'pl-7'}
|
||||
disabled={disableFormInputs}
|
||||
type="text"
|
||||
onChange={(e) => onChangeAmountInput(e.target.value)}
|
||||
value={loading ? '' : contributionAmount}
|
||||
suffix="USDC"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`${
|
||||
!submitted ? 'opacity-100' : 'opacity-30'
|
||||
} transiton-all duration-1000`}
|
||||
>
|
||||
<div className="pb-20">
|
||||
<Slider
|
||||
disabled={disableFormInputs}
|
||||
value={sliderPercentage}
|
||||
onChange={(v) => onChangeSlider(v)}
|
||||
step={1}
|
||||
maxButtonTransition={maxButtonTransition}
|
||||
/>
|
||||
</div>
|
||||
<Button
|
||||
onClick={() => handleSetContribution()}
|
||||
className="w-full py-2.5"
|
||||
disabled={disableFormInputs}
|
||||
onClick={() => handleMax()}
|
||||
secondary
|
||||
>
|
||||
Max
|
||||
<div className={`flex items-center justify-center`}>
|
||||
Set Contribution
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
<div className="flex items-center pb-4 relative">
|
||||
{submitted ? (
|
||||
<LockClosedIcon className="absolute text-secondary-2-light h-4 w-4 mb-0.5 left-2 z-10" />
|
||||
) : null}
|
||||
{editContribution ? (
|
||||
<LockOpenIcon className="absolute text-secondary-1-light h-4 w-4 mb-0.5 left-2 z-10" />
|
||||
) : null}
|
||||
<Input
|
||||
className={(submitted || editContribution) && 'pl-7'}
|
||||
disabled={disableFormInputs}
|
||||
type="text"
|
||||
onChange={(e) => onChangeAmountInput(e.target.value)}
|
||||
value={loading ? '' : contributionAmount}
|
||||
suffix="USDC"
|
||||
/>
|
||||
</div>
|
||||
<div
|
||||
className={`${
|
||||
!submitted ? 'opacity-100' : 'opacity-30'
|
||||
} transiton-all duration-1000`}
|
||||
>
|
||||
<div className="pb-20">
|
||||
<Slider
|
||||
disabled={disableFormInputs}
|
||||
value={sliderPercentage}
|
||||
onChange={(v) => onChangeSlider(v)}
|
||||
step={1}
|
||||
maxButtonTransition={maxButtonTransition}
|
||||
/>
|
||||
</div>
|
||||
{connected ? (
|
||||
<Button
|
||||
onClick={() => handleSetContribution()}
|
||||
className="w-full py-2.5"
|
||||
disabled={disableFormInputs}
|
||||
className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
|
||||
onClick={() => handleConnectDisconnect()}
|
||||
secondary
|
||||
>
|
||||
<div className={`flex items-center justify-center`}>
|
||||
Set Contribution
|
||||
<div className="flex items-center text-sm">
|
||||
<LinkIcon className="h-4 w-4 mr-1" />
|
||||
Disconnect
|
||||
</div>
|
||||
</Button>
|
||||
</div>
|
||||
</div>
|
||||
{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>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</StyledModalWrapper>
|
||||
) : (
|
||||
<ConnectWalletButtonSmall onClick={handleConnectDisconnect}>
|
||||
<div className="flex items-center justify-center text-sm">
|
||||
<LinkIcon className="h-4 w-4 mr-1" />
|
||||
Connect Wallet
|
||||
</div>
|
||||
</ConnectWalletButtonSmall>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
</StyledModalWrapper>
|
||||
<StyledModalBorder animate={submitted && connected} />
|
||||
</div>
|
||||
)
|
||||
}
|
||||
|
||||
|
|
|
|||
|
|
@ -19,6 +19,7 @@ module.exports = {
|
|||
primary: { light: '#F2C94C', dark: '#EEB91B' },
|
||||
'secondary-1': { light: '#AFD803', dark: '#6CBF00' },
|
||||
'secondary-2': { light: '#E54033', dark: '#C7251A' },
|
||||
'secondary-3': { light: '#026DF7', dark: '#0259CA' },
|
||||
'bkg-1': '#141125',
|
||||
'bkg-2': '#242132',
|
||||
'bkg-3': '#393549',
|
||||
|
|
@ -29,13 +30,26 @@ module.exports = {
|
|||
'fgd-4': '#706C81',
|
||||
},
|
||||
animation: {
|
||||
'ping-small': 'ping-small 1.5s cubic-bezier(0, 0, 0.2, 1) infinite',
|
||||
'connect-wallet-ping':
|
||||
'connect-wallet-ping 1.5s cubic-bezier(0, 0, 0.2, 1) infinite',
|
||||
gradient: 'gradient 4s ease-in-out infinite',
|
||||
},
|
||||
keyframes: {
|
||||
'ping-small': {
|
||||
'connect-wallet-ping': {
|
||||
'75%, 100%': {
|
||||
transform: 'scale(1.06, 1.25)',
|
||||
opacity: 0,
|
||||
transform: 'scale(1.06, 1.3)',
|
||||
opacity: '10%',
|
||||
},
|
||||
},
|
||||
gradient: {
|
||||
'0%': {
|
||||
'background-position': '15% 0%',
|
||||
},
|
||||
'50%': {
|
||||
'background-position': '85% 100%',
|
||||
},
|
||||
'100%': {
|
||||
'background-position': '15% 0%',
|
||||
},
|
||||
},
|
||||
},
|
||||
|
|
|
|||
Loading…
Reference in New Issue