dashboard: add dark mode

2024-03-28 06:47:04 +01:00
parent 64701bf29f
commit a1fa48da75
37 changed files with 181 additions and 155 deletions
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-edit.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-edit.tsx
@@ -106,7 +106,7 @@ export function EventEdit({ event, open, setOpen }: Props) {
                    setIcon(name);
                  }}
                  className={cn(
-                    'flex inline-flex h-8 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-md bg-slate-100 transition-all',
+                    'inline-flex h-8 w-8 flex-shrink-0 cursor-pointer items-center justify-center rounded-md bg-slate-100 transition-all',
                    name === selectedIcon
                      ? 'scale-110 ring-1 ring-black'
                      : '[&_svg]:opacity-50'
@@ -133,7 +133,7 @@ export function EventEdit({ event, open, setOpen }: Props) {
                  )}
                >
                  {SelectedIcon ? (
-                    <SelectedIcon size={16} />
+                    <SelectedIcon size={16} className={getText(color)} />
                  ) : (
                    <svg
                      className={`${getText(color)} opacity-70`}
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-list-item.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-list-item.tsx
@@ -55,8 +55,9 @@ export function EventListItem(props: EventListItemProps) {
      <button
        onClick={() => setIsDetailsOpen(true)}
        className={cn(
-          'card flex w-full items-center justify-between rounded-lg p-4 transition-colors hover:bg-slate-50',
-          meta?.conversion && `bg-${meta.color}-50 hover:bg-${meta.color}-100`
+          'card hover:bg-light-background flex w-full items-center justify-between rounded-lg p-4 transition-colors',
+          meta?.conversion &&
+            `bg-${meta.color}-50 dark:bg-${meta.color}-900 hover:bg-${meta.color}-100 dark:hover:bg-${meta.color}-700`
        )}
      >
        <div className="flex items-center gap-4 text-left text-sm">
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-listener.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/events/event-listener.tsx
@@ -49,7 +49,7 @@ export default function EventListener() {
            setCounter(0);
            router.refresh();
          }}
-          className="flex h-8 items-center gap-2 rounded border border-border bg-white px-3 text-sm font-medium leading-none"
+          className="flex h-8 items-center gap-2 rounded border border-border bg-background px-3 text-sm font-medium leading-none"
        >
          <div className="relative">
            <div
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-menu.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-menu.tsx
@@ -40,8 +40,8 @@ function LinkWithIcon({
  return (
    <Link
      className={cn(
-        'flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium leading-none text-slate-800 transition-all transition-colors hover:bg-blue-100',
-        active && 'bg-blue-50',
+        'text-text flex items-center gap-2 rounded-md px-3 py-2 text-sm font-medium leading-none transition-all transition-colors hover:bg-slate-100',
+        active && 'bg-slate-100',
        className
      )}
      href={href}
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-sidebar.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-sidebar.tsx
@@ -46,7 +46,7 @@ export function LayoutSidebar({
      />
      <div
        className={cn(
-          'fixed left-0 top-0 z-30 flex h-screen w-72 flex-col border-r border-border bg-white transition-transform',
+          'fixed left-0 top-0 z-30 flex h-screen w-72 flex-col border-r border-border bg-background transition-transform',
          '-translate-x-72 lg:-translate-x-0', // responsive
          active && 'translate-x-0' // force active on mobile
        )}
@@ -65,8 +65,8 @@ export function LayoutSidebar({
          <div className="block h-32 shrink-0"></div>
        </div>
        <div className="fixed bottom-0 left-0 right-0">
-          <div className="h-8 w-full bg-gradient-to-t from-white to-white/0"></div>
-          <div className="flex flex-col gap-2 bg-white p-4 pt-0">
+          <div className="h-8 w-full bg-gradient-to-t from-background to-background/0"></div>
+          <div className="flex flex-col gap-2 bg-background p-4 pt-0">
            <Link
              className={cn('flex gap-2', buttonVariants())}
              href={`/${organizationId}/${projectId}/reports`}
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-sticky-below-header.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout-sticky-below-header.tsx
@@ -12,7 +12,7 @@ export function StickyBelowHeader({
  return (
    <div
      className={cn(
-        'top-0 z-20 rounded-lg border-b border-border bg-white md:sticky [[id=dashboard]_&]:top-16 [[id=dashboard]_&]:rounded-none',
+        'top-0 z-20 rounded-lg border-b border-border bg-background md:sticky [[id=dashboard]_&]:top-16 [[id=dashboard]_&]:rounded-none',
        className
      )}
    >
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/layout.tsx
@@ -1,11 +1,9 @@
 import { FullPageEmptyState } from '@/components/full-page-empty-state';
-import { notFound } from 'next/navigation';

 import {
  getCurrentOrganizations,
  getCurrentProjects,
  getDashboardsByProjectId,
-  getProjectsByOrganizationSlug,
 } from '@openpanel/db';

 import { LayoutSidebar } from './layout-sidebar';
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/page-layout.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/page-layout.tsx
@@ -1,3 +1,5 @@
+import DarkModeToggle from '@/components/dark-mode-toggle';
+
 import {
  getCurrentProjects,
  getProjectsByOrganizationSlug,
@@ -20,9 +22,14 @@ export default async function PageLayout({

  return (
    <>
-      <div className="sticky top-0 z-20 flex h-16 flex-shrink-0 items-center justify-between border-b border-border bg-white px-4 pl-12 lg:pl-4">
+      <div className="sticky top-0 z-20 flex h-16 flex-shrink-0 items-center justify-between border-b border-border bg-background px-4 pl-12 lg:pl-4">
        <div className="text-xl font-medium">{title}</div>
-        {projects.length > 0 && <LayoutProjectSelector projects={projects} />}
+        <div className="flex gap-2">
+          <div>
+            <DarkModeToggle className="hidden sm:flex" />
+          </div>
+          {projects.length > 0 && <LayoutProjectSelector projects={projects} />}
+        </div>
      </div>
      <div>{children}</div>
    </>
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/profile-list/profile-list.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/profiles/profile-list/profile-list.tsx
@@ -96,7 +96,7 @@ export function ProfileList({ data, count }: ProfileListProps) {
                className="mt-4"
                variant="outline"
                size="sm"
-                onClick={() => setCursor(count / 10 - 1)}
+                onClick={() => setCursor(Math.max(0, count / 10 - 1))}
              >
                Go back
              </Button>
--- a/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/organization/page.tsx
+++ b/apps/dashboard/src/app/(app)/[organizationId]/[projectId]/settings/organization/page.tsx
@@ -22,14 +22,16 @@ export default async function Page({
    return notFound();
  }

-  const invites = await getInvites(organization.id);
-
  return (
    <PageLayout title={organization.name} organizationSlug={organizationSlug}>
-      <div className="grid grid-cols-1 gap-8 p-4">
+      <div className="grid gap-8 p-4 lg:grid-cols-2">
        <EditOrganization organization={organization} />
-        <MembersServer organizationSlug={organizationSlug} />
-        <InvitesServer organizationSlug={organizationSlug} />
+        <div className="col-span-2">
+          <MembersServer organizationSlug={organizationSlug} />
+        </div>
+        <div className="col-span-2">
+          <InvitesServer organizationSlug={organizationSlug} />
+        </div>
      </div>
    </PageLayout>
  );
--- a/apps/dashboard/src/app/(app)/create-organization.tsx
+++ b/apps/dashboard/src/app/(app)/create-organization.tsx
@@ -132,7 +132,7 @@ export function CreateOrganization() {
            />
          </TabsContent>
          <TabsContent value="other">
-            <div className="rounded bg-white p-2 px-3 text-sm">
+            <div className="rounded bg-background p-2 px-3 text-sm">
              🔑 You will get a secret to use for your API requests.
            </div>
          </TabsContent>
--- a/apps/dashboard/src/app/auth.tsx
+++ b/apps/dashboard/src/app/auth.tsx
@@ -1,87 +0,0 @@
-'use client';
-
-import { useState } from 'react';
-import { InputWithLabel } from '@/components/forms/input-with-label';
-import { Logo } from '@/components/logo';
-import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
-import { Button } from '@/components/ui/button';
-import { Widget, WidgetBody } from '@/components/widget';
-import { zodResolver } from '@hookform/resolvers/zod';
-import { KeySquareIcon } from 'lucide-react';
-import { signIn } from 'next-auth/react';
-import Link from 'next/link';
-import { usePathname, useRouter } from 'next/navigation';
-import { useForm } from 'react-hook-form';
-import { z } from 'zod';
-
-const validator = z.object({
-  email: z.string().email(),
-  password: z.string().min(6),
-});
-
-type IForm = z.infer<typeof validator>;
-export default function Auth() {
-  const form = useForm<IForm>({
-    resolver: zodResolver(validator),
-  });
-  const router = useRouter();
-  const pathname = usePathname();
-  const [state, setState] = useState<string | null>(null);
-  return (
-    <div className="flex h-screen flex-col items-center justify-center p-4">
-      <Widget className="mb-4 w-full max-w-md">
-        <WidgetBody>
-          <div className="flex justify-center py-8">
-            <Logo />
-          </div>
-          <form
-            onSubmit={form.handleSubmit(async (values) => {
-              const res = await signIn('credentials', {
-                email: values.email,
-                password: values.password,
-                redirect: false,
-              }).catch(() => {
-                setState('Something went wrong. Please try again later');
-              });
-
-              if (res?.ok) {
-                router.refresh();
-              }
-
-              if (res?.status === 401) {
-                setState('Wrong email or password. Please try again');
-              }
-            })}
-            className="flex flex-col gap-4"
-          >
-            <InputWithLabel
-              label="Email"
-              placeholder="Your email"
-              error={form.formState.errors.email?.message}
-              {...form.register('email')}
-            />
-            <InputWithLabel
-              label="Password"
-              placeholder="...and your password"
-              error={form.formState.errors.password?.message}
-              {...form.register('password')}
-            />
-            {state !== null && (
-              <Alert variant="destructive">
-                <KeySquareIcon className="h-4 w-4" />
-                <AlertTitle>Failed</AlertTitle>
-                <AlertDescription>{state}</AlertDescription>
-              </Alert>
-            )}
-            <Button type="submit">Sign in</Button>
-            <Link href="/register" className="text-center text-sm">
-              No account?{' '}
-              <span className="font-medium text-blue-600">Sign up here!</span>
-            </Link>
-          </form>
-        </WidgetBody>
-      </Widget>
-      <p className="text-xs">Terms & conditions</p>
-    </div>
-  );
-}
--- a/apps/dashboard/src/app/layout.tsx
+++ b/apps/dashboard/src/app/layout.tsx
@@ -22,7 +22,7 @@ export default function RootLayout({
  children: React.ReactNode;
 }) {
  return (
-    <html lang="en" className="light">
+    <html lang="en" className="dark">
      <body
        className={cn('grainy min-h-screen bg-slate-100 font-sans antialiased')}
      >
--- a/apps/dashboard/src/app/providers.tsx
+++ b/apps/dashboard/src/app/providers.tsx
@@ -9,6 +9,7 @@ import makeStore from '@/redux';
 import { ClerkProvider, useAuth } from '@clerk/nextjs';
 import { QueryClient, QueryClientProvider } from '@tanstack/react-query';
 import { httpLink } from '@trpc/client';
+import { ThemeProvider } from 'next-themes';
 import { Provider as ReduxProvider } from 'react-redux';
 import { Toaster } from 'sonner';
 import superjson from 'superjson';
@@ -48,17 +49,24 @@ function AllProviders({ children }: { children: React.ReactNode }) {
  }

  return (
-    <ReduxProvider store={storeRef.current}>
-      <api.Provider client={trpcClient} queryClient={queryClient}>
-        <QueryClientProvider client={queryClient}>
-          <TooltipProvider delayDuration={200}>
-            {children}
-            <Toaster />
-            <ModalProvider />
-          </TooltipProvider>
-        </QueryClientProvider>
-      </api.Provider>
-    </ReduxProvider>
+    <ThemeProvider
+      enableSystem
+      attribute="class"
+      defaultTheme="system"
+      disableTransitionOnChange
+    >
+      <ReduxProvider store={storeRef.current}>
+        <api.Provider client={trpcClient} queryClient={queryClient}>
+          <QueryClientProvider client={queryClient}>
+            <TooltipProvider delayDuration={200}>
+              {children}
+              <Toaster />
+              <ModalProvider />
+            </TooltipProvider>
+          </QueryClientProvider>
+        </api.Provider>
+      </ReduxProvider>
+    </ThemeProvider>
  );
 }

--- a/apps/dashboard/src/components/dark-mode-toggle.tsx
+++ b/apps/dashboard/src/components/dark-mode-toggle.tsx
@@ -0,0 +1,39 @@
+'use client';
+
+import * as React from 'react';
+import { Button } from '@/components/ui/button';
+import {
+  DropdownMenu,
+  DropdownMenuContent,
+  DropdownMenuItem,
+  DropdownMenuTrigger,
+} from '@/components/ui/dropdown-menu';
+import { MoonIcon, SunIcon } from 'lucide-react';
+import { useTheme } from 'next-themes';
+
+export default function DarkModeToggle() {
+  const { setTheme } = useTheme();
+
+  return (
+    <DropdownMenu>
+      <DropdownMenuTrigger asChild>
+        <Button variant="outline" size="icon">
+          <SunIcon className="h-[1.2rem] w-[1.2rem] rotate-0 scale-100 transition-all dark:-rotate-90 dark:scale-0" />
+          <MoonIcon className="absolute h-[1.2rem] w-[1.2rem] rotate-90 scale-0 transition-all dark:rotate-0 dark:scale-100" />
+          <span className="sr-only">Toggle theme</span>
+        </Button>
+      </DropdownMenuTrigger>
+      <DropdownMenuContent align="end">
+        <DropdownMenuItem onClick={() => setTheme('light')}>
+          Light
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('dark')}>
+          Dark
+        </DropdownMenuItem>
+        <DropdownMenuItem onClick={() => setTheme('system')}>
+          System
+        </DropdownMenuItem>
+      </DropdownMenuContent>
+    </DropdownMenu>
+  );
+}
--- a/apps/dashboard/src/components/full-page-empty-state.tsx
+++ b/apps/dashboard/src/components/full-page-empty-state.tsx
@@ -18,7 +18,7 @@ export function FullPageEmptyState({
  return (
    <div className={cn('flex items-center justify-center p-4', className)}>
      <div className="flex w-full max-w-xl flex-col items-center justify-center p-8">
-        <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-white shadow-sm">
+        <div className="mb-6 flex h-24 w-24 items-center justify-center rounded-full bg-background shadow-sm">
          <Icon size={60} strokeWidth={1} />
        </div>

--- a/apps/dashboard/src/components/overview/overview-live-histogram.tsx
+++ b/apps/dashboard/src/components/overview/overview-live-histogram.tsx
@@ -85,7 +85,7 @@ export function OverviewLiveHistogram({
        {staticArray.map((percent, i) => (
          <div
            key={i}
-            className="flex-1 animate-pulse rounded-md bg-slate-200"
+            className="flex-1 animate-pulse rounded-md bg-slate-200 dark:bg-slate-800"
            style={{ height: `${percent}%` }}
          />
        ))}
@@ -147,7 +147,7 @@ function Wrapper({ open, children, count }: WrapperProps) {
          <div className="absolute -top-3 right-0 text-xs text-muted-foreground">
            NOW
          </div>
-          {/* <div className="md:absolute top-0 left-0 md:card md:p-4 mr-2 md:bg-white/90 z-50"> */}
+          {/* <div className="md:absolute top-0 left-0 md:card md:p-4 mr-2 md:bg-background/90 z-50"> */}
          {children}
        </div>
      </div>
--- a/apps/dashboard/src/components/overview/overview-metrics.tsx
+++ b/apps/dashboard/src/components/overview/overview-metrics.tsx
@@ -192,13 +192,13 @@ export default function OverviewMetrics({ projectId }: OverviewMetricsProps) {

  return (
    <>
-      <div className="col-span-6 grid grid-cols-6 gap-1">
+      <div className="col-span-6 flex flex-wrap gap-4">
        {reports.map((report, index) => (
          <button
            key={index}
            className={cn(
-              'group relative col-span-3 scale-95 transition-all md:col-span-2 lg:col-span-1',
-              index === metric && 'z-10 scale-105 rounded-xl shadow-md'
+              'group relative col-span-3 min-w-[170px] transition-all max-md:flex-1 md:col-span-2 lg:col-span-1 [&_[role="heading"]]:text-sm',
+              index === metric && 'z-10 scale-[101%] rounded-xl shadow-md'
            )}
            onClick={() => {
              setMetric(index);
--- a/apps/dashboard/src/components/overview/overview-widget.tsx
+++ b/apps/dashboard/src/components/overview/overview-widget.tsx
@@ -20,7 +20,7 @@ export function WidgetHead({ className, ...props }: WidgetHeadProps) {
  return (
    <WidgetHeadBase
      className={cn(
-        'flex flex-col p-0 [&_.title]:flex [&_.title]:items-center [&_.title]:justify-between [&_.title]:p-4',
+        'flex flex-col rounded-t-xl p-0 [&_.title]:flex [&_.title]:items-center [&_.title]:justify-between [&_.title]:p-4',
        className
      )}
      {...props}
@@ -85,7 +85,7 @@ export function WidgetButtons({
    <div
      ref={container}
      className={cn(
-        'flex flex-wrap justify-start self-stretch px-4 transition-opacity [&_button.active]:border-b [&_button.active]:border-black [&_button.active]:opacity-100 [&_button]:whitespace-nowrap [&_button]:py-1 [&_button]:text-xs [&_button]:opacity-50',
+        '-mt-2 flex flex-wrap justify-start self-stretch px-4 transition-opacity [&_button.active]:border-b-2 [&_button.active]:border-black [&_button.active]:opacity-100 [&_button]:whitespace-nowrap [&_button]:py-1 [&_button]:text-xs [&_button]:opacity-50',
        className
      )}
      style={{ gap }}
--- a/apps/dashboard/src/components/report/chart/ChartAnimation.tsx
+++ b/apps/dashboard/src/components/report/chart/ChartAnimation.tsx
@@ -25,7 +25,7 @@ export const ChartAnimationContainer = (
  <div
    {...props}
    className={cn(
-      'rounded-md border border-border bg-white p-8',
+      'rounded-md border border-border bg-background p-8',
      props.className
    )}
  />
--- a/apps/dashboard/src/components/report/chart/MetricCard.tsx
+++ b/apps/dashboard/src/components/report/chart/MetricCard.tsx
@@ -84,7 +84,10 @@ export function MetricCard({
        <div className="flex items-center justify-between gap-2">
          <div className="flex min-w-0 items-center gap-2 text-left font-medium">
            <ColorSquare>{serie.event.id}</ColorSquare>
-            <span className="overflow-hidden text-ellipsis whitespace-nowrap">
+            <span
+              role="heading"
+              className="overflow-hidden text-ellipsis whitespace-nowrap"
+            >
              {serie.name || serie.event.displayName || serie.event.name}
            </span>
          </div>
--- a/apps/dashboard/src/components/report/chart/ReportBarChart.tsx
+++ b/apps/dashboard/src/components/report/chart/ReportBarChart.tsx
@@ -39,9 +39,10 @@ export function ReportBarChart({ data }: ReportBarChartProps) {
          <div
            key={serie.name}
            className={cn(
-              'relative flex w-full flex-1 items-center gap-4 overflow-hidden rounded px-2 py-3 even:bg-slate-50',
-              '[&_[role=progressbar]]:shadow-sm [&_[role=progressbar]]:even:bg-white',
-              isClickable && 'cursor-pointer hover:!bg-slate-100'
+              'relative flex w-full flex-1 items-center gap-4 overflow-hidden rounded px-2 py-3 even:bg-slate-50 dark:even:bg-slate-100',
+              '[&_[role=progressbar]]:shadow-sm [&_[role=progressbar]]:even:bg-background',
+              isClickable &&
+                'cursor-pointer hover:bg-slate-100 dark:hover:bg-slate-50'
            )}
            {...(isClickable ? { onClick: () => onClick(serie) } : {})}
          >
--- a/apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
+++ b/apps/dashboard/src/components/report/chart/ReportChartTooltip.tsx
@@ -39,7 +39,7 @@ export function ReportChartTooltip({
  const hidden = sorted.slice(limit);

  return (
-    <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-white p-3 text-sm shadow-xl">
+    <div className="flex min-w-[180px] flex-col gap-2 rounded-xl border bg-background p-3 text-sm shadow-xl">
      {visible.map((item, index) => {
        // If we have a <Cell /> component, payload can be nested
        const payload = item.payload.payload ?? item.payload;
--- a/apps/dashboard/src/components/report/chart/ReportLineChart.tsx
+++ b/apps/dashboard/src/components/report/chart/ReportLineChart.tsx
@@ -50,6 +50,11 @@ export function ReportLineChart({
      <ResponsiveContainer>
        {({ width, height }) => (
          <LineChart width={width} height={height} data={rechartData}>
+            <CartesianGrid
+              strokeDasharray="3 3"
+              horizontal={true}
+              vertical={false}
+            />
            {references.map((ref) => (
              <ReferenceLine
                key={ref.id}
@@ -65,11 +70,6 @@ export function ReportLineChart({
                fontSize={10}
              />
            ))}
-            <CartesianGrid
-              strokeDasharray="3 3"
-              horizontal={true}
-              vertical={false}
-            />
            <YAxis
              width={getYAxisWidth(data.metrics.max)}
              fontSize={12}
--- a/apps/dashboard/src/components/report/chart/index.tsx
+++ b/apps/dashboard/src/components/report/chart/index.tsx
@@ -1,5 +1,8 @@
 'use client';

+import { Alert, AlertDescription, AlertTitle } from '@/components/ui/alert';
+import { TriangleIcon } from 'lucide-react';
+
 import type { IChartInput } from '@openpanel/validation';

 import { Funnel } from '../funnel';
@@ -12,7 +15,18 @@ export const ChartSwitch = withChartProivder(function ChartSwitch(
  props: ReportChartProps
 ) {
  if (props.chartType === 'funnel') {
-    return <Funnel {...props} />;
+    return (
+      <>
+        <Alert>
+          <TriangleIcon className="h-4 w-4" />
+          <AlertTitle>Keep in mind</AlertTitle>
+          <AlertDescription>
+            Funnel chart is still experimental and might not work as expected.
+          </AlertDescription>
+        </Alert>
+        <Funnel {...props} />
+      </>
+    );
  }

  return <Chart {...props} />;
--- a/apps/dashboard/src/components/report/funnel/Funnel.tsx
+++ b/apps/dashboard/src/components/report/funnel/Funnel.tsx
@@ -99,7 +99,7 @@ export function FunnelSteps({
              )}
              key={step.event.id}
            >
-              <div className="card divide-y divide-border bg-white">
+              <div className="card divide-y divide-border bg-background">
                <div className="p-4">
                  <p className="text-muted-foreground">Step {index + 1}</p>
                  <h3 className="font-bold">
@@ -108,7 +108,7 @@ export function FunnelSteps({
                </div>
                <div className="relative aspect-square">
                  <FunnelChart from={step.prevPercent} to={step.percent} />
-                  <div className="absolute left-0 right-0 top-0 flex flex-col bg-white/40 p-4">
+                  <div className="absolute left-0 right-0 top-0 flex flex-col bg-background/40 p-4">
                    <div className="font-medium uppercase text-muted-foreground">
                      Sessions
                    </div>
--- a/apps/dashboard/src/components/report/sidebar/ReportEvents.tsx
+++ b/apps/dashboard/src/components/report/sidebar/ReportEvents.tsx
@@ -135,7 +135,7 @@ export function ReportEvents() {
                  ]}
                  label="Segment"
                >
-                  <button className="flex items-center gap-1 rounded-md border border-border bg-white p-1 px-2 text-xs font-medium leading-none">
+                  <button className="flex items-center gap-1 rounded-md border border-border bg-background p-1 px-2 text-xs font-medium leading-none">
                    {event.segment === 'user' ? (
                      <>
                        <Users size={12} /> Unique users
--- a/apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx
+++ b/apps/dashboard/src/components/report/sidebar/filters/FiltersCombobox.tsx
@@ -54,7 +54,7 @@ export function FiltersCombobox({ event }: FiltersComboboxProps) {
        );
      }}
    >
-      <button className="flex items-center gap-1 rounded-md border border-border bg-white p-1 px-2 text-xs font-medium leading-none">
+      <button className="flex items-center gap-1 rounded-md border border-border bg-background p-1 px-2 text-xs font-medium leading-none">
        <FilterIcon size={12} /> Add filter
      </button>
    </Combobox>
--- a/apps/dashboard/src/components/ui/key-value.tsx
+++ b/apps/dashboard/src/components/ui/key-value.tsx
@@ -23,7 +23,7 @@ export function KeyValue({ href, onClick, name, value }: KeyValueProps) {
      <div className="bg-black/5 p-1 px-2">{name}</div>
      <div
        className={cn(
-          'overflow-hidden text-ellipsis whitespace-nowrap bg-white p-1 px-2 font-mono text-blue-700 shadow-[inset_0_0_0_1px_#fff]',
+          'overflow-hidden text-ellipsis whitespace-nowrap bg-background p-1 px-2 font-mono text-blue-700',
          clickable && 'group-hover:underline'
        )}
      >
--- a/apps/dashboard/src/components/ui/sheet.tsx
+++ b/apps/dashboard/src/components/ui/sheet.tsx
@@ -101,7 +101,7 @@ const SheetFooter = ({
  <div
    className={cn(
      'flex flex-col-reverse sm:flex-row sm:justify-end sm:space-x-2',
-      'sticky bottom-0 left-0 right-0 mt-auto bg-white',
+      'sticky bottom-0 left-0 right-0 mt-auto bg-background',
      className
    )}
    {...props}
--- a/apps/dashboard/src/components/ui/table.tsx
+++ b/apps/dashboard/src/components/ui/table.tsx
@@ -75,7 +75,7 @@ const TableHead = React.forwardRef<
  <th
    ref={ref}
    className={cn(
-      'h-10 px-4 text-left align-middle font-medium text-muted-foreground shadow-[0_0_0_0.5px] shadow-border [&:has([role=checkbox])]:pr-0',
+      'h-10 border-b border-border bg-slate-50 px-4 text-left align-middle text-sm font-medium text-muted-foreground text-slate-500 shadow-[0_0_0_0.5px] shadow-border [&:has([role=checkbox])]:pr-0',
      className
    )}
    {...props}
--- a/apps/dashboard/src/components/ui/tooltip.tsx
+++ b/apps/dashboard/src/components/ui/tooltip.tsx
@@ -21,7 +21,7 @@ const TooltipContent = React.forwardRef<
      ref={ref}
      sideOffset={sideOffset}
      className={cn(
-        'z-50 overflow-hidden rounded-md border bg-black px-3 py-1.5 text-sm text-popover shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
+        'z-50 overflow-hidden rounded-md border bg-popover-foreground px-3 py-1.5 text-sm text-popover shadow-md animate-in fade-in-0 zoom-in-95 data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=closed]:zoom-out-95 data-[side=bottom]:slide-in-from-top-2 data-[side=left]:slide-in-from-right-2 data-[side=right]:slide-in-from-left-2 data-[side=top]:slide-in-from-bottom-2',
        className
      )}
      {...props}
--- a/apps/dashboard/src/modals/AddClient.tsx
+++ b/apps/dashboard/src/modals/AddClient.tsx
@@ -150,7 +150,7 @@ export default function AddClient() {
                />
              </TabsContent>
              <TabsContent value="other">
-                <div className="rounded bg-white p-2 px-3 text-sm">
+                <div className="rounded bg-background p-2 px-3 text-sm">
                  🔑 You will get a secret to use for your API requests.
                </div>
              </TabsContent>
--- a/apps/dashboard/src/styles/globals.css
+++ b/apps/dashboard/src/styles/globals.css
@@ -7,6 +7,18 @@
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;

+    --slate-50: 210 40% 98%;
+    --slate-100: 210 40% 96.1%;
+    --slate-200: 210 40% 91.4%;
+    --slate-300: 210 40% 83.9%;
+    --slate-400: 210 40% 65.1%;
+    --slate-500: 210 40% 46.9%;
+    --slate-600: 210 40% 30.6%;
+    --slate-700: 210 40% 17.5%;
+    --slate-800: 210 40% 11.2%;
+    --slate-900: 210 40% 8.2%;
+    --slate-950: 210 40% 7.2%;
+
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;

@@ -36,9 +48,21 @@
  }

  .dark {
-    --background: 222.2 84% 4.9%;
+    --background: 222.86 32.05% 12.02%;
    --foreground: 210 40% 98%;

+    --slate-950: 210 40% 98%;
+    --slate-900: 210 40% 96.1%;
+    --slate-800: 210 40% 91.4%;
+    --slate-700: 210 40% 83.9%;
+    --slate-600: 210 40% 65.1%;
+    --slate-500: 210 40% 46.9%;
+    --slate-400: 210 40% 30.6%;
+    --slate-300: 210 40% 17.5%;
+    --slate-200: 210 40% 11.2%;
+    --slate-100: 210 40% 8.2%;
+    --slate-50: 210 40% 7.2%;
+
    --card: 222.2 84% 4.9%;
    --card-foreground: 210 40% 98%;

@@ -120,9 +144,9 @@
  }

  .card {
-    box-shadow: 0 1px 1px rgba(0, 0, 0, 0.05);
+    box-shadow: 0 1px 2px 0.5px rgba(0, 0, 0, 0.08);
    border: 0 !important;
-    @apply bg-white rounded-xl;
+    @apply rounded-xl bg-background;
  }
 }