feat: add warm sand theme colors and light / dark mode toggle (#302)

This commit was merged in pull request #302.
This commit is contained in:
Arjun Patel
2026-06-21 10:56:59 -07:00
committed by GitHub
parent 3d80ac2993
commit d14cec5885
43 changed files with 540 additions and 347 deletions
+11 -11
View File
@@ -22,7 +22,7 @@ export function LinkPreviewCard({ metadata, compact }: LinkPreviewCardProps) {
return (
<div
className="max-w-sm overflow-hidden rounded-2xl bg-white/10 backdrop-blur-md"
className="bg-card text-card-foreground border-border max-w-sm overflow-hidden rounded-2xl border"
onClick={(e) => {
e.stopPropagation();
handleOpen(e);
@@ -39,7 +39,7 @@ export function LinkPreviewCard({ metadata, compact }: LinkPreviewCardProps) {
/>
)}
<div className="flex flex-col gap-1 p-3">
<div className="flex items-center gap-1.5 text-xs text-white/50">
<div className="text-muted-foreground flex items-center gap-1.5 text-xs">
{metadata.favicon ? (
<img
src={metadata.favicon}
@@ -57,12 +57,12 @@ export function LinkPreviewCard({ metadata, compact }: LinkPreviewCardProps) {
<span className="truncate">{metadata.domain}</span>
</div>
{metadata.title && (
<p className="truncate text-sm font-semibold leading-snug text-white">
<p className="truncate text-sm font-semibold leading-snug">
{metadata.title}
</p>
)}
{metadata.description && (
<p className="line-clamp-2 text-xs leading-relaxed text-white/70">
<p className="text-muted-foreground line-clamp-2 text-xs leading-relaxed">
{metadata.description}
</p>
)}
@@ -71,7 +71,7 @@ export function LinkPreviewCard({ metadata, compact }: LinkPreviewCardProps) {
<Button
variant="ghost"
size="xs"
className="text-white/70 hover:bg-white/10 hover:text-white"
className="text-muted-foreground"
onClick={handleOpen}
>
<ExternalLink data-icon="inline-start" />
@@ -80,7 +80,7 @@ export function LinkPreviewCard({ metadata, compact }: LinkPreviewCardProps) {
<Button
variant="ghost"
size="xs"
className="text-white/70 hover:bg-white/10 hover:text-white"
className="text-muted-foreground"
onClick={handleCopy}
>
<Copy data-icon="inline-start" />
@@ -111,12 +111,12 @@ export function LinkPreviewCardFallback({ url }: { url: string }) {
export function LinkPreviewCardSkeleton() {
return (
<div className="max-w-sm overflow-hidden rounded-2xl bg-white/10 backdrop-blur-md">
<Skeleton className="h-32 w-full rounded-none bg-white/5" />
<div className="bg-card border-border max-w-sm overflow-hidden rounded-2xl border">
<Skeleton className="h-32 w-full rounded-none" />
<div className="flex flex-col gap-2 p-3">
<Skeleton className="h-3 w-24 bg-white/10" />
<Skeleton className="h-4 w-48 bg-white/10" />
<Skeleton className="h-3 w-full bg-white/10" />
<Skeleton className="h-3 w-24" />
<Skeleton className="h-4 w-48" />
<Skeleton className="h-3 w-full" />
</div>
</div>
);