From userpage, link to /profile (which is always editable now)

web/components/user-page.tsx

@@ -11,6 +11,7 @@ import { Spacer } from './layout/spacer'
 import { Row } from './layout/row'
 import { LinkIcon } from '@heroicons/react/solid'
 import { genHash } from '../../common/util/random'
+import { PencilIcon } from '@heroicons/react/outline'
 
 export function UserLink(props: {
   name: string
@@ -53,14 +54,26 @@ export function UserPage(props: { user: User; currentUser?: User }) {
         style={{
           backgroundImage: `url(${bannerUrl})`,
         }}
-      />
+      ></div>
-      <div className="relative -top-10 left-4">
+      <div className="relative mb-20">
-        <Avatar
+        <div className="absolute -top-10 left-4">
-          username={user.username}
+          <Avatar
-          avatarUrl={user.avatarUrl}
+            username={user.username}
-          size={20}
+            avatarUrl={user.avatarUrl}
-          className="bg-white ring-4 ring-white"
+            size={20}
-        />
+            className="bg-white ring-4 ring-white"
+          />
+        </div>
+
+        {/* Top right buttons (e.g. edit, follow) */}
+        <div className="absolute right-0 top-0 mt-4 mr-4">
+          {isCurrentUser && (
+            <SiteLink className="btn" href="/profile">
+              <PencilIcon className="h-5 w-5" />{' '}
+              <div className="ml-2">Edit</div>
+            </SiteLink>
+          )}
+        </div>
       </div>
 
       {/* Profile details: name, username, bio, and link to twitter/discord */}

web/pages/profile.tsx

@@ -19,6 +19,7 @@ import { Row } from '../components/layout/row'
 import { User } from '../../common/user'
 import { updateUser } from '../lib/firebase/users'
 import { defaultBannerUrl } from '../components/user-page'
+import { SiteLink } from '../components/site-link'
 
 function EditUserField(props: {
   user: User
@@ -37,17 +38,13 @@ function EditUserField(props: {
     <div>
       <label className="label">{label}</label>
 
-      {isEditing ? (
+      <input
-        <input
+        type="text"
-          type="text"
+        className="input input-bordered"
-          className="input input-bordered"
+        value={value}
-          value={value}
+        onChange={(e) => setValue(e.target.value || '')}
-          onChange={(e) => setValue(e.target.value || '')}
+        onBlur={updateField}
-          onBlur={updateField}
+      />
-        />
-      ) : (
-        <div className="ml-1 break-words text-gray-500">{value || '-'}</div>
-      )}
     </div>
   )
 }
@@ -61,8 +58,6 @@ export default function ProfilePage() {
   const [name, setName] = useState(user?.name || '')
   const [username, setUsername] = useState(user?.username || '')
 
-  const [isEditing, setIsEditing] = useState(false)
-
   useEffect(() => {
     if (user) {
       setAvatarUrl(user.avatarUrl || '')
@@ -130,23 +125,10 @@ export default function ProfilePage() {
 
       <Col className="max-w-lg rounded bg-white p-6 shadow-md sm:mx-auto">
         <Row className="justify-between">
-          <Title className="!mt-0" text="Profile" />
+          <Title className="!mt-0" text="Edit Profile" />
-          {isEditing ? (
+          <SiteLink className="btn btn-primary" href={`/${user?.username}`}>
-            <button
+            Done
-              className="btn btn-primary"
+          </SiteLink>
-              onClick={() => setIsEditing(false)}
-            >
-              Done
-            </button>
-          ) : (
-            <button
-              className="btn btn-ghost"
-              onClick={() => setIsEditing(true)}
-            >
-              <PencilIcon className="h-5 w-5" />{' '}
-              <div className="ml-2">Edit</div>
-            </button>
-          )}
         </Row>
         <Col className="gap-4">
           <Row className="items-center gap-4">
@@ -160,9 +142,7 @@ export default function ProfilePage() {
                   height={80}
                   className="flex items-center justify-center rounded-full bg-gray-400"
                 />
-                {isEditing && (
+                <input type="file" name="file" onChange={fileHandler} />
-                  <input type="file" name="file" onChange={fileHandler} />
-                )}
               </>
             )}
           </Row>
@@ -170,35 +150,27 @@ export default function ProfilePage() {
           <div>
             <label className="label">Display name</label>
 
-            {isEditing ? (
+            <input
-              <input
+              type="text"
-                type="text"
+              placeholder="Display name"
-                placeholder="Display name"
+              className="input input-bordered"
-                className="input input-bordered"
+              value={name}
-                value={name}
+              onChange={(e) => setName(e.target.value || '')}
-                onChange={(e) => setName(e.target.value || '')}
+              onBlur={updateDisplayName}
-                onBlur={updateDisplayName}
+            />
-              />
-            ) : (
-              <div className="ml-1 text-gray-500">{name}</div>
-            )}
           </div>
 
           <div>
             <label className="label">Username</label>
 
-            {isEditing ? (
+            <input
-              <input
+              type="text"
-                type="text"
+              placeholder="Username"
-                placeholder="Username"
+              className="input input-bordered"
-                className="input input-bordered"
+              value={username}
-                value={username}
+              onChange={(e) => setUsername(e.target.value || '')}
-                onChange={(e) => setUsername(e.target.value || '')}
+              onBlur={updateUsername}
-                onBlur={updateUsername}
+            />
-              />
-            ) : (
-              <div className="ml-1 text-gray-500">{username}</div>
-            )}
           </div>
 
           {user && (
@@ -210,7 +182,12 @@ export default function ProfilePage() {
                 label="Banner Url"
                 isEditing={isEditing}
               /> */}
-              <label className="label">Banner</label>
+              <label className="label">
+                Banner image{' '}
+                <span className="text-sm text-gray-400">
+                  Not editable for now
+                </span>
+              </label>
               <div
                 className="h-32 w-full bg-cover bg-center sm:h-40"
                 style={{
@@ -231,7 +208,6 @@ export default function ProfilePage() {
                   // @ts-ignore
                   field={field}
                   label={label}
-                  isEditing={isEditing}
                 />
               ))}
             </>