Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Jump to bottom

feat: support for dark mode #968

Closed
wants to merge 13 commits into from
Closed

feat: support for dark mode #968

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
13 commits
Select commit Hold shift + click to select a range
3c01eae
feat: support for dark mode
khareyash05 Jan 26, 2024
f83a687
Merge branch 'main' into dark_mode
khareyash05 Jan 26, 2024
7735b15
change mode toggle location and solve CI issues
khareyash05 Jan 30, 2024
75689b7
Merge branch 'main' into dark_mode
khareyash05 Jan 30, 2024
d966064
update newName to name
khareyash05 Jan 30, 2024
d136504
Merge branch 'main' into dark_mode
khareyash05 Jan 31, 2024
a800809
Merge branch 'main' into dark_mode
khareyash05 Feb 1, 2024
4388a5a
Merge branch 'main' into dark_mode
khareyash05 Feb 12, 2024
288d6e7
Merge branch 'main' into dark_mode
khareyash05 Feb 12, 2024
85365cd
Merge branch 'main' into dark_mode
khareyash05 Feb 13, 2024
a971399
Merge branch 'main' into dark_mode
khareyash05 Feb 17, 2024
34e7d3a
demo commit
khareyash05 Mar 22, 2024
dad28e1
Merge remote-tracking branch 'origin/main' into dark_mode
khareyash05 Mar 22, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 1 addition & 1 deletion packages/shared/prisma/migrations/20240126184148_new_models copy/migration.sql
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -30,7 +30,7 @@ VALUES
('clruwnahl00050al796ck3p44', NULL, 'gpt-4-0125-preview', '(?i)^(gpt-4-0125-preview)$', NULL, 0.00001, 0.00003, NULL, 'TOKENS', 'openai', '{ "tokensPerMessage": 3, "tokensPerName": 1, "tokenizerModel": "gpt-4" }'),
('clruwnahl00060al74fcfehas', NULL, 'gpt-4-turbo-preview', '(?i)^(gpt-4-turbo-preview)$', NULL, 0.00003, 0.00006, NULL, 'TOKENS', 'openai', '{ "tokensPerMessage": 3, "tokensPerName": 1, "tokenizerModel": "gpt-4" }'),

-- fix tokenizer for vertx
-- fix tokenizer for vertex
('clrp1wopz000808l09nwy32xh', NULL, 'codechat-bison-32k', '(?i)^(codechat-bison-32k)$', NULL, 0.0000005, 0.0000025, NULL, 'TOKENS', NULL, NULL),
('clrp1wopz000408l05xcycki1', NULL, 'chat-bison-32k', '(?i)^(chat-bison-32k)$', NULL, 0.0000005, 0.0000025, NULL, 'TOKENS', NULL, NULL),

