prof_final_cand

app/users/[id]/page.tsx

@@ -31,7 +31,7 @@ function UserPage({ params }: { params: { id: string } }) {
   const [isFetchingFollowStatus, setIsFetchingFollowStatus] = useState(true);
 
   const id = params.id;
-  const currentUser = "%40"+user?.twitter?.username  ?? "null"; // Change this to the current user dynamically
+  const currentUser = "%40" + user?.twitter?.username ?? "null"; // Change this to the current user dynamically
 
   useEffect(() => {
     Refresh();
@@ -97,7 +97,7 @@ function UserPage({ params }: { params: { id: string } }) {
     Refresh();
   }, [currentUser, id]);
 
-  function Refresh(){
+  function Refresh() {
     const fetchFollowStatus = async () => {
       try {
         const response = await fetch(`https://api.callfi.io/get_is_following.php?username=${currentUser}&target=${id}`);
@@ -173,6 +173,8 @@ function UserPage({ params }: { params: { id: string } }) {
               />
               <div className='flex flex-col p-6 px-2'>
                 <div>
+                  <p className='font-bold flex justify-start items-center text-xl font-bold'>{userData.tag}</p>
+
                   <p className='text-sm'>{userData.gains.toFixed(2)}x Gains</p>
                   <p className='text-sm'>{(userData.points * 100).toFixed(2)} Points</p>
                   <p className='text-sm'>{userData.followerCount} Followers</p>
@@ -193,7 +195,7 @@ function UserPage({ params }: { params: { id: string } }) {
             </div>
             <div className='m-2 grid grid-cols-5 gap-2 px-2'>
               <button
-                onClick={currentUser == id ? ()=>{} : handleFollowClick} 
+                onClick={currentUser == id ? () => { } : handleFollowClick}
                 className={`glassmorphism p-1 col-span-4 rounded-xl ${isFollowing ? "hover:bg-red-900" : "hover:bg-blue-900"}`}
                 disabled={currentUser === id}
               >
@@ -206,16 +208,25 @@ function UserPage({ params }: { params: { id: string } }) {
           </div>
 
           <div className='rounded-3xl grid grid-cols-3 flex flex-row max-lg:hidden'>
-             <div className='grid grid-cols-3'>
+            <div className='flex flex-row col-span-2'>
               <img
                 src={userData.img_url}
-                className="rounded-full h-full p-5"
+                className="rounded-full w-24 ml-10"
               />
-              <p className='font-bold flex justify-start items-center text-xl font-bold'>{userData.tag}</p>
+              <p className='font-bold flex text-start justify-start items-center text-xl font-bold ml-2'>{userData.tag}</p>
+              <div className='flex justify-center grid grid-rows-2 items-start ml-5'>
 
+                <button
+                  onClick={currentUser == id ? () => { } : handleFollowClick}
+                  className={`glassmorphism p-1  rounded-xl ${isFollowing ? "hover:bg-red-900" : "hover:bg-blue-900"}`}
+                  disabled={currentUser === id}
+                >
+                  {currentUser == id ? 'My Account' : (isFollowing ? 'Unfollow' : 'Follow')}
+                </button>
+                <button onClick={handleShareClick} className='glassmorphism p-1 px-6 flex items-center justify-center rounded-xl hover:bg-blue-900'> Share <FaShare className='ml-2' /></button>
               </div>
-
+            </div>
-            <div className='items-center flex justify-center grid grid-cols-3'>
+            <div className='items-center flex justify-center grid grid-cols-3 glassmorphism rounded-full items-center text-center mx-2'>
               <p className='text-sm'>{userData.gains.toFixed(2)}x Gains</p>
               <p className='text-sm'>{(userData.points * 100).toFixed(2)} Points</p>
               <p className='text-sm'>{userData.followerCount} Followers</p>
@@ -224,17 +235,7 @@ function UserPage({ params }: { params: { id: string } }) {
               <p className='text-sm'>{userData.daysSinceJoined} Days</p>
 
             </div>
-            <div className='flex justify-end grid grid-rows-2 items-end mr-5'>
 
-            <button 
-                onClick={currentUser == id ? ()=>{} : handleFollowClick} 
-                className={`glassmorphism p-1 w-96 h-10 rounded-xl ${isFollowing ? "hover:bg-red-900" : "hover:bg-blue-900"}`}
-                disabled={currentUser === id}
-              >
-                {currentUser == id ? 'My Account' : (isFollowing ? 'Unfollow' : 'Follow')}
-              </button>
-              <button onClick={handleShareClick} className='glassmorphism h-10 ml-20 flex items-center justify-center rounded-xl hover:bg-blue-900'> Share <FaShare className='ml-5' /></button>
-            </div>
           </div>
 
           <div className='grid grid-cols-2 mt-4'>
@@ -246,7 +247,8 @@ function UserPage({ params }: { params: { id: string } }) {
             </button>
           </div>
         </section>
-
+        <section className=''>
+          <section className='max-lg:col-span-2'>
             <section className={`flex w-full ${activeSelected ? "" : "hidden"}`}>
               <section className="flex flex-col w-full m-2">
                 <div className='flex justify-center p-4'>
@@ -309,8 +311,10 @@ function UserPage({ params }: { params: { id: string } }) {
                 />
               ))}
             </div>
-
+          </section>
+        </section>
         <div className='flex-1'></div>
+
         <Footer />
       </main>
       <ShareModal