Merge pull request #73 from v0l/moar-ui

Moar UI fixes

d.ts

@@ -0,0 +1,4 @@
+declare module "*.jpg" {
+  const value: any
+  export default value
+}

src/element/Avatar.css

@@ -0,0 +1,35 @@
+.avatar {
+    border-radius: 50%;
+    height: 210px;
+    width: 210px;
+    background-image: var(--img-url), var(--gray-gradient);
+    border: 2px solid transparent;
+    background-origin: border-box;
+    background-clip: content-box, border-box;
+    background-size: cover;
+    box-sizing: border-box;
+}
+
+.avatar[data-domain="snort.social"] {
+    background-image: var(--img-url), var(--snort-gradient);
+}
+
+.avatar[data-domain="nostrplebs.com"] {
+    background-image: var(--img-url), var(--nostrplebs-gradient);
+}
+
+.avatar[data-domain="nostrpurple.com"] {
+    background-image: var(--img-url), var(--nostrplebs-gradient);
+}
+
+.avatar[data-domain="nostr.fan"] {
+    background-image: var(--img-url), var(--nostrplebs-gradient);
+}
+
+.avatar[data-domain="nostrich.zone"] {
+    background-image: var(--img-url), var(--nostrplebs-gradient);
+}
+
+.avatar[data-domain="nostriches.net"] {
+    background-image: var(--img-url), var(--nostrplebs-gradient);
+}

src/element/Avatar.tsx

@@ -0,0 +1,25 @@
+import "./Avatar.css";
+import Nostrich from "../nostrich.jpg";
+
+import { CSSProperties } from "react";
+
+import type { UserMetadata } from "../nostr";
+
+
+const Avatar = ({ user, ...rest }: { user?: UserMetadata, onClick?: () => void}) => {
+    const avatarUrl = (user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture
+    const backgroundImage = `url(${avatarUrl})`
+    const domain = user?.nip05 && user.nip05.split('@')[1]
+    const style = { '--img-url': backgroundImage } as CSSProperties
+    return (
+        <div
+          {...rest}
+          style={style}
+          className="avatar"
+          data-domain={domain?.toLowerCase()}
+        >
+        </div>
+    )
+}
+
+export default Avatar

src/element/Invoice.css

@@ -2,7 +2,8 @@
     background: var(--bg-color);
     border-radius: 10px;
     border: 1px solid var(--gray-tertiary);
-    padding: 10px;
+    padding: 12px;
+    margin: 10px auto;
 }
 
 .note-invoice h2, .note-invoice h4, .note-invoice p {

src/element/Note.css

@@ -12,12 +12,12 @@
 }
 
 .note > .header .reply {
-    font-size: small;
+    font-size: 12px;
     color: var(--gray-light);
 }
 
 .note > .header > .info {
-    font-size: small;
+    font-size: 10px;
     white-space: nowrap;
     color: var(--gray-light);
     align-self: flex-start;

src/element/NoteReaction.css

@@ -19,7 +19,7 @@
 
 .reaction > .header > .info {
     color: var(--gray-light);
-    font-size: small;
+    font-size: 10px;
     align-self: flex-start;
 }
 

src/element/ProfileImage.css

@@ -3,11 +3,14 @@
     align-items: center;
 }
 
