Styles for profile page

web/pages/profile.tsx

@@ -12,6 +12,8 @@ import {
 } from '../../common/util/clean-username'
 import { changeUserInfo } from '../lib/firebase/api-call'
 import { uploadImage } from '../lib/firebase/storage'
+import { Col } from '../components/layout/col'
+import { Row } from '../components/layout/row'
 
 export default function ProfilePage() {
   const user = useUser()
@@ -81,9 +83,11 @@ export default function ProfilePage() {
   return (
     <Page>
       <SEO title="Profile" description="User profile settings" url="/profile" />
-      <Title text="Profile" />
 
-      <p>
+      <Col className="max-w-lg p-6 sm:mx-auto bg-white rounded shadow-md">
+        <Title className="!mt-0" text="Profile" />
+        <Col className="gap-4">
+          <Row className="items-center gap-4">
             {avatarLoading ? (
               <button className="btn btn-ghost btn-lg btn-circle loading"></button>
             ) : (
@@ -97,10 +101,11 @@ export default function ProfilePage() {
                 <input type="file" name="file" onChange={fileHandler} />
               </>
             )}
-      </p>
+          </Row>
 
+          <div>
             <label className="label">
-        <span className="label-text">Display name</span>
+              <span className="">Display name</span>
             </label>
 
             <input
@@ -111,9 +116,11 @@ export default function ProfilePage() {
               onChange={(e) => setName(e.target.value || '')}
               onBlur={updateDisplayName}
             />
+          </div>
 
+          <div>
             <label className="label">
-        <span className="label-text">Username</span>
+              <span className="">Username</span>
             </label>
 
             <input
@@ -124,17 +131,26 @@ export default function ProfilePage() {
               onChange={(e) => setUsername(e.target.value || '')}
               onBlur={updateUsername}
             />
+          </div>
 
+          <div>
             <label className="label">
-        <span className="label-text">Email</span>
+              <span className="">Email</span>
             </label>
-      <p>{privateUser?.email}</p>
+            <div className="ml-2">{privateUser?.email}</div>
+          </div>
 
+          <div>
             <label className="label">
-        <span className="label-text">Balance</span>
+              <span className="">Balance</span>
             </label>
-      <p>{formatMoney(user?.balance || 0)}</p>
+            <Row className="ml-2 gap-4 items-start">
+              {formatMoney(user?.balance || 0)}
               <AddFundsButton />
+            </Row>
+          </div>
+        </Col>
+      </Col>
     </Page>
   )
 }