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

Updated profile settings page to match perferences styles

Browse Source
This commit is contained in:
w3irdrobot 2023-02-24 14:37:35 -05:00
parent b800d9532c
commit 4530d34c7d
Signed by: w3irdrobot
GPG Key ID: 3E6DBBB622F3155C
2 changed files with 23 additions and 10 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;

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

@ -147,7 +147,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
</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 === "") && ( {nip05 === "" && (
<button type="button" onClick={() => navigate("/verification")}> <button type="button" onClick={() => navigate("/verification")}>
<FontAwesomeIcon icon={faShop} /> <FontAwesomeIcon icon={faShop} />
&nbsp; <FormattedMessage {...messages.Buy} /> &nbsp; <FormattedMessage {...messages.Buy} />
@ -181,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} />
@ -193,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})`,