Tweak some sizes
This commit is contained in:
parent
06563c152a
commit
e4cdbcc0dc
@ -62,7 +62,7 @@ const Nip05 = ({ nip05, pubkey, verifyNip = true }: Nip05Params) => {
|
|||||||
<span className="domain" data-domain={domain?.toLowerCase()}>
|
<span className="domain" data-domain={domain?.toLowerCase()}>
|
||||||
{domain}
|
{domain}
|
||||||
</span>
|
</span>
|
||||||
<Icon name="badge" className="badge" />
|
<Icon name="badge" className="badge" size={16} />
|
||||||
</>
|
</>
|
||||||
)}
|
)}
|
||||||
</div>
|
</div>
|
||||||
|
@ -73,6 +73,8 @@
|
|||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
margin-left: auto;
|
margin-left: auto;
|
||||||
|
gap: 1em;
|
||||||
|
padding-left: 0.8em;
|
||||||
}
|
}
|
||||||
|
|
||||||
@media (min-width: 720px) {
|
@media (min-width: 720px) {
|
||||||
@ -144,8 +146,6 @@
|
|||||||
|
|
||||||
.reaction-pill {
|
.reaction-pill {
|
||||||
display: flex;
|
display: flex;
|
||||||
margin: 0px 7px;
|
|
||||||
padding: 2px 4px;
|
|
||||||
min-width: 1rem;
|
min-width: 1rem;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
@ -154,10 +154,6 @@
|
|||||||
font-feature-settings: "tnum";
|
font-feature-settings: "tnum";
|
||||||
}
|
}
|
||||||
|
|
||||||
.reaction-pill-icon {
|
|
||||||
margin: auto;
|
|
||||||
}
|
|
||||||
|
|
||||||
.reaction-pill .reaction-pill-number {
|
.reaction-pill .reaction-pill-number {
|
||||||
margin-left: 8px;
|
margin-left: 8px;
|
||||||
font-feature-settings: "tnum";
|
font-feature-settings: "tnum";
|
||||||
|
@ -135,7 +135,7 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
return (
|
return (
|
||||||
<>
|
<>
|
||||||
<div className={`reaction-pill ${didZap ? "reacted" : ""}`} {...longPress()} onClick={e => fastZap(e)}>
|
<div className={`reaction-pill ${didZap ? "reacted" : ""}`} {...longPress()} onClick={e => fastZap(e)}>
|
||||||
<div className="reaction-pill-icon">{zapping ? <Spinner /> : webln?.enabled ? <Icon name="zapFast" /> : <Icon name="zap" />}</div>
|
{zapping ? <Spinner /> : webln?.enabled ? <Icon name="zapFast" /> : <Icon name="zap" />}
|
||||||
{zapTotal > 0 && <div className="reaction-pill-number">{formatShort(zapTotal)}</div>}
|
{zapTotal > 0 && <div className="reaction-pill-number">{formatShort(zapTotal)}</div>}
|
||||||
</div>
|
</div>
|
||||||
</>
|
</>
|
||||||
@ -147,9 +147,7 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
function repostIcon() {
|
function repostIcon() {
|
||||||
return (
|
return (
|
||||||
<div className={`reaction-pill ${hasReposted() ? "reacted" : ""}`} onClick={() => repost()}>
|
<div className={`reaction-pill ${hasReposted() ? "reacted" : ""}`} onClick={() => repost()}>
|
||||||
<div className="reaction-pill-icon">
|
<Icon name="repost" size={17} />
|
||||||
<Icon name="repost" size={18} />
|
|
||||||
</div>
|
|
||||||
{reposts.length > 0 && <div className="reaction-pill-number">{formatShort(reposts.length)}</div>}
|
{reposts.length > 0 && <div className="reaction-pill-number">{formatShort(reposts.length)}</div>}
|
||||||
</div>
|
</div>
|
||||||
);
|
);
|
||||||
@ -164,9 +162,7 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
<div
|
<div
|
||||||
className={`reaction-pill ${hasReacted("+") ? "reacted" : ""} `}
|
className={`reaction-pill ${hasReacted("+") ? "reacted" : ""} `}
|
||||||
onClick={() => react(prefs.reactionEmoji)}>
|
onClick={() => react(prefs.reactionEmoji)}>
|
||||||
<div className="reaction-pill-icon">
|
|
||||||
<Icon name="heart" />
|
<Icon name="heart" />
|
||||||
</div>
|
|
||||||
<div className="reaction-pill-number">{formatShort(positive.length)}</div>
|
<div className="reaction-pill-number">{formatShort(positive.length)}</div>
|
||||||
</div>
|
</div>
|
||||||
{repostIcon()}
|
{repostIcon()}
|
||||||
@ -257,7 +253,7 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
)}
|
)}
|
||||||
{!bookmarked.includes(ev.Id) && (
|
{!bookmarked.includes(ev.Id) && (
|
||||||
<MenuItem onClick={() => bookmark(ev.Id)}>
|
<MenuItem onClick={() => bookmark(ev.Id)}>
|
||||||
<Icon name="bookmark" size={18} />
|
<Icon name="bookmark" />
|
||||||
<FormattedMessage {...messages.Bookmark} />
|
<FormattedMessage {...messages.Bookmark} />
|
||||||
</MenuItem>
|
</MenuItem>
|
||||||
)}
|
)}
|
||||||
@ -306,16 +302,12 @@ export default function NoteFooter(props: NoteFooterProps) {
|
|||||||
{tipButton()}
|
{tipButton()}
|
||||||
{reactionIcons()}
|
{reactionIcons()}
|
||||||
<div className={`reaction-pill ${reply ? "reacted" : ""}`} onClick={() => setReply(s => !s)}>
|
<div className={`reaction-pill ${reply ? "reacted" : ""}`} onClick={() => setReply(s => !s)}>
|
||||||
<div className="reaction-pill-icon">
|
<Icon name="reply" size={17} />
|
||||||
<Icon name="reply" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
<Menu
|
<Menu
|
||||||
menuButton={
|
menuButton={
|
||||||
<div className="reaction-pill">
|
<div className="reaction-pill">
|
||||||
<div className="reaction-pill-icon">
|
<Icon name="dots" size={15} />
|
||||||
<Icon name="dots" />
|
|
||||||
</div>
|
|
||||||
</div>
|
</div>
|
||||||
}
|
}
|
||||||
menuClassName="ctx-menu">
|
menuClassName="ctx-menu">
|
||||||
|
@ -5,8 +5,8 @@ type Props = {
|
|||||||
}
|
}
|
||||||
|
|
||||||
const Icon = (props: Props) => {
|
const Icon = (props: Props) => {
|
||||||
const size = props.size || 16;
|
const size = props.size || 20;
|
||||||
const href = 'icons.svg#' + props.name;
|
const href = '/icons.svg#' + props.name;
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<svg width={size} height={size} className={props.className}>
|
<svg width={size} height={size} className={props.className}>
|
||||||
|
@ -183,12 +183,9 @@
|
|||||||
text-overflow: ellipsis;
|
text-overflow: ellipsis;
|
||||||
}
|
}
|
||||||
|
|
||||||
.profile .link-icon {
|
.profile .links svg {
|
||||||
color: var(--highlight);
|
color: var(--highlight);
|
||||||
margin-right: 8px;
|
margin-right: 8px;
|
||||||
}
|
|
||||||
|
|
||||||
.profile .link-icon svg {
|
|
||||||
width: 12px;
|
width: 12px;
|
||||||
height: 12px;
|
height: 12px;
|
||||||
}
|
}
|
||||||
|
@ -138,9 +138,7 @@ export default function ProfilePage() {
|
|||||||
<div className="links">
|
<div className="links">
|
||||||
{user?.website && (
|
{user?.website && (
|
||||||
<div className="website f-ellipsis">
|
<div className="website f-ellipsis">
|
||||||
<span className="link-icon">
|
|
||||||
<Icon name="link" />
|
<Icon name="link" />
|
||||||
</span>
|
|
||||||
<a href={website_url} target="_blank" rel="noreferrer">
|
<a href={website_url} target="_blank" rel="noreferrer">
|
||||||
{user.website}
|
{user.website}
|
||||||
</a>
|
</a>
|
||||||
@ -149,9 +147,7 @@ export default function ProfilePage() {
|
|||||||
|
|
||||||
{lnurl && (
|
{lnurl && (
|
||||||
<div className="lnurl f-ellipsis" onClick={() => setShowLnQr(true)}>
|
<div className="lnurl f-ellipsis" onClick={() => setShowLnQr(true)}>
|
||||||
<span className="link-icon">
|
|
||||||
<Icon name="zap" />
|
<Icon name="zap" />
|
||||||
</span>
|
|
||||||
{lnurl}
|
{lnurl}
|
||||||
</div>
|
</div>
|
||||||
)}
|
)}
|
||||||
|
Loading…
Reference in New Issue
Block a user