From a39bda323adf7ac87df07c11858faf7b2ca96298 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 16:17:08 +0100
Subject: [PATCH 1/7] note ui improvements

---
 src/element/Invoice.css      | 3 ++-
 src/element/Note.css         | 2 +-
 src/element/NoteReaction.css | 2 +-
 src/element/Text.css         | 7 +++++++
 src/element/Text.tsx         | 2 +-
 5 files changed, 12 insertions(+), 4 deletions(-)

diff --git a/src/element/Invoice.css b/src/element/Invoice.css
index 9651fa5b..04dbf0b1 100644
--- a/src/element/Invoice.css
+++ b/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 {
diff --git a/src/element/Note.css b/src/element/Note.css
index e052cf1c..d894da48 100644
--- a/src/element/Note.css
+++ b/src/element/Note.css
@@ -17,7 +17,7 @@
 }
 
 .note > .header > .info {
-    font-size: small;
+    font-size: 10px;
     white-space: nowrap;
     color: var(--gray-light);
     align-self: flex-start;
diff --git a/src/element/NoteReaction.css b/src/element/NoteReaction.css
index 2876cb03..e1dbe593 100644
--- a/src/element/NoteReaction.css
+++ b/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;
 }
 
diff --git a/src/element/Text.css b/src/element/Text.css
index e58c07ce..6d3c7b8f 100644
--- a/src/element/Text.css
+++ b/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;
diff --git a/src/element/Text.tsx b/src/element/Text.tsx
index 0f6339d1..d7bc1011 100644
--- a/src/element/Text.tsx
+++ b/src/element/Text.tsx
@@ -150,7 +150,7 @@ function transformLi({ body, tags, users }: TextFragment) {
 
 function transformParagraph({ body, tags, users }: TextFragment) {
     const fragments = transformText({ body, tags, users })
-    if (fragments.every(f => typeof f === 'string')) {
+    if (fragments.every(f => typeof f === 'string') && fragments.length > 1) {
         return <p>{fragments}</p>
     }
     return <>{fragments}</>

From ee408c5eb35e5a649a58f1c00967af73cf3d6a2e Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 18:31:17 +0100
Subject: [PATCH 2/7] avatar component

---
 src/element/Avatar.css       | 35 +++++++++++++++++++++++++++++++++++
 src/element/Avatar.tsx       | 26 ++++++++++++++++++++++++++
 src/element/ProfileImage.css |  9 ++++++---
 src/element/ProfileImage.tsx |  6 ++++--
 src/pages/ProfilePage.css    | 36 ------------------------------------
 src/pages/ProfilePage.tsx    | 11 +++--------
 6 files changed, 74 insertions(+), 49 deletions(-)
 create mode 100644 src/element/Avatar.css
 create mode 100644 src/element/Avatar.tsx

diff --git a/src/element/Avatar.css b/src/element/Avatar.css
new file mode 100644
index 00000000..45ca77dd
--- /dev/null
+++ b/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);
+}
diff --git a/src/element/Avatar.tsx b/src/element/Avatar.tsx
new file mode 100644
index 00000000..a08e7877
--- /dev/null
+++ b/src/element/Avatar.tsx
@@ -0,0 +1,26 @@
+import "./Avatar.css";
+// @ts-expect-error
+import Nostrich from "../nostrich.jpg";
+
+import { CSSProperties } from "react";
+
+import type { UserMetadata } from "../nostr";
+
+
+const Avatar = ({ user, ...rest }: { user?: UserMetadata }) => {
+    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
diff --git a/src/element/ProfileImage.css b/src/element/ProfileImage.css
index c354aa10..03e2ccc7 100644
--- a/src/element/ProfileImage.css
+++ b/src/element/ProfileImage.css
@@ -3,11 +3,14 @@
     align-items: center;
 }
 
-.pfp img {
+.pfp .avatar-wrapper {
+  margin-right: 6px;
+}
+
+.pfp .avatar {
+    border-width: 1px;
     width: 40px;
     height: 40px;
-    margin-right: 10px;
-    border-radius: 100%;
     cursor: pointer;
 }
 
diff --git a/src/element/ProfileImage.tsx b/src/element/ProfileImage.tsx
index 6fc6a444..6cd9dd50 100644
--- a/src/element/ProfileImage.tsx
+++ b/src/element/ProfileImage.tsx
@@ -6,7 +6,7 @@ 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 +35,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">
diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css
index 33c7f486..5479f191 100644
--- a/src/pages/ProfilePage.css
+++ b/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;
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index d256045d..651a6ba2 100644
--- a/src/pages/ProfilePage.tsx
+++ b/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 })
 
     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>
         )
     }

From 6e5701107f4a6abb1e85e149c06a4409955eca0a Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 18:34:42 +0100
Subject: [PATCH 3/7] smaller reply text

---
 src/element/Note.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/element/Note.css b/src/element/Note.css
