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

112
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,60 +83,74 @@ 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">
{avatarLoading ? ( <Title className="!mt-0" text="Profile" />
<button className="btn btn-ghost btn-lg btn-circle loading"></button> <Col className="gap-4">
) : ( <Row className="items-center gap-4">
<> {avatarLoading ? (
<img <button className="btn btn-ghost btn-lg btn-circle loading"></button>
src={avatarUrl} ) : (
width={80} <>
height={80} <img
className="rounded-full bg-gray-400 flex items-center justify-center" src={avatarUrl}
width={80}
height={80}
className="rounded-full bg-gray-400 flex items-center justify-center"
/>
<input type="file" name="file" onChange={fileHandler} />
</>
)}
</Row>
<div>
<label className="label">
<span className="">Display name</span>
</label>
<input
type="text"
placeholder="Display name"
className="input input-bordered"
value={name}
onChange={(e) => setName(e.target.value || '')}
onBlur={updateDisplayName}
/> />
<input type="file" name="file" onChange={fileHandler} /> </div>
</>
)}
</p>
<label className="label"> <div>
<span className="label-text">Display name</span> <label className="label">
</label> <span className="">Username</span>
</label>
<input <input
type="text" type="text"
placeholder="Display name" placeholder="Username"
className="input input-bordered" className="input input-bordered"
value={name} value={username}
onChange={(e) => setName(e.target.value || '')} onChange={(e) => setUsername(e.target.value || '')}
onBlur={updateDisplayName} onBlur={updateUsername}
/> />
</div>
<label className="label"> <div>
<span className="label-text">Username</span> <label className="label">
</label> <span className="">Email</span>
</label>
<div className="ml-2">{privateUser?.email}</div>
</div>
<input <div>
type="text" <label className="label">
placeholder="Username" <span className="">Balance</span>
className="input input-bordered" </label>
value={username} <Row className="ml-2 gap-4 items-start">
onChange={(e) => setUsername(e.target.value || '')} {formatMoney(user?.balance || 0)}
onBlur={updateUsername} <AddFundsButton />
/> </Row>
</div>
<label className="label"> </Col>
<span className="label-text">Email</span> </Col>
</label>
<p>{privateUser?.email}</p>
<label className="label">
<span className="label-text">Balance</span>
</label>
<p>{formatMoney(user?.balance || 0)}</p>
<AddFundsButton />
</Page> </Page>
) )
} }