From bb2d7950fe03246082672a45fe2d377d14f95c97 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Sun, 15 Jan 2023 23:34:15 +0100
Subject: [PATCH 01/14] spacing for urls, clickable lnurl

---
 src/pages/ProfilePage.css | 13 +++++++------
 src/pages/ProfilePage.js  | 14 ++++++++------
 2 files changed, 15 insertions(+), 12 deletions(-)

diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css
index 507cff90..e10a6e91 100644
--- a/src/pages/ProfilePage.css
+++ b/src/pages/ProfilePage.css
@@ -105,11 +105,17 @@
 
 .profile .website {
     color: var(--highlight);
-    margin-bottom: 4px;
+    margin: 6px 0;
 }
 
 .profile .lnurl {
     color: var(--highlight);
+    margin: 6px 0;
+    cursor: pointer;
+}
+
+.profile .lnurl:hover {
+    text-decoration: underline;
 }
 
 .profile .btn-icon {
@@ -128,11 +134,6 @@
     text-overflow: ellipsis;
 }
 
-.profile .lnurl::before {
-    content: '⚡️ ';
-    font-size: 10px;
-}
-
 .profile .details-wrapper {
     display: flex;
     flex-direction: column;
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index a1ca626b..cde51d58 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -67,12 +67,14 @@ export default function ProfilePage() {
                     </div>
                 )}
 
-                {lnurl ? <div className="lnurl f-ellipsis">
-                    {lnurl}
-                    <div className="btn btn-icon" onClick={(e) => setShowLnQr(true)}>
-                        <FontAwesomeIcon icon={faQrcode} size="lg" />
-                    </div>
-                </div> : null}
+                {lnurl && (
+                  <>
+                    ⚡️
+                    <span className="lnurl f-ellipsis" onClick={(e) => setShowLnQr(true)}>
+                      {lnurl}
+                    </span>
+                  </>
+                )}
                 <LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)} />
             </div>
         )

From 312451e836566f4d7033d8450f8febd3fe7fe6e1 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Sun, 15 Jan 2023 23:34:24 +0100
Subject: [PATCH 02/14] spacing for bio

---
 src/pages/ProfilePage.css | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css
index e10a6e91..3aa6ef47 100644
--- a/src/pages/ProfilePage.css
+++ b/src/pages/ProfilePage.css
@@ -93,6 +93,7 @@
 .profile .details {
     max-width: 680px;
     width: 100%;
+    margin-top: 12px;
 }
 
 .profile .details p {
@@ -149,10 +150,12 @@
 @media (min-width: 360px) {
   .profile .copy .body { font-size: 14px }
   .profile .details-wrapper, .profile .avatar-wrapper { margin-left: 21px; }
+  .profile .details { width: calc(100% - 21px); }
 }
 
 @media (min-width: 720px) {
   .profile .details-wrapper, .profile .avatar-wrapper { margin-left: 30px; }
+  .profile .details { width: calc(100% - 30px); }
 }
 
 .profile .follow-button {

From 7d050242f13fe38c0fa8d95e58100a2fb3c6fa30 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Sun, 15 Jan 2023 23:40:19 +0100
Subject: [PATCH 03/14] remove darkness from banner gradient

---
 src/pages/ProfilePage.css | 4 ++--
 1 file changed, 2 insertions(+), 2 deletions(-)

diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css
index 3aa6ef47..6eb66889 100644
--- a/src/pages/ProfilePage.css
+++ b/src/pages/ProfilePage.css
@@ -7,8 +7,8 @@
     height: 210px;
     margin-bottom: -80px;
     object-fit: cover;
-    mask-image: linear-gradient(to bottom, var(--bg-color), rgba(0,0,0,0));
-    -webkit-mask-image: linear-gradient(to bottom, var(--bg-color), rgba(0,0,0,0));
+    mask-image: linear-gradient(to bottom, var(--bg-color) 60%, rgba(0,0,0,0));
+    -webkit-mask-image: linear-gradient(to bottom, var(--bg-color) 60%, rgba(0,0,0,0));
     z-index: 0;
 }
 

From dbd6775f473c510a59555c488323e703ee09603f Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Sun, 15 Jan 2023 23:59:28 +0100
Subject: [PATCH 04/14] better spacing for urls

---
 src/pages/ProfilePage.css | 60 +++++++++++++++++++++++++--------------
 src/pages/ProfilePage.js  | 28 +++++++++---------
 2 files changed, 53 insertions(+), 35 deletions(-)

diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css
index 6eb66889..33c7f486 100644
--- a/src/pages/ProfilePage.css
+++ b/src/pages/ProfilePage.css
@@ -102,20 +102,10 @@
 
 .profile .details a {
     color: var(--highlight);
+    text-decoration: none;
 }
 
-.profile .website {
-    color: var(--highlight);
-    margin: 6px 0;
-}
-
-.profile .lnurl {
-    color: var(--highlight);
-    margin: 6px 0;
-    cursor: pointer;
-}
-
-.profile .lnurl:hover {
+.profile .details a:hover {
     text-decoration: underline;
 }
 
@@ -125,16 +115,6 @@
     margin-left: 4px;
 }
 
-.profile .website::before {
-    content: '🔗 ';
-    font-size: 10px;
-}
-
-.profile .lnurl {
-    overflow: hidden;
-    text-overflow: ellipsis;
-}
-
 .profile .details-wrapper {
     display: flex;
     flex-direction: column;
@@ -231,3 +211,39 @@
       max-width: 420px;
   }
 }
