style: make minor adjustments to styling

This commit is contained in:
codytseng
2024-11-07 22:30:32 +08:00
parent ead1710392
commit d883220c93
7 changed files with 34 additions and 25 deletions

View File

@@ -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" />
}

View File

@@ -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>
)
)
}

View File

@@ -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}

View File

@@ -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>
)

View File

@@ -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>

View File

@@ -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>

View File

@@ -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')}