blockworks-foundation
/
mango-token-sale
mirror of https://github.com/blockworks-foundation/mango-token-sale.git
1
0
Fork 0
Code Issues Projects Releases Wiki Activity

gradient border once submitted

This commit is contained in:
saml33 2021-04-30 16:16:02 +10:00
parent c3d168086f
commit a72c04ae60
3 changed files with 175 additions and 139 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

2
components/ConnectWalletButton.tsx
View File

@ -53,6 +53,6 @@ export const ConnectWalletButtonSmall = ({ children, onClick }) => (
> >
<div className="flex items-center justify-center text-sm">{children}</div> <div className="flex items-center justify-center text-sm">{children}</div>
</Button> </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> </div>
) )

290
components/ContributionModal.tsx
View File

@ -13,8 +13,29 @@ import Loading from './Loading'
import WalletIcon from './WalletIcon' import WalletIcon from './WalletIcon'
const StyledModalWrapper = styled.div` const StyledModalWrapper = styled.div`
height: 414px; height: 414px;
${tw`bg-bkg-2 border border-bkg-3 flex flex-col items-center rounded-lg shadow-lg p-7 w-96`} ${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 = () => { const handleConnectDisconnect = () => {
if (connected) { if (connected) {
// setContributionAmount(0)
// setSliderPercentage(0)
setSubmitted(false) setSubmitted(false)
setEditContribution(false) setEditContribution(false)
wallet.disconnect() wallet.disconnect()
@ -95,155 +114,158 @@ const ContributionModal = () => {
const disableFormInputs = submitted || !connected || loading const disableFormInputs = submitted || !connected || loading
return ( return (
<StyledModalWrapper> <div className="relative z-10">
<div className="pb-4 text-center"> <StyledModalWrapper>
{!submitted && !submitting && !editContribution ? ( <div className="pb-4 text-center">
<> {!submitted && !submitting && !editContribution ? (
<h2>Plant your seed</h2> <>
<p>This is the start of something big.</p> <h2>Plant your seed</h2>
</> <p>This is the start of something big.</p>
) : null} </>
) : null}
{!submitted && submitting ? ( {!submitted && submitting ? (
<> <>
<h2>Approve the transaction</h2> <h2>Approve the transaction</h2>
<p>Almost there...</p> <p>Almost there...</p>
</> </>
) : null} ) : null}
{submitted && !submitting ? ( {submitted && !submitting ? (
<> <>
<h2>Your contribution amount</h2> <h2>Your contribution amount</h2>
<p>A new seed planted...</p> <p>A new seed planted...</p>
</> </>
) : null} ) : null}
{editContribution && !submitting ? ( {editContribution && !submitting ? (
<> <>
<h2>Funds unlocked</h2> <h2>Funds unlocked</h2>
<p>Increase or reduce your contribution...</p> <p>Increase or reduce your contribution...</p>
</> </>
) : null} ) : null}
</div>
{submitting ? (
<div className="flex items-center h-full">
<Loading className="h-6 w-6 mb-3 text-primary-light" />
</div> </div>
) : ( {submitting ? (
<> <div className="flex items-center h-full">
<div <Loading className="h-6 w-6 mb-3 text-primary-light" />
className={`${ </div>
connected ? 'opacity-100' : 'opacity-30' ) : (
} pb-6 transiton-all duration-1000 w-full`} <>
> <div
<div className="flex justify-between pb-2"> className={`${
<div className="flex items-center text-xs text-fgd-4"> connected ? 'opacity-100' : 'opacity-30'
<WalletIcon className="w-4 h-4 mr-1 text-fgd-3 fill-current" /> } pb-6 transiton-all duration-1000 w-full`}
{connected ? ( >
loading ? ( <div className="flex justify-between pb-2">
<div className="bg-bkg-4 rounded w-10 h-4 animate-pulse" /> <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"
<img className={`ml-1`}
alt="" />
width="16" </div>
height="16" <div className="flex">
src="/icons/usdc.svg" {submitted ? (
className={`ml-1`} <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"
</div> disabled={!connected}
<div className="flex"> onClick={() => handleEditContribution()}
{submitted ? ( secondary
>
Unlock
</Button>
) : null}
<Button <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" className={`${
disabled={!connected} submitted && 'opacity-30'
onClick={() => handleEditContribution()} } bg-bkg-4 font-normal rounded text-fgd-3 text-xs py-0.5 px-1.5`}
disabled={disableFormInputs}
onClick={() => handleMax()}
secondary secondary
> >
Unlock Max
</Button> </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} ) : null}
<Button {editContribution ? (
className={`${ <LockOpenIcon className="absolute text-secondary-1-light h-4 w-4 mb-0.5 left-2 z-10" />
submitted && 'opacity-30' ) : null}
} bg-bkg-4 font-normal rounded text-fgd-3 text-xs py-0.5 px-1.5`} <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} disabled={disableFormInputs}
onClick={() => handleMax()}
secondary
> >
Max <div className={`flex items-center justify-center`}>
Set Contribution
</div>
</Button> </Button>
</div> </div>
</div> </div>
<div className="flex items-center pb-4 relative"> {connected ? (
{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>
<Button <Button
onClick={() => handleSetContribution()} className="rounded-full bg-bkg-4 text-fgd-3 font-normal"
className="w-full py-2.5" onClick={() => handleConnectDisconnect()}
disabled={disableFormInputs} secondary
> >
<div className={`flex items-center justify-center`}> <div className="flex items-center text-sm">
Set Contribution <LinkIcon className="h-4 w-4 mr-1" />
Disconnect
</div> </div>
</Button> </Button>
</div> ) : (
</div> <ConnectWalletButtonSmall onClick={handleConnectDisconnect}>
{connected ? ( <div className="flex items-center justify-center text-sm">
<Button <LinkIcon className="h-4 w-4 mr-1" />
className="rounded-full bg-bkg-4 text-fgd-3 font-normal" Connect Wallet
onClick={() => handleConnectDisconnect()} </div>
secondary </ConnectWalletButtonSmall>
> )}
<div className="flex items-center text-sm"> </>
<LinkIcon className="h-4 w-4 mr-1" /> )}
Disconnect </StyledModalWrapper>
</div> <StyledModalBorder animate={submitted && connected} />
</Button> </div>
) : (
<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>
) )
} }

22
tailwind.config.js
View File

@ -19,6 +19,7 @@ module.exports = {
primary: { light: '#F2C94C', dark: '#EEB91B' }, primary: { light: '#F2C94C', dark: '#EEB91B' },
'secondary-1': { light: '#AFD803', dark: '#6CBF00' }, 'secondary-1': { light: '#AFD803', dark: '#6CBF00' },
'secondary-2': { light: '#E54033', dark: '#C7251A' }, 'secondary-2': { light: '#E54033', dark: '#C7251A' },
'secondary-3': { light: '#026DF7', dark: '#0259CA' },
'bkg-1': '#141125', 'bkg-1': '#141125',
'bkg-2': '#242132', 'bkg-2': '#242132',
'bkg-3': '#393549', 'bkg-3': '#393549',
@ -29,13 +30,26 @@ module.exports = {
'fgd-4': '#706C81', 'fgd-4': '#706C81',
}, },
animation: { 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: { keyframes: {
'ping-small': { 'connect-wallet-ping': {
'75%, 100%': { '75%, 100%': {
transform: 'scale(1.06, 1.25)', transform: 'scale(1.06, 1.3)',
opacity: 0, opacity: '10%',
},
},
gradient: {
'0%': {
'background-position': '15% 0%',
},
'50%': {
'background-position': '85% 100%',
},
'100%': {
'background-position': '15% 0%',
}, },
}, },
}, },