migrated from auth.js to clerk; some ui remake; added expense-card

src/app/layout.tsx

@@ -3,8 +3,7 @@ import "@/styles/globals.css";
 import type { Metadata } from "next";
 import { Geist } from "next/font/google";
 import { Toaster } from "@/components/ui/sonner";
-import { TRPCReactProvider } from "@/trpc/react";
-import { ThemeProvider } from "@/components/theme-provider";
+import Providers from "./providers";
 // import PWAWrapper from "./_components/install-prompt";
 
 export const metadata: Metadata = {
@@ -24,19 +23,10 @@ export default function RootLayout({
   return (
     <html lang="en" className={`${geist.variable}`}>
       <body>
-        <TRPCReactProvider>
-          <ThemeProvider
-            attribute="class"
-            defaultTheme="system"
-            enableSystem
-            disableTransitionOnChange
-          >
-            {/* <PWAWrapper>
-            </PWAWrapper> */}
-            {children}
-            <Toaster position="top-center" />
-          </ThemeProvider>
-        </TRPCReactProvider>
+        <Providers>
+          {children}
+          <Toaster position="top-center" />
+        </Providers>
       </body>
     </html>
   );