beginning to change profile

web/components/contract-search.tsx

@@ -102,6 +102,7 @@ export function ContractSearch(props: {
     loadMore: () => void
   ) => ReactNode
   autoFocus?: boolean
+  profile?: boolean | undefined
 }) {
   const {
     user,
@@ -121,6 +122,7 @@ export function ContractSearch(props: {
     maxResults,
     renderContracts,
     autoFocus,
+    profile,
   } = props
 
   const [state, setState] = usePersistentState(
@@ -228,6 +230,10 @@ export function ContractSearch(props: {
       />
       {renderContracts ? (
         renderContracts(renderedContracts, performQuery)
+      ) : renderedContracts && renderedContracts.length === 0 && profile ? (
+        <p className="mx-2 text-gray-500">
+          This creator does not yet have any markets.
+        </p>
       ) : (
         <ContractsGrid
           contracts={renderedContracts}

web/components/contract/contracts-grid.tsx

@@ -55,6 +55,13 @@ export function ContractsGrid(props: {
   }
 
   if (contracts.length === 0) {
+    // if (profile) {
+    //   return (
+    //     <p className="mx-2 text-gray-500">
+    //       This creator does not yet have any markets.
+    //     </p>
+    //   )
+    // } else {
     return (
       <p className="mx-2 text-gray-500">
         No markets found. Why not{' '}
@@ -63,6 +70,7 @@ export function ContractsGrid(props: {
         </SiteLink>
       </p>
     )
+    // }
   }
 
   return (
@@ -118,6 +126,7 @@ export function CreatorContractsList(props: {
         creatorId: creator.id,
       }}
       persistPrefix={`user-${creator.id}`}
+      profile={true}
     />
   )
 }

web/components/user-page.tsx

@@ -94,22 +94,27 @@ export function UserPage(props: { user: User }) {
         <LoansModal isOpen={showLoansModal} setOpen={setShowLoansModal} />
       )}
       {/* Banner image up top, with an circle avatar overlaid */}
-      <div
+      {/* <div
         className="h-32 w-full bg-cover bg-center sm:h-40"
         style={{
           backgroundImage: `url(${bannerUrl})`,
         }}
-      ></div>
-      <div className="relative mb-20">
-        <div className="absolute -top-10 left-4">
+      ></div> */}
+      <Col>
+        <Row className="px-4 py-4">
           <Avatar
             username={user.username}
             avatarUrl={user.avatarUrl}
             size={24}
             className="bg-white ring-4 ring-white"
           />
-        </div>
-
+          <Col>
+            <span className="break-anywhere text-2xl font-bold">
+              {user.name}
+            </span>
+            <span className="text-gray-500">@{user.username}</span>
+          </Col>
+        </Row>
         {/* Top right buttons (e.g. edit, follow) */}
         <div className="absolute right-0 top-0 mt-2 mr-4">
           {!isCurrentUser && <UserFollowButton userId={user.id} />}
@@ -120,17 +125,16 @@ export function UserPage(props: { user: User }) {
             </SiteLink>
           )}
         </div>
-      </div>
 
         {/* Profile details: name, username, bio, and link to twitter/discord */}
         <Col className="mx-4 -mt-6">
           <Row className={'flex-wrap justify-between gap-y-2'}>
-          <Col>
+            {/* <Col>
               <span className="break-anywhere text-2xl font-bold">
                 {user.name}
               </span>
               <span className="text-gray-500">@{user.username}</span>
-          </Col>
+            </Col> */}
             <Col className={'justify-center'}>
               <Row className={'gap-3'}>
                 <Col className={'items-center text-gray-500'}>
@@ -190,7 +194,9 @@ export function UserPage(props: { user: User }) {
                 >
                   <Row className="items-center gap-1">
                     <LinkIcon className="h-4 w-4" />
-                  <span className="text-sm text-gray-500">{user.website}</span>
+                    <span className="text-sm text-gray-500">
+                      {user.website}
+                    </span>
                   </Row>
                 </SiteLink>
               )}
@@ -297,6 +303,7 @@ export function UserPage(props: { user: User }) {
             ]}
           />
         </Col>
+      </Col>
     </Page>
   )
 }