Update page styling

Author: lucemans

packages/search/src/routes/$profileId.lazy.tsx

@@ -61,15 +61,6 @@ function Profile() {
     );
   }
 
-  // Get the best display name
-  const displayName = profile.records?.name || profile.display || profile.name;
-  
-  // Get avatar URL
-  const avatarUrl = profile.avatar || profile.records?.avatar;
-  
-  // Get banner URL
-  const bannerUrl = profile.header || profile.records?.header;
-  
   // Format date for profile freshness
   const formatDate = (timestamp?: number) => {
     if (!timestamp) return 'Unknown';
@@ -83,11 +74,11 @@ function Profile() {
   return (
     <div className="bg-white shadow overflow-hidden rounded-lg">
       {/* Banner image */}
-      {bannerUrl ? (
+      {profile.header ? (
         <div className="w-full aspect-[3/1] overflow-hidden">
           <img 
-            src={bannerUrl} 
-            alt={`${displayName} banner`} 
+            src={profile.header} 
+            alt={`${profile.display} banner`} 
             className="w-full h-full object-cover"
           />
         </div>
@@ -99,20 +90,20 @@ function Profile() {
       <div className="px-4 py-5 sm:px-6 relative">
         <div className="flex items-end">
           <div className="-mt-16 flex-shrink-0">
-            {avatarUrl ? (
+            {profile.avatar ? (
               <img 
-                src={avatarUrl} 
-                alt={displayName}
+                src={profile.avatar} 
+                alt={profile.display}
                 className="h-24 w-24 rounded-full border-4 border-white shadow-md object-cover"
               />
             ) : (
               <div className="h-24 w-24 rounded-full bg-gray-200 flex items-center justify-center text-gray-500 text-3xl font-bold border-4 border-white shadow-md">
-                {displayName.charAt(0).toUpperCase()}
+                {profile.display.charAt(0).toUpperCase()}
               </div>
             )}
           </div>
           <div className="ml-4 flex-1">
-            <h1 className="text-2xl font-bold text-gray-900">{displayName}</h1>
+            <h1 className="text-2xl font-bold text-gray-900">{profile.display}</h1>
             <p className="text-sm text-gray-500">{profile.display || profile.name}</p>
           </div>
         </div>

packages/search/src/routes/index.lazy.tsx

@@ -131,16 +131,6 @@ function Home() {
     e.preventDefault();
   };
 
-  // Helper function to get the best profile picture URL
-  const getProfilePicture = (profile: any) => {
-    return profile.avatar || profile.records?.avatar || null;
-  };
-
-  // Helper function to get the best profile description
-  const getDescription = (profile: any) => {
-    return profile.records?.description || '';
-  };
-
   // Render search results or appropriate message
   const renderResults = () => {
     // Case 1: We have data to show
@@ -181,9 +171,9 @@ function Home() {
                         <div className="flex items-start space-x-2 pb-3">
                           {/* Avatar */}
                           <div className={`${profile.header || profile.records?.header ? '-mt-7' : ''} flex-shrink-0`}>
-                            {getProfilePicture(profile) ? (
+                            {profile.avatar ? (
                               <img 
-                                src={getProfilePicture(profile)} 
+                                src={profile.avatar} 
                                 alt={profile.display}
                                 className="h-14 w-14 rounded-full border-2 border-white shadow-md object-cover"
                               />
@@ -203,7 +193,7 @@ function Home() {
                               {profile.address}
                             </p>
                             <p className="mt-1 text-xs text-gray-600 whitespace-pre-line line-clamp-2">
-                              {getDescription(profile)}
+                              {profile.records?.description || ''}
                             </p>
 
                             {/* Chain addresses */}
@@ -311,9 +301,9 @@ function Home() {
                     <div className="flex items-start space-x-2 pb-3">
                       {/* Avatar */}
                       <div className={`${profile.header || profile.records?.header ? '-mt-7' : ''} flex-shrink-0`}>
-                        {getProfilePicture(profile) ? (
+                        {profile.avatar ? (
                           <img 
-                            src={getProfilePicture(profile)} 
+                            src={profile.avatar} 
                             alt={profile.display}
                             className="h-14 w-14 rounded-full border-2 border-white shadow-md object-cover"
                           />
@@ -333,7 +323,7 @@ function Home() {
                           {profile.address}
                         </p>
                         <p className="mt-1 text-xs text-gray-600 whitespace-pre-line line-clamp-2">
-                          {getDescription(profile)}
+                          {profile.records?.description || ''}
                         </p>
 
                         {/* Chain addresses */}