forked from Kieran/snort
better buttons and ln address on profile
This commit is contained in:
Alejandro Gomez
parent
b32f3544cc
commit
e6abbcbc44
@ -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 (
|
||||
<div className={className} onClick={() => isFollowing ? unfollow(pubkey) : follow(pubkey)}>
|
||||
{isFollowing ? "Unfollow" : "Follow"}
|
||||
|
||||
@ -78,7 +78,7 @@ export default function Note(props) {
|
||||
}
|
||||
|
||||
return (
|
||||
<div className={`note ${hightlight && "active"} ${isThread && "thread"}`}>
|
||||
<div className={`note ${hightlight ? "active" : ""} ${isThread ? "thread" : ""}`}>
|
||||
{options.showHeader ?
|
||||
<div className="header flex">
|
||||
<ProfileImage pubkey={ev.RootPubKey} subHeader={replyTag()} />
|
||||
|
||||
@ -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;
|
||||
}
|
||||
}
|
||||
|
||||
@ -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);
|
||||
}
|
||||
|
||||
@ -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 && <Nip05 nip05={user.nip05} pubkey={user.pubkey} />}
|
||||
</div>
|
||||
<div>
|
||||
{isMe ? <div className="btn" onClick={() => navigate("/settings")}>Settings</div> : <FollowButton pubkey={id} />}
|
||||
{isMe ? (
|
||||
<div className="btn btn-icon" onClick={() => navigate("/settings")}>
|
||||
<FontAwesomeIcon icon={faGear} size="sm" />
|
||||
</div>
|
||||
) : <FollowButton pubkey={id} />
|
||||
}
|
||||
</div>
|
||||
</div>
|
||||
<p>{extractLinks([user?.about])}</p>
|
||||
|
||||
{user?.website && (
|
||||
<div className="website">
|
||||
<div className="website f-ellipsis">
|
||||
<a href={user.website} target="_blank" rel="noreferrer">{user.website}</a>
|
||||
</div>
|
||||
)}
|
||||
|
||||
{lnurl ? <div className="flex">
|
||||
<div className="btn" onClick={(e) => setShowLnQr(true)}>
|
||||
<FontAwesomeIcon icon={faQrcode} size="xl" />
|
||||
{lnurl ? <div className="lnurl f-ellipsis">
|
||||
{lnurl}
|
||||
<div className="btn btn-icon" onClick={(e) => setShowLnQr(true)}>
|
||||
<FontAwesomeIcon icon={faQrcode} size="sm" />
|
||||
</div>
|
||||
<div className="f-ellipsis"> ⚡️ {lnurl}</div>
|
||||
</div> : null}
|
||||
<LNURLTip svc={lnurl} show={showLnQr} onClose={() => setShowLnQr(false)} />
|
||||
</>
|
||||
@ -70,10 +75,10 @@ export default function ProfilePage() {
|
||||
</div>
|
||||
</div>
|
||||
<div className="tabs">
|
||||
<div className="btn active">Notes</div>
|
||||
<div className="btn">Reactions</div>
|
||||
<div className="btn">Followers</div>
|
||||
<div className="btn">Follows</div>
|
||||
<div className="tab f-1 active">Notes</div>
|
||||
<div className="tab f-1">Reactions</div>
|
||||
<div className="tab f-1">Followers</div>
|
||||
<div className="tab f-1">Follows</div>
|
||||
</div>
|
||||
<Timeline pubkeys={id} />
|
||||
</>
|
||||
|
||||
@ -1,5 +1,4 @@
|
||||
.root-tabs > div {
|
||||
padding: 5px 0;
|
||||
background-color: var(--gray);
|
||||
border-radius: 10px;
|
||||
margin-right: 0;
|
||||
}
|
||||
|
||||
@ -29,15 +29,12 @@ export default function RootPage() {
|
||||
{pubKey ? <>
|
||||
<NoteCreator show={true}/>
|
||||
<div className="tabs root-tabs">
|
||||
<div className={`f-1 ${tab === RootTab.Follows ? "active" : ""}`} onClick={() => setTab(RootTab.Follows)}>
|
||||
<div className={`root-tab f-1 ${tab === RootTab.Follows ? "active" : ""}`} onClick={() => setTab(RootTab.Follows)}>
|
||||
Follows
|
||||
</div>
|
||||
<div className={`f-1 ${tab === RootTab.Global ? "active" : ""}`} onClick={() => setTab(RootTab.Global)}>
|
||||
<div className={`root-tab f-1 ${tab === RootTab.Global ? "active" : ""}`} onClick={() => setTab(RootTab.Global)}>
|
||||
Global
|
||||
</div>
|
||||
<div className="f-1">
|
||||
Messages
|
||||
</div>
|
||||
</div></> : null}
|
||||
{followHints()}
|
||||
<Timeline key={tab} pubkeys={follows} global={loggedOut || tab === RootTab.Global} />
|
||||
|
||||
Loading…
Reference in New Issue
Block a user