verbiricha/snort
1
0
Fork 0
forked from Kieran/snort
Code Pull Requests Activity

Merge pull request #353 from w3irdrobot/small-settings-page-stuff

Browse Source 
Small settings page stuff
This commit is contained in:
Kieran 2023-02-24 19:48:37 +00:00 committed by GitHub
commit 0088bc4734
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
2 changed files with 35 additions and 20 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

15
packages/app/src/Pages/settings/Profile.css
View File

@ -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;

40
packages/app/src/Pages/settings/Profile.tsx
View File

@ -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)} />
<button type="button" onClick={() => navigate("/verification")}> {nip05 === "" && (
<FontAwesomeIcon icon={faShop} /> <button type="button" onClick={() => navigate("/verification")}>
&nbsp; <FormattedMessage {...messages.Buy} /> <FontAwesomeIcon icon={faShop} />
</button> &nbsp; <FormattedMessage {...messages.Buy} />
</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> <div className="image-setting card">
<h2> <div>
<FormattedMessage {...messages.Avatar} /> <FormattedMessage {...messages.Avatar} />:
</h2> </div>
<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> <div className="image-setting card">
<h2> <div>
<FormattedMessage {...messages.Banner} /> <FormattedMessage {...messages.Banner} />:
</h2> </div>
<div <div
style={{ style={{
backgroundImage: `url(${(banner?.length ?? 0) === 0 ? Nostrich : banner})`, backgroundImage: `url(${(banner?.length ?? 0) === 0 ? Nostrich : banner})`,