tweak header

packages/app/public/icons.svg

@@ -394,5 +394,14 @@
         stroke-linejoin="round"
       />
     </symbol>
+    <symbol id="wallet" viewBox="0 0 22 18" fill="none">
+      <path 
+        d="M19 6.5V4.2C19 3.0799 19 2.51984 18.782 2.09202C18.5903 1.7157 18.2843 1.40974 17.908 1.21799C17.4802 1 16.9201 1 15.8 1H4.2C3.0799 1 2.51984 1 2.09202 1.21799C1.7157 1.40973 1.40973 1.71569 1.21799 2.09202C1 2.51984 1 3.0799 1 4.2V13.8C1 14.9201 1 15.4802 1.21799 15.908C1.40973 16.2843 1.71569 16.5903 2.09202 16.782C2.51984 17 3.07989 17 4.2 17L15.8 17C16.9201 17 17.4802 17 17.908 16.782C18.2843 16.5903 18.5903 16.2843 18.782 15.908C19 15.4802 19 14.9201 19 13.8V11.5M14 9C14 8.53535 14 8.30302 14.0384 8.10982C14.1962 7.31644 14.8164 6.69624 15.6098 6.53843C15.803 6.5 16.0353 6.5 16.5 6.5H18.5C18.9647 6.5 19.197 6.5 19.3902 6.53843C20.1836 6.69624 20.8038 7.31644 20.9616 8.10982C21 8.30302 21 8.53535 21 9C21 9.46466 21 9.69698 20.9616 9.89018C20.8038 10.6836 20.1836 11.3038 19.3902 11.4616C19.197 11.5 18.9647 11.5 18.5 11.5H16.5C16.0353 11.5 15.803 11.5 15.6098 11.4616C14.8164 11.3038 14.1962 10.6836 14.0384 9.89018C14 9.69698 14 9.46465 14 9Z" 
+        stroke="currentColor" 
+        stroke-width="2" 
+        stroke-linecap="round" 
+        stroke-linejoin="round"
+      />
+    </symbol>
   </defs>
 </svg>

packages/app/src/Pages/Layout.css

@@ -18,8 +18,10 @@ header {
   padding: 4px 12px;
 }
 
-header .pfp .avatar-wrapper {
-  margin-right: 0;
+.header-actions .avatar {
+  width: 48px;
+  height: 48px;
+  cursor: pointer;
 }
 
 .header-actions {
@@ -28,11 +30,6 @@ header .pfp .avatar-wrapper {
   align-items: center;
 }
 
-.header-actions .avatar {
-  width: 40px;
-  height: 40px;
-}
-
 .header-actions .btn-rnd {
   position: relative;
   margin-right: 8px;

packages/app/src/Pages/Layout.tsx

@@ -10,7 +10,6 @@ import Icon from "Icons/Icon";
 import { RootState } from "State/Store";
 import { setShow, reset } from "State/NoteCreator";
 import { System } from "System";
-import ProfileImage from "Element/ProfileImage";
 import useLoginFeed from "Feed/LoginFeed";
 import { totalUnread } from "Pages/MessagesPage";
 import useModeration from "Hooks/useModeration";
@@ -22,6 +21,9 @@ import { preload } from "Cache";
 import { useDmCache } from "Hooks/useDmsCache";
 import { mapPlanName } from "./subscribe";
 import useLogin from "Hooks/useLogin";
+import Avatar from "Element/Avatar";
+import { useUserProfile } from "Hooks/useUserProfile";
+import { profileLink } from "Util";
 
 export default function Layout() {
   const location = useLocation();
@@ -173,6 +175,7 @@ const AccountHeader = () => {
   const { isMuted } = useModeration();
   const { publicKey, latestNotification, readNotifications } = useLogin();
   const dms = useDmCache();
+  const profile = useUserProfile(publicKey);
 
   const hasNotifications = useMemo(
     () => latestNotification > readNotifications,
@@ -208,7 +211,7 @@ const AccountHeader = () => {
   return (
     <div className="header-actions">
       <div className="btn btn-rnd" onClick={() => navigate("/wallet")}>
-        <Icon name="bitcoin" />
+        <Icon name="wallet" />
       </div>
       <div className="btn btn-rnd" onClick={() => navigate("/search")}>
         <Icon name="search" />
@@ -221,7 +224,7 @@ const AccountHeader = () => {
         <Icon name="bell" />
         {hasNotifications && <span className="has-unread"></span>}
       </div>
-      <ProfileImage pubkey={publicKey || ""} showUsername={false} />
+      {profile && <Avatar user={profile} onClick={() => navigate(profileLink(profile.pubkey))} />}
     </div>
   );
 };

packages/app/src/Pages/settings/Index.tsx

@@ -36,7 +36,7 @@ const SettingsIndex = () => {
           <Icon name="arrowFront" />
         </div>
         <div className="settings-row" onClick={() => navigate("wallet")}>
-          <Icon name="bitcoin" />
+          <Icon name="wallet" />
           <FormattedMessage defaultMessage="Wallet" />
           <Icon name="arrowFront" />
         </div>