Expand Down
2 changes: 1 addition & 1 deletion web/src/components/LangfuseLogo.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -37,7 +37,7 @@ export const LangfuseLogo = ({
{showEnvLabel && env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION && (
<div
className={cn(
"flex items-center gap-2 self-stretch rounded-md px-3 py-1 ring-1 xl:-mx-2",
"flex items-center gap-2 self-stretch rounded-md px-3 py-1 ring-1 xl:-mx-2 dark:text-white",
env.NEXT_PUBLIC_LANGFUSE_CLOUD_REGION === "STAGING"
? "bg-blue-100 text-blue-500 ring-blue-500"
: "bg-red-100 text-red-500 ring-red-500",
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/layouts/header.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -91,7 +91,7 @@ export default function Header({
<div className="flex items-center gap-3 md:gap-5">
<div className="flex min-w-0 flex-row">
{level === "h2" ? (
<h2 className="text-2xl font-bold leading-7 text-gray-900 sm:truncate sm:text-3xl sm:tracking-tight">
<h2 className="text-2xl font-bold leading-7 text-gray-900 dark:text-white sm:truncate sm:text-3xl sm:tracking-tight">
{props.title}
</h2>
) : (
Expand Down
37 changes: 20 additions & 17 deletions web/src/components/layouts/layout.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -23,6 +23,7 @@ import { env } from "@/src/env.mjs";
import { LangfuseLogo } from "@/src/components/LangfuseLogo";
import { Spinner } from "@/src/components/layouts/spinner";
import { hasAccess } from "@/src/features/rbac/utils/checkAccess";
import ModeToggle from "@/src/components/layouts/mode-toggle";
import { Toaster } from "@/src/components/ui/sonner";
import {
NOTIFICATIONS,
Expand Down Expand Up @@ -233,7 +234,7 @@ export default function Layout(props: PropsWithChildren) {
</div>
</Transition.Child>
{/* Sidebar component, swap this element with another sidebar if you like */}
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 py-4">
<div className="flex grow flex-col gap-y-5 overflow-y-auto bg-white px-6 py-4 dark:bg-slate-950">
<LangfuseLogo
version
size="xl"
Expand Down Expand Up @@ -305,7 +306,7 @@ export default function Layout(props: PropsWithChildren) {
{/* Static sidebar for desktop */}
<div className="hidden xl:fixed xl:inset-y-0 xl:z-50 xl:flex xl:w-72 xl:flex-col">
{/* Sidebar component, swap this element with another sidebar if you like */}
<div className="flex h-screen grow flex-col gap-y-5 border-r border-gray-200 bg-white pt-7">
<div className="flex h-screen grow flex-col gap-y-5 border-r border-gray-200 bg-white pt-7 dark:bg-slate-950 dark:text-white">
<LangfuseLogo
version
size="xl"
Expand All @@ -331,8 +332,8 @@ export default function Layout(props: PropsWithChildren) {
href={`/project/${project.id}`}
className={cn(
projectId === project.id
? "bg-gray-50 text-indigo-600"
: "text-gray-700 hover:bg-gray-50 hover:text-indigo-600",
? "bg-gray-50 text-indigo-600 dark:text-black"
: "text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-white dark:hover:text-black",
"group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6",
)}
>
Expand Down Expand Up @@ -373,7 +374,7 @@ export default function Layout(props: PropsWithChildren) {
</nav>

<Menu as="div" className="relative left-1">
<Menu.Button className="flex w-full items-center gap-x-4 p-1.5 px-6 py-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-50">
<Menu.Button className="flex w-full items-center gap-x-4 p-1.5 px-6 py-3 text-sm font-semibold leading-6 text-gray-900 hover:bg-gray-50 dark:text-white dark:hover:text-black">
<span className="sr-only">Open user menu</span>
<Avatar className="h-8 w-8">
<AvatarImage src={session.data?.user?.image ?? undefined} />
Expand All @@ -387,7 +388,7 @@ export default function Layout(props: PropsWithChildren) {
: null}
</AvatarFallback>
</Avatar>
<span className="flex-shrink truncate text-sm font-semibold leading-6 text-gray-900">
<span className="flex-shrink truncate text-sm font-semibold leading-6">
{session.data?.user?.name}
</span>
<ChevronDownIcon
Expand All @@ -404,15 +405,15 @@ export default function Layout(props: PropsWithChildren) {
leaveFrom="transform opacity-100 scale-100"
leaveTo="transform opacity-0 scale-95"
>
<Menu.Items className="absolute -top-full right-0 z-10 mt-2.5 w-32 rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none">
<Menu.Items className="absolute -top-full right-0 z-10 mt-2.5 w-32 rounded-md bg-white py-2 shadow-lg ring-1 ring-gray-900/5 focus:outline-none dark:border-white dark:bg-slate-950 dark:ring-white">
{userNavigation.map((item) => (
<Menu.Item key={item.name}>
{({ active }) => (
<a
onClick={() => void item.onClick()}
className={cn(
active ? "bg-gray-50" : "",
"block cursor-pointer px-3 py-1 text-sm leading-6 text-gray-900",
"block cursor-pointer px-3 py-1 text-sm leading-6 text-gray-900 dark:text-white dark:hover:text-black",
)}
>
{item.name}
Expand All @@ -426,7 +427,7 @@ export default function Layout(props: PropsWithChildren) {
</div>
</div>

<div className="sticky top-0 z-40 flex items-center gap-x-6 bg-white px-4 py-4 shadow-sm sm:px-6 xl:hidden">
<div className="sticky top-0 z-40 flex items-center gap-x-6 bg-white px-4 py-4 shadow-sm dark:bg-slate-950 sm:px-6 xl:hidden">
<button
type="button"
className="-m-2.5 p-2.5 text-gray-700 xl:hidden"
Expand All @@ -440,6 +441,7 @@ export default function Layout(props: PropsWithChildren) {
className="flex-1"
showEnvLabel={session.data?.user?.email?.endsWith("@langfuse.com")}
/>
<ModeToggle />
<Menu as="div" className="relative">
<Menu.Button className="flex items-center gap-x-4 text-sm font-semibold leading-6 text-gray-900">
<span className="sr-only">Open user menu</span>
Expand Down Expand Up @@ -552,8 +554,8 @@ const MainNavigation: React.FC<{
href={item.href}
className={clsx(
item.current
? "bg-gray-50 text-indigo-600"
: "text-gray-700 hover:bg-gray-50 hover:text-indigo-600",
? "bg-gray-50 text-indigo-600 dark:text-slate-950"
: "text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-white dark:hover:text-slate-950",
"group flex gap-x-3 rounded-md p-2 text-sm font-semibold leading-6",
)}
onClick={onNavitemClick}
Expand Down Expand Up @@ -593,7 +595,7 @@ const MainNavigation: React.FC<{
{({ open }) => (
<>
<Disclosure.Button
className="group flex w-full items-center gap-x-3 rounded-md p-2 text-left text-sm font-semibold leading-6 hover:bg-gray-50 hover:text-indigo-600"
className="group flex w-full items-center gap-x-3 rounded-md p-2 text-left text-sm font-semibold leading-6 hover:bg-gray-50 hover:text-indigo-600 dark:text-white dark:hover:text-black"
onClick={() => setIsOpen(!isOpen)}
>
{item.icon && (
Expand All @@ -608,7 +610,7 @@ const MainNavigation: React.FC<{
className={cn(
"self-center whitespace-nowrap break-keep rounded-sm border px-1 py-0.5 text-xs",
item.current
? "border-indigo-600 text-indigo-600"
? "border-indigo-600 text-indigo-600 "
: "border-gray-200 text-gray-400 group-hover:border-indigo-600 group-hover:text-indigo-600",
)}
>
Expand All @@ -631,8 +633,8 @@ const MainNavigation: React.FC<{
href={subItem.href ?? "#"}
className={clsx(
subItem.current
? "bg-gray-50 text-indigo-600"
: "text-gray-700 hover:bg-gray-50 hover:text-indigo-600",
? "bg-gray-50 text-indigo-600 dark:text-black"
: "text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-white dark:hover:text-black",
"flex w-full items-center gap-x-3 rounded-md py-2 pl-9 pr-2 text-sm leading-6",
)}
>
Expand All @@ -658,9 +660,10 @@ const MainNavigation: React.FC<{
description="What do you think about this project? What can be improved?"
type="feedback"
>
<li className="group flex cursor-pointer gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-indigo-600">
<li className="group flex cursor-pointer gap-x-3 rounded-md p-2 text-sm font-semibold leading-6 text-gray-700 hover:bg-gray-50 hover:text-indigo-600 dark:text-white dark:hover:text-black">

<MessageSquarePlus
className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-indigo-600"
className="h-6 w-6 shrink-0 text-gray-400 group-hover:text-indigo-600 "
aria-hidden="true"
/>
Feedback
Expand Down
Empty file added web/src/components/layouts/mode-toggle.tsx
View file
Open in desktop
Empty file.
2 changes: 1 addition & 1 deletion web/src/components/table/data-table-multi-select-actions/trace-table-multi-select-action.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -48,7 +48,7 @@ export function TraceTableMultiSelectAction({
<DropdownMenuTrigger asChild>
<Button
variant="outline"
className="bg-white p-2 font-medium text-black"
className="bg-white p-2 font-medium text-black dark:bg-slate-950 dark:text-white"
disabled={selectedTraceIds.length < 1}
>
Actions ({selectedTraceIds.length} selected)
Expand Down
4 changes: 2 additions & 2 deletions web/src/components/table/data-table.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -172,7 +172,7 @@ export function DataTable<TData extends object, TValue>({
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
className="h-24 text-center dark:bg-slate-950 dark:text-white"
>
Loading...
</TableCell>
Expand All @@ -197,7 +197,7 @@ export function DataTable<TData extends object, TValue>({
<TableRow>
<TableCell
colSpan={columns.length}
className="h-24 text-center"
className="h-24 text-center dark:bg-slate-950 dark:text-white"
>
<div>
No results.{" "}
Expand Down
2 changes: 1 addition & 1 deletion web/src/components/ui/avatar.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,7 +39,7 @@ const AvatarFallback = React.forwardRef<
<AvatarPrimitive.Fallback
ref={ref}
className={cn(
"flex h-full w-full items-center justify-center rounded-full bg-muted",
"flex h-full w-full items-center justify-center rounded-full bg-muted dark:text-white",
className,
)}
{...props}
Expand Down
6 changes: 4 additions & 2 deletions web/src/components/ui/checkbox.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,9 +19,11 @@ const Checkbox = React.forwardRef<
{...props}
>
<CheckboxPrimitive.Indicator
className={cn("flex items-center justify-center text-current")}
className={cn(
"flex items-center justify-center text-current dark:bg-slate-950",
)}
>
<Check className="h-4 w-4" />
<Check className="h-4 w-4 dark:text-white" />
</CheckboxPrimitive.Indicator>
</CheckboxPrimitive.Root>
));
Expand Down
4 changes: 3 additions & 1 deletion web/src/features/dashboard/components/RightAlignedCell.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,4 +7,6 @@ export const RightAlignedCell = ({
}: {
children: ReactNode;
className?: string;
}) => <div className={cn("text-right", className)}>{children}</div>;
}) => (
<div className={cn("text-right dark:text-white", className)}>{children}</div>
);
4 changes: 2 additions & 2 deletions web/src/features/dashboard/components/TabsComponent.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -19,7 +19,7 @@ export const TabComponent = ({ tabs }: TabComponentProps) => {
<select
id="tabs"
name="tabs"
className="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 sm:text-sm"
className="block w-full rounded-md border-gray-300 py-2 pl-3 pr-10 text-base focus:border-indigo-500 focus:outline-none focus:ring-indigo-500 dark:bg-slate-950 dark:text-white sm:text-sm"
defaultValue={0}
onChange={(e) => setSelectedIndex(Number(e.target.selectedIndex))}
>
Expand All @@ -36,7 +36,7 @@ export const TabComponent = ({ tabs }: TabComponentProps) => {
key={tab.tabTitle}
className={cn(
index === selectedIndex
? "border-indigo-500 text-indigo-600"
? "border-indigo-500 text-indigo-600 dark:text-white"
: "border-transparent text-gray-500 hover:border-gray-300 hover:text-gray-700",
"cursor-pointer whitespace-nowrap border-b-2 px-1 py-3 text-sm font-medium",
)}
Expand Down
6 changes: 3 additions & 3 deletions web/src/features/dashboard/components/cards/DashboardTable.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -39,15 +39,15 @@ export const DashboardTable = ({
<th
key={i}
scope="col"
className="whitespace-nowrap py-3.5 pl-4 pr-3 text-left text-xs font-semibold text-gray-900 sm:pl-0"
className="whitespace-nowrap py-3.5 pl-4 pr-3 text-left text-xs font-semibold text-gray-900 dark:text-white sm:pl-0"
>
{header}
</th>
))}
</tr>
</thead>

<tbody className="divide-y divide-gray-200 bg-white">
<tbody className="divide-y divide-gray-200 bg-white dark:bg-slate-950">
{rows
.slice(
0,
Expand All @@ -62,7 +62,7 @@ export const DashboardTable = ({
{row.map((cell, j) => (
<td
key={j}
className="whitespace-nowrap py-2 pl-3 pr-2 text-xs text-gray-500 sm:pl-0"
className="whitespace-nowrap py-2 pl-3 pr-2 text-xs text-gray-500 dark:text-white sm:pl-0"
>
{cell}
</td>
Expand Down
2 changes: 1 addition & 1 deletion web/src/features/filters/components/filter-builder.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -86,7 +86,7 @@ export function FilterBuilder({
return (
<span
key={i}
className="ml-3 whitespace-nowrap rounded-md bg-slate-200 px-2 py-1 text-xs"
className="ml-3 whitespace-nowrap rounded-md bg-slate-200 px-2 py-1 text-xs dark:bg-slate-950 dark:text-white"
>
{filter.column}
{filter.type === "stringObject" ||
Expand Down
2 changes: 1 addition & 1 deletion web/src/features/projects/components/DeleteProjectButton.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,7 +79,7 @@ export function DeleteProjectButton(props: { projectId: string }) {

return (
<div>
<h2 className="mb-6 text-base font-semibold leading-6 text-gray-900">
<h2 className="mb-6 text-base font-semibold leading-6 text-gray-900 dark:text-white">
Danger Zone
</h2>
<Dialog>
Expand Down
4 changes: 2 additions & 2 deletions web/src/features/projects/components/HostNameProject.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,12 +4,12 @@ import { CodeView } from "@/src/components/ui/code";
export function HostNameProject() {
return (
<div>
<h2 className="mb-5 text-base font-semibold leading-6 text-gray-900">
<h2 className="mb-5 text-base font-semibold leading-6 text-gray-900 dark:text-white">
Host Name
</h2>
<Card className="mb-4 p-4">
<div className="mb-6">
<div className="my-2">
<div className="my-2 text-sm dark:text-white">
When connecting to Langfuse, use this hostname / baseurl.
</div>
<CodeView content={window.origin} />
Expand Down
18 changes: 11 additions & 7 deletions web/src/features/public-api/components/ApiKeyList.tsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -44,37 +44,41 @@ export function ApiKeyList(props: { projectId: string }) {

return (
<div>
<h2 className="mb-5 text-base font-semibold leading-6 text-gray-900">
<h2 className="mb-5 text-base font-semibold leading-6 text-gray-900 dark:text-white">
API keys
</h2>
<Card className="mb-4">
<Table>
<TableHeader>
<TableRow>
<TableHead className="hidden text-gray-900 md:table-cell">
<TableHead className="hidden text-gray-900 dark:text-white md:table-cell">
Created
</TableHead>
{/* <TableHead className="text-gray-900">Note</TableHead> */}
<TableHead className="text-gray-900">Public Key</TableHead>
<TableHead className="text-gray-900">Secret Key</TableHead>
<TableHead className="text-gray-900 dark:text-white">
Public Key
</TableHead>
<TableHead className="text-gray-900 dark:text-white">
Secret Key
</TableHead>
{/* <TableHead className="text-gray-900">Last used</TableHead> */}
<TableHead />
</TableRow>
</TableHeader>
<TableBody className="text-gray-500">
{apiKeys.data?.map((apiKey) => (
<TableRow key={apiKey.id} className="hover:bg-transparent">
<TableCell className="hidden md:table-cell">
<TableCell className="hidden dark:text-white md:table-cell">
{apiKey.createdAt.toLocaleDateString()}
</TableCell>
{/* <TableCell>{apiKey.note ?? ""}</TableCell> */}
<TableCell className="font-mono">
<TableCell className="font-mono dark:text-white">
<CodeView
className="inline-block"
content={apiKey.publicKey}
/>
</TableCell>
<TableCell className="font-mono">
<TableCell className="font-mono dark:text-white">
{apiKey.displaySecretKey}
</TableCell>
{/* <TableCell>
Expand Down
Loading
Loading