diff options
Diffstat (limited to 'apps/web/components/dashboard/bookmarks')
7 files changed, 38 insertions, 13 deletions
diff --git a/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx b/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx index 2c393fe7..96e1c19b 100644 --- a/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx +++ b/apps/web/components/dashboard/bookmarks/BookmarkPreview.tsx @@ -3,6 +3,7 @@ import Image from "next/image"; import Link from "next/link"; import { ScrollArea } from "@/components/ui/scroll-area"; +import { Separator } from "@/components/ui/separator"; import { Skeleton } from "@/components/ui/skeleton"; import { Tooltip, @@ -82,7 +83,7 @@ function LinkHeader({ bookmark }: { bookmark: ZBookmark }) { <span className="my-auto">View Original</span> <ExternalLink /> </Link> - <hr /> + <Separator /> </div> ); } @@ -103,7 +104,7 @@ function TextContentSection({ bookmark }: { bookmark: ZBookmark }) { dangerouslySetInnerHTML={{ __html: bookmark.content.htmlContent || "", }} - className="prose mx-auto" + className="prose dark:prose-invert mx-auto" /> ); } @@ -111,7 +112,9 @@ function TextContentSection({ bookmark }: { bookmark: ZBookmark }) { } case "text": { content = ( - <Markdown className="prose mx-auto">{bookmark.content.text}</Markdown> + <Markdown className="prose dark:prose-invert mx-auto"> + {bookmark.content.text} + </Markdown> ); break; } @@ -195,7 +198,7 @@ export default function BookmarkPreview({ <div className="row-span-2 h-full w-full overflow-hidden p-2 md:col-span-2 lg:row-auto"> {isBookmarkStillCrawling(bookmark) ? <ContentLoading /> : content} </div> - <div className="lg:col-span1 row-span-1 flex flex-col gap-4 bg-gray-100 p-4 lg:row-auto"> + <div className="lg:col-span1 row-span-1 flex flex-col gap-4 bg-accent p-4 lg:row-auto"> {linkHeader} <CreationTime createdAt={bookmark.createdAt} /> <div className="flex gap-2"> diff --git a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx index cee620c9..81dd9361 100644 --- a/apps/web/components/dashboard/bookmarks/Bookmarks.tsx +++ b/apps/web/components/dashboard/bookmarks/Bookmarks.tsx @@ -1,4 +1,5 @@ import { redirect } from "next/navigation"; +import { Separator } from "@/components/ui/separator"; import { api } from "@/server/api/client"; import { getServerAuthSession } from "@/server/auth"; @@ -27,7 +28,7 @@ export default async function Bookmarks({ return ( <div className="container flex flex-col gap-3"> {header} - {showDivider && <hr />} + {showDivider && <Separator />} <UpdatableBookmarksGrid query={query} bookmarks={bookmarks} diff --git a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx index 39638553..048dab85 100644 --- a/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx +++ b/apps/web/components/dashboard/bookmarks/BookmarksGrid.tsx @@ -16,7 +16,7 @@ import TextCard from "./TextCard"; function BookmarkCard({ children }: { children: React.ReactNode }) { return ( - <Slot className="border-grey-100 mb-4 border bg-gray-50 duration-300 ease-in hover:shadow-lg hover:transition-all"> + <Slot className="mb-4 border border-border bg-card duration-300 ease-in hover:shadow-lg hover:transition-all"> {children} </Slot> ); diff --git a/apps/web/components/dashboard/bookmarks/EditorCard.tsx b/apps/web/components/dashboard/bookmarks/EditorCard.tsx index dfcf1f6c..d8a3c117 100644 --- a/apps/web/components/dashboard/bookmarks/EditorCard.tsx +++ b/apps/web/components/dashboard/bookmarks/EditorCard.tsx @@ -1,6 +1,7 @@ import type { SubmitErrorHandler, SubmitHandler } from "react-hook-form"; import { ActionButton } from "@/components/ui/action-button"; import { Form, FormControl, FormField, FormItem } from "@/components/ui/form"; +import { Separator } from "@/components/ui/separator"; import { Textarea } from "@/components/ui/textarea"; import { toast } from "@/components/ui/use-toast"; import { api } from "@/lib/trpc"; @@ -55,12 +56,12 @@ export default function EditorCard({ className }: { className?: string }) { <form className={cn( className, - "flex h-96 flex-col gap-2 rounded-xl bg-white p-4", + "flex h-96 flex-col gap-2 rounded-xl bg-card p-4", )} onSubmit={form.handleSubmit(onSubmit, onError)} > <p className="text-sm">NEW ITEM</p> - <hr /> + <Separator /> <FormField control={form.control} name="text" diff --git a/apps/web/components/dashboard/bookmarks/LinkCard.tsx b/apps/web/components/dashboard/bookmarks/LinkCard.tsx index 3451013d..9796ed4f 100644 --- a/apps/web/components/dashboard/bookmarks/LinkCard.tsx +++ b/apps/web/components/dashboard/bookmarks/LinkCard.tsx @@ -84,7 +84,7 @@ export default function LinkCard({ <div className="mt-1 flex justify-between text-gray-500"> <div className="my-auto"> <Link - className="line-clamp-1 hover:text-black" + className="line-clamp-1 hover:text-foreground" href={link.url} target="_blank" > diff --git a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx index bebd53df..e11410b8 100644 --- a/apps/web/components/dashboard/bookmarks/TagsEditor.tsx +++ b/apps/web/components/dashboard/bookmarks/TagsEditor.tsx @@ -99,6 +99,17 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) { closeMenuOnSelect={false} isClearable={false} isLoading={isExistingTagsLoading || isMutating} + theme={(theme) => ({ + ...theme, + // This color scheme doesn't support disabled options. + colors: { + ...theme.colors, + primary: "hsl(var(--accent))", + primary50: "hsl(var(--accent))", + primary75: "hsl(var(--accent))", + primary25: "hsl(var(--accent))", + }, + })} styles={{ multiValueRemove: () => ({ "background-color": "transparent", @@ -110,6 +121,14 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) { overflowY: "auto", scrollbarWidth: "none", }), + control: (styles) => ({ + ...styles, + "background-color": "hsl(var(--background))", + "border-color": "hsl(var(--border))", + ":hover": { + "border-color": "hsl(var(--border))", + }, + }), }} components={{ MultiValueContainer: ({ children, data }) => ( @@ -118,7 +137,7 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) { "flex min-h-8 space-x-1 rounded px-2", (data as { attachedBy: string }).attachedBy == "ai" ? "bg-gradient-to-tr from-purple-500 to-purple-400 text-white" - : "bg-gray-200", + : "bg-accent", )} > {children} @@ -137,8 +156,9 @@ export function TagsEditor({ bookmark }: { bookmark: ZBookmark }) { }} classNames={{ multiValueRemove: () => "my-auto", - valueContainer: () => "gap-2", - menuList: () => "text-sm", + valueContainer: () => "gap-2 bg-background", + menuList: () => "text-sm bg-background", + option: () => "text-red-500", }} /> ); diff --git a/apps/web/components/dashboard/bookmarks/TextCard.tsx b/apps/web/components/dashboard/bookmarks/TextCard.tsx index 75733063..82664390 100644 --- a/apps/web/components/dashboard/bookmarks/TextCard.tsx +++ b/apps/web/components/dashboard/bookmarks/TextCard.tsx @@ -58,7 +58,7 @@ export default function TextCard({ ), )} > - <Markdown className="prose grow overflow-hidden"> + <Markdown className="prose dark:prose-invert grow overflow-hidden"> {bookmarkedText.text} </Markdown> <div className="mt-4 flex flex-none flex-wrap gap-1 overflow-hidden"> |