Link to profile edit page from profile page

PrimalHQ · Jul 25, 2023 · 3ed00cf · 3ed00cf
1 parent e00f091
commit 3ed00cf
Show file tree

Hide file tree

Showing 6 changed files with 144 additions and 55 deletions.
diff --git a/src/components/FollowButton/FollowButton.module.scss b/src/components/FollowButton/FollowButton.module.scss
@@ -1,9 +1,7 @@
 
   @mixin followButton {
     grid-area: follow;
-    align-items: center;
     display: flex;
-    align-items: center;
     button {
       background: var(--brand-gradient-vertical);
       border-radius: 6px;
@@ -23,18 +21,28 @@
   .follow {
     @include followButton;
     button {
-      border: none;
+      color: var(--text-primary);
+      background: linear-gradient(var(--background-card), var(--background-card)) padding-box,
+                    var(--brand-gradient) border-box;
+      border: 1px solid transparent;
+
+      &:hover {
+        background: linear-gradient(var(--background-site), var(--background-site)) padding-box,
+                      var(--brand-gradient) border-box;
+      }
     }
   }
 
   .unfollow {
     @include followButton;
     button {
-      color: var(--text-secondary);
-      background-color: var(--background-card);
-      background: linear-gradient(var(--background-card), var(--background-card)) padding-box,
-                    var(--brand-gradient) border-box;
-      border: 1px solid transparent;
+      color: var(--text-primary);
+      background: var(--background-card);
+      border: 1px solid var(--subtile-devider);
+
+      &:hover {
+        border: 1px solid var(--text-tertiary);
+      }
     }
   }
 

diff --git a/src/pages/EditProfile.module.scss b/src/pages/EditProfile.module.scss
@@ -10,6 +10,12 @@
   padding-bottom: 20px;
 }
 
+.bannerPlaceholder {
+  position: relative;
+  width: 100%;
+  height: 214px;
+}
+
 .banner {
   position: relative;
   width: 100%;
@@ -24,8 +30,9 @@
     opacity: 0.6;
   }
 
-  >label {
+  >label, .bannerPlaceholder>label {
     position: relative;
+    height: 100%;
     cursor: pointer;
 
     >img {
@@ -104,6 +111,9 @@
     align-items: center;
     background-color: var(--background-card);
     color: var(--text-primary);
+    font-size: 18px;
+    font-weight: 400;
+    line-height: 20px;
     cursor: pointer;
     opacity: 0;
     transition: opacity 0.25s ease-out;
@@ -276,6 +286,9 @@ form {
       background-color: var(--background-card);
       color: var(--text-primary);
       text-align: center;
+      font-size: 18px;
+      font-weight: 400;
+      line-height: 20px;
       cursor: pointer;
       opacity: 0;
       transition: opacity 0.25s ease-out;

diff --git a/src/pages/EditProfile.tsx b/src/pages/EditProfile.tsx
@@ -20,6 +20,7 @@ import { subscribeTo as uploadSub } from "../uploadSocket";
 import { Kind } from '../constants';
 import { uploadMedia } from '../lib/media';
 import Loader from '../components/Loader/Loader';
+import { useNavigate } from '@solidjs/router';
 
 type AutoSizedTextArea = HTMLTextAreaElement & { _baseScrollHeight: number };
 
@@ -31,12 +32,11 @@ const EditProfile: Component = () => {
   const media = useMediaContext();
   const account = useAccountContext();
   const toast = useToastContext();
+  const navigate = useNavigate();
 
   let textArea: HTMLTextAreaElement | undefined;
   let fileUploadAvatar: HTMLInputElement | undefined;
-  let fileUploadAvatarImage: HTMLInputElement | undefined;
   let fileUploadBanner: HTMLInputElement | undefined;
-  let fileUploadBannerImage: HTMLInputElement | undefined;
 
   const [isBannerCached, setIsBannerCached] = createSignal(false);
   const [isMoreVisible, setIsMoreVisible] = createSignal(false);
@@ -274,7 +274,12 @@ const EditProfile: Component = () => {
           </Show>
           <Show
             when={banner()}
-            fallback={<div class={styles.bannerPlaceholder}></div>}
+            fallback={
+            <div class={styles.bannerPlaceholder}>
+              <label for="upload-banner">
+                <div>{intl.formatMessage(tSettings.profile.uploadBanner)}</div>
+              </label>
+            </div>}
           >
             <label for="upload-banner">
               <img
@@ -292,7 +297,7 @@ const EditProfile: Component = () => {
               <Show when={isUploadingAvatar()}>
                 <div class={styles.uploadingOverlay}><Loader /></div>
               </Show>
-              <label for="upload-avatar-image">
+              <label for="upload-avatar">
                 <div class={styles.desktopAvatar}>
                   <Avatar src={avatarPreview()} size="xxl" />
                   <div class={styles.uploadAction}>
@@ -439,7 +444,7 @@ const EditProfile: Component = () => {
             type='text'
             placeholder={intl.formatMessage(tSettings.profile.picture.placeholder)}
             value={avatarPreview() || ''}
-            onInput={(e: InputEvent) => {
+            onChange={(e: Event) => {
               const target = e.target as HTMLInputElement;
               target.value && setAvatarPreview(target.value);
             }}
@@ -453,7 +458,7 @@ const EditProfile: Component = () => {
             type='text'
             placeholder={intl.formatMessage(tSettings.profile.banner.placeholder)}
             value={bannerPreview() || ''}
-            onInput={(e: InputEvent) => {
+            onChange={(e: Event) => {
               const target = e.target as HTMLInputElement;
               target.value && setBannerPreview(target.value);
             }}
@@ -467,7 +472,11 @@ const EditProfile: Component = () => {
           >
             {intl.formatMessage(tActions.save)}
           </button>
-          <button type='button' class={styles.secondaryButton}>
+          <button
+            type='button'
+            class={styles.secondaryButton}
+            onClick={() => navigate('/profile')}
+          >
             <div>
               <span>{intl.formatMessage(tActions.cancel)}</span>
             </div>

diff --git a/src/pages/Profile.module.scss b/src/pages/Profile.module.scss
@@ -93,25 +93,64 @@
   height: 40px;
   border: none;
   border-radius: 6px;
+  background: none;
   margin: 0px 6px;
   padding: 0px;
+  color: var(--text-primary);
 }
 
 .smallSecondaryButton {
   @include smallButton();
 
-  background-color: var(--background-card);
-  background: linear-gradient(var(--background-card), var(--background-card)) padding-box,
-                var(--brand-gradient-vertical) border-box;
-  border: 1px solid transparent;
+  background: var(--background-card);
+  border: 1px solid var(--subtile-devider);
+
+  &:hover {
+    border: 1px solid var(--text-tertiary);
+  }
 }
 
 .smallPrimaryButton {
   @include smallButton();
+
+  background: var(--background-site);
+  background: linear-gradient(var(--background-card), var(--background-card)) padding-box,
+                var(--brand-gradient) border-box;
+  border: 1px solid transparent;
+
+  &:hover {
+    background: linear-gradient(var(--background-site), var(--background-site)) padding-box,
+                  var(--brand-gradient) border-box;
+  }
+}
+
+.editProfileButton {
+  width: auto;
+  height: 40px;
+  border: none;
+  border-radius: 6px;
+  padding: 1px;
+  font-size: 16px;
+  font-weight: 700;
+  line-height: 20px;
   background: var(--brand-gradient-vertical);
+  color: var(--text-primary);
 
-  .addFeedIcon {
-    background-color: white;
+  >div {
+    width: 100%;
+    height: 100%;
+    padding-inline: 12px;
+    vertical-align: middle;
+    border-radius: 6px;
+    background-color: var(--background-card);
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+
+    &:hover {
+      background-color: var(--background-site);
+    }
   }
 }
 

diff --git a/src/pages/Profile.tsx b/src/pages/Profile.tsx
@@ -230,51 +230,66 @@ const Profile: Component = () => {
         </Show>
 
         <div class={styles.profileActions}>
-          <button
-            class={styles.smallSecondaryButton}
-            onClick={onNotImplemented}
-          >
-            <div class={styles.zapIcon}></div>
-          </button>
-          <button
-            class={styles.smallSecondaryButton}
-            onClick={() => navigate(`/messages/${profile?.userProfile?.npub}`)}
-          >
-            <div class={styles.messageIcon}></div>
-          </button>
+          <Show when={profile?.profileKey !== account?.publicKey}>
+            <button
+              class={styles.smallPrimaryButton}
+              onClick={onNotImplemented}
+            >
+              <div class={styles.zapIcon}></div>
+            </button>
+          </Show>
+
+          <Show when={account?.publicKey}>
+            <button
+              class={styles.smallPrimaryButton}
+              onClick={() => navigate(`/messages/${profile?.userProfile?.npub}`)}
+            >
+              <div class={styles.messageIcon}></div>
+            </button>
+          </Show>
 
           <div class={styles.addToFeedButton}>
-            <Show
-              when={!hasFeedAtHome()}
-              fallback={
+            <Show when={profile?.profileKey !== account?.publicKey}>
+              <Show
+                when={!hasFeedAtHome()}
+                fallback={
+                  <button
+                    class={styles.smallSecondaryButton}
+                    onClick={removeFromHome}
+                    title={intl.formatMessage(
+                      tActions.removeFromHomeFeedNamed,
+                      { name: profileName() },
+                    )}
+                  >
+                    <div class={styles.removeFeedIcon}></div>
+                  </button>
+                }
+              >
                 <button
-                  class={styles.smallSecondaryButton}
-                  onClick={removeFromHome}
+                  class={styles.smallPrimaryButton}
+                  onClick={addToHome}
                   title={intl.formatMessage(
-                    tActions.removeFromHomeFeedNamed,
+                    tActions.addFeedToHomeNamed,
                     { name: profileName() },
                   )}
-                  disabled={profile?.profileKey === account?.publicKey}
                 >
-                  <div class={styles.removeFeedIcon}></div>
+                  <div class={styles.addFeedIcon}></div>
                 </button>
-              }
-            >
-              <button
-                class={styles.smallPrimaryButton}
-                onClick={addToHome}
-                title={intl.formatMessage(
-                  tActions.addFeedToHomeNamed,
-                  { name: profileName() },
-                )}
-              >
-                <div class={styles.addFeedIcon}></div>
-              </button>
+              </Show>
             </Show>
           </div>
 
           <FollowButton person={profile?.userProfile} large={true} />
 
+          <Show when={account?.publicKey && profile?.userProfile?.pubkey === account?.publicKey}>
+            <button
+              class={styles.editProfileButton}
+              onClick={() => navigate('/settings/profile')}
+              title={intl.formatMessage(tActions.editProfile)}
+            >
+              <div>{intl.formatMessage(tActions.editProfile)}</div>
+            </button>
+          </Show>
         </div>
 
         <Show when={profile?.userProfile && !profile?.isFetching}>

diff --git a/src/translations.ts b/src/translations.ts
@@ -76,6 +76,11 @@ export const actions = {
     defaultMessage: 'save',
     description: 'Save changes action label',
   },
+  editProfile: {
+    id: 'actions.editProfile',
+    defaultMessage: 'edit profile',
+    description: 'Edit profile action label',
+  },
 };
 
 export const branding = {
@@ -840,7 +845,7 @@ export const settings = {
     picture: {
       label: {
         id: 'pages.settings.profile.picture.label',
-        defaultMessage: 'Avatar Imagge Url',
+        defaultMessage: 'Avatar Image Url',
         description: 'Label for avatar input on edit profile page',
       },
       placeholder : {