dashboard: add dark mode

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`}

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">

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

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}

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`}

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
       )}
     >

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';

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>
     </>

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>

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>
   );

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>