Edit mode for profile, and more styles

web/pages/profile.tsx

@@ -1,6 +1,7 @@
 import { useEffect, useState } from 'react'
-import { AddFundsButton } from '../components/add-funds-button'
+import { PencilIcon } from '@heroicons/react/outline'
 
+import { AddFundsButton } from '../components/add-funds-button'
 import { Page } from '../components/page'
 import { SEO } from '../components/SEO'
 import { Title } from '../components/title'
@@ -24,6 +25,8 @@ 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 || '')
@@ -85,7 +88,25 @@ export default function ProfilePage() {
       <SEO title="Profile" description="User profile settings" url="/profile" />
 
       <Col className="max-w-lg p-6 sm:mx-auto bg-white rounded shadow-md">
+        <Row className="justify-between">
           <Title className="!mt-0" text="Profile" />
+          {isEditing ? (
+            <button
+              className="btn btn-primary"
+              onClick={() => setIsEditing(false)}
+            >
+              Done
+            </button>
+          ) : (
+            <button
+              className="btn btn-ghost"
+              onClick={() => setIsEditing(true)}
+            >
+              <PencilIcon className="w-5 h-5" />{' '}
+              <div className="ml-2">Edit</div>
+            </button>
+          )}
+        </Row>
         <Col className="gap-4">
           <Row className="items-center gap-4">
             {avatarLoading ? (
@@ -98,16 +119,17 @@ export default function ProfilePage() {
                   height={80}
                   className="rounded-full bg-gray-400 flex items-center justify-center"
                 />
+                {isEditing && (
                   <input type="file" name="file" onChange={fileHandler} />
+                )}
               </>
             )}
           </Row>
 
           <div>
-            <label className="label">
+            <label className="label">Display name</label>
-              <span className="">Display name</span>
-            </label>
 
+            {isEditing ? (
               <input
                 type="text"
                 placeholder="Display name"
@@ -116,13 +138,15 @@ export default function ProfilePage() {
                 onChange={(e) => setName(e.target.value || '')}
                 onBlur={updateDisplayName}
               />
+            ) : (
+              <div className="ml-1 text-gray-500">{name}</div>
+            )}
           </div>
 
           <div>
-            <label className="label">
+            <label className="label">Username</label>
-              <span className="">Username</span>
-            </label>
 
+            {isEditing ? (
               <input
                 type="text"
                 placeholder="Username"
@@ -131,20 +155,21 @@ export default function ProfilePage() {
                 onChange={(e) => setUsername(e.target.value || '')}
                 onBlur={updateUsername}
               />
+            ) : (
+              <div className="ml-1 text-gray-500">{username}</div>
+            )}
           </div>
 
           <div>
-            <label className="label">
+            <label className="label">Email</label>
-              <span className="">Email</span>
+            <div className="ml-1 text-gray-500">
-            </label>
+              {privateUser?.email ?? '\u00a0'}
-            <div className="ml-2">{privateUser?.email}</div>
+            </div>
           </div>
 
           <div>
-            <label className="label">
+            <label className="label">Balance</label>
-              <span className="">Balance</span>
+            <Row className="ml-1 gap-4 items-start text-gray-500">
-            </label>
-            <Row className="ml-2 gap-4 items-start">
               {formatMoney(user?.balance || 0)}
               <AddFundsButton />
             </Row>