+
+.profile .links {
+    margin: 8px 12px;
+}
+
+.profile .website {
+    color: var(--highlight);
+    margin: 6px 0;
+}
+
+.profile .website a {
+    text-decoration: none;
+}
+
+.profile .website::before {
+    content: '🔗 ';
+}
+
+.profile .lnurl {
+    color: var(--highlight);
+    margin: 6px 0;
+    cursor: pointer;
+}
+
+.profile .lnurl:hover {
+    text-decoration: underline;
+}
+
+.profile .lnurl {
+    overflow: hidden;
+    text-overflow: ellipsis;
+}
+
+.profile .zap {
+    margin-right: .3em;
+}
diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js
index cde51d58..5d4b7abc 100644
--- a/src/pages/ProfilePage.js
+++ b/src/pages/ProfilePage.js
@@ -61,20 +61,22 @@ export default function ProfilePage() {
             <div className="details">
                 <div>{about}</div>
 
-                {user?.website && (
-                    <div className="website f-ellipsis">
-                        <a href={user.website} target="_blank" rel="noreferrer">{user.website}</a>
-                    </div>
-                )}
+                <div className="links">
+                  {user?.website && (
+                      <div className="website f-ellipsis">
+                          <a href={user.website} target="_blank" rel="noreferrer">{user.website}</a>
+                      </div>
+                  )}
 
-                {lnurl && (
-                  <>
-                    ⚡️
-                    <span className="lnurl f-ellipsis" onClick={(e) => setShowLnQr(true)}>
-                      {lnurl}
-                    </span>
-                  </>
-                )}
+                  {lnurl && (
+                    <div className="f-ellipsis" onClick={(e) => setShowLnQr(true)}>
+                      <span className="zap">⚡️</span>
+                      <span className="lnurl" >
+                        {lnurl}
+                      </span>
+                    </div>
+                  )}
+                </div>
                 <LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)} />
             </div>
         )

From 548e3ae67b41f67e375a464658a5741a4e60d107 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 00:14:33 +0100
Subject: [PATCH 05/14] info placement and color

---
 src/element/Note.css         | 4 ++++
 src/element/NoteReaction.css | 3 ++-
 2 files changed, 6 insertions(+), 1 deletion(-)

diff --git a/src/element/Note.css b/src/element/Note.css
index 7ce045e7..d6786411 100644
--- a/src/element/Note.css
+++ b/src/element/Note.css
@@ -19,6 +19,10 @@
 .note > .header > .info {
     font-size: small;
     white-space: nowrap;
+    color: var(--gray-tertiary);
+    align-self: flex-start;
+}
+.note.active > .header > .info {
     color: var(--gray-light);
 }
 