-.pfp img {
+.pfp .avatar-wrapper {
+  margin-right: 8px;
+}
+
+.pfp .avatar {
+    border-width: 1px;
     width: 40px;
     height: 40px;
-    margin-right: 10px;
-    border-radius: 100%;
     cursor: pointer;
 }
 

src/element/ProfileImage.tsx

@@ -1,12 +1,10 @@
 import "./ProfileImage.css";
-// @ts-ignore
-import Nostrich from "../nostrich.jpg";
 
 import { useMemo } from "react";
 import { Link, useNavigate } from "react-router-dom";
 import useProfile from "../feed/ProfileFeed";
 import { hexToBech32, profileLink } from "../Util";
-import LazyImage from "./LazyImage";
+import Avatar from "./Avatar"
 import Nip05 from "./Nip05";
 import { HexKey } from "../nostr";
 
@@ -35,7 +33,9 @@ export default function ProfileImage({ pubkey, subHeader, showUsername = true, c
 
     return (
         <div className={`pfp${className ? ` ${className}` : ""}`}>
-            <LazyImage src={hasImage ? user!.picture : Nostrich} onClick={() => navigate(link ?? profileLink(pubkey))} />
+            <div className="avatar-wrapper">
+               <Avatar user={user} onClick={() => navigate(link ?? profileLink(pubkey))} />
+            </div>
             {showUsername && (<div className="f-grow">
                 <Link key={pubkey} to={link ?? profileLink(pubkey)}>
                     <div className="profile-name">

src/element/Text.css

@@ -33,6 +33,13 @@
     margin: 0;
 }
 
+.text li {
+    margin-top: -1em;
+}
+.text li:last-child {
+    margin-bottom: -2em;
+}
+
 .text hr {
     border: 0;
     height: 1px;

src/element/Textarea.tsx

@@ -1,5 +1,4 @@
 import "./Textarea.css";
-// @ts-expect-error
 import Nostrich from "../nostrich.jpg";
 
 import { useLiveQuery } from "dexie-react-hooks";

src/pages/ProfilePage.css

@@ -44,42 +44,6 @@
     margin-left: 4px;
 }
 
-.profile .avatar {
-    border-radius: 50%;
-    height: 210px;
-    width: 210px;
-    background-image: var(--img-url), var(--gray-gradient);
-    border: 4px solid transparent;
-    background-origin: border-box;
-    background-clip: content-box, border-box;
-    background-size: cover;
-    box-sizing: border-box;
-}
-
-.profile .avatar[data-domain="snort.social"] {
-    background-image: var(--img-url), var(--snort-gradient);
-}
-
-.profile .avatar[data-domain="nostrplebs.com"] {
-    background-image: var(--img-url), var(--nostrplebs-gradient);
-}
-
-.profile .avatar[data-domain="nostrpurple.com"] {
-    background-image: var(--img-url), var(--nostrplebs-gradient);
-}
-
-.profile .avatar[data-domain="nostr.fan"] {
-    background-image: var(--img-url), var(--nostrplebs-gradient);
-}
-
-.profile .avatar[data-domain="nostrich.zone"] {
-    background-image: var(--img-url), var(--nostrplebs-gradient);
-}
-
-.profile .avatar[data-domain="nostriches.net"] {
-    background-image: var(--img-url), var(--nostrplebs-gradient);
-}
-
 .profile .name {
     display: flex;
     flex-direction: column;

src/pages/ProfilePage.tsx

@@ -1,6 +1,4 @@
 import "./ProfilePage.css";
-// @ts-ignore
-import Nostrich from "../nostrich.jpg";
 
 import { useEffect, useMemo, useState } from "react";
 import { useSelector } from "react-redux";
@@ -11,6 +9,7 @@ import { useNavigate, useParams } from "react-router-dom";
 import useProfile from "../feed/ProfileFeed";
 import FollowButton from "../element/FollowButton";
 import { extractLnAddress, parseId, hexToBech32 } from "../Util";
+import Avatar from "../element/Avatar";
 import Timeline from "../element/Timeline";
 import Text from '../element/Text'
 import LNURLTip from "../element/LNURLTip";
@@ -39,10 +38,7 @@ export default function ProfilePage() {
     const isMe = loginPubKey === id;
     const [showLnQr, setShowLnQr] = useState<boolean>(false);
     const [tab, setTab] = useState(ProfileTab.Notes);
-    const about = Text({ content: user?.about ?? "", users: new Map(), tags: [] })
-    const avatarUrl = (user?.picture?.length ?? 0) === 0 ? Nostrich : user?.picture
-    const backgroundImage = `url(${avatarUrl})`
-    const domain = user?.nip05 && user.nip05.split('@')[1]
+    const about = Text({ content: user?.about || '', tags: [], users: new Map() })
 
     useEffect(() => {
         setTab(ProfileTab.Notes);
@@ -109,8 +105,7 @@ export default function ProfilePage() {
     function avatar() {
         return (
             <div className="avatar-wrapper">
-                <div style={{ ['--img-url' as any]: backgroundImage }} className="avatar" data-domain={domain?.toLowerCase()}>
-                </div>
+              <Avatar user={user} />
             </div>
         )
     }

src/pages/SettingsPage.tsx

@@ -1,5 +1,4 @@
 import "./SettingsPage.css";
-// @ts-ignore
 import Nostrich from "../nostrich.jpg";
 
 import { useEffect, useState } from "react";
@@ -196,7 +195,7 @@ export default function SettingsPage() {
                     </div>
                     <div>
                         <h2>Header</h2>
-                        <div style={{ backgroundImage: `url(${(banner?.length ?? 0) === 0 ? avatarPicture : banner})` }} className="banner">
+                        <div style={{ backgroundImage: `url(${(banner?.length ?? 0) === 0 ? Nostrich : banner})` }} className="banner">
                             <div className="edit" onClick={() => setNewBanner()}>Edit</div>
                         </div>
                     </div>