style: make minor adjustments to styling
This commit is contained in:
@@ -1,5 +1,5 @@
|
||||
import Username from '../Username'
|
||||
|
||||
export function EmbeddedMention({ userId }: { userId: string }) {
|
||||
return <Username userId={userId} showAt className="text-highlight font-normal" />
|
||||
return <Username userId={userId} showAt className="text-highlight font-normal inline-block" />
|
||||
}
|
||||
|
||||
@@ -4,19 +4,22 @@ import { BadgeAlert, BadgeCheck } from 'lucide-react'
|
||||
export default function Nip05({ nip05, pubkey }: { nip05: string; pubkey: string }) {
|
||||
const { nip05IsVerified, nip05Name, nip05Domain } = useFetchNip05(nip05, pubkey)
|
||||
return (
|
||||
<div className="flex items-center space-x-1">
|
||||
{nip05Name !== '_' ? (
|
||||
<div className="text-sm text-muted-foreground truncate">@{nip05Name}</div>
|
||||
) : null}
|
||||
<a
|
||||
href={`https://${nip05Domain}`}
|
||||
target="_blank"
|
||||
className={`flex items-center space-x-1 hover:underline ${nip05IsVerified ? 'text-highlight' : 'text-muted-foreground'}`}
|
||||
rel="noreferrer"
|
||||
>
|
||||
{nip05IsVerified ? <BadgeCheck size={16} /> : <BadgeAlert size={16} />}
|
||||
<div className="text-sm">{nip05Domain}</div>
|
||||
</a>
|
||||
</div>
|
||||
nip05Name &&
|
||||
nip05Domain && (
|
||||
<div className="flex items-center space-x-1">
|
||||
{nip05Name !== '_' ? (
|
||||
<div className="text-sm text-muted-foreground truncate">@{nip05Name}</div>
|
||||
) : null}
|
||||
<a
|
||||
href={`https://${nip05Domain}`}
|
||||
target="_blank"
|
||||
className={`flex items-center space-x-1 hover:underline ${nip05IsVerified ? 'text-highlight' : 'text-muted-foreground'}`}
|
||||
rel="noreferrer"
|
||||
>
|
||||
{nip05IsVerified ? <BadgeCheck size={16} /> : <BadgeAlert size={16} />}
|
||||
<div className="text-sm">{nip05Domain}</div>
|
||||
</a>
|
||||
</div>
|
||||
)
|
||||
)
|
||||
}
|
||||
|
||||
@@ -9,7 +9,7 @@ import { getParentEventId, getRootEventId } from '@renderer/lib/event'
|
||||
export default function ShortTextNoteCard({
|
||||
event,
|
||||
className,
|
||||
size,
|
||||
size = 'normal',
|
||||
hideStats = false
|
||||
}: {
|
||||
event: Event
|
||||
@@ -29,7 +29,9 @@ export default function ShortTextNoteCard({
|
||||
push(toNote(rootEvent ?? event))
|
||||
}}
|
||||
>
|
||||
<Card className="p-4 hover:bg-muted/50 text-left cursor-pointer">
|
||||
<Card
|
||||
className={`hover:bg-muted/50 text-left cursor-pointer ${size === 'normal' ? 'p-4' : 'p-2'}`}
|
||||
>
|
||||
<Note
|
||||
size={size}
|
||||
event={event}
|
||||
|
||||
@@ -3,7 +3,7 @@ import { cn } from '@renderer/lib/utils'
|
||||
import { useNostr } from '@renderer/providers/NostrProvider'
|
||||
import { useNoteStats } from '@renderer/providers/NoteStatsProvider'
|
||||
import client from '@renderer/services/client.service'
|
||||
import { Heart } from 'lucide-react'
|
||||
import { Heart, Loader } from 'lucide-react'
|
||||
import { Event } from 'nostr-tools'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { formatCount } from './utils'
|
||||
@@ -74,7 +74,11 @@ export default function LikeButton({
|
||||
disabled={!canLike}
|
||||
title="like"
|
||||
>
|
||||
<Heart size={16} className={hasLiked ? 'fill-red-400' : ''} />
|
||||
{liking ? (
|
||||
<Loader className="animate-spin" size={16} />
|
||||
) : (
|
||||
<Heart size={16} className={hasLiked ? 'fill-red-400' : ''} />
|
||||
)}
|
||||
<div className="text-xs">{formatCount(likeCount)}</div>
|
||||
</button>
|
||||
)
|
||||
|
||||
@@ -14,7 +14,7 @@ import { cn } from '@renderer/lib/utils'
|
||||
import { useNostr } from '@renderer/providers/NostrProvider'
|
||||
import { useNoteStats } from '@renderer/providers/NoteStatsProvider'
|
||||
import client from '@renderer/services/client.service'
|
||||
import { Repeat } from 'lucide-react'
|
||||
import { Loader, Repeat } from 'lucide-react'
|
||||
import { Event } from 'nostr-tools'
|
||||
import { useEffect, useMemo, useState } from 'react'
|
||||
import { formatCount } from './utils'
|
||||
@@ -85,7 +85,7 @@ export default function RepostButton({
|
||||
disabled={!canRepost}
|
||||
title="repost"
|
||||
>
|
||||
<Repeat size={16} />
|
||||
{reposting ? <Loader className="animate-spin" size={16} /> : <Repeat size={16} />}
|
||||
<div className="text-xs">{formatCount(repostCount)}</div>
|
||||
</button>
|
||||
</AlertDialogTrigger>
|
||||
|
||||
@@ -22,12 +22,12 @@ export default function ReplyNote({
|
||||
>
|
||||
<UserAvatar userId={event.pubkey} size="small" className="shrink-0" />
|
||||
<div className="w-full overflow-hidden">
|
||||
<div className="flex gap-1 items-end">
|
||||
<div className="flex items-end gap-2">
|
||||
<Username
|
||||
userId={event.pubkey}
|
||||
className="text-xs font-semibold text-muted-foreground hover:text-foreground truncate"
|
||||
className="text-sm font-semibold text-muted-foreground hover:text-foreground truncate"
|
||||
/>
|
||||
<div className="text-xs text-muted-foreground shrink-0">
|
||||
<div className="text-xs text-muted-foreground shrink-0 -top-[1px] relative">
|
||||
{formatTimestamp(event.created_at)}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
@@ -20,7 +20,7 @@ export default function Username({
|
||||
return (
|
||||
<HoverCard>
|
||||
<HoverCardTrigger asChild>
|
||||
<div className={cn('inline-block', className)}>
|
||||
<div className={className}>
|
||||
<SecondaryPageLink
|
||||
to={toProfile(pubkey)}
|
||||
className={cn('truncate hover:underline')}
|
||||
|
||||
Reference in New Issue
Block a user