forked from Kieran/snort
Merge pull request #353 from w3irdrobot/small-settings-page-stuff
Small settings page stuff
This commit is contained in:
commit
0088bc4734
@ -15,11 +15,24 @@
|
|||||||
}
|
}
|
||||||
|
|
||||||
.settings .image-settings {
|
.settings .image-settings {
|
||||||
flex-direction: column;
|
display: block;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
}
|
}
|
||||||
|
|
||||||
|
.settings .image-setting {
|
||||||
|
display: flex;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings .image-setting > div:first-child {
|
||||||
|
align-self: center;
|
||||||
|
}
|
||||||
|
|
||||||
|
.settings .avatar,
|
||||||
|
.settings .banner {
|
||||||
|
margin-left: auto;
|
||||||
|
}
|
||||||
|
|
||||||
.settings .avatar .edit,
|
.settings .avatar .edit,
|
||||||
.settings .banner .edit {
|
.settings .banner .edit {
|
||||||
display: flex;
|
display: flex;
|
||||||
|
@ -109,7 +109,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
|
|||||||
function editor() {
|
function editor() {
|
||||||
return (
|
return (
|
||||||
<div className="editor form">
|
<div className="editor form">
|
||||||
<div className="form-group">
|
<div className="form-group card">
|
||||||
<div>
|
<div>
|
||||||
<FormattedMessage {...messages.Name} />:
|
<FormattedMessage {...messages.Name} />:
|
||||||
</div>
|
</div>
|
||||||
@ -117,7 +117,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
|
|||||||
<input type="text" value={name} onChange={e => setName(e.target.value)} />
|
<input type="text" value={name} onChange={e => setName(e.target.value)} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group card">
|
||||||
<div>
|
<div>
|
||||||
<FormattedMessage {...messages.DisplayName} />:
|
<FormattedMessage {...messages.DisplayName} />:
|
||||||
</div>
|
</div>
|
||||||
@ -125,7 +125,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
|
|||||||
<input type="text" value={displayName} onChange={e => setDisplayName(e.target.value)} />
|
<input type="text" value={displayName} onChange={e => setDisplayName(e.target.value)} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group form-col">
|
<div className="form-group card">
|
||||||
<div>
|
<div>
|
||||||
<FormattedMessage {...messages.About} />:
|
<FormattedMessage {...messages.About} />:
|
||||||
</div>
|
</div>
|
||||||
@ -133,7 +133,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
|
|||||||
<textarea className="w-max" onChange={e => setAbout(e.target.value)} value={about}></textarea>
|
<textarea className="w-max" onChange={e => setAbout(e.target.value)} value={about}></textarea>
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group card">
|
||||||
<div>
|
<div>
|
||||||
<FormattedMessage {...messages.Website} />:
|
<FormattedMessage {...messages.Website} />:
|
||||||
</div>
|
</div>
|
||||||
@ -141,19 +141,21 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
|
|||||||
<input type="text" value={website} onChange={e => setWebsite(e.target.value)} />
|
<input type="text" value={website} onChange={e => setWebsite(e.target.value)} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group card">
|
||||||
<div>
|
<div>
|
||||||
<FormattedMessage {...messages.Nip05} />:
|
<FormattedMessage {...messages.Nip05} />:
|
||||||
</div>
|
</div>
|
||||||
<div>
|
<div>
|
||||||
<input type="text" className="mr10" value={nip05} onChange={e => setNip05(e.target.value)} />
|
<input type="text" className="mr10" value={nip05} onChange={e => setNip05(e.target.value)} />
|
||||||
|
{nip05 === "" && (
|
||||||
<button type="button" onClick={() => navigate("/verification")}>
|
<button type="button" onClick={() => navigate("/verification")}>
|
||||||
<FontAwesomeIcon icon={faShop} />
|
<FontAwesomeIcon icon={faShop} />
|
||||||
<FormattedMessage {...messages.Buy} />
|
<FormattedMessage {...messages.Buy} />
|
||||||
</button>
|
</button>
|
||||||
|
)}
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group card">
|
||||||
<div>
|
<div>
|
||||||
<FormattedMessage {...messages.LnAddress} />:
|
<FormattedMessage {...messages.LnAddress} />:
|
||||||
</div>
|
</div>
|
||||||
@ -161,7 +163,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
|
|||||||
<input type="text" value={lud16} onChange={e => setLud16(e.target.value)} />
|
<input type="text" value={lud16} onChange={e => setLud16(e.target.value)} />
|
||||||
</div>
|
</div>
|
||||||
</div>
|
</div>
|
||||||
<div className="form-group">
|
<div className="form-group card">
|
||||||
<div></div>
|
<div></div>
|
||||||
<div>
|
<div>
|
||||||
<button type="button" onClick={() => saveProfile()}>
|
<button type="button" onClick={() => saveProfile()}>
|
||||||
@ -179,10 +181,10 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
|
|||||||
<>
|
<>
|
||||||
<div className="flex f-center image-settings">
|
<div className="flex f-center image-settings">
|
||||||
{(props.avatar ?? true) && (
|
{(props.avatar ?? true) && (
|
||||||
|
<div className="image-setting card">
|
||||||
<div>
|
<div>
|
||||||
<h2>
|
<FormattedMessage {...messages.Avatar} />:
|
||||||
<FormattedMessage {...messages.Avatar} />
|
</div>
|
||||||
</h2>
|
|
||||||
<div style={{ backgroundImage: `url(${avatarPicture})` }} className="avatar">
|
<div style={{ backgroundImage: `url(${avatarPicture})` }} className="avatar">
|
||||||
<div className="edit" onClick={() => setNewAvatar()}>
|
<div className="edit" onClick={() => setNewAvatar()}>
|
||||||
<FormattedMessage {...messages.Edit} />
|
<FormattedMessage {...messages.Edit} />
|
||||||
@ -191,10 +193,10 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
|
|||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
{(props.banner ?? true) && (
|
{(props.banner ?? true) && (
|
||||||
|
<div className="image-setting card">
|
||||||
<div>
|
<div>
|
||||||
<h2>
|
<FormattedMessage {...messages.Banner} />:
|
||||||
<FormattedMessage {...messages.Banner} />
|
</div>
|
||||||
</h2>
|
|
||||||
<div
|
<div
|
||||||
style={{
|
style={{
|
||||||
backgroundImage: `url(${(banner?.length ?? 0) === 0 ? Nostrich : banner})`,
|
backgroundImage: `url(${(banner?.length ?? 0) === 0 ? Nostrich : banner})`,
|
||||||
|
Loading…
Reference in New Issue
Block a user