From 3d16b9a62a24dbb2f085dcbf653446e9be8b310f Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Sun, 5 Feb 2023 21:58:52 +0100 Subject: [PATCH 1/9] remove bolt from zaps --- src/Element/Zap.css | 17 +++++------------ 1 file changed, 5 insertions(+), 12 deletions(-) diff --git a/src/Element/Zap.css b/src/Element/Zap.css index c9722dc7..f97dee59 100644 --- a/src/Element/Zap.css +++ b/src/Element/Zap.css @@ -2,12 +2,13 @@ min-height: unset; } -.zap .header .pfp { - overflow: hidden; +.zap .header { + align-items: center; + flex-direction: row; } -.zap .header { - flex-direction: row; +.zap .header .pfp { + overflow: hidden; } .zap .header .amount { @@ -33,10 +34,6 @@ font-size: 18px; } -.zap .amount:before { - content: '⚡️ '; -} - .top-zap .amount:before { content: ''; } @@ -81,10 +78,6 @@ font-weight: bold; } -.rest-zaps:before { - content: ", "; -} - .note.zap > .body { margin-bottom: 0; } -- 2.45.2 From a53e63ea2ea36233555b4ab78aaa35c36ad4ad63 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Sun, 5 Feb 2023 21:59:11 +0100 Subject: [PATCH 2/9] profile tweaks --- src/Pages/ProfilePage.css | 107 +++++++++++++++++--------------------- src/Pages/ProfilePage.tsx | 1 - src/index.css | 4 +- 3 files changed, 49 insertions(+), 63 deletions(-) diff --git a/src/Pages/ProfilePage.css b/src/Pages/ProfilePage.css index be5a58d6..82d421fe 100644 --- a/src/Pages/ProfilePage.css +++ b/src/Pages/ProfilePage.css @@ -9,11 +9,50 @@ height: 160px; object-fit: cover; margin-bottom: -60px; - 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; } +.profile .profile-actions { + position: absolute; + top: 80px; + right: 0; + display: flex; + flex-direction: row; + align-items: center; +} + +.profile .icon-actions { + display: flex; + flex-direction: row; + align-items: center; +} + +@media (min-width: 520px) { + .profile .profile-actions { + top: 120px; + } +} + +.profile .profile-actions button:not(:last-child) { + margin-right: 8px; +} + +.profile .profile-actions button.icon:not(:last-child) { + margin-right: 0; +} + + +@media (min-width: 520px) { + .profile .banner { + width: 100%; + max-width: 720px; + height: 300px; + } + .profile .profile-actions button.icon:not(:last-child) { + margin-right: 2px; + } +} + .profile .profile-wrapper { margin: 0 16px; width: calc(100% - 32px); @@ -61,13 +100,12 @@ } .profile .details { - width: 100%; - margin-top: 12px; - background-color: var(--note-bg); - padding: 12px 16px; - border-radius: 16px; - margin: 0 auto; - margin-bottom: 12px; + width: 100%; + color: var(--font-secondary-color); + margin-bottom: 12px; + font-weight: 400; + font-size: 14px; + line-height: 22px; } .profile .details p { @@ -105,16 +143,6 @@ margin-bottom: 12px; } -.profile h3 { - color: var(--font-secondary-color); - font-size: 10px; - letter-spacing: .11em; - font-weight: 600; - line-height: 12px; - text-transform: uppercase; - margin-left: 12px; -} - .profile .website { margin: 4px 0; display: flex; @@ -163,47 +191,6 @@ height: 12px; } -.profile .profile-actions { - position: absolute; - top: 80px; - right: 0; - display: flex; - flex-direction: row; - align-items: center; -} - -.profile .icon-actions { - display: flex; - flex-direction: row; - align-items: center; -} - -@media (min-width: 520px) { - .profile .profile-actions { - top: 120px; - } -} - -.profile .profile-actions button:not(:last-child) { - margin-right: 8px; -} - -.profile .profile-actions button.icon:not(:last-child) { - margin-right: 0; -} - -@media (min-width: 520px) { - .profile .banner { - width: 100%; - max-width: 720px; - height: 300px; - margin-bottom: -100px; - } - .profile .profile-actions button.icon:not(:last-child) { - margin-right: 2px; - } -} - .profile .npub { display: flex; flex-direction: row; diff --git a/src/Pages/ProfilePage.tsx b/src/Pages/ProfilePage.tsx index 00a538c1..b7fc62c5 100644 --- a/src/Pages/ProfilePage.tsx +++ b/src/Pages/ProfilePage.tsx @@ -108,7 +108,6 @@ export default function ProfilePage() { function bio() { return aboutText.length > 0 && ( <> -

Bio

{about}
diff --git a/src/index.css b/src/index.css index c429d067..bb32da1e 100644 --- a/src/index.css +++ b/src/index.css @@ -3,7 +3,7 @@ :root { --bg-color: #000; --font-color: #FFF; - --font-secondary-color: #555; + --font-secondary-color: #7B7B7B; --font-tertiary-color: #666; --font-size: 16px; --font-size-small: 14px; @@ -34,7 +34,7 @@ html.light { --bg-color: #F1F1F1; --font-color: #57534E; - --font-secondary-color: #B9B9B9; + --font-secondary-color: #7B7B7B; --font-tertiary-color: #F3F3F3; --highlight-light: #16AAC1; -- 2.45.2 From 3ec3e7f202ae28e1e4480408a1313da60bb5dc18 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Sun, 5 Feb 2023 22:04:15 +0100 Subject: [PATCH 3/9] nips and page width --- src/Element/Nip05.css | 25 +++++++++++++++---------- src/Element/ProfilePreview.tsx | 6 +++++- src/index.css | 21 ++++++++++----------- 3 files changed, 30 insertions(+), 22 deletions(-) diff --git a/src/Element/Nip05.css b/src/Element/Nip05.css index bdde8a85..44659672 100644 --- a/src/Element/Nip05.css +++ b/src/Element/Nip05.css @@ -1,4 +1,5 @@ .nip05 { + color: var(--font-secondary-color); justify-content: flex-start; align-items: center; font-weight: normal; @@ -8,21 +9,17 @@ text-decoration: line-through; } -.nip05 .nick { - color: var(--font-secondary-color); -} - .nip05 .domain { - color: var(--gray-light); + color: var(--font-secondary-color); + background-color: var(--font-secondary-color); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; text-fill-color: transparent; - background-color: var(--gray-light); } .nip05 .domain[data-domain="snort.social"] { - background-image: var(--nostrplebs-gradient); + background-image: var(--snort-gradient); } .nip05 .domain[data-domain="strike.army"] { @@ -30,15 +27,23 @@ } .nip05 .domain[data-domain="nostrplebs.com"] { - background-image: var(--nostrplebs-gradient); + color: var(--highlight); + background-color: var(--highlight); } .nip05 .domain[data-domain="nostrpurple.com"] { - background-image: var(--nostrplebs-gradient); + color: var(--highlight); + background-color: var(--highlight); } .nip05 .domain[data-domain="nostr.fan"] { - background-image: var(--nostrplebs-gradient); + color: var(--highlight); + background-color: var(--highlight); +} + +.nip05 .domain[data-domain="nostriches.net"] { + color: var(--highlight); + background-color: var(--highlight); } .nip05 .badge { diff --git a/src/Element/ProfilePreview.tsx b/src/Element/ProfilePreview.tsx index 83e9c49c..f1ca51ff 100644 --- a/src/Element/ProfilePreview.tsx +++ b/src/Element/ProfilePreview.tsx @@ -31,7 +31,11 @@ export default function ProfilePreview(props: ProfilePreviewProps) { {options.about ?
{user?.about}
: undefined} /> - {props.actions ?? } + {props.actions ?? ( +
+ +
+ )} } ) diff --git a/src/index.css b/src/index.css index bb32da1e..3944f474 100644 --- a/src/index.css +++ b/src/index.css @@ -3,7 +3,7 @@ :root { --bg-color: #000; --font-color: #FFF; - --font-secondary-color: #7B7B7B; + --font-secondary-color: #555; --font-tertiary-color: #666; --font-size: 16px; --font-size-small: 14px; @@ -16,15 +16,14 @@ --gray-superlight: #EEE; --gray-light: #999; - --gray-medium: #666; + --gray-medium: #7B7B7B; --gray: #333; --gray-secondary: #222; --gray-tertiary: #444; --gray-dark: #2B2B2B; - --gray-superdark: #171717; + --gray-superdark: #1A1A1A; --gray-gradient: linear-gradient(to bottom right, var(--gray-superlight), var(--gray), var(--gray-light)); --snort-gradient: linear-gradient(90deg, #A178FF 0%, #FF6BAF 108.33%); - --nostrplebs-gradient: linear-gradient(to bottom right, #ff3cac, #2b86c5); --invoice-gradient: linear-gradient(45deg, var(--note-bg) 50%, rgba(161, 120, 255, 0.2), rgba(255, 107, 175, .2) 108.33%); --paid-invoice-gradient: linear-gradient(45deg, var(--note-bg) 50%, rgba(161, 120, 255, .6), rgba(255, 107, 175, .6) 108.33%); --expired-invoice-gradient: linear-gradient(45deg, var(--note-bg) 50%, var(--gray), var(--gray-superdark)); @@ -34,7 +33,7 @@ html.light { --bg-color: #F1F1F1; --font-color: #57534E; - --font-secondary-color: #7B7B7B; + --font-secondary-color: #B9B9B9; --font-tertiary-color: #F3F3F3; --highlight-light: #16AAC1; @@ -78,7 +77,7 @@ code { @media (min-width: 720px) { .page { - width: 720px; + width: 586px; margin-left: auto; margin-right: auto; } @@ -241,17 +240,17 @@ button.icon:hover { .btn-rnd { border-radius: 100%; - border-color: var(--gray-superdark); - width: 32px; - height: 32px; + border-color: var(--gray-secondary); + width: 21px; + height: 21px; display: flex; align-items: center; justify-content: center; margin-right: 16px; } -.light .btn-rnd { - border-color: var(--gray); +@media (min-width: 520px) { + .btn-rnd { width: 32px; height: 32px } } textarea { -- 2.45.2 From 8265033b56787d574cb56a01e4aceb26150b39b7 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Sun, 5 Feb 2023 22:39:52 +0100 Subject: [PATCH 4/9] Settings page --- src/Element/ProfileImage.css | 6 +--- src/Icons/ArrowFront.tsx | 9 ++++++ src/Icons/Gear.tsx | 12 +++++++ src/Icons/Index.css | 12 +++++++ src/Icons/Logout.tsx | 11 +++++++ src/Icons/Profile.tsx | 11 +++++++ src/Icons/Relay.tsx | 11 +++++++ src/Pages/settings/Index.css | 24 +++++++++++++- src/Pages/settings/Index.tsx | 63 +++++++++++++++++++++++++++--------- src/index.css | 6 ++++ 10 files changed, 144 insertions(+), 21 deletions(-) create mode 100644 src/Icons/ArrowFront.tsx create mode 100644 src/Icons/Gear.tsx create mode 100644 src/Icons/Index.css create mode 100644 src/Icons/Logout.tsx create mode 100644 src/Icons/Profile.tsx create mode 100644 src/Icons/Relay.tsx diff --git a/src/Element/ProfileImage.css b/src/Element/ProfileImage.css index 7ae74f3b..4c83accc 100644 --- a/src/Element/ProfileImage.css +++ b/src/Element/ProfileImage.css @@ -1,6 +1,7 @@ .pfp { display: flex; align-items: center; + overflow: hidden; } .pfp .avatar-wrapper { @@ -17,11 +18,6 @@ text-decoration: none; } -.pfp a:hover { - text-decoration: underline; - text-decoration-color: var(--gray-superlight); -} - .pfp .username { display: flex; flex-direction: column; diff --git a/src/Icons/ArrowFront.tsx b/src/Icons/ArrowFront.tsx new file mode 100644 index 00000000..b7e0fa91 --- /dev/null +++ b/src/Icons/ArrowFront.tsx @@ -0,0 +1,9 @@ +const ArrowFront = () => { + return ( + + + + ) +} + +export default ArrowFront diff --git a/src/Icons/Gear.tsx b/src/Icons/Gear.tsx new file mode 100644 index 00000000..dba76592 --- /dev/null +++ b/src/Icons/Gear.tsx @@ -0,0 +1,12 @@ +import IconProps from './IconProps' + +const Gear = (props: IconProps) => { + return ( + + + + + ) +} + +export default Gear diff --git a/src/Icons/Index.css b/src/Icons/Index.css new file mode 100644 index 00000000..0ae84614 --- /dev/null +++ b/src/Icons/Index.css @@ -0,0 +1,12 @@ +.settings-nav .card { + font-weight: 600; + font-size: 16px; + line-height: 19px; +} + +.settings-row { + padding: 12px 16px; + display: flex; + flex-direction: row; + align-items: center; +} diff --git a/src/Icons/Logout.tsx b/src/Icons/Logout.tsx new file mode 100644 index 00000000..8e5c476f --- /dev/null +++ b/src/Icons/Logout.tsx @@ -0,0 +1,11 @@ +import IconProps from './IconProps' + +const Logout = (props: IconProps) => { + return ( + + + + ) +} + +export default Logout diff --git a/src/Icons/Profile.tsx b/src/Icons/Profile.tsx new file mode 100644 index 00000000..735e8983 --- /dev/null +++ b/src/Icons/Profile.tsx @@ -0,0 +1,11 @@ +import IconProps from './IconProps' + +const Profile = (props: IconProps) => { + return ( + + + + ) +} + +export default Profile diff --git a/src/Icons/Relay.tsx b/src/Icons/Relay.tsx new file mode 100644 index 00000000..eedef091 --- /dev/null +++ b/src/Icons/Relay.tsx @@ -0,0 +1,11 @@ +import IconProps from './IconProps' + +const Relay = (props: IconProps) => { + return ( + + + + ) +} + +export default Relay diff --git a/src/Pages/settings/Index.css b/src/Pages/settings/Index.css index afd1bd6a..0de74c9f 100644 --- a/src/Pages/settings/Index.css +++ b/src/Pages/settings/Index.css @@ -1,3 +1,25 @@ .settings-nav .card { cursor: pointer; -} \ No newline at end of file +} + +.settings-row { + display: flex; + flex-direction: row; + align-items: center; + font-weight: 600; + font-size: 16px; + line-height: 19px; + padding: 12px 16px; + background: var(--note-bg); + border-radius: 10px; + cursor: pointer; + margin-bottom: 10px; +} + +.settings-row:hover { + color: var(--highlight); +} + +.align-end { + margin-left: auto; +} diff --git a/src/Pages/settings/Index.tsx b/src/Pages/settings/Index.tsx index d6b9877d..c50444cd 100644 --- a/src/Pages/settings/Index.tsx +++ b/src/Pages/settings/Index.tsx @@ -4,6 +4,12 @@ import { useDispatch } from "react-redux"; import { useNavigate } from "react-router-dom"; import { faRightFromBracket, faCircleDollarToSlot, faGear, faPlug, faUser } from "@fortawesome/free-solid-svg-icons"; import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; +import ArrowFront from "Icons/ArrowFront"; +import Gear from "Icons/Gear"; +import Profile from "Icons/Profile"; +import Relay from "Icons/Relay"; +import Heart from "Icons/Heart"; +import Logout from "Icons/Logout"; import { logout } from "State/Login"; @@ -19,29 +25,56 @@ const SettingsIndex = () => { return ( <>
-
navigate("profile")}> - +
navigate("profile")}> +
+ +
+ Profile + +
+ +
-
navigate("relays")}> - - Relays +
navigate("relays")}> +
+ +
+ Relays +
+ +
-
navigate("preferences")}> - - Preferences +
navigate("preferences")}> +
+ +
+ Preferences +
+ +
-
navigate("/donate")}> - - Donate +
navigate("/donate")}> +
+ +
+ Donate +
+ +
-
- - Log Out +
+
+ +
+ Log Out +
+ +
) } -export default SettingsIndex; \ No newline at end of file +export default SettingsIndex; diff --git a/src/index.css b/src/index.css index 3944f474..85808230 100644 --- a/src/index.css +++ b/src/index.css @@ -539,6 +539,12 @@ body.scroll-lock { font-weight: 700; } +.main-content h2 { + font-weight: 600; + font-size: 32px; + line-height: 39px; +} + .main-content .h4 { margin-bottom: 25px; } -- 2.45.2 From eb7dc0dcb9ac88fe3ac27c6c38823f182cc869fc Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Sun, 5 Feb 2023 22:46:28 +0100 Subject: [PATCH 5/9] remove allowsnostr param --- src/Element/LNURLTip.tsx | 5 ++--- 1 file changed, 2 insertions(+), 3 deletions(-) diff --git a/src/Element/LNURLTip.tsx b/src/Element/LNURLTip.tsx index 550ed07f..e208e5b8 100644 --- a/src/Element/LNURLTip.tsx +++ b/src/Element/LNURLTip.tsx @@ -9,7 +9,6 @@ import Copy from "Element/Copy"; import useWebln from "Hooks/useWebln"; interface LNURLService { - allowsNostr?: boolean nostrPubkey?: HexKey minSendable?: number, maxSendable?: number, @@ -128,7 +127,7 @@ export default function LNURLTip(props: LNURLTipProps) { let url = '' const amountParam = `amount=${Math.floor(amount * 1000)}` const commentParam = comment ? `&comment=${encodeURIComponent(comment)}` : "" - if (payService.allowsNostr && payService.nostrPubkey && author) { + if (payService.nostrPubkey && author) { const ev = await publisher.zap(author, note, comment) const nostrParam = ev && `&nostr=${encodeURIComponent(JSON.stringify(ev.ToObject()))}` url = `${payService.callback}?${amountParam}${commentParam}${nostrParam}`; @@ -240,7 +239,7 @@ export default function LNURLTip(props: LNURLTipProps) { ) } - const defaultTitle = payService?.allowsNostr === true ? "⚡️ Send Zap!" : "⚡️ Send sats"; + const defaultTitle = payService?.nostrPubkey ? "⚡️ Send Zap!" : "⚡️ Send sats"; if (!show) return null; return ( -- 2.45.2 From 04212285b48bde40f7bc54d67d6b0f04a30bdb74 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Sun, 5 Feb 2023 22:51:56 +0100 Subject: [PATCH 6/9] secondary color --- src/Element/Note.css | 2 +- src/index.css | 4 ++-- 2 files changed, 3 insertions(+), 3 deletions(-) diff --git a/src/Element/Note.css b/src/Element/Note.css index d346cc66..cdabe870 100644 --- a/src/Element/Note.css +++ b/src/Element/Note.css @@ -161,7 +161,6 @@ color: var(--highlight); } - .light .indented .active { background-color: var(--gray-secondary); } @@ -181,6 +180,7 @@ .light .note.active>.footer>.reaction-pill.reacted { color: var(--highlight); } + .note-expand .body { max-height: 300px; overflow-y: hidden; diff --git a/src/index.css b/src/index.css index 85808230..a9148624 100644 --- a/src/index.css +++ b/src/index.css @@ -3,7 +3,7 @@ :root { --bg-color: #000; --font-color: #FFF; - --font-secondary-color: #555; + --font-secondary-color: #7B7B7B; --font-tertiary-color: #666; --font-size: 16px; --font-size-small: 14px; @@ -33,7 +33,7 @@ html.light { --bg-color: #F1F1F1; --font-color: #57534E; - --font-secondary-color: #B9B9B9; + --font-secondary-color: #7B7B7B; --font-tertiary-color: #F3F3F3; --highlight-light: #16AAC1; -- 2.45.2 From 9e850669f9bc9436c2ea1e44f3e050caed6e649a Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Sun, 5 Feb 2023 22:58:11 +0100 Subject: [PATCH 7/9] tweak font size --- src/Element/Zap.css | 6 ++++++ 1 file changed, 6 insertions(+) diff --git a/src/Element/Zap.css b/src/Element/Zap.css index f97dee59..1e2846e3 100644 --- a/src/Element/Zap.css +++ b/src/Element/Zap.css @@ -15,6 +15,12 @@ font-size: 32px; } +@media (max-width: 520px) { + .zap .header .amount { + font-size: 21px; + } +} + .zap .header .pfp { max-width: 72%; } -- 2.45.2 From cee0c9cd9285e5ff17e92a1fca63d57ad73cee91 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Sun, 5 Feb 2023 23:03:51 +0100 Subject: [PATCH 8/9] fix color --- src/Icons/Gear.tsx | 2 +- 1 file changed, 1 insertion(+), 1 deletion(-) diff --git a/src/Icons/Gear.tsx b/src/Icons/Gear.tsx index dba76592..d85a2960 100644 --- a/src/Icons/Gear.tsx +++ b/src/Icons/Gear.tsx @@ -4,7 +4,7 @@ const Gear = (props: IconProps) => { return ( - + ) } -- 2.45.2 From 8a2f23bbfe26a6b50040c5ddd29bf4dec2248be9 Mon Sep 17 00:00:00 2001 From: Alejandro Gomez Date: Sun, 5 Feb 2023 23:33:00 +0100 Subject: [PATCH 9/9] remove unused imports --- src/Pages/settings/Index.tsx | 2 -- 1 file changed, 2 deletions(-) diff --git a/src/Pages/settings/Index.tsx b/src/Pages/settings/Index.tsx index c50444cd..6b6dbfb9 100644 --- a/src/Pages/settings/Index.tsx +++ b/src/Pages/settings/Index.tsx @@ -2,8 +2,6 @@ import "./Index.css"; import { useDispatch } from "react-redux"; import { useNavigate } from "react-router-dom"; -import { faRightFromBracket, faCircleDollarToSlot, faGear, faPlug, faUser } from "@fortawesome/free-solid-svg-icons"; -import { FontAwesomeIcon } from "@fortawesome/react-fontawesome"; import ArrowFront from "Icons/ArrowFront"; import Gear from "Icons/Gear"; import Profile from "Icons/Profile"; -- 2.45.2