feat: update color theme with improved contrast and new palette

apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-devtools.tsx

@@ -19,7 +19,12 @@ function ReactQueryDevtoolsDialog() {
       </DialogTrigger>
       <DialogContent className="flex h-full w-full max-w-screen-md! items-center justify-center border-none bg-transparent px-0 py-10">
         <ReactQueryDevtoolsPanel
-          style={{ borderRadius: "1rem", height: "100%", width: "100%" }}
+          style={{
+            backgroundColor: "transparent",
+            borderRadius: "1rem",
+            height: "100%",
+            width: "100%",
+          }}
         />
       </DialogContent>
     </Dialog>

apps/web/src/app/(app)/@appSidebar/_components/app-sidebar-pages.tsx

@@ -84,7 +84,7 @@ export const AppSidebarPages = ({
 
       <CollapsibleContent className="flex h-full min-h-0 flex-col">
         <SidebarMenuSub className="mx-0 mr-0 flex-1 gap-0 overflow-scroll border-none px-0">
-          <CreatePageButton className="ml-3.5 border-sidebar-border border-l ps-2.5 pb-2" />
+          <CreatePageButton className="ml-3.5 border-sidebar-border border-l py-2 ps-2.5" />
           <Virtuoso
             className="h-full w-full"
             data={pages}

apps/web/src/app/(app)/@appSidebar/_components/create-page-button.tsx

@@ -81,17 +81,15 @@ export function CreatePageButton({ className }: CreatePageButtonProps) {
   return (
     <SidebarMenuSubItem className={className}>
       <SidebarMenuSubButton asChild>
-        <div className="border-2 border-sidebar-border border-dashed">
-          <Button
-            variant="ghost"
-            className="w-full flex-row justify-start"
-            onClick={handleCreatePage}
-            disabled={showLoading}
-          >
-            <Plus />
-            {showLoading ? "Creating..." : "New page"}
-          </Button>
-        </div>
+        <Button
+          variant="ghost"
+          className="w-full flex-row items-center justify-center border-2 border-sidebar-border border-dashed px-0!"
+          onClick={handleCreatePage}
+          disabled={showLoading}
+        >
+          <Plus className="-ms-4 size-4" />
+          <span>{showLoading ? "Creating..." : "New page"}</span>
+        </Button>
       </SidebarMenuSubButton>
     </SidebarMenuSubItem>
   );

apps/web/src/app/(app)/@chatSidebar/_components/chat-sidebar-trigger.tsx

@@ -27,7 +27,7 @@ export default function ChatSidebarTrigger() {
           <span className="sr-only">Toggle Chat Sidebar</span>
         </Button>
       </TooltipTrigger>
-      <TooltipContent side="top" align="center">
+      <TooltipContent className="font-bold" side="top" align="center">
         Open Journl assistant
       </TooltipContent>
     </Tooltip>

apps/web/src/app/(app)/globals.css

@@ -46,9 +46,12 @@ The rest of the components are set by the Tailwind CSS classes, or by our editor
 }
 
 /* Tanstack Query Devtools */
+.tsqd-parent-container {
+  border: 1px solid var(--border) !important;
+}
 .tsqd-main-panel {
-  background: transparent;
+  background: transparent !important;
 }
 .tsqd-queries-container {
-  border-radius: 1rem;
+  border-radius: 1rem !important;
 }

apps/web/src/app/(app)/pages/_components/page-title-textarea.tsx

@@ -108,7 +108,7 @@ export function PageTitleTextarea({
       onKeyDown={handleKeyDown}
       placeholder={placeholder}
       className={cn(
-        "!bg-transparent !h-auto !outline-none !ring-0 !text-3xl !border-none !font-bold md:!text-4xl lg:!text-5xl placeholder:text-muted-foreground/60",
+        "!bg-transparent !h-auto !outline-none !ring-0 !text-3xl !border-none !font-bold md:!text-4xl lg:!text-5xl shadow-none placeholder:text-muted-foreground/60",
         className,
       )}
       {...rest}

apps/web/src/app/(dashboard)/account/[pathname]/_components/account-view.tsx

@@ -23,9 +23,10 @@ export async function AuthView({ pathname }: { pathname: string }) {
         },
         sidebar: {
           base: "gap-y-2",
-          button: "cursor-pointer text-primary",
+          button:
+            "cursor-pointer bg-card text-card-foreground border-secondary",
           buttonActive:
-            "cursor-pointer border bg-background shadow-xs hover:bg-accent hover:text-accent-foreground dark:bg-input/30 dark:border-input dark:hover:bg-input/50",
+            "cursor-pointer border shadow-xs bg-secondary text-secondary-foreground border-primary",
         },
       }}
       pathname={pathname}

apps/web/src/app/(marketing)/_components/hero-floating-shapes.tsx

@@ -22,6 +22,7 @@ export function HeroFloatingShapes() {
     shapes.forEach((shape, index) => {
       const randomType = types[Math.floor(Math.random() * types.length)];
       const element = document.createElement("div");
+
       element.className = "absolute opacity-5 animate-pulse";
       element.style.left = `${shape.x}%`;
       element.style.top = `${shape.y}%`;

apps/web/src/app/(marketing)/_components/sticky-journl-header.tsx

@@ -32,20 +32,23 @@ export function StickyJournlHeader() {
     <nav
       ref={navRef}
       className={cn(
-        "sticky top-0 z-50 mb-4 flex w-full flex-row items-center justify-center gap-x-2 bg-white px-2 py-4 transition-all duration-300 ease-in-out",
+        "sticky top-0 z-50 mb-4 flex w-full flex-row items-center justify-center gap-x-2 bg-background px-2 py-4 transition-all duration-300 ease-in-out",
         isAtTop
-          ? "border-gray-300 border-b shadow-gray-200 shadow-sm"
+          ? "border-border border-b shadow-sm"
           : "border-none shadow-none",
       )}
     >
       <Button
         variant="ghost"
         size="sm"
-        className="rounded-lg bg-white text-black"
+        className="rounded-lg bg-background text-foreground"
       >
         Sign In
       </Button>
-      <Button size="sm" className="rounded-lg bg-black text-white">
+      <Button
+        size="sm"
+        className="rounded-lg bg-primary text-primary-foreground"
+      >
         Get Started
       </Button>
     </nav>

apps/web/src/app/(marketing)/layout.tsx

@@ -7,7 +7,7 @@ type AppLayoutProps = {
 
 function MarketingLayout({ children }: AppLayoutProps) {
   return (
-    <ThemeProvider attribute="class" defaultTheme="marketing" enableSystem>
+    <ThemeProvider attribute="class" forcedTheme="dark" enableSystem>
       <TRPCReactProvider>{children}</TRPCReactProvider>
     </ThemeProvider>
   );

apps/web/src/app/(marketing)/page.tsx

@@ -41,7 +41,7 @@ export default withoutAuth(function RootPage() {
   return (
     <HydrateClient>
       {/* Hero Section */}
-      <section className="relative flex min-h-screen flex-col items-center justify-center bg-black text-white">
+      <section className="relative flex min-h-screen flex-col items-center justify-center bg-background text-foreground">
         <HeroFloatingShapes />
         <div className="flex h-full w-full flex-col items-center justify-center gap-y-12 text-center">
           <HeroJournlParticles />
@@ -51,15 +51,15 @@ export default withoutAuth(function RootPage() {
           </h1>
           <div className="mt-12 flex flex-col gap-x-4 gap-y-4 sm:flex-row">
             <HeroCtaButton
-              className="border border-white bg-black text-white hover:bg-gray-800 sm:w-40"
+              className="border border-primary bg-background text-foreground hover:bg-background/50 sm:w-40"
               authCancelUrl={AUTH_CANCEL_URL}
             >
               <Link href="/auth/sign-in">
                 <span className="font-semibold">Sign in</span>
               </Link>
             </HeroCtaButton>
             <HeroCtaButton
-              className="bg-white text-black hover:bg-gray-100 sm:w-40"
+              className="bg-primary text-primary-foreground hover:bg-primary/90 sm:w-40"
               authCancelUrl={AUTH_CANCEL_URL}
             >
               <Link href="/auth/sign-up">
@@ -71,42 +71,18 @@ export default withoutAuth(function RootPage() {
         </div>
       </section>
 
-      {/* TODO: When we have a video of Journl, we can add these sections back in. */}
-      {/* <StickyJournlHeader /> */}
-      {/* Product Showcase */}
-      {/* <section className="relative px-2 pt-4 pb-20">
-                    <div className="mb-6 text-center">
-                        <h2 className="mb-6 font-bold text-4xl text-black md:text-5xl">
-                            See Journl in action
-                        </h2>
-                        <p className="mx-auto max-w-2xl text-gray-600 text-xl">
-                            Experience the perfect blend of structured journaling and
-                            AI-powered insights
-                        </p>
-                    </div>
-                    <div className="rounded-lg border border-gray-200 bg-white p-2 shadow-2xl">
-                        <Image
-                            src="/marketing/journl-interface.png"
-                            alt="Journl Interface"
-                            width={1200}
-                            height={800}
-                            className="w-full rounded-lg"
-                        />
-                    </div>
-                </section> */}
-
       {/* Footer */}
-      <footer className="flex flex-col gap-y-6 bg-black px-2 py-8 text-white">
+      <footer className="flex flex-col gap-y-6 bg-background px-2 py-8 text-foreground">
         <div className="flex flex-col items-center justify-center md:flex-row">
           <div className="flex items-center gap-x-2">
-            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-white">
-              <BookOpen className="h-5 w-5 text-black" />
+            <div className="flex h-8 w-8 items-center justify-center rounded-lg bg-primary">
+              <BookOpen className="h-5 w-5 text-foreground" />
             </div>
-            <span className="font-bold text-white text-xl">Journl</span>
+            <span className="font-bold text-foreground text-xl">Journl</span>
           </div>
         </div>
-        <Separator className="mx-auto max-w-screen-lg bg-white/10 px-8" />
-        <div className="text-center text-sm text-white">
+        <Separator className="mx-auto max-w-screen-lg bg-primary/10 px-8" />
+        <div className="text-center text-foreground text-sm">
           <p>&copy; {year} Journl. All rights reserved.</p>
         </div>
       </footer>

apps/web/src/app/_components/app-providers.tsx

@@ -10,7 +10,7 @@ import { TRPCReactProvider } from "~/trpc/react";
 
 export function AppProviders({ children }: { children: React.ReactNode }) {
   return (
-    <ThemeProvider attribute="class" defaultTheme="system" enableSystem>
+    <ThemeProvider attribute="class" defaultTheme="dark" enableSystem>
       <MantineProvider>
         <AppEventProvider>
           <JournlAgentAwarenessProvider>