gradient border once submitted
This commit is contained in:
parent
c3d168086f
commit
a72c04ae60
|
@ -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>
|
||||||
)
|
)
|
||||||
|
|
|
@ -14,7 +14,28 @@ 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,6 +114,7 @@ const ContributionModal = () => {
|
||||||
const disableFormInputs = submitted || !connected || loading
|
const disableFormInputs = submitted || !connected || loading
|
||||||
|
|
||||||
return (
|
return (
|
||||||
|
<div className="relative z-10">
|
||||||
<StyledModalWrapper>
|
<StyledModalWrapper>
|
||||||
<div className="pb-4 text-center">
|
<div className="pb-4 text-center">
|
||||||
{!submitted && !submitting && !editContribution ? (
|
{!submitted && !submitting && !editContribution ? (
|
||||||
|
@ -244,6 +264,8 @@ const ContributionModal = () => {
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</StyledModalWrapper>
|
</StyledModalWrapper>
|
||||||
|
<StyledModalBorder animate={submitted && connected} />
|
||||||
|
</div>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|
||||||
|
|
|
@ -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%',
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
},
|
},
|
||||||
|
|
Loading…
Reference in New Issue