open.source/manifold
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Styles for profile page

Browse Source
This commit is contained in:
James Grugett 2022-02-03 20:52:27 -06:00
parent 343f98e1c8
commit bff7c50bea
1 changed files with 64 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

34
web/pages/profile.tsx
View File

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