diff options
Diffstat (limited to 'bskyembed/src/components/embed.tsx')
| -rw-r--r-- | bskyembed/src/components/embed.tsx | 34 |
1 files changed, 20 insertions, 14 deletions
diff --git a/bskyembed/src/components/embed.tsx b/bskyembed/src/components/embed.tsx index 74eacf16d..20ffcb2b2 100644 --- a/bskyembed/src/components/embed.tsx +++ b/bskyembed/src/components/embed.tsx @@ -78,9 +78,9 @@ export function Embed({ return ( <Link href={`/profile/${record.author.did}/post/${getRkey(record)}`} - className="transition-colors hover:bg-neutral-100 border rounded-lg p-2 gap-1.5 w-full flex flex-col"> + className="transition-colors hover:bg-neutral-100 dark:hover:bg-slate-700 border dark:border-slate-600 rounded-lg p-2 gap-1.5 w-full flex flex-col"> <div className="flex gap-1.5 items-center"> - <div className="w-4 h-4 overflow-hidden rounded-full bg-neutral-300 shrink-0"> + <div className="w-4 h-4 overflow-hidden rounded-full bg-neutral-300 dark:bg-slate-700 shrink-0"> <img src={record.author.avatar} style={isAuthorLabeled ? {filter: 'blur(1.5px)'} : undefined} @@ -88,7 +88,7 @@ export function Embed({ </div> <p className="line-clamp-1 text-sm"> <span className="font-bold">{record.author.displayName}</span> - <span className="text-textLight ml-1"> + <span className="text-textLight dark:text-textDimmed ml-1"> @{record.author.handle} </span> </p> @@ -209,7 +209,7 @@ function Info({children}: {children: ComponentChildren}) { return ( <div className="w-full rounded-lg border py-2 px-2.5 flex-row flex gap-2 bg-neutral-50"> <img src={infoIcon} className="w-4 h-4 shrink-0 mt-0.5" /> - <p className="text-sm text-textLight">{children}</p> + <p className="text-sm text-textLight dark:text-textDimmed">{children}</p> </div> ) } @@ -308,7 +308,7 @@ function ExternalEmbed({ return ( <Link href={content.external.uri} - className="w-full rounded-lg overflow-hidden border flex flex-col items-stretch" + className="w-full rounded-lg overflow-hidden border dark:border-slate-600 flex flex-col items-stretch" disableTracking> {content.external.thumb && ( <img @@ -317,11 +317,11 @@ function ExternalEmbed({ /> )} <div className="py-3 px-4"> - <p className="text-sm text-textLight line-clamp-1"> + <p className="text-sm text-textLight dark:text-textDimmed line-clamp-1"> {toNiceDomain(content.external.uri)} </p> <p className="font-semibold line-clamp-3">{content.external.title}</p> - <p className="text-sm text-textLight line-clamp-2 mt-0.5"> + <p className="text-sm text-textLight dark:text-textDimmed line-clamp-2 mt-0.5"> {content.external.description} </p> </div> @@ -345,23 +345,29 @@ function GenericWithImageEmbed({ return ( <Link href={href} - className="w-full rounded-lg border py-2 px-3 flex flex-col gap-2"> + className="w-full rounded-lg border dark:border-slate-600 py-2 px-3 flex flex-col gap-2"> <div className="flex gap-2.5 items-center"> {image ? ( <img src={image} alt={title} - className="w-8 h-8 rounded-md bg-neutral-300 shrink-0" + className="w-8 h-8 rounded-md bg-neutral-300 dark:bg-slate-700 shrink-0" /> ) : ( <div className="w-8 h-8 rounded-md bg-brand shrink-0" /> )} <div className="flex-1"> <p className="font-bold text-sm">{title}</p> - <p className="text-textLight text-sm">{subtitle}</p> + <p className="text-textLight dark:text-textDimmed text-sm"> + {subtitle} + </p> </div> </div> - {description && <p className="text-textLight text-sm">{description}</p>} + {description && ( + <p className="text-textLight dark:text-textDimmed text-sm"> + {description} + </p> + )} </Link> ) } @@ -406,7 +412,7 @@ function StarterPackEmbed({ return ( <Link href={starterPackHref} - className="w-full rounded-lg overflow-hidden border flex flex-col items-stretch"> + className="w-full rounded-lg overflow-hidden border dark:border-slate-600 flex flex-col items-stretch"> <img src={imageUri} className="aspect-[1.91/1] object-cover" /> <div className="py-3 px-4"> <div className="flex space-x-2 items-center"> @@ -415,7 +421,7 @@ function StarterPackEmbed({ <p className="font-semibold leading-[21px]"> {content.record.name} </p> - <p className="text-sm text-textLight line-clamp-2 leading-[18px]"> + <p className="text-sm text-textLight dark:text-textDimmed line-clamp-2 leading-[18px]"> Starter pack by{' '} {content.creator.displayName || `@${content.creator.handle}`} </p> @@ -425,7 +431,7 @@ function StarterPackEmbed({ <p className="text-sm mt-1">{content.record.description}</p> )} {!!content.joinedAllTimeCount && content.joinedAllTimeCount > 50 && ( - <p className="text-sm font-semibold text-textLight mt-1"> + <p className="text-sm font-semibold text-textLight dark:text-textDimmed mt-1"> {content.joinedAllTimeCount} users have joined! </p> )} |