diff --git a/src/element/NoteReaction.css b/src/element/NoteReaction.css
index e5e9ec83..c877c84f 100644
--- a/src/element/NoteReaction.css
+++ b/src/element/NoteReaction.css
@@ -18,8 +18,9 @@
 }
 
 .reaction > .header > .info {
-    color: #999;
+    color: var(--gray-tertiary);
     font-size: small;
+    align-self: flex-start;
 }
 
 .reaction .reaction-text {

From 8fb06e576536f04ca94428dd6b9f59957ae5fbd8 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 00:14:52 +0100
Subject: [PATCH 06/14] more minimal reactions

---
 src/element/NoteReaction.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/element/NoteReaction.js b/src/element/NoteReaction.js
index 74288505..918d8e7a 100644
--- a/src/element/NoteReaction.js
+++ b/src/element/NoteReaction.js
@@ -63,12 +63,12 @@ export default function NoteReaction(props) {
     const root = extractRoot();
     const opt = {
         showHeader: ev?.Kind === EventKind.Repost,
-        showFooter: ev?.Kind === EventKind.Repost
+        showFooter: false,
     };
     return (
         <div className="reaction">
             <div className="header flex">
-                <ProfileImage pubkey={ev.RootPubKey} subHeader={tagLine()} />
+                <ProfileImage pubkey={ev.RootPubKey} />
                 <div className="info">
                     <NoteTime from={ev.CreatedAt * 1000} />
                 </div>
@@ -78,4 +78,4 @@ export default function NoteReaction(props) {
             {!root && refEvent ? <p><Link to={eventLink(refEvent)}>#{hexToBech32("note", refEvent).substring(0, 12)}</Link></p> : null}
         </div>
     );
-}
\ No newline at end of file
+}

From 54394c8aa1279f3d8054c59b21e940d26226f137 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 00:44:50 +0100
Subject: [PATCH 07/14] note creator button and reply adjustments

---
 package.json                |  1 +
 src/element/NoteCreator.css | 13 ++++++++-----
 src/element/NoteCreator.js  | 27 +++++++++++++++++----------
 src/element/NoteFooter.js   |  9 +++++++--
 src/element/NoteReaction.js |  2 +-
 src/element/Textarea.tsx    |  2 ++
 src/index.css               |  1 +
 yarn.lock                   | 28 +++++++++++++++++++++++++++-
 8 files changed, 64 insertions(+), 19 deletions(-)

diff --git a/package.json b/package.json
index 3ea58a1b..6abd624f 100644
--- a/package.json
+++ b/package.json
@@ -28,6 +28,7 @@
     "react-redux": "^8.0.5",
     "react-router-dom": "^6.5.0",
     "react-scripts": "5.0.1",
+    "react-textarea-autosize": "^8.4.0",
     "react-twitter-embed": "^4.0.4",
     "typescript": "^4.9.4",
     "uuid": "^9.0.0"
diff --git a/src/element/NoteCreator.css b/src/element/NoteCreator.css
index 04d3c578..b7d24db3 100644
--- a/src/element/NoteCreator.css
+++ b/src/element/NoteCreator.css
@@ -4,8 +4,13 @@
     border-radius: 10px;
 }
 
+.note-reply {
+    margin: 10px;
+}
+
 .note-creator textarea {
     outline: none;
+    resize: none;
     min-height: 40px;
     border-radius: 10px 10px 0 0;
     max-width: -webkit-fill-available;
@@ -15,11 +20,6 @@
     min-width: -webkit-fill-available;
     min-width: -moz-available;
     min-width: fill-available;
-    transition: min-height .5s;
-}
-
-.note-creator .textarea--focused {
-    min-height: 120px;
 }
 
 .note-creator .actions {
@@ -43,4 +43,7 @@
 .note-creator .btn {
     border-radius: 20px;
     font-weight: bold;
+    background-color: var(--gray-secondary);
+    color: var(--gray-superlight);
+    border-color: var(--gray-superlight);
 }
diff --git a/src/element/NoteCreator.js b/src/element/NoteCreator.js
index cbd68e3b..4d0955b2 100644
--- a/src/element/NoteCreator.js
+++ b/src/element/NoteCreator.js
@@ -15,6 +15,7 @@ export function NoteCreator(props) {
     const replyTo = props.replyTo;
     const onSend = props.onSend;
     const show = props.show || false;
+    const autoFocus = props.autoFocus || false;
     const publisher = useEventPublisher();
     const [note, setNote] = useState("");
     const [error, setError] = useState("");
@@ -49,8 +50,8 @@ export function NoteCreator(props) {
 
     function onChange(ev) {
         const { value } = ev.target
+        setNote(value)
         if (value) {
-          setNote(value)
           setActive(true)
         } else {
           setActive(false)
@@ -60,22 +61,28 @@ export function NoteCreator(props) {
     if (!show) return false;
     return (
         <>
-            {replyTo ? <small>{`Reply to: ${replyTo.Id.substring(0, 8)}`}</small> : null}
-            <div className="flex note-creator">
+            <div
+              key={replyTo ? `note-reply-${replyTo.Id}` : `note-creator`}
+              className={`flex note-creator ${replyTo ? 'note-reply' : ''}`}
+              >
                 <div className="flex f-col mr10 f-grow">
                     <Textarea
+                      autoFocus={autoFocus}
                       className={`textarea ${active ? "textarea--focused" : ""}`}
                       users={users}
                       onChange={onChange}
+                      onBlur={() => setActive(false)}
                       onFocus={() => setActive(true)}
                     />
-                    <div className="actions flex f-row">
-                        <div className="attachment flex f-row">
-                            {error.length > 0 ? <b className="error">{error}</b> : null}
-                            <FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
-                        </div>
-                        <div className="btn" onClick={() => sendNote()}>Send</div>
-                    </div>
+                    {active && note && (
+                      <div className="actions flex f-row">
+                          <div className="attachment flex f-row">
+                              {error.length > 0 ? <b className="error">{error}</b> : null}
+                              <FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
+                          </div>
+                          <div disabled={note} className="btn" onClick={() => sendNote()}>Send</div>
+                      </div>
+                    )}
                 </div>
             </div>
         </>
diff --git a/src/element/NoteFooter.js b/src/element/NoteFooter.js
index 0c24a654..b491f309 100644
--- a/src/element/NoteFooter.js
+++ b/src/element/NoteFooter.js
@@ -104,8 +104,13 @@ export default function NoteFooter(props) {
                     )
                 })}
             </div>
-            <NoteCreator replyTo={ev} onSend={(e) => setReply(false)} show={reply} />
+            <NoteCreator
+              autoFocus={true}
+              replyTo={ev}
+              onSend={(e) => setReply(false)}
+              show={reply}
+            />
             <LNURLTip svc={author?.lud16 || author?.lud06} onClose={(e) => setTip(false)} show={tip} />
         </>
     )
-}
\ No newline at end of file
+}
diff --git a/src/element/NoteReaction.js b/src/element/NoteReaction.js
index 918d8e7a..6f4e8215 100644
--- a/src/element/NoteReaction.js
+++ b/src/element/NoteReaction.js
@@ -63,7 +63,7 @@ export default function NoteReaction(props) {
     const root = extractRoot();
     const opt = {
         showHeader: ev?.Kind === EventKind.Repost,
-        showFooter: false,
+        showFooter: ev?.Kind === EventKind.Repost,
     };
     return (
         <div className="reaction">
diff --git a/src/element/Textarea.tsx b/src/element/Textarea.tsx
index 35d591eb..c73d22d1 100644
--- a/src/element/Textarea.tsx
+++ b/src/element/Textarea.tsx
@@ -2,6 +2,7 @@ import { useSelector } from "react-redux";
 import { useLiveQuery } from "dexie-react-hooks";
 
 import ReactTextareaAutocomplete from "@webscopeio/react-textarea-autocomplete";
+import TextareaAutosize from "react-textarea-autosize";
 
 // @ts-expect-error
 import Nip05 from "./Nip05";
@@ -61,6 +62,7 @@ const Textarea = ({ users, onChange, ...rest }: any) => {
           loadingComponent={() => <span>Loading....</span>}
           placeholder="Say something!"
           onChange={onChange}
+          textAreaComponent={TextareaAutosize}
           trigger={{
              "@": {
                afterWhitespace: true,
diff --git a/src/index.css b/src/index.css
index 6232ab98..252873ec 100644
--- a/src/index.css
+++ b/src/index.css
@@ -199,6 +199,7 @@ span.pill {
   padding: 2px 10px;
   border-radius: 10px;
   user-select: none;
+  color: var(--font-color);
   margin: 2px 5px;
 }
 
diff --git a/yarn.lock b/yarn.lock
index eb869882..c760d63a 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -1024,7 +1024,7 @@
     "@babel/helper-validator-option" "^7.18.6"
     "@babel/plugin-transform-typescript" "^7.18.6"
 
-"@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
+"@babel/runtime@^7.10.2", "@babel/runtime@^7.11.2", "@babel/runtime@^7.12.1", "@babel/runtime@^7.12.5", "@babel/runtime@^7.16.3", "@babel/runtime@^7.20.7", "@babel/runtime@^7.5.5", "@babel/runtime@^7.6.2", "@babel/runtime@^7.7.2", "@babel/runtime@^7.8.4", "@babel/runtime@^7.9.2":
   version "7.20.7"
   resolved "https://registry.yarnpkg.com/@babel/runtime/-/runtime-7.20.7.tgz#fcb41a5a70550e04a7b708037c7c32f7f356d8fd"
   integrity sha512-UF0tvkUtxwAgZ5W/KrkHf0Rn0fdnLDU9ScxBrEVNUprE/MzirjK4MJUX1/BVDv00Sv8cljtukVK1aky++X1SjQ==
@@ -8048,6 +8048,15 @@ react-scripts@5.0.1:
   optionalDependencies:
     fsevents "^2.3.2"
 
+react-textarea-autosize@^8.4.0:
+  version "8.4.0"
+  resolved "https://registry.yarnpkg.com/react-textarea-autosize/-/react-textarea-autosize-8.4.0.tgz#4d0244d6a50caa897806b8c44abc0540a69bfc8c"
+  integrity sha512-YrTFaEHLgJsi8sJVYHBzYn+mkP3prGkmP2DKb/tm0t7CLJY5t1Rxix8070LAKb0wby7bl/lf2EeHkuMihMZMwQ==
+  dependencies:
+    "@babel/runtime" "^7.10.2"
+    use-composed-ref "^1.3.0"
+    use-latest "^1.2.1"
+
 react-twitter-embed@^4.0.4:
   version "4.0.4"
   resolved "https://registry.yarnpkg.com/react-twitter-embed/-/react-twitter-embed-4.0.4.tgz#4a6b8354acc266876ff1110b9f648518ea20db6d"
@@ -9335,6 +9344,23 @@ url-parse@^1.5.3:
     querystringify "^2.1.1"
     requires-port "^1.0.0"
 
+use-composed-ref@^1.3.0:
+  version "1.3.0"
+  resolved "https://registry.yarnpkg.com/use-composed-ref/-/use-composed-ref-1.3.0.tgz#3d8104db34b7b264030a9d916c5e94fbe280dbda"
+  integrity sha512-GLMG0Jc/jiKov/3Ulid1wbv3r54K9HlMW29IWcDFPEqFkSO2nS0MuefWgMJpeHQ9YJeXDL3ZUF+P3jdXlZX/cQ==
+
+use-isomorphic-layout-effect@^1.1.1:
+  version "1.1.2"
+  resolved "https://registry.yarnpkg.com/use-isomorphic-layout-effect/-/use-isomorphic-layout-effect-1.1.2.tgz#497cefb13d863d687b08477d9e5a164ad8c1a6fb"
+  integrity sha512-49L8yCO3iGT/ZF9QttjwLF/ZD9Iwto5LnH5LmEdk/6cFmXddqi2ulF0edxTwjj+7mqvpVVGQWvbXZdn32wRSHA==
+
+use-latest@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/use-latest/-/use-latest-1.2.1.tgz#d13dfb4b08c28e3e33991546a2cee53e14038cf2"
+  integrity sha512-xA+AVm/Wlg3e2P/JiItTziwS7FK92LWrDB0p+hgXloIMuVCeJJ8v6f0eeHyPZaJrM+usM1FkFfbNCrJGs8A/zw==
+  dependencies:
+    use-isomorphic-layout-effect "^1.1.1"
+
 use-sync-external-store@^1.0.0:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/use-sync-external-store/-/use-sync-external-store-1.2.0.tgz#7dbefd6ef3fe4e767a0cf5d7287aacfb5846928a"

From 2273a7ac2975d9cddaf82771e35f76e20a59f0c1 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 00:45:23 +0100
Subject: [PATCH 08/14] dont pluralize when 1 more

---
 src/element/Note.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

diff --git a/src/element/Note.js b/src/element/Note.js
index 7745ae2e..fc4a5af6 100644
--- a/src/element/Note.js
+++ b/src/element/Note.js
@@ -50,7 +50,8 @@ export default function Note(props) {
         let replyId = ev.Thread?.ReplyTo?.Event ?? ev.Thread?.Root?.Event;
         let mentions = ev.Thread?.PubKeys?.map(a => [a, users[a]])?.map(a => (a[1]?.name?.length ?? 0) > 0 ? a[1].name : hexToBech32("npub", a[0]).substring(0, 12))
             .sort((a, b) => a.startsWith("npub") ? 1 : -1);
-        let pubMentions = mentions.length > maxMentions ? `${mentions?.slice(0, maxMentions).join(", ")} & ${mentions.length - maxMentions} others` : mentions?.join(", ");
+        let othersLength = mentions.length - maxMentions
+        let pubMentions = mentions.length > maxMentions ? `${mentions?.slice(0, maxMentions).join(", ")} & ${othersLength} other${othersLength > 1 ? 's' : ''}` : mentions?.join(", ");
         return (
             <div className="reply">
                 ➡️ {(pubMentions?.length ?? 0) > 0 ? pubMentions : hexToBech32("note", replyId)?.substring(0, 12)}

From 64f46f2bfc1c57f327cf15a4c2b69fab339e4104 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 00:45:44 +0100
Subject: [PATCH 09/14] don't show relative timestamp on last min notes

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

diff --git a/src/element/NoteTime.js b/src/element/NoteTime.js
index dcdc94d1..cb04e306 100644
--- a/src/element/NoteTime.js
+++ b/src/element/NoteTime.js
@@ -16,7 +16,7 @@ export default function NoteTime({ from }) {
         } else if (absAgo > HourInMs) {
             return `${fromDate.getHours().toString().padStart(2, '0')}:${fromDate.getMinutes().toString().padStart(2, '0')}`;
         } else if (absAgo < MinuteInMs) {
-          return 'Just now'
+          return ''
         } else {
             let mins = parseInt(absAgo / MinuteInMs);
             let minutes = mins === 1 ? 'min' : 'mins'

From 9bf07d5f17249b9575259e4cdfc8b6b42a4fa3a8 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 08:44:10 +0100
Subject: [PATCH 10/14] remove disabled attr

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

diff --git a/src/element/NoteCreator.js b/src/element/NoteCreator.js
index 4d0955b2..8f61524b 100644
--- a/src/element/NoteCreator.js
+++ b/src/element/NoteCreator.js
@@ -80,7 +80,7 @@ export function NoteCreator(props) {
                               {error.length > 0 ? <b className="error">{error}</b> : null}
                               <FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
                           </div>
-                          <div disabled={note} className="btn" onClick={() => sendNote()}>Send</div>
+                          <div className="btn" onClick={() => sendNote()}>Send</div>
                       </div>
                     )}
                 </div>

From c627b6e39726d1d3d487db3fd2fcae6f3a390a6a Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 11:02:26 +0100
Subject: [PATCH 11/14] remove unintended margin

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

diff --git a/src/element/ProfileImage.css b/src/element/ProfileImage.css
index 4d677bbc..c354aa10 100644
--- a/src/element/ProfileImage.css
+++ b/src/element/ProfileImage.css
@@ -24,7 +24,6 @@
   display: flex;
   flex-direction: column;
   font-weight: bold;
-  margin-bottom: .2em;
 }
 
 .pfp .nip05 {

From 7a6d5f53bead1253f3b96215e2da31d845f678e0 Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 11:07:41 +0100
Subject: [PATCH 12/14] adjust note info color

---
 src/element/Note.css         | 5 +----
 src/element/NoteReaction.css | 2 +-
 2 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/src/element/Note.css b/src/element/Note.css
index d6786411..e052cf1c 100644
--- a/src/element/Note.css
+++ b/src/element/Note.css
@@ -19,11 +19,8 @@
 .note > .header > .info {
     font-size: small;
     white-space: nowrap;
-    color: var(--gray-tertiary);
-    align-self: flex-start;
-}
-.note.active > .header > .info {
     color: var(--gray-light);
+    align-self: flex-start;
 }
 
 .note > .body {
diff --git a/src/element/NoteReaction.css b/src/element/NoteReaction.css
index c877c84f..2876cb03 100644
--- a/src/element/NoteReaction.css
+++ b/src/element/NoteReaction.css
@@ -18,7 +18,7 @@
 }
 
 .reaction > .header > .info {
-    color: var(--gray-tertiary);
+    color: var(--gray-light);
     font-size: small;
     align-self: flex-start;
 }

From 6ce852e8886feadc8089cee8491dc42d6c643e9a Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 11:35:57 +0100
Subject: [PATCH 13/14] fix: note creator fixes

---
 src/element/NoteCreator.js | 18 +++++++++++-------
 1 file changed, 11 insertions(+), 7 deletions(-)

diff --git a/src/element/NoteCreator.js b/src/element/NoteCreator.js
index 8f61524b..9569b881 100644
--- a/src/element/NoteCreator.js
+++ b/src/element/NoteCreator.js
@@ -27,10 +27,10 @@ export function NoteCreator(props) {
         console.debug("Sending note: ", ev);
         publisher.broadcast(ev);
         setNote("");
-        setActive(false);
         if (typeof onSend === "function") {
             onSend();
         }
+        setActive(false);
     }
 
     async function attachFile() {
@@ -58,20 +58,22 @@ export function NoteCreator(props) {
         }
     }
 
+    function onSubmit(ev) {
+        ev.stopPropagation();
+        sendNote()
+    }
+
     if (!show) return false;
     return (
         <>
-            <div
-              key={replyTo ? `note-reply-${replyTo.Id}` : `note-creator`}
-              className={`flex note-creator ${replyTo ? 'note-reply' : ''}`}
-              >
+            <div className={`flex note-creator ${replyTo ? 'note-reply' : ''}`}>
                 <div className="flex f-col mr10 f-grow">
                     <Textarea
                       autoFocus={autoFocus}
                       className={`textarea ${active ? "textarea--focused" : ""}`}
                       users={users}
                       onChange={onChange}
-                      onBlur={() => setActive(false)}
+                      value={note}
                       onFocus={() => setActive(true)}
                     />
                     {active && note && (
@@ -80,7 +82,9 @@ export function NoteCreator(props) {
                               {error.length > 0 ? <b className="error">{error}</b> : null}
                               <FontAwesomeIcon icon={faPaperclip} size="xl" onClick={(e) => attachFile()} />
                           </div>
-                          <div className="btn" onClick={() => sendNote()}>Send</div>
+                          <button type="button" className="btn" onClick={onSubmit}>
+                            {replyTo ? 'Reply' : 'Send'}
+                          </button>
                       </div>
                     )}
                 </div>

From cd8d4cf2ea40532972be9f571ccf072881dac14d Mon Sep 17 00:00:00 2001
From: Alejandro Gomez <alejandro@strike.me>
Date: Mon, 16 Jan 2023 11:38:30 +0100
Subject: [PATCH 14/14] fix: add fallback to note time

---
 src/element/DM.tsx      | 2 +-
 src/element/NoteTime.js | 4 ++--
 2 files changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/element/DM.tsx b/src/element/DM.tsx
index 4f2d97f9..c38e8266 100644
--- a/src/element/DM.tsx
+++ b/src/element/DM.tsx
@@ -38,7 +38,7 @@ export default function DM(props: DMProps) {
 
     return (
         <div className={`flex dm f-col${props.data.pubkey === pubKey ? " me" : ""}`} ref={ref}>
-            <div><NoteTime from={props.data.created_at * 1000} /></div>
+            <div><NoteTime from={props.data.created_at * 1000} fallback={'Just now'} /></div>
             <div className="w-max">
                 <Text content={content} />
             </div>
diff --git a/src/element/NoteTime.js b/src/element/NoteTime.js
index cb04e306..23a43164 100644
--- a/src/element/NoteTime.js
+++ b/src/element/NoteTime.js
@@ -4,7 +4,7 @@ const MinuteInMs = 1_000 * 60;
 const HourInMs = MinuteInMs * 60;
 const DayInMs = HourInMs * 24;
 
-export default function NoteTime({ from }) {
+export default function NoteTime({ from, fallback = '' }) {
     const [time, setTime] = useState("");
 
     function calcTime() {
@@ -16,7 +16,7 @@ export default function NoteTime({ from }) {
         } else if (absAgo > HourInMs) {
             return `${fromDate.getHours().toString().padStart(2, '0')}:${fromDate.getMinutes().toString().padStart(2, '0')}`;
         } else if (absAgo < MinuteInMs) {
-          return ''
+          return fallback
         } else {
             let mins = parseInt(absAgo / MinuteInMs);
             let minutes = mins === 1 ? 'min' : 'mins'