From a423c44fcd3dec30c3c77f4ee204e4c6e1a37988 Mon Sep 17 00:00:00 2001
From: C <caaarloos300@gmail.com>
Date: Sun, 29 Jan 2023 02:17:47 +0900
Subject: [PATCH] adding blur border effect + solving mobile issues

---
 src/components/RequestAirdrop.tsx           | 21 ++++++++-------
 src/components/SendTransaction.tsx          | 27 ++++++++++---------
 src/components/SendVersionedTransaction.tsx | 27 ++++++++++---------
 src/components/SignMessage.tsx              | 29 +++++++++++----------
 4 files changed, 57 insertions(+), 47 deletions(-)

diff --git a/src/components/RequestAirdrop.tsx b/src/components/RequestAirdrop.tsx
index 36d7406a5..0459f10f6 100644
--- a/src/components/RequestAirdrop.tsx
+++ b/src/components/RequestAirdrop.tsx
@@ -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>
+
+        
     );
 };
 
diff --git a/src/components/SendTransaction.tsx b/src/components/SendTransaction.tsx
index 96ed57fb8..b5f79edd6 100644
--- a/src/components/SendTransaction.tsx
+++ b/src/components/SendTransaction.tsx
@@ -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>
     );
 };
diff --git a/src/components/SendVersionedTransaction.tsx b/src/components/SendVersionedTransaction.tsx
index 7b7184fbc..e4774fb68 100644
--- a/src/components/SendVersionedTransaction.tsx
+++ b/src/components/SendVersionedTransaction.tsx
@@ -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>
     );
 };
\ No newline at end of file
diff --git a/src/components/SignMessage.tsx b/src/components/SignMessage.tsx
index 8f57466f5..239aaf567 100644
--- a/src/components/SignMessage.tsx
+++ b/src/components/SignMessage.tsx
@@ -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>
     );
 };