From a72c04ae60f62922b5052bb94d59e42e92dbacbe Mon Sep 17 00:00:00 2001
From: saml33 <slam.uke@gmail.com>
Date: Fri, 30 Apr 2021 16:16:02 +1000
Subject: [PATCH] gradient border once submitted

---
 components/ConnectWalletButton.tsx |   2 +-
 components/ContributionModal.tsx   | 290 ++++++++++++++++-------------
 tailwind.config.js                 |  22 ++-
 3 files changed, 175 insertions(+), 139 deletions(-)

diff --git a/components/ConnectWalletButton.tsx b/components/ConnectWalletButton.tsx
index 28419d9..bcefb45 100644
--- a/components/ConnectWalletButton.tsx
+++ b/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>
 )
diff --git a/components/ContributionModal.tsx b/components/ContributionModal.tsx
index 949ef30..d9a1ca7 100644
--- a/components/ContributionModal.tsx
+++ b/components/ContributionModal.tsx
@@ -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>
   )
 }
 
diff --git a/tailwind.config.js b/tailwind.config.js
index 8e7146b..8facae2 100644
--- a/tailwind.config.js
+++ b/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%',
           },
         },
       },