Skip to content
This repository has been archived by the owner on Jan 7, 2025. It is now read-only.

Commit

Permalink
adding blur border effect + solving mobile issues
Browse files Browse the repository at this point in the history
  • Loading branch information
C committed Jan 28, 2023
1 parent b07e927 commit a423c44
Show file tree
Hide file tree
Showing 4 changed files with 57 additions and 47 deletions.
21 changes: 12 additions & 9 deletions src/components/RequestAirdrop.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -35,19 +35,22 @@ export const RequestAirdrop: FC = () => {
}, [publicKey, connection, getUserSOLBalance]);

return (
<div>
<div className="relative group">
<div className="absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-fuchsia-500 rounded-lg blur opacity-20 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div>

<div className="flex flex-row justify-center">
<div className="relative group items-center">
<div className="m-1 absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-fuchsia-500 rounded-lg blur opacity-20 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div>

<button
className="px-8 m-2 btn animate-pulse bg-gradient-to-br from-indigo-500 to-fuchsia-500 hover:from-white hover:to-purple-300 text-black"
onClick={onClick}
>
<span>Airdrop 1 </span>
<button
className="px-8 m-2 btn animate-pulse bg-gradient-to-br from-indigo-500 to-fuchsia-500 hover:from-white hover:to-purple-300 text-black"
onClick={onClick}
>
<span>Airdrop 1 </span>

</button>
</button>
</div>
</div>


);
};

27 changes: 15 additions & 12 deletions src/components/SendTransaction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,18 +55,21 @@ export const SendTransaction: FC = () => {
}, [publicKey, notify, connection, sendTransaction]);

return (
<div>
<button
className="group w-60 m-2 btn animate-pulse bg-gradient-to-br from-indigo-500 to-fuchsia-500 hover:from-white hover:to-purple-300 text-black"
onClick={onClick} disabled={!publicKey}
>
<div className="hidden group-disabled:block ">
Wallet not connected
</div>
<span className="block group-disabled:hidden" >
Send Transaction
</span>
</button>
<div className="flex flex-row justify-center">
<div className="relative group items-center">
<div className="m-1 absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-fuchsia-500 rounded-lg blur opacity-20 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div>
<button
className="group w-60 m-2 btn animate-pulse bg-gradient-to-br from-indigo-500 to-fuchsia-500 hover:from-white hover:to-purple-300 text-black"
onClick={onClick} disabled={!publicKey}
>
<div className="hidden group-disabled:block ">
Wallet not connected
</div>
<span className="block group-disabled:hidden" >
Send Transaction
</span>
</button>
</div>
</div>
);
};
27 changes: 15 additions & 12 deletions src/components/SendVersionedTransaction.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -55,18 +55,21 @@ export const SendVersionedTransaction: FC = () => {
}, [publicKey, notify, connection, sendTransaction]);

return (
<div>
<button
className="group w-60 m-2 btn animate-pulse bg-gradient-to-br from-indigo-500 to-fuchsia-500 hover:from-white hover:to-purple-300 text-black"
onClick={onClick} disabled={!publicKey}
>
<div className="hidden group-disabled:block ">
Wallet not connected
</div>
<span className="block group-disabled:hidden" >
Send Versioned Transaction
</span>
</button>
<div className="flex flex-row justify-center">
<div className="relative group items-center">
<div className="m-1 absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-fuchsia-500 rounded-lg blur opacity-20 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div>
<button
className="group w-60 m-2 btn animate-pulse bg-gradient-to-br from-indigo-500 to-fuchsia-500 hover:from-white hover:to-purple-300 text-black"
onClick={onClick} disabled={!publicKey}
>
<div className="hidden group-disabled:block ">
Wallet not connected
</div>
<span className="block group-disabled:hidden" >
Send Versioned Transaction
</span>
</button>
</div>
</div>
);
};
29 changes: 15 additions & 14 deletions src/components/SignMessage.tsx
Original file line number Diff line number Diff line change
Expand Up @@ -28,20 +28,21 @@ export const SignMessage: FC = () => {
}, [publicKey, notify, signMessage]);

return (
<div>

<button
className="group w-60 m-2 btn animate-pulse bg-gradient-to-br from-indigo-500 to-fuchsia-500 hover:from-white hover:to-purple-300 text-black"
onClick={onClick} disabled={!publicKey}
>
<div className="hidden group-disabled:block">
Wallet not connected
</div>
<span className="block group-disabled:hidden" >
Sign Message
</span>
</button>

<div className="flex flex-row justify-center">
<div className="relative group items-center">
<div className="m-1 absolute -inset-0.5 bg-gradient-to-r from-indigo-500 to-fuchsia-500 rounded-lg blur opacity-20 group-hover:opacity-100 transition duration-1000 group-hover:duration-200 animate-tilt"></div>
<button
className="group w-60 m-2 btn animate-pulse bg-gradient-to-br from-indigo-500 to-fuchsia-500 hover:from-white hover:to-purple-300 text-black"
onClick={onClick} disabled={!publicKey}
>
<div className="hidden group-disabled:block">
Wallet not connected
</div>
<span className="block group-disabled:hidden" >
Sign Message
</span>
</button>
</div>
</div>
);
};

0 comments on commit a423c44

Please sign in to comment.