index d894da48..3fc9fc68 100644
--- a/src/element/Note.css
+++ b/src/element/Note.css
@@ -12,7 +12,7 @@
 }
 
 .note > .header .reply {
-    font-size: small;
+    font-size: 12px;
     color: var(--gray-light);
 }
 

From ed76adf67483e2d20dccb98d0e3ea27447ecfea3 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 18:36:48 +0100
Subject: [PATCH 4/7] tweak margin

---
 src/element/ProfileImage.css | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/element/ProfileImage.css b/src/element/ProfileImage.css
index 03e2ccc7..4624cc37 100644
--- a/src/element/ProfileImage.css
+++ b/src/element/ProfileImage.css
@@ -4,7 +4,7 @@
 }
 
 .pfp .avatar-wrapper {
-  margin-right: 6px;
+  margin-right: 8px;
 }
 
 .pfp .avatar {

From 7e67a5489cb0eb7759eacc925d996023bb5d3b27 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 18:37:38 +0100
Subject: [PATCH 5/7] :fire:

---
 src/element/ProfileImage.tsx | 2 --
 1 file changed, 2 deletions(-)

diff --git a/src/element/ProfileImage.tsx b/src/element/ProfileImage.tsx
index 6cd9dd50..ce12ab30 100644
--- a/src/element/ProfileImage.tsx
+++ b/src/element/ProfileImage.tsx
@@ -1,6 +1,4 @@
 import "./ProfileImage.css";
-// @ts-ignore
-import Nostrich from "../nostrich.jpg";
 
 import { useMemo } from "react";
 import { Link, useNavigate } from "react-router-dom";

From 57e658079557a54f5c4ec4902dd730b8d3080d77 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 18:39:30 +0100
Subject: [PATCH 6/7] remove unintended change

---
 src/element/Avatar.tsx    | 2 +-
 src/element/Text.tsx      | 2 +-
 src/pages/ProfilePage.tsx | 2 +-
 3 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/element/Avatar.tsx b/src/element/Avatar.tsx
index a08e7877..21e4b6c8 100644
--- a/src/element/Avatar.tsx
+++ b/src/element/Avatar.tsx
@@ -7,7 +7,7 @@ import { CSSProperties } from "react";
 import type { UserMetadata } from "../nostr";
 
 
-const Avatar = ({ user, ...rest }: { user?: UserMetadata }) => {
+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]
diff --git a/src/element/Text.tsx b/src/element/Text.tsx
index d7bc1011..0f6339d1 100644
--- a/src/element/Text.tsx
+++ b/src/element/Text.tsx
@@ -150,7 +150,7 @@ function transformLi({ body, tags, users }: TextFragment) {
 
 function transformParagraph({ body, tags, users }: TextFragment) {
     const fragments = transformText({ body, tags, users })
-    if (fragments.every(f => typeof f === 'string') && fragments.length > 1) {
+    if (fragments.every(f => typeof f === 'string')) {
         return <p>{fragments}</p>
     }
     return <>{fragments}</>
diff --git a/src/pages/ProfilePage.tsx b/src/pages/ProfilePage.tsx
index 651a6ba2..e640b541 100644
--- a/src/pages/ProfilePage.tsx
+++ b/src/pages/ProfilePage.tsx
@@ -38,7 +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 })
+    const about = Text({ content: user?.about || '', tags: [], users: new Map() })
 
     useEffect(() => {
         setTab(ProfileTab.Notes);

From ea0e925021afaf731260695be1533a14320d2871 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 23:04:10 +0100
Subject: [PATCH 7/7] add jpg module

---
 d.ts                       | 4 ++++
 src/element/Avatar.tsx     | 1 -
 src/element/Textarea.tsx   | 1 -
 src/pages/SettingsPage.tsx | 3 +--
 4 files changed, 5 insertions(+), 4 deletions(-)
 create mode 100644 d.ts

diff --git a/d.ts b/d.ts
new file mode 100644
index 00000000..63fda725
--- /dev/null
+++ b/d.ts
@@ -0,0 +1,4 @@
+declare module "*.jpg" {
+  const value: any
+  export default value
+}
diff --git a/src/element/Avatar.tsx b/src/element/Avatar.tsx
index 21e4b6c8..fef211fb 100644
--- a/src/element/Avatar.tsx
+++ b/src/element/Avatar.tsx
@@ -1,5 +1,4 @@
 import "./Avatar.css";
-// @ts-expect-error
 import Nostrich from "../nostrich.jpg";
 
 import { CSSProperties } from "react";
diff --git a/src/element/Textarea.tsx b/src/element/Textarea.tsx
index 25e39815..7b8ee8ec 100644
--- a/src/element/Textarea.tsx
+++ b/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";
diff --git a/src/pages/SettingsPage.tsx b/src/pages/SettingsPage.tsx
index 29cc8d14..f6115381 100644
--- a/src/pages/SettingsPage.tsx
+++ b/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>