gradient border once submitted

components/ConnectWalletButton.tsx

@@ -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>
 )

components/ContributionModal.tsx

@@ -14,7 +14,28 @@ 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`}
+  ${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,6 +114,7 @@ const ContributionModal = () => {
   const disableFormInputs = submitted || !connected || loading
 
   return (
+    <div className="relative z-10">
       <StyledModalWrapper>
         <div className="pb-4 text-center">
           {!submitted && !submitting && !editContribution ? (
@@ -244,6 +264,8 @@ const ContributionModal = () => {
           </>
         )}
       </StyledModalWrapper>
+      <StyledModalBorder animate={submitted && connected} />
+    </div>
   )
 }
 

tailwind.config.js

@@ -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%',
           },
         },
       },