refine ui surfaces and standardize theme

app/home/[id]/WorkingSpacePageClient.tsx

@@ -442,7 +442,7 @@ function SliderTabsList({
         />
 
         <TabsList
-          className="flex justify-start items-center px-1 py-6 bg-card/90 backdrop-blur-sm rounded-lg border border-border w-full"
+          className="flex justify-start items-center px-1 py-6 bg-muted rounded-lg border border-border w-full"
           style={{ overflow: "clip" } as React.CSSProperties}
         >
           <div
@@ -838,10 +838,7 @@ export function NotesDroppableContainer({
             <Button
               variant="SidebarMenuButton"
               size="sm"
-              className={cn(
-                "rounded-none",
-                viewMode === "grid" && "bg-foreground/10",
-              )}
+              className={cn("rounded-none", viewMode === "grid" && "bg-muted")}
               onClick={() => setViewMode("grid")}
             >
               <LayoutGrid
@@ -851,10 +848,7 @@ export function NotesDroppableContainer({
             <Button
               variant="SidebarMenuButton"
               size="sm"
-              className={cn(
-                "rounded-none",
-                viewMode === "list" && "bg-foreground/10",
-              )}
+              className={cn("rounded-none", viewMode === "list" && "bg-muted")}
               onClick={() => setViewMode("list")}
             >
               <List
@@ -1328,8 +1322,8 @@ function EmptyTableState({
   workspaceId,
 }: EmptyTableStateProps) {
   return (
-    <Card className="bg-card/50 backdrop-blur-sm border-border">
-      <CardContent className="pt-12 pb-12 text-center">
+    <Card className=" bg-transparent border-none shadow-none">
+      <CardContent className="py-10 text-center">
         <div className="flex flex-col items-center justify-center">
           <div className="h-10 w-10 flex items-center justify-center mb-4">
             <FileText className="h-8 w-8 text-primary" />

components/ThemeToggle.tsx

@@ -25,7 +25,7 @@ export function ThemeToggle() {
         }
       }}
       value={theme}
-      className="w-full border border-primary/20 bg-primary/10 rounded-md px-[3px] h-[31px] justify-center items-center flex-1 gap-1"
+      className="w-full border border-border bg-muted rounded-md px-[3px] h-[31px] justify-center items-center flex-1 gap-1"
       variant="SidebarMenuButton"
     >
       <ToggleGroupItem

components/home-components/HomeClientLayout.tsx

@@ -1,5 +1,4 @@
 "use client";
-
 import {
   type ReactNode,
   memo,
@@ -22,7 +21,7 @@ import type { Id } from "@/convex/_generated/dataModel";
 import { parseSlug } from "@/lib/parseSlug";
 import PublicNote from "../PublicNote";
 import { motion } from "framer-motion";
-
+import { NOISE_PNG } from "@/lib/data";
 const fadeTransition = {
   show: { ease: "easeInOut" as const, duration: 0 },
   hide: { ease: "easeInOut" as const, duration: 0 },
@@ -59,6 +58,18 @@ const HomeContent = memo(({ children }: { children: ReactNode }) => {
   return (
     <div className="flex h-screen w-full bg-muted overflow-hidden">
       <AppSidebar />
+      <div
+        aria-hidden="true"
+        className="pointer-events-none select-none absolute inset-0"
+        style={{
+          backgroundImage: `url(${NOISE_PNG})`,
+          backgroundRepeat: "repeat",
+          backgroundSize: "128px 128px",
+          opacity: 0.04,
+          mixBlendMode: "multiply",
+          zIndex: 90000,
+        }}
+      />
       <main
         className={`relative flex flex-col flex-1 h-auto border-primary/20 bg-background transition-[margin,border-radius] duration-300 ease-linear motion-reduce:transition-none ${
           open && !isMobile ? `rounded-tl-lg border-t border-l mt-3` : ""

components/ui/tabs.tsx

@@ -29,7 +29,7 @@ const TabsTrigger = React.forwardRef<
   <TabsPrimitive.Trigger
     ref={ref}
     className={cn(
-      "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-primary/10 data-[state=inactive]:hover:bg-primary/10 data-[state=active]:text-secondary-foreground data-[state=active]:shadow",
+      "inline-flex items-center justify-center whitespace-nowrap rounded-lg px-3 py-1 text-sm font-medium ring-offset-background transition-all focus-visible:outline-none focus-visible:ring-2 focus-visible:ring-ring focus-visible:ring-offset-2 disabled:pointer-events-none disabled:opacity-50 data-[state=active]:bg-card data-[state=inactive]:hover:bg-card/80 data-[state=active]:text-secondary-foreground",
       className,
     )}
     {...props}

components/ui/toggle.tsx

@@ -7,13 +7,13 @@ import { cva, type VariantProps } from "class-variance-authority";
 import { cn } from "@/lib/utils";
 
 const toggleVariants = cva(
-  "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium transition-colors hover:bg-primary/10 hover:text-primary focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-primary/20 data-[state=on]:text-primary [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
+  "inline-flex items-center justify-center gap-2 rounded-lg text-sm font-medium transition-colors hover:bg-card/80 hover:text-primary focus-visible:outline-none focus-visible:ring-0 disabled:pointer-events-none disabled:opacity-50 data-[state=on]:bg-card data-[state=on]:text-primary [&_svg]:pointer-events-none [&_svg]:size-4 [&_svg]:shrink-0",
   {
     variants: {
       variant: {
         default: "bg-transparent",
         SidebarMenuButton:
-          "flex justify-center items-center gap-2 bg-none w-full text-foreground hover:bg-foreground/10",
+          "flex justify-center items-center gap-2 bg-none w-full text-foreground hover:bg-card/80",
         outline:
           "border border-input bg-transparent shadow-sm hover:bg-accent hover:text-accent-foreground",
       },