feat: updated app to tailwind 4.x

src/App.tsx

@@ -1,5 +1,6 @@
 import { DeviceWrapper } from "@app/DeviceWrapper.tsx";
 import { PageRouter } from "@app/PageRouter.tsx";
+import { ThemeProvider } from "@app/components/generic/ThemeProvider";
 import { CommandPalette } from "@components/CommandPalette.tsx";
 import { DeviceSelector } from "@components/DeviceSelector.tsx";
 import { DialogManager } from "@components/Dialog/DialogManager";
@@ -7,10 +8,10 @@ import { NewDeviceDialog } from "@components/Dialog/NewDeviceDialog.tsx";
 import { KeyBackupReminder } from "@components/KeyBackupReminder";
 import { Toaster } from "@components/Toaster.tsx";
 import Footer from "@components/UI/Footer.tsx";
-import { ThemeController } from "@components/generic/ThemeController.tsx";
 import { useAppStore } from "@core/stores/appStore.ts";
 import { useDeviceStore } from "@core/stores/deviceStore.ts";
 import { Dashboard } from "@pages/Dashboard/index.tsx";
+import type { JSX } from "react";
 import { MapProvider } from "react-map-gl";
 
 export const App = (): JSX.Element => {
@@ -21,7 +22,7 @@ export const App = (): JSX.Element => {
   const device = getDevice(selectedDevice);
 
   return (
-    <ThemeController>
+    <>
       <NewDeviceDialog
         open={connectDialogOpen}
         onOpenChange={(open) => {
@@ -31,10 +32,10 @@ export const App = (): JSX.Element => {
       <Toaster />
       <MapProvider>
         <DeviceWrapper device={device}>
-          <div className="flex h-screen flex-col overflow-hidden bg-backgroundPrimary text-textPrimary">
-            <div className="flex flex-grow">
+          <div className="flex h-screen flex-col overflow-hidden bg-background-primary text-text-primary">
+            <div className="flex grow">
               <DeviceSelector />
-              <div className="flex flex-grow flex-col">
+              <div className="flex grow flex-col">
                 {device ? (
                   <div className="flex h-screen">
                     <DialogManager />
@@ -45,7 +46,6 @@ export const App = (): JSX.Element => {
                 ) : (
                   <>
                     <Dashboard />
-                    <div className="flex flex-grow" />
                     <Footer />
                   </>
                 )}
@@ -54,6 +54,6 @@ export const App = (): JSX.Element => {
           </div>
         </DeviceWrapper>
       </MapProvider>
-    </ThemeController>
+    </>
   );
 };