From 4530d34c7dfb9d2c45e62683211d1157b254d820 Mon Sep 17 00:00:00 2001
From: w3irdrobot <rob@w3ird.tech>
Date: Fri, 24 Feb 2023 14:37:35 -0500
Subject: [PATCH] Updated profile settings page to match perferences styles

---
 packages/app/src/Pages/settings/Profile.css | 15 ++++++++++++++-
 packages/app/src/Pages/settings/Profile.tsx | 18 +++++++++---------
 2 files changed, 23 insertions(+), 10 deletions(-)

diff --git a/packages/app/src/Pages/settings/Profile.css b/packages/app/src/Pages/settings/Profile.css
index b4869b4e..dd8be0ec 100644
--- a/packages/app/src/Pages/settings/Profile.css
+++ b/packages/app/src/Pages/settings/Profile.css
@@ -15,11 +15,24 @@
 }
 
 .settings .image-settings {
-  flex-direction: column;
+  display: block;
   align-items: 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 .banner .edit {
   display: flex;
diff --git a/packages/app/src/Pages/settings/Profile.tsx b/packages/app/src/Pages/settings/Profile.tsx
index 35ff3790..728487dd 100644
--- a/packages/app/src/Pages/settings/Profile.tsx
+++ b/packages/app/src/Pages/settings/Profile.tsx
@@ -147,7 +147,7 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
           </div>
           <div>
             <input type="text" className="mr10" value={nip05} onChange={e => setNip05(e.target.value)} />
-            {(nip05 === "") && (
+            {nip05 === "" && (
               <button type="button" onClick={() => navigate("/verification")}>
                 <FontAwesomeIcon icon={faShop} />
                 &nbsp; <FormattedMessage {...messages.Buy} />
@@ -181,10 +181,10 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
       <>
         <div className="flex f-center image-settings">
           {(props.avatar ?? true) && (
-            <div>
-              <h2>
-                <FormattedMessage {...messages.Avatar} />
-              </h2>
+            <div className="image-setting card">
+              <div>
+                <FormattedMessage {...messages.Avatar} />:
+              </div>
               <div style={{ backgroundImage: `url(${avatarPicture})` }} className="avatar">
                 <div className="edit" onClick={() => setNewAvatar()}>
                   <FormattedMessage {...messages.Edit} />
@@ -193,10 +193,10 @@ export default function ProfileSettings(props: ProfileSettingsProps) {
             </div>
           )}
           {(props.banner ?? true) && (
-            <div>
-              <h2>
-                <FormattedMessage {...messages.Banner} />
-              </h2>
+            <div className="image-setting card">
+              <div>
+                <FormattedMessage {...messages.Banner} />:
+              </div>
               <div
                 style={{
                   backgroundImage: `url(${(banner?.length ?? 0) === 0 ? Nostrich : banner})`,