From 446cf2d3e44f86a2c3457f78ab7e239a19bc9cb5 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Mon, 9 Jan 2023 22:23:34 +0100 Subject: [PATCH 01/15] pluralize note time --- src/element/NoteReaction.css | 1 + src/element/NoteTime.js | 5 ++++- 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/element/NoteReaction.css b/src/element/NoteReaction.css index 13984c9..e99fd2a 100644 --- a/src/element/NoteReaction.css +++ b/src/element/NoteReaction.css @@ -19,5 +19,6 @@ } .reaction > .header > .info { + color: #999; font-size: small; } \ No newline at end of file diff --git a/src/element/NoteTime.js b/src/element/NoteTime.js index b260f38..9b2ebc7 100644 --- a/src/element/NoteTime.js +++ b/src/element/NoteTime.js @@ -16,9 +16,12 @@ export default function NoteTime(props) { return fromDate.toLocaleDateString(undefined, { year: "2-digit", month: "short", day: "2-digit", weekday: "short" }); } else if (absAgo > HourInMs) { return `${fromDate.getHours().toString().padStart(2, '0')}:${fromDate.getMinutes().toString().padStart(2, '0')}`; + } else if (absAgo < MinuteInMs) { + return 'Just now' } else { let mins = parseInt(absAgo / MinuteInMs); - return `${mins} mins ago`; + let minutes = mins === 1 ? 'min' : 'mins' + return `${mins} ${minutes} ago`; } } From d47fb245d5050e99d104171b900702e8f64b9a8a Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Mon, 9 Jan 2023 22:45:03 +0100 Subject: [PATCH 02/15] rounded profile images --- src/element/ProfileImage.css | 2 +- src/pages/ProfilePage.css | 2 +- 2 files changed, 2 insertions(+), 2 deletions(-) diff --git a/src/element/ProfileImage.css b/src/element/ProfileImage.css index 4d5f385..d179d35 100644 --- a/src/element/ProfileImage.css +++ b/src/element/ProfileImage.css @@ -7,7 +7,7 @@ width: 40px; height: 40px; margin-right: 10px; - border-radius: 10px; + border-radius: 100%; cursor: pointer; } diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css index 933b272..8724196 100644 --- a/src/pages/ProfilePage.css +++ b/src/pages/ProfilePage.css @@ -22,7 +22,7 @@ width: 256px; height: 256px; background-size: cover; - border-radius: 10px; + border-radius: 100%; } @media(max-width: 720px) { From 58f5e50cea364304fc7009b80bfe3a1e37f1babd Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Mon, 9 Jan 2023 23:18:58 +0100 Subject: [PATCH 03/15] center and margin for embdedded content --- src/element/Note.css | 8 ++++---- 1 file changed, 4 insertions(+), 4 deletions(-) diff --git a/src/element/Note.css b/src/element/Note.css index 888ff67..232379e 100644 --- a/src/element/Note.css +++ b/src/element/Note.css @@ -32,10 +32,10 @@ .note > .body > img, .note > .body > video, .note > .body > iframe { max-width: 100%; max-height: 500px; -} - -.note > .body > iframe { - margin: 10px 0; + margin: 10px; + margin-left: auto; + margin-right: auto; + display: block; } .note > .header > img:hover, .note > .header > .name > .reply:hover, .note > .body:hover { From 372afd878c1594c6a3a3ebe6fc61776fa506ad02 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Mon, 9 Jan 2023 23:29:39 +0100 Subject: [PATCH 04/15] messages --- src/pages/Root.css | 3 ++- src/pages/Root.js | 3 +++ 2 files changed, 5 insertions(+), 1 deletion(-) diff --git a/src/pages/Root.css b/src/pages/Root.css index 1a1b767..c85ce5d 100644 --- a/src/pages/Root.css +++ b/src/pages/Root.css @@ -1,4 +1,5 @@ .root-tabs > div { padding: 5px 0; background-color: #333; -} \ No newline at end of file + border-radius: 10px; +} diff --git a/src/pages/Root.js b/src/pages/Root.js index 858c0f5..b71e096 100644 --- a/src/pages/Root.js +++ b/src/pages/Root.js @@ -35,6 +35,9 @@ export default function RootPage() {
setTab(RootTab.Global)}> Global
+
+ Messages +
: null} {followHints()} From 69eff595ffb1bd505f295e3cd30955b6102d17cb Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Tue, 10 Jan 2023 08:08:14 +0100 Subject: [PATCH 05/15] remove bottom border from reaction --- src/element/NoteReaction.css | 1 - 1 file changed, 1 deletion(-) diff --git a/src/element/NoteReaction.css b/src/element/NoteReaction.css index e99fd2a..8c47124 100644 --- a/src/element/NoteReaction.css +++ b/src/element/NoteReaction.css @@ -1,6 +1,5 @@ .reaction { margin-bottom: 10px; - border-bottom: 1px solid #333; } .reaction > .note { From e3aa1dc548a082fa7f0f7e3a3cb876920a83616c Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Tue, 10 Jan 2023 08:09:09 +0100 Subject: [PATCH 06/15] profile improvements --- src/element/ProfileImage.js | 10 +++++----- src/pages/Layout.css | 6 +++++- src/pages/Layout.js | 10 +++++++--- src/pages/ProfilePage.css | 18 ++++++++++++++++++ src/pages/ProfilePage.js | 13 +++++++++---- src/pages/SettingsPage.css | 3 ++- 6 files changed, 46 insertions(+), 14 deletions(-) diff --git a/src/element/ProfileImage.js b/src/element/ProfileImage.js index 977d574..b75c842 100644 --- a/src/element/ProfileImage.js +++ b/src/element/ProfileImage.js @@ -6,9 +6,7 @@ import { Link, useNavigate } from "react-router-dom"; import useProfile from "../feed/ProfileFeed"; import { profileLink } from "../Util"; -export default function ProfileImage(props) { - const pubkey = props.pubkey; - const subHeader = props.subHeader; +export default function ProfileImage({ pubkey, subHeader, showUsername = true }) { const navigate = useNavigate(); const user = useProfile(pubkey); @@ -25,10 +23,12 @@ export default function ProfileImage(props) { return (
navigate(profileLink(pubkey))} /> -
+ {showUsername && ( +
{name} {subHeader ?
{subHeader}
: null} -
+
+ )}
) } \ No newline at end of file diff --git a/src/pages/Layout.css b/src/pages/Layout.css index 20ef3ef..e4f7bfa 100644 --- a/src/pages/Layout.css +++ b/src/pages/Layout.css @@ -1,3 +1,7 @@ .notifications { margin-right: 10px; -} \ No newline at end of file +} + +.unread-count { + margin-left: .2em; +} diff --git a/src/pages/Layout.js b/src/pages/Layout.js index 21eb822..c7d5fee 100644 --- a/src/pages/Layout.js +++ b/src/pages/Layout.js @@ -54,14 +54,18 @@ export default function Layout(props) { } function accountHeader() { - const unreadNotifications = notifications?.filter(a => (a.created_at * 1000) > readNotifications).length ?? 0; + const unreadNotifications = notifications?.filter(a => (a.created_at * 1000) > readNotifications).length; return ( <>
goToNotifications(e)}> - {unreadNotifications} + {unreadNotifications !== 0 && ( + + {unreadNotifications} + + )}
- + ) } diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css index 8724196..de0b091 100644 --- a/src/pages/ProfilePage.css +++ b/src/pages/ProfilePage.css @@ -18,6 +18,10 @@ margin: 0; } +.profile .avatar-wrapper { + margin: 10px; +} + .profile .avatar { width: 256px; height: 256px; @@ -25,6 +29,20 @@ border-radius: 100%; } +.profile .details { + margin-top: auto; + margin-bottom: auto; +} + +.profile .website { + margin-bottom: 10px; +} + +.profile .website::before { + content: '🔗 '; + font-size: 10px; +} + @media(max-width: 720px) { .profile { flex-direction: column; diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index c27fae3..13810a6 100644 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -40,7 +40,12 @@ export default function ProfilePage() { {user?.nip05 && }

{extractLinks([user?.about])}

- {user?.website ? {user?.website} : null} + + {user?.website && ( + + )} {lnurl ?
setShowLnQr(true)}> @@ -56,12 +61,12 @@ export default function ProfilePage() { return ( <>
-
+
-
- {details()} +
+ {details()}
diff --git a/src/pages/SettingsPage.css b/src/pages/SettingsPage.css index a78f5c5..b747e05 100644 --- a/src/pages/SettingsPage.css +++ b/src/pages/SettingsPage.css @@ -3,8 +3,9 @@ width: 256px; height: 256px; background-size: cover; - border-radius: 10px; + border-radius: 100%; cursor: pointer; + margin-bottom: 20px; } .settings .avatar .edit { From e074ed8060a93b901f3f085af2d346953b2d8c47 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Tue, 10 Jan 2023 10:18:46 +0100 Subject: [PATCH 07/15] css variables with light and dark variants --- src/Text.js | 2 +- src/element/Copy.css | 13 ++++---- src/element/Copy.js | 18 +++++++----- src/element/Invoice.css | 7 +++-- src/element/LNURLTip.css | 6 ++-- src/element/Modal.css | 4 +-- src/element/Note.css | 25 ++++++++++++---- src/element/Note.js | 7 ++--- src/element/NoteCreator.css | 2 +- src/element/NoteReaction.css | 4 +-- src/element/Relay.css | 4 +-- src/element/Relay.js | 4 +-- src/element/Thread.js | 2 +- src/index.css | 57 ++++++++++++++++++++++++++++-------- src/pages/ProfilePage.css | 11 ++++++- src/pages/ProfilePage.js | 2 +- src/pages/Root.css | 2 +- src/pages/SettingsPage.css | 3 +- 18 files changed, 113 insertions(+), 60 deletions(-) diff --git a/src/Text.js b/src/Text.js index 58a3c15..e5b3dd6 100644 --- a/src/Text.js +++ b/src/Text.js @@ -85,7 +85,7 @@ export function extractMentions(fragments, tags, users) { } } } - return {matchTag[0]}?; + return {matchTag[0]}?; } else { return match; } diff --git a/src/element/Copy.css b/src/element/Copy.css index 3a94966..2ed09eb 100644 --- a/src/element/Copy.css +++ b/src/element/Copy.css @@ -1,14 +1,15 @@ .copy { user-select: none; cursor: pointer; + -webkit-tap-highlight-color: transparent; } .copy .body { font-family: monospace; font-size: 14px; - margin: 0; - width: 18em; - overflow: hidden; - white-space: nowrap; - text-overflow: ellipsis; -} \ No newline at end of file + background: var(--gray-secondary); + color: var(--font-color); + padding: 2px 4px; + border-radius: 10px; + margin: 0 4px 0 0; +} diff --git a/src/element/Copy.js b/src/element/Copy.js index f70d880..4bc922b 100644 --- a/src/element/Copy.js +++ b/src/element/Copy.js @@ -3,19 +3,21 @@ import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import { faCopy, faCheck } from "@fortawesome/free-solid-svg-icons"; import { useCopy } from "../useCopy"; -export default function Copy(props) { - +export default function Copy({ text, maxSize = 32 }) { const { copy, copied, error } = useCopy(); + const sliceLength = maxSize / 2 + const trimmed = text.length > maxSize ? `${text.slice(0, sliceLength)}:${text.slice(-sliceLength)}` : text + return ( -
copy(props.text)}> +
copy(text)}> + + {trimmed} + -

- {props.text} -

) -} \ No newline at end of file +} diff --git a/src/element/Invoice.css b/src/element/Invoice.css index 3f2021f..9651fa5 100644 --- a/src/element/Invoice.css +++ b/src/element/Invoice.css @@ -1,6 +1,7 @@ .note-invoice { + background: var(--bg-color); border-radius: 10px; - border: 1px solid #444; + border: 1px solid var(--gray-tertiary); padding: 10px; } @@ -9,5 +10,5 @@ } .note-invoice small { - color: #666; -} \ No newline at end of file + color: var(--gray-medium); +} diff --git a/src/element/LNURLTip.css b/src/element/LNURLTip.css index 785f319..3fea13c 100644 --- a/src/element/LNURLTip.css +++ b/src/element/LNURLTip.css @@ -1,5 +1,5 @@ .lnurl-tip { - background-color: #222; + background-color: var(--gray-secondary); padding: 10px; border-radius: 10px; width: 500px; @@ -12,7 +12,7 @@ } .lnurl-tip .btn:hover { - background-color: #333; + background-color: var(--gray); } .lnurl-tip .invoice { @@ -39,4 +39,4 @@ .lnurl-tip .invoice .actions { text-align: center; } -} \ No newline at end of file +} diff --git a/src/element/Modal.css b/src/element/Modal.css index 55be6fe..d690343 100644 --- a/src/element/Modal.css +++ b/src/element/Modal.css @@ -4,8 +4,8 @@ position: fixed; top: 0; left: 0; - background-color: rgba(0,0,0, 0.8); + background-color: var(--modal-bg-color); display: flex; justify-content: center; align-items: center; -} \ No newline at end of file +} diff --git a/src/element/Note.css b/src/element/Note.css index 232379e..d32478f 100644 --- a/src/element/Note.css +++ b/src/element/Note.css @@ -1,10 +1,15 @@ .note { margin-bottom: 10px; - border-bottom: 1px solid #333; + border-bottom: 1px solid var(--gray); +} + +.note.thread { + border-bottom: none; } .note.active { - background-color: #222; + background-color: var(--gray-secondary); + border-left: 3px solid var(--highlight); } .note > .header > .pfp { @@ -13,13 +18,13 @@ .note > .header .reply { font-size: small; - color: #999; + color: var(--gray-light); } .note > .header > .info { font-size: small; white-space: nowrap; - color: #999; + color: var(--gray-light); } .note > .body { @@ -48,6 +53,14 @@ } .indented { - border-left: 3px solid #444; + border-left: 3px solid var(--gray-tertiary); padding-left: 2px; -} \ No newline at end of file +} +.indented .note { + border-bottom: none; + padding: 0 4px; +} + +.note .body a { + color: var(--highlight); +} diff --git a/src/element/Note.js b/src/element/Note.js index 085fe74..c78b0a7 100644 --- a/src/element/Note.js +++ b/src/element/Note.js @@ -12,12 +12,9 @@ import NoteTime from "./NoteTime"; export default function Note(props) { const navigate = useNavigate(); - const data = props.data; const opt = props.options; const dataEvent = props["data-ev"]; - const reactions = props.reactions; - const deletion = props.deletion; - const hightlight = props.hightlight; + const { data, isThread, reactions, deletion, hightlight } = props const users = useSelector(s => s.users?.users); const ev = dataEvent ?? Event.FromObject(data); @@ -81,7 +78,7 @@ export default function Note(props) { } return ( -
+
{options.showHeader ?
diff --git a/src/element/NoteCreator.css b/src/element/NoteCreator.css index 866700a..95aacdf 100644 --- a/src/element/NoteCreator.css +++ b/src/element/NoteCreator.css @@ -1,6 +1,6 @@ .note-creator { margin-bottom: 10px; - background-color: #333; + background-color: var(--gray); border-radius: 10px; overflow: hidden; } diff --git a/src/element/NoteReaction.css b/src/element/NoteReaction.css index 8c47124..ecc0396 100644 --- a/src/element/NoteReaction.css +++ b/src/element/NoteReaction.css @@ -4,7 +4,7 @@ .reaction > .note { margin: 5px; - border: 1px solid #333; + border: 1px solid var(--gray); border-radius: 10px; padding: 5px; } @@ -20,4 +20,4 @@ .reaction > .header > .info { color: #999; font-size: small; -} \ No newline at end of file +} diff --git a/src/element/Relay.css b/src/element/Relay.css index 93e1f79..7ff2073 100644 --- a/src/element/Relay.css +++ b/src/element/Relay.css @@ -1,10 +1,10 @@ .relay { margin-bottom: 10px; - background-color: #222; + background-color: var(--gray-secondary); border-radius: 5px; text-align: start; } .relay > div { padding: 5px; -} \ No newline at end of file +} diff --git a/src/element/Relay.js b/src/element/Relay.js index 2d3ac59..7ab1382 100644 --- a/src/element/Relay.js +++ b/src/element/Relay.js @@ -24,7 +24,7 @@ export default function Relay(props) { <>
- +
{name} @@ -47,4 +47,4 @@ export default function Relay(props) {
) -} \ No newline at end of file +} diff --git a/src/element/Thread.js b/src/element/Thread.js index 0a8a938..313a710 100644 --- a/src/element/Thread.js +++ b/src/element/Thread.js @@ -47,7 +47,7 @@ export default function Thread(props) { function renderRoot() { if (root) { - return + return } else { return Loading thread root.. ({notes.length} notes loaded) diff --git a/src/index.css b/src/index.css index 6635e42..fe1c44f 100644 --- a/src/index.css +++ b/src/index.css @@ -1,12 +1,38 @@ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); +:root { + --font-color: #fff; + --bg-color: #000; + --modal-bg-color: rgba(0,0,0, 0.8); + --gray-superlight: #eee; + --gray-light: #999; + --gray-medium: #666; + --gray: #333; + --gray-secondary: #222; + --gray-tertiary: #444; + --highlight: #bada55; + --error: red; + --success: green; +} + +@media (prefers-color-scheme: light) { + :root { + --font-color: #000; + --bg-color: #fff; + --highlight: #ff9900; + --gray: #ccc; + --gray-secondary: #ddd; + --gray-tertiary: #eee; + } +} + body { margin: 0; font-family: 'Montserrat', sans-serif; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; - background-color: #000; - color: #fff; + background-color: var(--bg-color); + color: var(--font-color); } code { @@ -42,19 +68,20 @@ code { border-radius: 5px; cursor: pointer; user-select: none; - background-color: #000; + background-color: var(--bg-color); border: 1px solid; display: inline-block; } .btn.active { border: 2px solid; - background-color: #222; + background-color: var(--gray-secondary); + color: var(--font-color); font-weight: bold; } .btn:hover { - background-color: #333; + background-color: var(--gray); } .btn-sm { @@ -73,8 +100,12 @@ input[type="text"], input[type="password"], input[type="number"], textarea { padding: 10px; border-radius: 5px; border: 0; - background-color: #333; - color: #eee; + background-color: var(--gray); + color: var(--font-color); +} + +textarea:placeholder { + color: var(--gray-superlight); } .flex { @@ -122,7 +153,7 @@ a { span.pill { display: inline-block; - background-color: #333; + background-color: var(--gray); padding: 2px 10px; border-radius: 10px; user-select: none; @@ -130,7 +161,8 @@ span.pill { } span.pill.active { - background-color: #444; + background-color: var(--gray-tertiary); + color: var(--font-color); font-weight: bold; } @@ -186,7 +218,7 @@ div.form-group > div:nth-child(2) input { .modal .modal-content > div { padding: 10px; border-radius: 10px; - background-color: #333; + background-color: var(--gray); margin-top: 5vh; } @@ -225,10 +257,9 @@ body.scroll-lock { } .tabs > div.active { - background-color: #222; font-weight: bold; } .error { - color: red; -} \ No newline at end of file + color: var(--error); +} diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css index de0b091..f40eddb 100644 --- a/src/pages/ProfilePage.css +++ b/src/pages/ProfilePage.css @@ -19,7 +19,7 @@ } .profile .avatar-wrapper { - margin: 10px; + margin: auto 10px; } .profile .avatar { @@ -32,10 +32,12 @@ .profile .details { margin-top: auto; margin-bottom: auto; + overflow: hidden; } .profile .website { margin-bottom: 10px; + color: var(--highlight); } .profile .website::before { @@ -53,3 +55,10 @@ width: 100%; } } + +@media(max-width: 420px) { + .profile .name { flex-direction: column; } + .profile .name .btn { + margin-top: 5px; + } +} diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index 13810a6..c013b28 100644 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -78,4 +78,4 @@ export default function ProfilePage() { ) -} \ No newline at end of file +} diff --git a/src/pages/Root.css b/src/pages/Root.css index c85ce5d..2b72028 100644 --- a/src/pages/Root.css +++ b/src/pages/Root.css @@ -1,5 +1,5 @@ .root-tabs > div { padding: 5px 0; - background-color: #333; + background-color: var(--gray); border-radius: 10px; } diff --git a/src/pages/SettingsPage.css b/src/pages/SettingsPage.css index b747e05..cf2c2ef 100644 --- a/src/pages/SettingsPage.css +++ b/src/pages/SettingsPage.css @@ -1,4 +1,3 @@ - .settings .avatar { width: 256px; height: 256px; @@ -15,7 +14,7 @@ width: 100%; height: 100%; opacity: 0; - background-color: black; + background-color: var(--bg-color); } .settings .avatar .edit:hover { From b4b928cef12118db5cc533676027d8d4992c27ab Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Tue, 10 Jan 2023 10:52:51 +0100 Subject: [PATCH 08/15] fix fullscreen attr --- src/Text.js | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Text.js b/src/Text.js index e5b3dd6..e2a56c0 100644 --- a/src/Text.js +++ b/src/Text.js @@ -38,7 +38,7 @@ function transformHttpLink(a) { title="YouTube video player" frameBorder="0" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture; web-share" - allowfullscreen="" + allowFullScreen="" />
From 17c1d072f4eea58d5d55a32bb133a976ffacde33 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Tue, 10 Jan 2023 10:53:15 +0100 Subject: [PATCH 09/15] dont overindent active note --- src/element/Note.css | 14 ++++++++------ 1 file changed, 8 insertions(+), 6 deletions(-) diff --git a/src/element/Note.css b/src/element/Note.css index d32478f..90e570e 100644 --- a/src/element/Note.css +++ b/src/element/Note.css @@ -7,11 +7,6 @@ border-bottom: none; } -.note.active { - background-color: var(--gray-secondary); - border-left: 3px solid var(--highlight); -} - .note > .header > .pfp { flex-grow: 1; } @@ -56,9 +51,16 @@ border-left: 3px solid var(--gray-tertiary); padding-left: 2px; } + +.indented .active { + margin-left: -3px; + border-left: 3px solid var(--highlight); +} + + .indented .note { border-bottom: none; - padding: 0 4px; + padding: 4px; } .note .body a { From 28da0aeb051f355e2644fdcb4a54973a3fe788f8 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Tue, 10 Jan 2023 10:53:28 +0100 Subject: [PATCH 10/15] display name edition in settings --- src/pages/SettingsPage.js | 9 +++++++++ 1 file changed, 9 insertions(+) diff --git a/src/pages/SettingsPage.js b/src/pages/SettingsPage.js index 2e9630f..9fea231 100644 --- a/src/pages/SettingsPage.js +++ b/src/pages/SettingsPage.js @@ -20,6 +20,7 @@ export default function SettingsPage(props) { const publisher = useEventPublisher(); const [name, setName] = useState(""); + const [displayName, setDisplayName] = useState(""); const [picture, setPicture] = useState(""); const [about, setAbout] = useState(""); const [website, setWebsite] = useState(""); @@ -31,6 +32,7 @@ export default function SettingsPage(props) { useEffect(() => { if (user) { setName(user.name ?? ""); + setDisplayName(user.display_name ?? "") setPicture(user.picture ?? ""); setAbout(user.about ?? ""); setWebsite(user.website ?? ""); @@ -45,6 +47,7 @@ export default function SettingsPage(props) { let userCopy = { ...user, name, + display_name: displayName, about, picture, website, @@ -102,6 +105,12 @@ export default function SettingsPage(props) { setName(e.target.value)} />
+
+
Display name:
+
+ setDisplayName(e.target.value)} /> +
+
About:
From b32f3544cc9a124285b0856f631fed5ba486d77a Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Tue, 10 Jan 2023 11:06:51 +0100 Subject: [PATCH 11/15] nip05 ready for light mode --- src/element/Nip05.css | 6 +++--- src/element/Nip05.js | 4 ++-- src/element/Note.css | 3 ++- src/index.css | 2 ++ src/pages/ProfilePage.js | 2 +- 5 files changed, 10 insertions(+), 7 deletions(-) diff --git a/src/element/Nip05.css b/src/element/Nip05.css index ead258d..bb7d10d 100644 --- a/src/element/Nip05.css +++ b/src/element/Nip05.css @@ -2,15 +2,15 @@ justify-content: flex-start; align-items: center; font-size: 14px; - margin: .2em 0; + margin: .2em; } .nip05 .nick { - color: #999; + color: var(--gray-light); } .nip05 .domain { - color: #DDD; + color: var(--gray-superlight); } .nip05 .badge { diff --git a/src/element/Nip05.js b/src/element/Nip05.js index 8097609..70e7eed 100644 --- a/src/element/Nip05.js +++ b/src/element/Nip05.js @@ -37,7 +37,7 @@ const Nip05 = ({ nip05, pubkey }) => { {isVerified && ( @@ -46,7 +46,7 @@ const Nip05 = ({ nip05, pubkey }) => { {couldNotVerify && ( diff --git a/src/element/Note.css b/src/element/Note.css index 90e570e..3b5566f 100644 --- a/src/element/Note.css +++ b/src/element/Note.css @@ -53,7 +53,8 @@ } .indented .active { - margin-left: -3px; + background-color: var(--gray-tertiary); + margin-left: -5px; border-left: 3px solid var(--highlight); } diff --git a/src/index.css b/src/index.css index fe1c44f..f75634e 100644 --- a/src/index.css +++ b/src/index.css @@ -23,6 +23,8 @@ --gray: #ccc; --gray-secondary: #ddd; --gray-tertiary: #eee; + --gray-superlight: #333; + --gray-light: #555; } } diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index c013b28..0e46260 100644 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -33,12 +33,12 @@ export default function ProfilePage() {

{user?.display_name || user?.name}

+ {user?.nip05 && }
{isMe ?
navigate("/settings")}>Settings
: }
- {user?.nip05 && }

{extractLinks([user?.about])}

{user?.website && ( From e6abbcbc44eea1b9cedf38c18f7ebfbbcf923c2d Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Tue, 10 Jan 2023 12:27:28 +0100 Subject: [PATCH 12/15] better buttons and ln address on profile --- src/element/FollowButton.js | 5 ++-- src/element/Note.js | 2 +- src/index.css | 57 ++++++++++++++++++++++++++++++------- src/pages/ProfilePage.css | 41 ++++++++++++++++++++++++-- src/pages/ProfilePage.js | 27 +++++++++++------- src/pages/Root.css | 3 +- src/pages/Root.js | 7 ++--- 7 files changed, 108 insertions(+), 34 deletions(-) diff --git a/src/element/FollowButton.js b/src/element/FollowButton.js index 7205ffa..3eb9eb8 100644 --- a/src/element/FollowButton.js +++ b/src/element/FollowButton.js @@ -3,9 +3,11 @@ import useEventPublisher from "../feed/EventPublisher"; export default function FollowButton(props) { const pubkey = props.pubkey; - const className = props.className ? `btn ${props.className}` : "btn"; const publiser = useEventPublisher(); const follows = useSelector(s => s.login.follows); + let isFollowing = follows?.includes(pubkey) ?? false; + const baseClassName = isFollowing ? `btn btn-warn` : `btn btn-success` + const className = props.className ? `${baseClassName} ${props.className}` : `${baseClassName}`; async function follow(pubkey) { let ev = await publiser.addFollow(pubkey); @@ -17,7 +19,6 @@ export default function FollowButton(props) { publiser.broadcast(ev); } - let isFollowing = follows?.includes(pubkey) ?? false; return (
isFollowing ? unfollow(pubkey) : follow(pubkey)}> {isFollowing ? "Unfollow" : "Follow"} diff --git a/src/element/Note.js b/src/element/Note.js index c78b0a7..1d34d1f 100644 --- a/src/element/Note.js +++ b/src/element/Note.js @@ -78,7 +78,7 @@ export default function Note(props) { } return ( -
+
{options.showHeader ?
diff --git a/src/index.css b/src/index.css index f75634e..1c2101a 100644 --- a/src/index.css +++ b/src/index.css @@ -1,28 +1,29 @@ @import url('https://fonts.googleapis.com/css2?family=Montserrat:wght@400;700&display=swap'); :root { - --font-color: #fff; + --font-color: #FFF; --bg-color: #000; --modal-bg-color: rgba(0,0,0, 0.8); - --gray-superlight: #eee; + --gray-superlight: #EEE; --gray-light: #999; --gray-medium: #666; --gray: #333; --gray-secondary: #222; --gray-tertiary: #444; - --highlight: #bada55; - --error: red; - --success: green; + --highlight: #A9E000; + --error: #FF6053; + --success: #2AD544; } @media (prefers-color-scheme: light) { :root { --font-color: #000; - --bg-color: #fff; - --highlight: #ff9900; - --gray: #ccc; - --gray-secondary: #ddd; - --gray-tertiary: #eee; + --bg-color: #FFF; + --highlight: #FF9B00; + --modal-bg-color: rgba(240, 240, 240, 0.8); + --gray: #CCC; + --gray-secondary: #DDD; + --gray-tertiary: #EEE; --gray-superlight: #333; --gray-light: #555; } @@ -75,6 +76,14 @@ code { display: inline-block; } +.btn-warn { + border-color: var(--error); +} + +.btn-success { + border-color: var(--success); +} + .btn.active { border: 2px solid; background-color: var(--gray-secondary); @@ -265,3 +274,31 @@ body.scroll-lock { .error { color: var(--error); } + +.root-tabs { + position: fixed; + bottom: -16px; + left: 0; + background-color: var(--modal-bg-color); + height: 44px; + width: 100vw; + padding: 0 2px; + align-items: center; + justify-content: flex-start; +} + +.root-tab { + border-bottom: 3px solid var(--gray-secondary); +} +.root-tab.active { + border-bottom: 3px solid var(--highlight); +} + +@media(min-width: 720px) { + .root-tabs { + position: initial; + width: 100%; + padding: 0; + background-color: transparent; + } +} diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css index f40eddb..4911e09 100644 --- a/src/pages/ProfilePage.css +++ b/src/pages/ProfilePage.css @@ -36,8 +36,18 @@ } .profile .website { - margin-bottom: 10px; + padding-left: 0; color: var(--highlight); + margin-bottom: 2px; +} + +.profile .lnurl { + padding-left: 0; +} + +.profile .btn-icon { + padding: 2px 4px; + margin-left: 4px; } .profile .website::before { @@ -45,20 +55,45 @@ font-size: 10px; } +.profile .lnurl::before { + content: '⚡️ '; + font-size: 10px; +} + @media(max-width: 720px) { .profile { flex-direction: column; align-items: center; } .profile > div:last-child { - margin: 0; + margin: 5px 0; width: 100%; } } -@media(max-width: 420px) { +@media(max-width: 360px) { .profile .name { flex-direction: column; } .profile .name .btn { margin-top: 5px; } } + +.tabs { + display: flex; + justify-content: flex-start; + width: 100%; + margin: 10px 0; +} + +.tabs > div { + margin-right: 0; +} + +.tab { + margin: 0; + padding: 4px; + border-bottom: 3px solid var(--gray-secondary); +} +.tab.active { + border-bottom: 3px solid var(--highlight); +} diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index 0e46260..d2c311d 100644 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -4,7 +4,7 @@ import Nostrich from "../nostrich.jpg"; import { useState } from "react"; import { useSelector } from "react-redux"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faQrcode } from "@fortawesome/free-solid-svg-icons"; +import { faQrcode, faGear } from "@fortawesome/free-solid-svg-icons"; import { useNavigate, useParams } from "react-router-dom"; import useProfile from "../feed/ProfileFeed"; @@ -36,22 +36,27 @@ export default function ProfilePage() { {user?.nip05 && }
- {isMe ?
navigate("/settings")}>Settings
: } + {isMe ? ( +
navigate("/settings")}> + +
+ ) : + }

{extractLinks([user?.about])}

{user?.website && ( -
+ )} - {lnurl ?
-
setShowLnQr(true)}> - + {lnurl ?
+ {lnurl} +
setShowLnQr(true)}> +
-
  ⚡️ {lnurl}
: null} setShowLnQr(false)} /> @@ -70,10 +75,10 @@ export default function ProfilePage() {
-
Notes
-
Reactions
-
Followers
-
Follows
+
Notes
+
Reactions
+
Followers
+
Follows
diff --git a/src/pages/Root.css b/src/pages/Root.css index 2b72028..6363b30 100644 --- a/src/pages/Root.css +++ b/src/pages/Root.css @@ -1,5 +1,4 @@ .root-tabs > div { padding: 5px 0; - background-color: var(--gray); - border-radius: 10px; + margin-right: 0; } diff --git a/src/pages/Root.js b/src/pages/Root.js index b71e096..5d41e58 100644 --- a/src/pages/Root.js +++ b/src/pages/Root.js @@ -29,15 +29,12 @@ export default function RootPage() { {pubKey ? <>
-
setTab(RootTab.Follows)}> +
setTab(RootTab.Follows)}> Follows
-
setTab(RootTab.Global)}> +
setTab(RootTab.Global)}> Global
-
- Messages -
: null} {followHints()} From e93776f824b0c66a4ea713af5b2b4d4e6469b683 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Tue, 10 Jan 2023 12:27:48 +0100 Subject: [PATCH 13/15] spinner for nip05 verification --- src/element/Nip05.css | 6 +----- src/element/Nip05.js | 35 ++++++++++++++++++++--------------- 2 files changed, 21 insertions(+), 20 deletions(-) diff --git a/src/element/Nip05.css b/src/element/Nip05.css index bb7d10d..f80f464 100644 --- a/src/element/Nip05.css +++ b/src/element/Nip05.css @@ -15,9 +15,5 @@ .nip05 .badge { margin-left: .2em; -} - -.nip05 .error { - margin-top: .2em; - margin-left: .2em; + margin-top: .1em; } diff --git a/src/element/Nip05.js b/src/element/Nip05.js index 70e7eed..8434703 100644 --- a/src/element/Nip05.js +++ b/src/element/Nip05.js @@ -1,7 +1,7 @@ import { useState, useEffect } from "react"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; -import { faCheck, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons"; +import { faCheck, faSpinner, faTriangleExclamation } from "@fortawesome/free-solid-svg-icons"; import './Nip05.css' @@ -28,30 +28,35 @@ const Nip05 = ({ nip05, pubkey }) => { }, [nip05, name, domain]) return ( -
+
ev.stopPropagation()}> {!isDefaultUser &&
{name}
}
{!isDefaultUser && '@'} {domain}
- {isVerified && ( - - - - )} - {couldNotVerify && ( - + + {!isVerified && !couldNotVerify && ( + + )} + {isVerified && ( + + )} + {couldNotVerify && ( - - )} + )} +
) } From 23024b94c6eeff7e01e996c6e83d243969f6955f Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Tue, 10 Jan 2023 13:41:55 +0100 Subject: [PATCH 14/15] larger icon buttons --- src/element/FollowButton.js | 4 +++- src/pages/ProfilePage.css | 2 +- src/pages/ProfilePage.js | 4 ++-- 3 files changed, 6 insertions(+), 4 deletions(-) diff --git a/src/element/FollowButton.js b/src/element/FollowButton.js index 3eb9eb8..1de67e5 100644 --- a/src/element/FollowButton.js +++ b/src/element/FollowButton.js @@ -1,5 +1,7 @@ import { useSelector } from "react-redux"; import useEventPublisher from "../feed/EventPublisher"; +import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import { faUserMinus, faUserPlus } from "@fortawesome/free-solid-svg-icons"; export default function FollowButton(props) { const pubkey = props.pubkey; @@ -21,7 +23,7 @@ export default function FollowButton(props) { return (
isFollowing ? unfollow(pubkey) : follow(pubkey)}> - {isFollowing ? "Unfollow" : "Follow"} +
) } \ No newline at end of file diff --git a/src/pages/ProfilePage.css b/src/pages/ProfilePage.css index 4911e09..547eb13 100644 --- a/src/pages/ProfilePage.css +++ b/src/pages/ProfilePage.css @@ -46,7 +46,7 @@ } .profile .btn-icon { - padding: 2px 4px; + padding: 6px; margin-left: 4px; } diff --git a/src/pages/ProfilePage.js b/src/pages/ProfilePage.js index d2c311d..16753dc 100644 --- a/src/pages/ProfilePage.js +++ b/src/pages/ProfilePage.js @@ -38,7 +38,7 @@ export default function ProfilePage() {
{isMe ? (
navigate("/settings")}> - +
) : } @@ -55,7 +55,7 @@ export default function ProfilePage() { {lnurl ?
{lnurl}
setShowLnQr(true)}> - +
: null} setShowLnQr(false)} /> From 40c280b156b800c4458a8f1233bd8dd742dcf9c8 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Tue, 10 Jan 2023 13:46:11 +0100 Subject: [PATCH 15/15] remove fixed footer --- src/index.css | 19 ------------------- 1 file changed, 19 deletions(-) diff --git a/src/index.css b/src/index.css index 1c2101a..3023b5b 100644 --- a/src/index.css +++ b/src/index.css @@ -267,21 +267,11 @@ body.scroll-lock { margin: 0; } -.tabs > div.active { - font-weight: bold; -} - .error { color: var(--error); } .root-tabs { - position: fixed; - bottom: -16px; - left: 0; - background-color: var(--modal-bg-color); - height: 44px; - width: 100vw; padding: 0 2px; align-items: center; justify-content: flex-start; @@ -293,12 +283,3 @@ body.scroll-lock { .root-tab.active { border-bottom: 3px solid var(--highlight); } - -@media(min-width: 720px) { - .root-tabs { - position: initial; - width: 100%; - padding: 0; - background-color: transparent; - } -}