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 ( 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/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/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/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/Element/Zap.css b/src/Element/Zap.css index c9722dc7..1e2846e3 100644 --- a/src/Element/Zap.css +++ b/src/Element/Zap.css @@ -2,18 +2,25 @@ min-height: unset; } +.zap .header { + align-items: center; + flex-direction: row; +} + .zap .header .pfp { overflow: hidden; } -.zap .header { - flex-direction: row; -} - .zap .header .amount { font-size: 32px; } +@media (max-width: 520px) { + .zap .header .amount { + font-size: 21px; + } +} + .zap .header .pfp { max-width: 72%; } @@ -33,10 +40,6 @@ font-size: 18px; } -.zap .amount:before { - content: '⚡️ '; -} - .top-zap .amount:before { content: ''; } @@ -81,10 +84,6 @@ font-weight: bold; } -.rest-zaps:before { - content: ", "; -} - .note.zap > .body { margin-bottom: 0; } 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..d85a2960 --- /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/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/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..6b6dbfb9 100644 --- a/src/Pages/settings/Index.tsx +++ b/src/Pages/settings/Index.tsx @@ -2,8 +2,12 @@ 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"; +import Relay from "Icons/Relay"; +import Heart from "Icons/Heart"; +import Logout from "Icons/Logout"; import { logout } from "State/Login"; @@ -19,29 +23,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 c429d067..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; @@ -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: #B9B9B9; + --font-secondary-color: #7B7B7B; --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 { @@ -540,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; }