feat: improve invoice view responsiveness and settings UX

- Replace custom invoice items table with responsive DataTable component
- Fix server/client component error by creating InvoiceItemsTable client
  component
- Merge danger zone with actions sidebar and use destructive button
  variant
- Standardize button text sizing across all action buttons
- Remove false claims from homepage (testimonials, ratings, fake user
  counts)
- Focus homepage messaging on freelancers with honest feature
  descriptions
- Fix dark mode support throughout app by replacing hard-coded colors
  with semantic classes
- Remove aggressive red styling from settings, add subtle red accents
  only
- Align import/export buttons and improve delete confirmation UX
- Update dark mode background to have subtle green tint instead of pure
  black
- Fix HTML nesting error in AlertDialog by using div instead of nested p
  tags

This update makes the invoice view properly responsive, removes
misleading marketing claims, and ensures consistent dark mode support
across the entire application.

src/app/invoices/page.tsx

@@ -2,7 +2,7 @@ import Link from "next/link";
 import { auth } from "~/server/auth";
 import { api, HydrateClient } from "~/trpc/server";
 import { Button } from "~/components/ui/button";
-import { InvoiceList } from "~/components/invoice-list";
+import { InvoiceList } from "~/components/data/invoice-list";
 import { Plus } from "lucide-react";
 
 export default async function InvoicesPage() {
@@ -12,8 +12,10 @@ export default async function InvoicesPage() {
     return (
       <div className="flex min-h-screen items-center justify-center">
         <div className="text-center">
-          <h1 className="text-4xl font-bold mb-4">Access Denied</h1>
-          <p className="text-muted-foreground mb-8">Please sign in to view invoices</p>
+          <h1 className="mb-4 text-4xl font-bold">Access Denied</h1>
+          <p className="text-muted-foreground mb-8">
+            Please sign in to view invoices
+          </p>
           <Link href="/api/auth/signin">
             <Button size="lg">Sign In</Button>
           </Link>
@@ -29,7 +31,7 @@ export default async function InvoicesPage() {
     <HydrateClient>
       <div className="p-6">
         <div className="mb-8">
-          <h2 className="text-3xl font-bold mb-2">Invoices</h2>
+          <h2 className="mb-2 text-3xl font-bold">Invoices</h2>
           <p className="text-muted-foreground">
             Manage your invoices and payments
           </p>
@@ -39,4 +41,4 @@ export default async function InvoicesPage() {
       </div>
     </HydrateClient>
   );
-} 
+}